/*
Theme Name: Oxence child
Author: WebTend
Description: A child theme of Oxence WordPress Theme
Version: 1.0.1
Template: oxence
Text Domain: oxence-child
*/

.text-justify {text-align: justify !important;}

ul.elementor-icon-list-items {
	padding: 0;
	list-style-type: none !important;
}

.entry-post-details .comments-area {display: none !important;}


/* Page Title Area */

.absolute-header-on .page-title-area {padding-top: 160px !important;}

@media (max-width: 479px) {
    .absolute-header-on .page-title-area {
        padding: 90px 0 !important;
    }
}

/* Form wrapper */
#phoenix-form {
    max-width: 640px;
    margin: 0 auto;
    font-family: "Roboto", sans-serif;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Mỗi bước */
#phoenix-form .form-step {
    margin-bottom: 30px;
}

/* Tiêu đề câu hỏi */
#phoenix-form .form-step p {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
}

/* Ẩn input radio/checkbox mặc định của Contact Form 7 */
#phoenix-form input[type="radio"],
#phoenix-form input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* Style cho các wrapper wpcf7-radio và wpcf7-checkbox để tạo layout dạng danh sách */
#phoenix-form .wpcf7-radio,
#phoenix-form .wpcf7-checkbox {
    display: flex;
    flex-direction: column; /* Luôn hiển thị theo cột */
    gap: 10px; /* Khoảng cách giữa các mục */
    margin-bottom: 20px;
}

/* Style cho mỗi item (span.wpcf7-list-item) */
#phoenix-form span.wpcf7-list-item {
    margin: 0;
    display: block;
    width: 100%;
}

/* Style cho LABEL bên trong mỗi item (phần hiển thị của tùy chọn) */
#phoenix-form span.wpcf7-list-item label {
    display: flex; /* Dùng flexbox cho tất cả các label*/
    align-items: center; /* Căn giữa theo chiều dọc */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d3e0f0;
    border-radius: 8px;
    background: #ffffff;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 52px; /* Giữ nguyên min-height để cân đối*/
    box-sizing: border-box;
    position: relative;
    /* Loại bỏ flex-wrap ban đầu cho tất cả label, sẽ điều chỉnh cho other riêng */
}

/* Hover effect cho label */
#phoenix-form span.wpcf7-list-item label:hover {
    border-color: #a7c5ed;
}

/* Style cho phần hiển thị của text (span.wpcf7-list-item-label) */
#phoenix-form span.wpcf7-list-item label .wpcf7-list-item-label {
    font-family: "Roboto", sans-serif;
	flex-shrink: 0; /* Không cho phép co lại */
    padding-left: 30px; /* Khoảng trống cho radio/checkbox giả */
    position: relative; /* Để pseudo-elements có thể định vị */
    line-height: 1.4;
    white-space: nowrap; /* Giữ text trên một dòng nếu có thể */
    /* flex-grow sẽ được thêm cho .wpcf7-list-item-label của Other khi Other được chọn */
}

/* Tạo radio/checkbox giả */
#phoenix-form span.wpcf7-list-item label .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #003366;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Radio giả */
#phoenix-form span.wpcf7-list-item label:has(input[type="radio"]) .wpcf7-list-item-label::before {
    border-radius: 50%;
}

/* Checkbox giả */
#phoenix-form span.wpcf7-list-item label:has(input[type="checkbox"]) .wpcf7-list-item-label::before {
    border-radius: 4px;
}

/* Khi được chọn: thay đổi màu viền và nền của label */
#phoenix-form span.wpcf7-list-item label:has(input:checked) {
    border-color: #003366;
    background-color: #e6f0ff;
}

/* Khi được chọn: thay đổi màu nền của radio/checkbox giả */
#phoenix-form span.wpcf7-list-item label:has(input:checked) .wpcf7-list-item-label::before {
    background-color: #003366;
    border-color: #003366;
}

