/* === CSS HOÀN CHỈNH CHO FORM CF7 - PHƯƠNG ÁN INLINE-BLOCK V2 (25/04/2025) === */

/* --- Style chung cho Form --- */
.cf7-designed-form {
    max-width: 700px; margin: 20px auto; padding: 25px; border: 1px solid #ddd;
    border-radius: 5px; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /*font-family: Arial, sans-serif;*/
}
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required
{
	max-height: 4em;
}

/* --- Bố cục cột --- */
.cf7-designed-form .form-row { display: flex; flex-wrap: wrap; margin-bottom: 15px; gap: 15px; }
.cf7-designed-form .form-col { flex-grow: 1; }
.cf7-designed-form .form-col-half { flex-basis: calc(50% - 8px); min-width: 200px; }
.cf7-designed-form .form-col-full { flex-basis: 100%; }

/* --- Nhãn và Input/Textarea cơ bản --- */
.cf7-designed-form label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9em; color: #555; }
.cf7-designed-form input[type="text"],
.cf7-designed-form input[type="tel"],
.cf7-designed-form input[type="email"],
.cf7-designed-form textarea,
.cf7-designed-form .wpcf7-form-control.wpcf7-text,
.cf7-designed-form .wpcf7-form-control.wpcf7-textarea,
.cf7-designed-form .wpcf7-form-control.wpcf7-tel,
.cf7-designed-form .wpcf7-form-control.wpcf7-email {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;
    box-sizing: border-box; font-size: 0.95em;
}
.cf7-designed-form textarea,
.cf7-designed-form .wpcf7-form-control.wpcf7-textarea { min-height: 2em; }

