.sx-search { position: relative; width: min(190px, 100%); max-width: 380px; transition: width .25s ease; }
@media (min-width: 1200px) { .site-header__search--shared:has(.sx-search) { width: 190px; flex: 0 0 190px; transition: width .25s ease, flex-basis .25s ease; } .site-header__search--shared:has(.sx-search):hover, .site-header__search--shared:has(.sx-search):focus-within { width: min(380px, 36vw); flex-basis: min(380px, 36vw); } .site-header__search--shared .sx-search, .site-header__search--shared .sx-search:hover, .site-header__search--shared .sx-search:focus-within { width: 100%; } }
.sx-search:hover, .sx-search:focus-within { width: min(380px, 100%); }
.sx-search .sx-search__toggle { display: none; } .sx-search .sx-search__panel { position: relative; width: 100%; }
.sx-search *, .sx-search *::before, .sx-search *::after { box-sizing: border-box; }
.sx-search .sx-search__form { display: flex; align-items: center; width: 100%; height: 40px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--color-primary, #267341); border-radius: 18px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.sx-search .sx-search__form:focus-within { border-color: var(--color-primary, #267341); box-shadow: 0 2px 10px rgba(22,80,42,.12); }
.sx-search .sx-search__input { display: block; flex: 1 1 auto; min-width: 0; width: 0; height: 38px; margin: 0; padding: 0 0 0 13px; border: 0; outline: 0; box-shadow: none; background: transparent; color: #202124; font-family: inherit; font-size: 14px; line-height: normal; }
.sx-search .sx-search__input::-webkit-search-cancel-button { cursor: pointer; }
.sx-search .sx-search__button { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 38px; margin: 0; padding: 0; border: 0; background: transparent; color: #53636a; cursor: pointer; font-size: 23px; line-height: 1; }
.sx-search .sx-search__results { position: absolute; z-index: 9999; top: calc(100% + 6px); right: 0; width: min(380px, calc(100vw - 24px)); max-height: min(360px, 55vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #bdc9c1 transparent; border: 1px solid #e2e8e4; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(25,55,35,.16); }
.sx-search .sx-search__results::-webkit-scrollbar { width: 5px; }
.sx-search .sx-search__results::-webkit-scrollbar-thumb { background: #bdc9c1; border-radius: 6px; }
.sx-search .sx-search__results[hidden] { display: none; }
.sx-search .sx-search__item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; color: #26312b; text-decoration: none; transition: background-color .15s; }
.sx-search .sx-search__item + .sx-search__item { border-top: 1px solid #f1f4f2; }
.sx-search .sx-search__item:hover, .sx-search .sx-search__item:focus { color: #1c5430; background: #f2f8f4; outline: none; }
.sx-search .sx-search__image, .sx-search .sx-search__placeholder { display: block; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #eef1ef; border-radius: 7px; object-fit: contain; background: #f8faf8; }
.sx-search .sx-search__placeholder { display: flex; align-items: center; justify-content: center; color: #a4b2a8; font-size: 17px; }
.sx-search .sx-search__text { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.4; }
.sx-search .sx-search__type { flex: 0 0 auto; color: #85988a; font-size: 14px; }
.sx-search .sx-search__message { padding: 14px; color: #667085; font-size: 14px; }
@media (max-width: 1199.98px) { .sx-search, .sx-search:hover, .sx-search:focus-within { width: auto; max-width: none; } .sx-search .sx-search__toggle { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto; padding: 0; border: 0; border-left: 1px solid #e1e5e2; background: transparent; color: var(--color-primary, #267341); font-size: 18px; cursor: pointer; } .sx-search .sx-search__panel { position: fixed; z-index: 9999; top: var(--sx-search-top, 60px); left: 0; width: 100%; padding: 0 5px; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; } .sx-search--open .sx-search__panel { padding: 8px 5px; opacity: 1; visibility: visible; transform: translateY(0); } .sx-search .sx-search__results { top: calc(100% - 2px); left: 5px; right: 5px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .sx-search, .sx-search .sx-search__form, .sx-search .sx-search__item { transition: none; } }

/* Căn vị trí tìm kiếm trong header của giao diện Bigshop. */
@media (min-width: 1200px) { .sx-bigshop-search { float: left; width: 190px; margin: 32px 0 0; transition: width .25s ease; } .sx-bigshop-search:hover, .sx-bigshop-search:focus-within { width: 380px; } .sx-bigshop-search .sx-search, .sx-bigshop-search .sx-search:hover, .sx-bigshop-search .sx-search:focus-within { width: 100%; } }
@media (max-width: 1199.98px) { .sx-bigshop-search { float: none; clear: both; width: 100%; margin: 8px 0 0; } }