/* Dấu tick hoặc chấm tròn bên trong radio/checkbox giả khi được chọn */
#phoenix-form span.wpcf7-list-item label:has(input[type="radio"]:checked) .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

#phoenix-form span.wpcf7-list-item label:has(input[type="checkbox"]:checked) .wpcf7-list-item-label::after {
    content: '✔';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff;
    line-height: 1;
}

/* --- CSS Cụ thể cho trường "Other" và input text của nó --- */

/* Wrapper riêng cho Other option để dễ quản lý khoảng cách */
.other-option-wrapper {
    margin-top: 10px;
}

/* Điều chỉnh label của Other để nó chứa cả text và input trên cùng một hàng */
.other-option-wrapper label {
    flex-wrap: nowrap; /* Mặc định không cho xuống dòng */
    /* Loại bỏ padding-bottom ở đây, sẽ thêm padding-bottom nếu cần cho other-input-container */
    padding-bottom: 12px; /* Đảm bảo đủ không gian ban đầu */
}

/* Khi "Other" được chọn, đảm bảo chiều cao label tự động và các thành phần căn chỉnh tốt */
.other-option-wrapper label:has(input:checked) {
    flex-wrap: wrap; /* Cho phép wrap khi input hiển thị để chúng ta có thể kiểm soát vị trí */
    min-height: unset; /* Bỏ min-height để chiều cao tự động theo nội dung */
    height: auto; /* Đảm bảo chiều cao tự động */
}

/* container cho input text Other */
.other-input-container {
    display: none; /* Mặc định ẩn */
    flex-grow: 1; /* Cho phép nó mở rộng để chiếm không gian còn lại */
    margin-left: 10px; /* Khoảng cách giữa text "Other" và input*/
    box-sizing: border-box; /* Quan trọng */
}

/* Khi "Other" được chọn, hiển thị input container và căn chỉnh */
.other-option-wrapper label:has(input:checked) .other-input-container {
    display: block; /* Hiện thị như block để đẩy input xuống dòng */
    width: 100%; /* Đảm bảo chiếm toàn bộ chiều rộng có thể */
    margin-left: 0; /* Bỏ margin-left khi đã xuống dòng */
    margin-top: 8px; /* Khoảng cách giữa "Other" text và input khi xuống dòng */
    padding-left: 30px; /* Căn thẳng hàng với radio giả */
}

/* Input text Other */
.other-text-input {
    width: 100%; /* FULL WIDTH bên trong other-input-container*/
    padding: 6px 10px; /* Giảm padding để input nhỏ gọn hơn */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Rất quan trọng để padding và border không làm tăng chiều rộng */
    font-size: 15px;
    color: #333;
    background-color: #fff;
    max-height: 30px; /* Điều chỉnh min-height của input để cân bằng */
    max-width: none; /* Bỏ giới hạn max-width */
}

/* Căn chỉnh khi text "Other" và input nằm cùng hàng trên desktop */
@media (min-width: 769px) { /* Chỉ áp dụng cho desktop */
    .other-option-wrapper label:has(input:checked) {
        flex-wrap: nowrap; /* Buộc text Other và input nằm cùng hàng */
        align-items: center; /* Căn giữa lại khi cùng hàng */
        padding-bottom: 12px; /* Giữ padding dưới như các lựa chọn khác */
    }

    .other-option-wrapper label:has(input:checked) .wpcf7-list-item-label {
        margin-bottom: 0; /* Đảm bảo không có margin dưới thừa */
        white-space: nowrap; /* Giữ text Other trên một dòng */
    }
    
    .other-option-wrapper label:has(input:checked) .other-input-container {
        display: block; /* Vẫn là block để chứa input */
        flex-grow: 1; /* Cho phép container này mở rộng */
        margin-left: 10px; /* Khoảng cách giữa "Other" text và input */
        margin-top: 0; /* Không có margin top khi cùng hàng */
        padding-left: 0; /* Không cần padding-left khi đã có margin-left cho container */
    }
}