/* --- Bảng sản phẩm --- */
.cf7-designed-form .product-section { margin-top: 25px; margin-bottom: 25px; }
.cf7-designed-form .product-table { width: 100%; border-collapse: collapse; border: 1px solid #ddd; }
.cf7-designed-form .product-table th,
.cf7-designed-form .product-table td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: middle; font-size: 0.95em; }
.cf7-designed-form .product-table thead th { background-color: #2c3e50; color: #fff; font-weight: bold; text-align: center; }
.cf7-designed-form .product-table tbody tr:nth-child(even):not(.summary-row) { background-color: #f8f9f9; }
.cf7-designed-form .product-table .col-price,
.cf7-designed-form .product-table .col-subtotal { text-align: right; white-space: nowrap; }
.cf7-designed-form .product-table .col-subtotal span { font-weight: bold; color: #27ae60; }
.cf7-designed-form .product-table .col-quantity { text-align: center; width: 150px; /* Giữ độ rộng đã tăng */}

/* === KHỐI SỐ LƯỢNG +/- (DÙNG INLINE-BLOCK) === */
.cf7-designed-form .quantity-input-wrapper {
    /* Căn giữa các inline-block con bên trong */
    text-align: center;
    /* Trick loại bỏ khoảng trắng thừa giữa các inline-block */
    font-size: 0;
    /* Đảm bảo chiều cao dòng không ảnh hưởng */
    line-height: 1;
}

/* Áp dụng inline-block và căn chỉnh dọc cho các phần tử con trực tiếp */
.cf7-designed-form .quantity-input-wrapper .qty-button,
.cf7-designed-form .quantity-input-wrapper .wpcf7-form-control-wrap { /* Nhắm vào span bao input */
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    font-size: 1rem; /* Reset font-size cho các phần tử con */
}

/* Nút +/- */
.cf7-designed-form .quantity-input-wrapper .qty-button {
    width: 36px; height: 36px;
    font-size: 1.4rem; /* Đặt lại font-size cho nút */
    line-height: 34px; /* Căn chỉnh dấu +/- */
    font-weight: bold; border: 1px solid #ccc; background-color: #f5f5f5; color: #555;
    cursor: pointer; transition: background-color 0.2s ease; user-select: none;
    box-sizing: border-box; /* Thêm box-sizing */
}
.cf7-designed-form .quantity-input-wrapper .qty-button:hover { background-color: #e9e9e9; }
.cf7-designed-form .quantity-input-wrapper .qty-button:active { background-color: #ddd; }

/* Bo góc nút */
.cf7-designed-form .quantity-input-wrapper .qty-minus { border-radius: 4px 0 0 4px; }
.cf7-designed-form .quantity-input-wrapper .qty-plus { border-radius: 0 4px 4px 0; }

/* Span bao quanh Input */
.cf7-designed-form .quantity-input-wrapper .wpcf7-form-control-wrap {
     /* Span không cần style đặc biệt ngoài inline-block và vertical-align đã đặt ở trên */
     line-height: normal; /* Reset line-height cho span */
}

/* Input number bên trong span */
.cf7-designed-form .quantity-input-wrapper .wpcf7-form-control-wrap input.wpcf7-number {
    width: 50px !important; height: 36px; text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    border-radius: 0; /* Không bo góc */
    padding: 5px !important;
    font-size: 1rem; /* Reset font-size cho input */
    vertical-align: middle; /* Căn thẳng hàng */
    margin: 0 !important;
    box-sizing: border-box;
    display: inline-block !important; /* Đảm bảo hiển thị đúng */
    -moz-appearance: textfield;
}
.cf7-designed-form .quantity-input-wrapper .wpcf7-form-control-wrap input.wpcf7-number::-webkit-inner-spin-button,
.cf7-designed-form .quantity-input-wrapper .wpcf7-form-control-wrap input.wpcf7-number::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* === KẾT THÚC KHỐI SỐ LƯỢNG === */


/* --- Hàng tóm tắt --- */
.cf7-designed-form .product-table .summary-row td { border-top: 2px solid #ccc; background-color: #f5f5f5; }
.cf7-designed-form .product-table .summary-label { text-align: right; font-weight: bold; color: #333; }
.cf7-designed-form .product-table .total-label { font-size: 1.1em; }
.cf7-designed-form .product-table .summary-value { text-align: right; font-weight: bold; }
.cf7-designed-form .product-table .total-amount span { color: #e74c3c; font-size: 1.2em; font-weight: bold; }

/* --- Khu vực khuyến mãi --- */
.cf7-designed-form .product-promotions { margin-top: 15px; margin-bottom: 25px; padding: 15px; background-color: #eafaf1; border: 1px dashed #a3e4d7; border-radius: 4px; font-size: 0.9em; }
.cf7-designed-form .product-promotions p { margin-top: 0; margin-bottom: 8px; font-weight: bold; color: #1e8449; }
.cf7-designed-form .product-promotions ul { margin: 0; padding-left: 20px; list-style: disc; }
.cf7-designed-form .product-promotions li { margin-bottom: 5px; }

/* --- Nút Submit --- */
.cf7-designed-form .submit-row { text-align: center; margin-top: 25px; }
.cf7-designed-form .wpcf7-form-control.wpcf7-submit.btn-submit {
    background-color: #ff0000; color: #fff; padding: 12px 25px; border: none;
    border-radius: 25px; cursor: pointer; font-size: 1.1em; font-weight: bold;
    transition: background-color 0.3s ease; display: inline-flex; align-items: center;
    width: auto; position: relative; padding-left: 35px;
	    width: 25em;
    text-align: center;
}
.cf7-designed-form .wpcf7-form-control.wpcf7-submit.btn-submit:hover { background-color: #2c3e50; }
.cf7-designed-form .wpcf7-form-control.wpcf7-submit.btn-submit::before {
    content: "\f07a"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto;
    -webkit-font-smoothing: antialiased; margin-right: 8px; position: absolute;
    left: 15px; top: 50%; transform: translateY(-50%);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .cf7-designed-form .form-row { flex-direction: column; gap: 0; }
    .cf7-designed-form .form-col { margin-bottom: 15px; }
    .cf7-designed-form .form-col-half { flex-basis: 100%; min-width: unset; }
    .cf7-designed-form .product-table th,
    .cf7-designed-form .product-table td { padding: 8px; font-size: 0.9em; }
    .cf7-designed-form .product-table .col-quantity { width: auto; } /* Cho cột số lượng tự động co giãn */

     /* Điều chỉnh size nút/input trên mobile nếu cần */
    /* .cf7-designed-form .quantity-input-wrapper .wpcf7-form-control-wrap input.wpcf7-number { width: 45px !important; height: 34px; }
     .cf7-designed-form .quantity-input-wrapper .qty-button { width: 34px; height: 34px; font-size: 1.2em; line-height: 32px; }
*/
    .cf7-designed-form .product-promotions { font-size: 0.85em; padding: 10px; }
    .cf7-designed-form .wpcf7-form-control.wpcf7-submit.btn-submit { padding: 10px 20px; padding-left: 30px; font-size: 1em;         width: 21em;
        text-align: center;
        background-color: red; }
    .cf7-designed-form .wpcf7-form-control.wpcf7-submit.btn-submit::before { left: 10px; }
}

html {
    scroll-behavior: smooth;
}
.my-red-order-button {
    display: inline-block; /* Cho phép đặt padding, margin */
    padding: 15px 35px; /* Tăng padding để nút to hơn (điều chỉnh số nếu muốn) */
    background-color: #E74C3C; /* Màu đỏ (bạn có thể chọn mã màu đỏ khác) */
    color: #ffffff !important; /* Màu chữ trắng, !important để tránh bị theme ghi đè */
    text-decoration: none !important; /* Bỏ gạch chân */
    border: none; /* Bỏ viền */
    border-radius: 8px; /* Bo góc nhẹ (tùy chọn) */
    font-size: 1.2em; /* Tăng kích thước chữ (điều chỉnh nếu muốn) */
    font-weight: bold; /* Chữ đậm */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Hiệu ứng khi hover/nhấn */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ nhẹ (tùy chọn) */
}

.my-red-order-button:hover {
    background-color: #C0392B; /* Màu đỏ đậm hơn khi di chuột qua */
    color: #ffffff !important;
}

.my-red-order-button:active {
    transform: translateY(1px); /* Hiệu ứng nhấn xuống nhẹ */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* Tùy chọn: Căn giữa nút nếu nó nằm một mình */
.wp-block-button.aligncenter .my-red-order-button, /* Nếu dùng block button của Gutenberg */
p.center-align .my-red-order-button, /* Nếu bọc trong thẻ p có class căn giữa */
div.center-align .my-red-order-button { /* Nếu bọc trong thẻ div có class căn giữa */
   /* Có thể cần thêm CSS căn giữa nếu nút không tự căn */
}
/* Hoặc đơn giản là bọc nút trong thẻ div và căn giữa thẻ div đó */
/* <div style="text-align: center;"> */
/* <a href="#ctfdh27" class="my-red-order-button">Bấm đặt hàng</a> */
/* </div> */