/*
 * Stylesheet for Plugin Tùy Chỉnh Form Tìm Kiếm
 * Version 2.2: Di chuyển form tìm kiếm về bên phải
 */

/* --- DÀNH CHO MÀN HÌNH MÁY TÍNH (Desktop) --- */
@media screen and (min-width: 1024px) {

    /* 1. Thiết lập container chính của header */
    .header-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* 2. Cho khu vực bên phải (chứa tìm kiếm và social) co giãn */
    .header-wrapper .header-actions {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Quan trọng: Căn toàn bộ nội dung về bên phải */
        gap: 20px; /* Tạo khoảng cách giữa các phần tử */
    }

    /* 3. Sắp xếp lại thứ tự và vị trí */
    .header-actions .social-links {
        order: 1;
        flex-shrink: 0;
    }

    .header-actions .search-popup {
        order: 2;
        flex-shrink: 0; /* Không cho co lại */
        display: flex;
        justify-content: flex-end;
        padding: 0;
        margin: 0;
    }

    /* 4. Ẩn nút icon kính lúp mặc định */
    .header-actions .search-popup-button {
        display: none !important;
    }

    /* 5. Gỡ bỏ các style mặc định của theme */
    .header-actions .search-popup .search-form {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        display: flex !important;
        justify-content: flex-end;
    }

    /* 6. Style cho form tùy chỉnh */
    .custom-header-search {
        display: flex !important;
        width: 100%;
        height: 44px !important;
        border-radius: 22px !important;
        overflow: hidden;
        border: 1px solid #e0e0e0 !important;
        background-color: white;
        margin: 0 !important;
    }

    .custom-header-search .custom-search-label {
        flex-grow: 1;
    }

    .custom-header-search .search-field {
        width: 100%;
        height: 100% !important;
        border: none !important;
        background-color: transparent !important;
        padding: 0 20px !important;
        font-size: 1rem !important;
        color: #333;
    }
    .custom-header-search .search-field:focus {
        outline: none;
    }

    /* Style cho nút "Tìm kiếm" */
    .custom-header-search .search-submit-text {
        border: none !important;
        background-color: #0BAAB0 !important;
        color: white !important;
        padding: 0 25px !important;
        font-weight: 700;
        font-size: 0.875rem;
        cursor: pointer;
        height: 100% !important;
        white-space: nowrap;
        border-radius: 0;
        transition: background-color 0.3s ease;
    }
    .custom-header-search .search-submit-text:hover {
        background-color: #0a8a8f !important;
    }

    /* 7. QUAN TRỌNG: Đảm bảo container form không chiếm toàn bộ chiều rộng */
    .header-actions .search-popup {
        max-width: none !important;
        width: auto !important;
    }
}

/* --- DÀNH CHO MÀN HÌNH DI ĐỘNG (Mobile & Tablet) --- */
@media screen and (max-width: 1023px) {
    .mobile-header { margin-bottom: 0 !important; }
    .site-header .search-popup {
        display: block;
        padding: 10px 15px;
        background-color: #f9f9f9;
    }
    .mobile-header-wrapper .search-popup-button { display: none !important; }

    .site-header .search-popup .search-form,
    .site-header .search-popup .custom-header-search {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-bottom: none !important;
        border-radius: 4px;
        overflow: hidden;
        display: flex !important;
    }
     .custom-header-search .search-submit-text {
        padding: 0 15px !important;
     }
}

/* --- CĂN CHỈNH FORM TÌM KIẾM TRONG WIDGET --- */
.widget_search .search-form {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 280px !important;
}
.widget .search-form {
    border-radius: 4px;
	overflow: hidden;
    border: 1px solid #e0e0e0 !important;
    display: flex;
}
.widget .search-form label { flex-grow: 1; }
.widget .search-form .search-field {
	font-size: 1rem;
	padding: 10px 15px;
    border: none;
}
.widget .search-form .search-submit {
	width: auto;
    height: auto;
    padding: 0 15px;
    color: #fff;
    background-color: #0BAAB0;
    border-radius: 0;
    border: none;
}
.widget .search-form .search-submit:hover {
    background-color: #0a8a8f;
}