/* --- Định dạng cho các trường input và textarea thông thường --- */
#phoenix-form input[type="text"]:not(.other-text-input),
#phoenix-form input[type="email"],
#phoenix-form input[type="tel"],
#phoenix-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #c7d1e0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    color: #333;
    background-color: #fff;
}

#phoenix-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select và trường Other đi kèm */
.select-wrapper {
    margin-bottom: 20px;
}
.select-wrapper select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #c7d1e0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    color: #333;
    background-color: #fff;
}

/* Input text cho "Other" của select */
.select-wrapper .other-text-input {
    display: none;
    width: 100%;
    padding: 12px 15px;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    max-width: none;
    height: auto;
}

/* --- Nút bấm (Back, Continue, Submit) --- */
.form-navigation-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    flex-wrap: wrap;
}

#phoenix-form button,
#phoenix-form input[type="submit"].wpcf7-submit {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-width: 120px;
    transition: 0.3s;
    flex-grow: 1;
    max-width: 200px;
    box-sizing: border-box;
    height: auto;
    margin-top: 0;
}

#phoenix-form button:hover,
#phoenix-form input[type="submit"].wpcf7-submit:hover {
    background-color: #0056b3;
}

#phoenix-form .prev-step {
    background-color: #f1f4f8;
    color: #003366;
    border: 1px solid #003366;
}

#phoenix-form .prev-step:hover {
    background-color: #e0e4eb;
    border-color: #001d4a;
    color: #001d4a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #phoenix-form {
        padding: 15px;
    }
    #phoenix-form .form-step p {
        font-size: 16px;
        margin-bottom: 15px;
    }
    #phoenix-form .wpcf7-radio,
    #phoenix-form .wpcf7-checkbox {
        gap: 8px;
    }

    #phoenix-form span.wpcf7-list-item label {
        padding: 10px 12px;
        min-height: 40px;
    }

    #phoenix-form span.wpcf7-list-item label .wpcf7-list-item-label {
        font-size: 15px;
    }

    #phoenix-form span.wpcf7-list-item label .wpcf7-list-item-label::before {
        width: 18px;
        height: 18px;
    }

    #phoenix-form span.wpcf7-list-item label:has(input[type="radio"]:checked) .wpcf7-list-item-label::after {
        left: 5px;
        width: 8px;
        height: 8px;
    }

    #phoenix-form span.wpcf7-list-item label:has(input[type="checkbox"]:checked) .wpcf7-list-item-label::after {
        left: 3px;
        font-size: 12px;
    }

    /* Điều chỉnh Other cho mobile: Luôn xuống dòng */
    .other-option-wrapper label {
        flex-wrap: wrap; /* Cho phép xuống dòng trên mobile */
        align-items: flex-start; /* Căn trái khi xuống dòng */
    }
    .other-option-wrapper label .wpcf7-list-item-label {
        margin-bottom: 0; /* Bỏ margin dưới */
        white-space: normal; /* Cho phép text "Other" xuống dòng */
        flex-grow: unset; /* Không cho flex-grow khi không cần thiết */
        width: 100%; /* Đảm bảo chiếm hết chiều rộng để input xuống dòng */
    }
    .other-input-container {
        padding-left: 30px; /* Căn thẳng hàng với radio giả trên mobile */
        margin-left: 0; /* Không có margin-left khi đã xuống dòng */
        margin-top: 8px; /* Khoảng cách giữa text và input khi xuống dòng */
    }
    .other-text-input {
        width: 100%; /* Full width */
        padding: 6px 8px;
        font-size: 14px;
        max-width: none;
    }


    .form-navigation-buttons {
        flex-direction: row; /* Thay đổi thành row để giữ cùng hàng */
        justify-content: space-between; /* Giữ các nút cách đều nhau */
        gap: 10px; /* Vẫn giữ khoảng cách giữa các nút */
    }
	
	/* Đảm bảo các nút có thể co giãn một chút nếu cần, nhưng không quá nhỏ */
    #phoenix-form button,
    #phoenix-form input[type="submit"].wpcf7-submit {
        flex-grow: 1; /* Cho phép nút mở rộng để lấp đầy không gian */
        max-width: unset; /* Bỏ giới hạn max-width trên mobile để chúng có thể chia đều */
        /* Nếu bạn muốn chúng có kích thước tối thiểu, có thể thêm min-width: 48%; chẳng hạn */
    }

    /* Nếu bạn muốn nút Back và Continue luôn chiếm 50% chiều rộng trên mobile (trừ gap) */
    #phoenix-form .prev-step,
    #phoenix-form .next-step,
    #phoenix-form input[type="submit"].wpcf7-submit {
        width: calc(50% - 5px); /* 50% trừ đi một nửa gap */
        max-width: unset; /* Đảm bảo không bị giới hạn */
    }

}

