/* ==========================================================================
   Header · search — BẢN MÁY TÍNH

   O tim kiem tren thanh dau trang: khung bo tron, o nhap, nut kinh lup.

   Số đo dùng thang --cq-1..6, màu dùng token (Theme.css).
   Bản máy tính và bản điện thoại TÁCH HẲN — không bản nào đè bản nào.
   Dòng "← file cũ" cho biết luật đó gom về từ đâu.
   ========================================================================== */

/* ← Template/HeaderSearch.ascx */
.cq-search {

        position: relative;
        overflow: hidden;
        border: 1px solid #d8e1e8;
        border-radius: 999px;
        background: var(--cq-surface);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
        transition: border-color .2s ease, box-shadow .2s ease;
}

.cq-search:focus-within {

        border-color: #9cc86a;
        box-shadow: 0 10px 28px rgba(113, 160, 68, 0.14);
}

.cq-search__input {

        width: 100%;
        height: 44px;
        padding: 0 52px 0 18px;
        border: 0;
        background: transparent;
        box-shadow: none;
        box-sizing: border-box;
        color: var(--cq-text);
        font-size: 14px;
        line-height: 44px;
}

.cq-search__input::placeholder {

        color: var(--cq-text-3);
}

.cq-search__input:focus {

        outline: none;
}

.cq-search__button {

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        border-left: 0;
        box-shadow: none;
        color: var(--cq-text-2);
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
}

.cq-search__button:hover,
    .cq-search__button:focus {

        background: var(--cq-surface-2);
        color: var(--cq-text);
        outline: none;
        border-left: 0;
        box-shadow: none;
}

.cq-search__button .glyphicon {

        top: 0;
        display: block;
        line-height: 1;
        font-size: 15px;
}

.cq-search .back-search {

        position: absolute;
        left: 14px;
        top: 50%;
        z-index: 2;
        color: var(--cq-text-2);
        text-decoration: none;
        transform: translateY(-50%);
}

.cq-search .back-search ~ .cq-search__input {

        padding-left: 42px;
}

/* ← Content/Styles/Site.css */
.form-search {


    display: inline-block;

    vertical-align: top;

    border: solid 1px var(--cq-border);
    padding-right: 40px;
    height: 40px;

    position: relative;

    background: var(--cq-surface);
    border-radius: 100px;
    margin-top: 10px;
}

.form-search input {


        width: 350px;

        height: 40px;

        border: 0px;
        background: none;
        padding: 0 10px;
        text-decoration: none;

        outline-style: none;
}

.form-search button {


        background: none;
        height: 40px;

        width: 40px;

        text-align: center;

        right: 0px;

        position: absolute;

        top: 0px;

        border: 0px;
        font-size: 16px;

        color: var(--cq-text);
        border-left: solid 1px var(--cq-border);
}

.form-search .SelectBox {


    height: 38px;

    border: 0px;
    border-radius: 4px 0 0 4px;
    width: 100px;

    vertical-align: top;

    -webkit-border-radius: 4px 0 0 4px;

    -moz-border-radius: 4px 0 0 4px;

    border-right: solid 1px var(--cq-border);
}


@media (min-width: 1280px) and (max-width: 1559px) {
    /* ← Content/Styles/mobile-v2.css */
    #headPage .page-width-2 .form-search.form-top {


        display: none;
    }

}