/*.search-bar {*/
/*    position:relative;*/
/*    z-index:2000;*/
/*}*/


/*#searchSuggestions {*/
/*    position:absolute;*/
/*    top:100%;*/
/*    left:0;*/
/*    right:0;*/

/*    max-height:350px;*/
/*    overflow-y:auto;*/

/*    border-radius:8px;*/
/*    border:1px solid #e0e0e0;*/

/*    background:#fff;*/
/*    box-shadow:0 4px 12px rgba(0,0,0,0.15);*/

/*    animation: dropdownShow 0.2s ease-out;*/
/*}*/

/*#searchSuggestions .list-group-item {*/
/*    cursor:pointer;*/
/*    padding:10px 14px;*/
/*    font-size:14px;*/
/*}*/

/*#searchSuggestions .list-group-item:hover {*/
/*    background:#f2f7ff;*/
/*}*/

/*@keyframes dropdownShow {*/
/*    from {*/
/*        opacity:0;*/
/*        transform:translateY(-5px);*/
/*    }*/
/*    to {*/
/*        opacity:1;*/
/*        transform:translateY(0);*/
/*    }*/
/*}*/


/*!* ===== Wrapper ===== *!*/
/*.search-bar-wrapper {*/
/*    background: #fff;*/
/*    padding: 12px 20px;*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.06);*/
/*}*/

/*!* ===== Container ===== *!*/
/*.search-container {*/
/*    max-width: 1000px;     !* RỘNG HƠN *!*/
/*    margin: 0 auto;*/
/*}*/

/*!* ===== Search bar ===== *!*/
/*.search-bar-big {*/
/*    max-width: 800px;     !* RỘNG HƠN *!*/
/*    margin: 0 auto;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 6px;              !* NÚT GẦN LẠI *!*/
/*}*/

/*!* ===== Height chuẩn ===== *!*/
/*:root {*/
/*    --search-height: 40px;*/
/*}*/

/*!* ===== Input wrapper ===== *!*/
/*.search-input-wrap {*/
/*    flex: 1;*/
/*    position: relative;*/
/*}*/

/*!* ===== Input ===== *!*/
/*.search-input-big {*/
/*    width: 100%;*/
/*    height: var(--search-height);*/
/*    line-height: var(--search-height);*/
/*    padding: 0 18px;*/
/*    font-size: 14px;*/
/*    border: 1.5px solid #aed581;*/
/*    border-radius: 50px;*/
/*    outline: none;*/
/*    background: #f1f8e9;*/
/*    box-sizing: border-box;*/
/*    transition: 0.25s;*/
/*}*/

/*.search-input-big:focus {*/
/*    background: #fff;*/
/*    border-color: #43a047;*/
/*    box-shadow: 0 0 0 3px rgba(67,160,71,0.15);*/
/*}*/

/*!* ===== Button ===== *!*/
/*.search-btn-big {*/
/*    height: var(--search-height);*/
/*    padding: 0 18px;*/
/*    border-radius: 8px;*/
/*    border: none;*/
/*    background: linear-gradient(135deg, #66bb6a, #388e3c);*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*    font-weight: 600;*/
/*    cursor: pointer;*/
/*    white-space: nowrap;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    box-shadow: 0 3px 10px rgba(76,175,80,0.3);*/
/*    transition: 0.25s;*/
/*}*/

/*.search-btn-big:hover {*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 5px 14px rgba(56,142,60,0.4);*/
/*}*/

/*!* ===== Dropdown ===== *!*/
/*!* ===== Dropdown ===== *!*/
/*.dropdown-search {*/
/*    position: absolute;*/
/*    top: calc(100% + 6px);*/
/*    left: 0;*/
/*    right: 0;*/
/*    background: #fff;*/
/*    border-radius: 10px;*/
/*    border: 1px solid #e0e0e0;*/
/*    box-shadow: 0 8px 24px rgba(0,0,0,0.15);*/
/*    max-height: 300px;*/
/*    overflow-y: auto;*/
/*    display: none;*/
/*    z-index: 1000;*/
/*    padding: 6px 0; !* quan trọng *!*/
/*}*/

/*!* ===== Item ===== *!*/
/*.suggest-item {*/
/*    padding: 10px 16px;*/
/*    font-size: 14px;*/
/*    line-height: 1.4;*/
/*    cursor: pointer;*/
/*    transition: background 0.2s ease, padding-left 0.2s ease;*/
/*}*/

/*!* ===== Hover rõ ràng ===== *!*/
/*.suggest-item:hover {*/
/*    background: #f1f8e9;*/
/*    padding-left: 22px;*/
/*}*/

/*!* ===== Text ===== *!*/
/*.suggest-title {*/
/*    color: #222;*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/

/*!* ===== Highlight keyword ===== *!*/
/*.suggest-title mark {*/
/*    background: transparent;*/
/*    color: #2e7d32;*/
/*    font-weight: 600;*/
/*}*/


:root {
    --search-height: 40px;
}
/* Search dưới MAIN */
.search-bar-wrapper .search-bar {
    position:relative;
    z-index:2000;
}

/* dropdown */
.search-bar-wrapper #searchSuggestions {
    position:absolute;
    top:100%;
    left:0;
    right:0;

    max-height:350px;
    overflow-y:auto;

    border-radius:8px;
    border:1px solid #e0e0e0;

    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);

    animation: dropdownShow 0.2s ease-out;
}

.search-bar-wrapper #searchSuggestions .list-group-item {
    cursor:pointer;
    padding:10px 14px;
    font-size:14px;
}

.search-bar-wrapper #searchSuggestions .list-group-item:hover {
    background:#f2f7ff;
}


/* wrapper */
.search-bar-wrapper {
    background: #fff;
    padding: 12px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* container */
.search-bar-wrapper .search-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* row search */
.search-bar-wrapper .search-bar {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* input */
.search-bar-wrapper .search-input-wrap {
    flex: 1;
    position: relative;
}

.search-bar-wrapper .search-input-big {
    width: 100%;
    height: var(--search-height);
    line-height: var(--search-height);
    padding: 0 18px;
    font-size: 14px;
    border: 1.5px solid #aed581;
    border-radius: 50px;
    outline: none;
    background: #f1f8e9;
    box-sizing: border-box;
    transition: 0.25s;
}

.search-bar-wrapper .search-input-big:focus {
    background: #fff;
    border-color: #43a047;
    box-shadow: 0 0 0 3px rgba(67,160,71,0.15);
}

/* button */
.search-bar-wrapper .search-btn-big {
    height: var(--search-height);
    padding: 0 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #66bb6a, #388e3c);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(76,175,80,0.3);
    transition: 0.25s;
}

.search-bar-wrapper .search-btn-big:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(56,142,60,0.4);
}

/* dropdown for suggestions */
.search-bar-wrapper .dropdown-search {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    padding: 6px 0;
}

.search-bar-wrapper .suggest-item {
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}

.search-bar-wrapper .suggest-item:hover {
    background: #f1f8e9;
}

.search-bar-wrapper .suggest-title {
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}