/* Form Multi Steps */

/* --- FORM WRAPPER (Sử dụng class mặc định của CF7) --- */
.wpcf7 {
    max-width: 640px; /* Chiều rộng tối đa của form */
    margin: 40px auto; /* Căn giữa form và tạo khoảng cách trên dưới */
    font-family: "Roboto", sans-serif; /* Font chữ */
    padding: 20px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Màu nền nhạt */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- MỖI BƯỚC (Step Wrapper) --- */
/* Class này bao bọc nội dung của mỗi step */
.wpcf7 .uacf7_step_wrapper { /* Thêm .wpcf7 để tăng độ đặc hiệu */
    margin-bottom: 30px;
}

/* --- TIÊU ĐỀ CÂU HỎI (Label của mỗi trường) --- */
/* Dựa trên HTML của bạn, đây là thẻ <label> trực tiếp */
.wpcf7 .uacf7_step_wrapper > label { /* Chỉ nhắm mục tiêu label trực tiếp bên trong step wrapper */
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 20px; /* Khoảng cách dưới tiêu đề câu hỏi */
    color: #333;
    display: block; /* Đảm bảo nó chiếm đủ không gian và có margin đúng */
}

/* --- ẨN INPUT RADIO/CHECKBOX MẶC ĐỊNH --- */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* --- STYLE CHO CÁC WRAPPER wpcf7-radio VÀ wpcf7-checkbox --- */
/* Đây là các class được tạo bởi CF7 cho nhóm radio/checkbox */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
    display: flex;
    flex-direction: column; /* Luôn hiển thị theo cột */
    gap: 10px; /* Khoảng cách giữa các mục */
    margin-bottom: 20px; /* Khoảng cách dưới nhóm tùy chọn */
}

/* Style cho mỗi item (span.wpcf7-list-item) */
.wpcf7 span.wpcf7-list-item {
    margin: 0; /* Đảm bảo không có margin mặc định */
    display: block; /* Khiến mỗi item chiếm toàn bộ chiều rộng */
    width: 100%;
}

/* Style cho LABEL bên trong mỗi item (phần hiển thị của tùy chọn) */
.wpcf7 span.wpcf7-list-item label {
    display: flex; /* Dùng flexbox cho tất cả các label để căn chỉnh nội dung */
    align-items: center; /* Căn giữa theo chiều dọc */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d3e0f0; /* Viền màu xanh nhạt */
    border-radius: 8px;
    background: #ffffff;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 52px; /* Giữ nguyên min-height để cân đối */
    box-sizing: border-box;
    position: relative;
    padding-left: 50px; /* Chừa chỗ cho custom radio */
}

/* Hover effect cho label */
.wpcf7 span.wpcf7-list-item label:hover {
    border-color: #a7c5ed; /* Màu viền khi hover */
}

