/* Native Bricks Filter-Select dropdowns share ONE row with the search (never wraps). No JS: layout is CSS on the Bricks containers. */
html body .ics-fsel { flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; padding: var(--sp-xs) var(--sp-m); border: 1px solid var(--neutral-300); border-radius: var(--radius-m); background-color: var(--yellow-0); color: var(--heading); font: inherit; font-size: var(--fs-body); }
html body .ics-fsel:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }
html body :is(#brxe-nwtool, #brxe-dctl01, #brxe-evtl01) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--sp-s); width: 100%; max-width: none; }
html body :is(#brxe-nwtool, #brxe-dctl01) > .brxe-filter-search { flex: 1 1 8rem; width: auto; min-width: 0; }
html body :is(#brxe-dcgrp1, #brxe-dcgrp2) { flex: 0 0 auto; }
html body :is(#brxe-nwrow1, #brxe-dcrow2, #brxe-evrw01) { flex: 0 0 100%; }
/* Thư viện: search + the two selects in one row (grid on the existing container, no DOM moves) */
html body #lib-docs-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--sp-s); row-gap: var(--sp-xl); align-items: stretch; justify-items: stretch; }
html body #lib-docs-inner > * { grid-column: 1 / -1; }
html body #lib-docs-inner > #lib-search-slot { grid-column: 1; min-width: 0; }
html body #lib-docs-inner > #lib-filters { display: contents; }
html body #lib-docs-inner #lib-filters > :is(#lib-filter-1, #lib-filter-2) { display: contents; }
html body #lib-docs-inner #lib-filters :is(#lib-label-1, #lib-label-2) { display: none; }
html body #lib-docs-inner #lib-filters :is(#lib-chips-1, #lib-chips-2) { grid-column: auto; min-width: 0; }
html body #lib-docs-inner #lib-filters #lib-clear-filter { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
html body #lib-docs-inner { padding-inline: var(--gutter); box-sizing: border-box; }
html body :is(#brxe-dcgrp1, #brxe-dcgrp2) > :not(.ics-fsel) { display: none; }
/* Có gì mới: search + category select in one row */
html body #wn-filter { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--sp-s); }
html body #wn-filter > .brxe-filter-search { flex: 1 1 8rem; width: auto; min-width: 0; }
html body #wn-filter > #wn-cats { flex: 0 0 auto; width: auto; }
html body #wn-filter > .brxe-query-results-summary { flex: 0 0 100%; }
@media (max-width: 599px) {
  html body .ics-fsel { padding-inline: var(--sp-xs); max-width: 6.5rem; text-overflow: ellipsis; }
  html body :is(#brxe-nwtool, #brxe-dctl01, #wn-filter) > .brxe-filter-search { flex: 1 1 4rem; }
  html body #lib-docs-inner #lib-filters { min-width: 0; }
  html body #lib-docs-inner #lib-filters :is(#lib-chips-1, #lib-chips-2) { display: block; max-width: 6.5rem; min-width: 0; }
  html body #lib-docs-inner #lib-filters .ics-fsel { width: 100%; }
}
html body #lib-docs-inner #lib-filters > * { margin: 0; }
html body #lib-docs-inner #lib-filters :is(#lib-chips-1, #lib-chips-2) { order: 1; }
html body #lib-docs-inner #lib-filters #lib-clear-filter { order: 9; }
html body #lib-docs-inner > #lib-search-slot { order: 0; }
html body #lib-docs-inner > #lib-title, html body #lib-docs-inner > #lib-docs-title { order: -1; }
html body #lib-docs-inner > #lib-grid, html body #lib-docs-inner > #lib-more { order: 10; }
html body #lib-docs-inner #lib-filters #lib-clear-filter { width: auto; justify-self: start; justify-content: flex-start; margin-inline: 0; }
/* ===== One look for Search + Filter dropdowns + Reset everywhere: border = global token --border-ui (rgba, so opacity works), same height/radius/bg ===== */
html body :is(.brxe-filter-search input, .brxe-filter-select, .ics-fsel) { box-sizing: border-box; min-height: 44px; border: 1px solid var(--border-ui) !important; border-radius: var(--radius-m); background-color: var(--yellow-0); color: var(--heading); font-family: inherit; font-size: var(--fs-body); }
html body :is(.brxe-filter-search input, .brxe-filter-select, .ics-fsel):focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; border-color: var(--heading) !important; }
html body .brxe-filter-search input { width: 100%; padding: var(--sp-xs) var(--sp-m); }
/* same-row rule for the pages whose bar is a plain flex row: search grows, dropdowns keep their size, never wrap; reset/summary on its own row */
html body :is(#brxe-nwtool, #brxe-dctl01, #wn-filter, #brxe-evtl01) { flex-wrap: wrap; }
html body :is(#brxe-nwtool, #brxe-dctl01, #wn-filter) > .brxe-filter-search { flex: 1 1 0; min-width: 0; }
html body :is(#brxe-nwrow1, #brxe-dcrow2, #brxe-evrw01, #wn-filter > .brxe-query-results-summary) { flex: 0 0 100%; order: 9; }
html body :is(#brxe-nwrow1, #brxe-dcrow2, #brxe-evrw01) { display: flex; align-items: center; gap: var(--sp-m); }
html body #lib-search-filter input { height: 44px; min-height: 44px; }
html body #lib-docs-inner #lib-filters :is(#lib-chips-1, #lib-chips-2) { align-self: stretch; }
html body #lib-docs-inner #lib-filters .ics-fsel { height: 100%; }
/* Trợ giúp /ho-tro/ places: same global bar as Thư viện/Tin tức (search with icon + Loại hình select + Xóa bộ lọc). Desktop: ONE row, no wrap. <992px: search full row, selects share the next row. */
html body #pl-filter-bar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-s); width: 100%; }
html body #pl-filter-bar > #pl-search-slot { flex: 1 1 280px; min-width: 0; position: relative; }
html body #pl-filter-bar #pl-filter-search input { width: 100%; min-height: 44px; padding: var(--sp-s) var(--sp-2xl) var(--sp-s) var(--sp-m); }
html body #pl-filter-bar #pl-search-icon { position: absolute; }
html body #pl-filter-bar > #pl-type-select { flex: 0 0 13.75rem; width: 13.75rem; max-width: 100%; }
html body #pl-filter-bar > #pl-clear-filter { flex: 0 0 auto; white-space: nowrap; align-self: center; }
html body #pl-filter-bar > #pl-results { flex: 0 0 100%; order: 9; }
@media (max-width: 991px) {
  html body #pl-filter-bar { flex-wrap: wrap; }
  html body #pl-filter-bar > #pl-search-slot { flex: 1 1 100%; }
  html body #pl-filter-bar > #pl-type-select { flex: 1 1 calc(50% - var(--sp-s)); width: auto; max-width: none; }
  html body #pl-filter-bar > #pl-type-select { max-width: none; }
@media (max-width: 599px) { html body #pl-filter-bar > #pl-type-select { flex: 1 1 100%; } }
  html body #pl-filter-bar > #pl-clear-filter { align-self: flex-start; }
}
html body #pl-filter-bar #pl-filter-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body #pl-filter-bar #pl-search-icon { z-index: 1; }
@media (max-width: 599px) { html body #pl-filter-bar > #pl-type-select { max-width: none !important; min-width: 0 !important; width: 100% !important; } }
html body #pl-filter-bar #pl-filter-search input { display: block; }
html body #pl-filter-bar #pl-filter-search { display: block; line-height: 0; }
html body #pl-filter-bar #pl-search-icon { top: 50% !important; transform: translateY(-50%) !important; margin: 0; }
