/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


/* CSS Contact Form Đề Xuất - 1 */

.contact-form-1 {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.contact-form-1 h3 {
  color: #2a2a2a;
  font-size: 24px;
  margin-bottom: 10px;
}
.contact-form-1 p {
  color: #666;
  font-size: 16px;
  margin-bottom: 20px;
}
.contact-form-1 input,
.contact-form-1 textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
.contact-form-1 input:focus,
.contact-form-1 textarea:focus {
  border-color: #007bff;
  outline: none;
}
.contact-form-1 [submit] {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.contact-form-1 [submit]:hover {
  background-color: #0056b3;
}

/* CSS Contact Form Đề Xuất - 2 */

.contact-form-2 {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.contact-form-2 h3 {
  color: #1d3557;
  font-size: 26px;
  text-align: center;
  margin-bottom: 10px;
}
.contact-form-2 p {
  color: #666;
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}
.contact-form-2 input,
.contact-form-2 select,
.contact-form-2 textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.contact-form-2 [submit] {
  background-color: #e63946;
  color: white;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.contact-form-2 [submit]:hover {
  background-color: #d62828;
}

/* CSS Contact Form Đề Xuất - 2 - Popup */

.contact-form-popup {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.contact-form-popup h3 {
  color: #1d3557;
  font-size: 26px;
  text-align: center;
  margin-bottom: 10px;
}
.contact-form-popup p {
  color: #666;
  font-size: 14px;
  text-align: center;
  margin-bottom: 0 !important;
}
.contact-form-popup input,
.contact-form-popup select,
.contact-form-popup textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.contact-form-popup [submit] {
  background-color: #e63946;
  color: white;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.contact-form-popup [submit]:hover {
  background-color: #d62828;
}
.contact-form-popup textarea {
  min-height: 130px;
}
/* CSS Contact Form Đề Xuất - 3 */

.contact-form-3 {
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(135deg, #56ccf2, #2f80ed);
  padding: 25px;
  border-radius: 10px;
  color: white;
}
.contact-form-3 h3 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
}
.contact-form-3 p {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}
.contact-form-3 input,
.contact-form-3 textarea,
.contact-form-3 select,
.contact-form-3 [submit] {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: none;
  border-radius: 5px;
}
.contact-form-3 input,
.contact-form-3 textarea,
.contact-form-3 select {
  background: white;
  color: #333;
}
.contact-form-3 [submit] {
  background-color: #ffd700;
  color: black;
  font-weight: bold;
  cursor: pointer;
}
.contact-form-3 [submit]:hover {
  background-color: #ffc107;
}

/* CSS Contact Form Đề Xuất - Premium Dark*/

/* Tổng quan form */
.contact-form-premium-dark {
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  background-color: #2b1d22; /* Nền tối sang trọng */
  border: 1px solid #690c1c; /* Viền đậm màu chủ đạo */
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  font-family: 'Roboto', sans-serif;
  color: #ffffff; /* Chữ sáng */
}

/* Tiêu đề */
.contact-form-premium-dark h3 {
  font-size: 24px;
  font-weight: bold;
  color: #ffccd5; /* Màu tiêu đề nổi bật */
  text-align: center;
  margin-bottom: 10px;
}

/* Mô tả */
.contact-form-premium-dark p {
  font-size: 16px;
  color: #d9d9d9; /* Chữ nhẹ hơn để tạo chiều sâu */
  text-align: center;
  margin-bottom: 25px;
}

/* Trường nhập liệu */
.contact-form-premium-dark input,
.contact-form-premium-dark select,
.contact-form-premium-dark textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #690c1c; /* Viền đồng bộ màu chủ đạo */
  border-radius: 5px;
  font-size: 14px;
  color: #ffffff; /* Chữ trắng */
  background-color: #3b2d33; /* Nền nhập liệu tối nhưng phân biệt với nền form */
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form-premium-dark input:focus,
.contact-form-premium-dark select:focus,
.contact-form-premium-dark textarea:focus {
  border-color: #ffccd5; /* Viền sáng khi focus */
  box-shadow: 0 0 5px rgba(255, 204, 213, 0.5);
  outline: none;
}

/* Nút bấm */
.contact-form-premium-dark [submit] {
  width: 100%;
  padding: 15px;
  background-color: #690c1c; /* Màu chủ đạo */
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.contact-form-premium-dark [submit]:hover {
  background-color: #8b1025;
  box-shadow: 0 4px 10px rgba(139, 16, 37, 0.5);
}

/* Hiệu ứng hover cho các trường */
.contact-form-premium-dark input:hover,
.contact-form-premium-dark select:hover,
.contact-form-premium-dark textarea:hover {
  border-color: #8b1025;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-form-premium-dark {
    padding: 20px;
  }
  .contact-form-premium-dark h3 {
    font-size: 20px;
  }
}

/* Tùy chỉnh màu text menu footer */
.main-footer .wd-sub-menu li > a {
  color: #fff;
}
.main-footer .sub-sub-menu li > a {
  color: #bcbcbc;
}

/* Tùy chỉnh màu button CF ở home */
.button-callme-home-dark {
  background-color: #fff !important;
  color: var(--wd-primary-color) !important;
}
.button-callme-home-dark:hover {
  color: #fff !important;
  background-color: var(--wd-primary-color) !important;
  border-inline: solid 2px #fff;
}

/* Dien form sdt CF Responsive - dien sdt và button cung 1 hang */
  @media (max-width: 768px) {
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

/* CSS NÚT LIÊN HỆ */
/* Wrapper của các nút */
.contact-buttons {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Style chung cho các nút */
.contact-buttons a {
    display: inline-flex;
    text-align: center;
	align-items: center;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none; /* Bỏ gạch chân */
    padding: 6px 15px 6px 6px; /* Khoảng cách trong nút */
    border-radius: 10px; /* Bo tròn nút */
    transition: all 0.3s ease-in-out; /* Hiệu ứng hover */
    max-width: 300px; /* Giới hạn độ rộng tối đa trên desktop */
	box-shadow: 0 0 5px rgba(0,0,0,0.17);
	width: fit-content;
}

/* Nút Zalo */
.contact-buttons .btn-zalo {
    background-color: #fbbc34;
    color: #fff;
}

.contact-buttons .btn-zalo:hover {
    background-color: #0056b3;
    transform: translateY(-3px); /* Hiệu ứng nhấn nổi */
}

/* Nút Gọi Điện */
.contact-buttons .btn-call {
    background-color: #fbbc34;
    color: #fff;
}

.contact-buttons .btn-call:hover {
    background-color: #e64545;
    transform: translateY(-3px);
}

/* Nút Nhận Báo Giá */
.contact-buttons .btn-contact-form {
    background-color: #fbbc34;
    color: #fff;
}

.contact-buttons .btn-contact-form:hover {
    background-color: #009900;
    transform: translateY(-3px);
}

/* Responsive: Mobile */

@media (max-width: 768px) {
    .contact-buttons {
        position: fixed;
        left: 50%; /* Đẩy nhóm nút về giữa màn hình */
        transform: translateX(-50%); /* Căn giữa */
        display: flex;
        justify-content: center; /* Canh giữa nội dung */
        align-items: center;
        gap: 5px;
        margin: 10px auto;
        width: auto;
		flex-direction: row; /* Hiển thị phần từ theo hàng ngang */
		bottom: 0px;
    }

    .contact-buttons a {
        text-align: center;
        padding: 3px 8px 3px 3px;
        font-size: 14px;
        border-radius: 5px;
        min-width: 80px;
		flex-shrink: 0; /* Đảm bảo nút không bị co nhỏ */
    }
}


/* Bao bọc toàn bộ màn hình khi popup hiển thị */
#popup-contact-form {
    display: none; /* Ẩn mặc định */
    position: fixed; /* Đặt vị trí cố định */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.68); /* Hiệu ứng nền mờ */
    z-index: 9999; /* Đặt popup nổi trên các thành phần khác */
}

/* Nội dung bên trong popup */
#popup-contact-form .popup-content {
    position: absolute;
    top: 50%; /* Đặt giữa màn hình theo chiều dọc */
    left: 50%; /* Đặt giữa màn hình theo chiều ngang */
    transform: translate(-50%, -50%); /* Canh giữa */
    background-color: #fff; /* Nền trắng */
    padding: 20px;
    border-radius: 8px; /* Bo góc */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
    max-width: 500px;
    width: 90%; /* Đảm bảo hiển thị tốt trên màn hình nhỏ */
    z-index: 10000; /* Đảm bảo nội dung nổi trên nền mờ */
}

/* Nút đóng popup */
#popup-contact-form .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #000;
}


/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Nút Quay Lại Đầu Trang */

@media (max-width: 768px) {
  .scrollToTop {
    bottom:60px !important;
  }
}