/* Style cho phần hiển thị của text (span.wpcf7-list-item-label, nằm bên trong label) */
.wpcf7 span.wpcf7-list-item label span.wpcf7-list-item-label { /* Selector chính xác hơn */
    font-family: "Roboto", sans-serif;
    flex-shrink: 0; /* Không cho phép co lại */
    position: relative; /* Để pseudo-elements có thể định vị */
    line-height: 1.4;
    white-space: normal; /* Cho phép text xuống dòng nếu quá dài */
    flex-grow: 1; /* Cho phép text giãn nở */
}

/* Tạo radio/checkbox giả (vòng tròn hoặc ô vuông) */
.wpcf7 span.wpcf7-list-item label span.wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: -30px; /* Đẩy ra ngoài để nằm trong padding-left của label cha */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #003366; /* Màu viền đậm hơn */
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Radio giả: bo tròn */
.wpcf7 span.wpcf7-list-item label:has(input[type="radio"]) span.wpcf7-list-item-label::before {
    border-radius: 50%;
}

/* Checkbox giả: hình vuông */
.wpcf7 span.wpcf7-list-item label:has(input[type="checkbox"]) span.wpcf7-list-item-label::before {
    border-radius: 4px;
}

/* Khi được chọn: thay đổi màu viền và nền của label */
.wpcf7 span.wpcf7-list-item label:has(input:checked) {
    border-color: #003366; /* Viền màu xanh đậm */
    background-color: #e6f0ff; /* Nền xanh nhạt */
}

/* Khi được chọn: thay đổi màu nền của radio/checkbox giả */
.wpcf7 span.wpcf7-list-item label:has(input:checked) span.wpcf7-list-item-label::before {
    background-color: #003366; /* Chấm/ô màu xanh đậm */
    border-color: #003366;
}

/* Dấu tick hoặc chấm tròn bên trong radio/checkbox giả khi được chọn */
/* Dấu chấm bên trong radio giả */
.wpcf7 span.wpcf7-list-item label:has(input[type="radio"]:checked) span.wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    left: -24px; /* Vị trí chấm trắng */
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

/* Dấu tick bên trong checkbox giả */
.wpcf7 span.wpcf7-list-item label:has(input[type="checkbox"]:checked) span.wpcf7-list-item-label::after {
    content: '✔'; /* Dấu tick */
    position: absolute;
    left: -26px; /* Vị trí dấu tick */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #fff;
    line-height: 1;
}

/* --- CSS Cụ thể cho trường "Other" và input text của nó --- */
/* Nếu bạn dùng field riêng với class .other-input-container và .other-option-wrapper như mẫu */
.other-input-container {
    display: none; /* Mặc định ẩn */
    flex-grow: 1;
    margin-left: 10px;
    box-sizing: border-box;
}

.other-text-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    max-height: 30px;
    max-width: none;
}

/* --- ĐỊNH DẠNG CHO CÁC TRƯỜNG INPUT VÀ TEXTAREA THÔNG THƯỜNG --- */
.wpcf7 input[type="text"]:not(.other-text-input),
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px; /* Khoảng cách dưới mỗi trường */
    border: 1px solid #c7d1e0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    color: #333;
    background-color: #fff;
}

.wpcf7 textarea {
    min-height: 120px;
    resize: vertical; /* Cho phép thay đổi kích thước theo chiều dọc */
}

/* --- NÚT BẤM (Back, Continue, Submit) --- */
/* Wrapper cho các nút điều hướng */
.wpcf7 p.uacf7_buttons {
    display: flex;
    gap: 15px; /* Khoảng cách giữa các nút */
    justify-content: space-between;
    flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
}

p.uacf7-buttons {
	margin-top: 30px;
	display: flex;
    gap: 15px;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Style chung cho nút Next, Previous và Submit */
.wpcf7 button.uacf7-next,
.wpcf7 button.uacf7-prev,
.wpcf7 input[type="submit"].wpcf7-submit {
    background-color: #007bff; /* Màu xanh mặc định cho nút chính */
    color: white;
    padding: 12px 25px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-width: 120px;
    transition: 0.3s;
    flex-grow: 1; /* Cho phép nút giãn nở */
    max-width: 200px; /* Giới hạn chiều rộng tối đa */
    box-sizing: border-box;
    height: 45px;
    margin-top: 0 !important;
}

/* Hover effect cho nút Next/Submit */
.wpcf7 button.uacf7-next:hover,
.wpcf7 input[type="submit"].wpcf7-submit:hover {
    background-color: #0056b3; /* Màu xanh đậm hơn khi hover */
}

/* Style riêng cho nút "Previous" / "Back" */
.wpcf7 button.uacf7-prev {
    background-color: #f1f4f8; /* Màu xám nhạt */
    color: #003366; /* Màu chữ xanh đậm */
    border: 1px solid #003366; /* Viền xanh đậm */
}

/* Hover effect cho nút Previous */
.wpcf7 button.uacf7-prev:hover {
    background-color: #e0e4eb; /* Màu xám đậm hơn khi hover */
    border-color: #001d4a;
    color: #001d4a;
}


/* Ẩn nút Previous ở Step 1 (thường được plugin xử lý) */
/* Cần class của step 1, ví dụ: uacf7_step_start-1 */
.wpcf7 .uacf7_step_start-1 button.uacf7-prev { /* Giả định ID của Step 1 là uacf7_step_start-1 */
    display: none;
}


/* --- RESPONSIVE ADJUSTMENTS (Cho màn hình nhỏ hơn) --- */
@media (max-width: 768px) {
	
	.wpcf7 span.wpcf7-list-item label span.wpcf7-list-item-label { /* Selector chính xác hơn */
		flex-shrink: 1; /* Xuong dong */
	}
    .wpcf7 {
        padding: 15px;
    }
    .wpcf7 .uacf7_step_wrapper > label { /* Tiêu đề câu hỏi */
        font-size: 16px;
        margin-bottom: 15px;
    }
    .wpcf7 .wpcf7-radio,
    .wpcf7 .wpcf7-checkbox {
        gap: 8px;
    }

    .wpcf7 span.wpcf7-list-item label {
        padding: 10px 12px;
        min-height: 40px;
        padding-left: 40px; /* Điều chỉnh padding cho icon giả trên mobile */
    }

    .wpcf7 span.wpcf7-list-item label span.wpcf7-list-item-label {
        font-size: 15px;
    }

    .wpcf7 span.wpcf7-list-item label span.wpcf7-list-item-label::before {
        left: -30px; /* Điều chỉnh vị trí chấm giả */
        width: 18px;
        height: 18px;
    }

    .wpcf7 span.wpcf7-list-item label:has(input[type="radio"]:checked) span.wpcf7-list-item-label::after {
        left: -25px; /* Điều chỉnh vị trí chấm trắng */
        width: 8px;
        height: 8px;
    }

    .wpcf7 span.wpcf7-list-item label:has(input[type="checkbox"]:checked) span.wpcf7-list-item-label::after {
        left: -17px; /* Điều chỉnh vị trí dấu tick */
        font-size: 12px;
    }

    /* Điều chỉnh Other cho mobile: Luôn xuống dòng */
    .other-option-wrapper label {
        flex-wrap: wrap; /* Cho phép xuống dòng trên mobile */
        align-items: flex-start; /* Căn trái khi xuống dòng */
    }
    .other-option-wrapper label span.wpcf7-list-item-label {
        margin-bottom: 0;
        white-space: normal;
        flex-grow: unset;
        width: 100%;
    }
    .other-input-container {
        padding-left: 20px; /* Căn thẳng hàng với radio giả trên mobile */
        margin-left: 0;
        margin-top: 8px;
    }
    .other-text-input {
        width: 100%;
        padding: 6px 8px;
        font-size: 14px;
        max-width: none;
    }

    .wpcf7 p.uacf7_buttons {
        flex-direction: row !important; /* Giữ các nút trên cùng một hàng */
        justify-content: space-between;
        gap: 10px;
    }
	
    
    .wpcf7 button.uacf7-prev,
    .wpcf7 button.uacf7-next,
    .wpcf7 input[type="submit"].wpcf7-submit {
        width: calc(50% - 5px); /* Mỗi nút chiếm khoảng 50% trừ gap */
        max-width: unset; /* Bỏ giới hạn max-width */
    }
}

/* File upload form */
.wpcf7 input[type="file"] {
    margin-bottom: 50px;
    padding: 10px;
}


/* Menu */

/* Highlight sub menu item khi được chọn */
.oxence-nav-menu .sub-menu .current-menu-item > a,
.oxence-nav-menu .sub-menu .current_page_item > a,
.oxence-nav-menu .sub-menu .current_page_ancestor > a {
    color: var(--oxence-primary-color) !important;
}
/* Highlight menu cha khi 1 trong các sub menu đang active */
.oxence-nav-menu .current-menu-ancestor > a,
.oxence-nav-menu .current_page_ancestor > a {
    color: var(--oxence-primary-color) !important;
}

/* Subsciber Form */
/* Áp dụng riêng cho form có class 'newsletter-inline' */
.newsletter-inline .elementor-form-fields-wrapper {
  display: flex;
  position: relative;
}

.newsletter-inline .elementor-field-type-email {
  flex: 1;
  position: relative;
}

.newsletter-inline .elementor-field-type-email input {
  width: 100%;
  padding-right: 130px; /* Chừa khoảng cho nút */
  border-radius: 8px;
}

.newsletter-inline .elementor-field-type-submit {
  position: absolute;
  top: 43%;
  right: 10px;
  transform: translateY(-50%);
      margin: 0;
    z-index: 3;
    width: auto !important;
    padding: 0;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.newsletter-inline .elementor-button {
  padding: 10px 20px;
  border-radius: 6px;
}


/* Dành cho màn hình nhỏ hơn 600px (tablet + mobile) */
@media (max-width: 600px) {
  .newsletter-inline .elementor-form-fields-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .newsletter-inline .elementor-field-type-submit {
    position: static;
    transform: none;
    width: 100%;
  }

  .newsletter-inline .elementor-field-type-email input {
    padding-right: 20px !important; /* Không cần chừa chỗ cho nút nữa */
  }

  .newsletter-inline .elementor-button {
    width: 100%;
    display: block;
    text-align: center;
  }
}

/* Google Recaptcha */
.grecaptcha-badge {
  visibility: hidden;
}

/* SVG page title */
.page-title-area .svg-line-one svg {
     fill: var(--oxence-primary-color) !important;
}

/* Ẩn nội dung ban đầu */
.hidden-section {
  display: none;
}

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* Class khi hiện */
.read-more-content.show {
  max-height: 1000px; /* bạn đặt giá trị lớn hơn nội dung tối đa */
}

/* Hide Skills in Team Member single */
.member-social-info, .member-skills-wrapper {display: none;}

/* Slick Slider */
.portfolio-gallery-slider, .portfolio-thumbnail {
    position: relative;
}

/* Định vị và tạo kiểu dáng cho các nút tùy chỉnh */
.slick-prev-custom,
.slick-next-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999 !important;
  	pointer-events: auto !important;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    color: #000; /* Thay đổi màu mũi tên */
    background: rgba(0,0,0,0.5); /* Thêm nền mờ cho dễ nhìn */
    border: 1px solid #ccc; 
    padding: 10px;
    line-height: 1;
	width: 100px;
    border-radius: 50%; /* Làm tròn nút */
}

.slick-prev-custom {
    left: 20px;
}

.slick-next-custom {
    right: 20px;
}