html.vn-search-open { overflow: hidden; }
#vn-search-popover.vn-search-dialog {
    --vn-search-top: clamp(20px, 8vh, 88px);
    box-sizing: border-box; inset: var(--vn-search-top) 16px auto; margin: 0 auto;
    width: min(800px, calc(100vw - 32px)); max-width: none;
    max-height: calc(100vh - var(--vn-search-top) - 20px); max-height: calc(100dvh - var(--vn-search-top) - 20px);
    padding: 0; border: 0; border-top: 4px solid #C8211B; background: #fff;
    color: #16181D; box-shadow: 0 28px 100px #090d1e55; overflow: hidden;
    font: 400 14px/1.5 'Open Sans', sans-serif; text-align: left;
}
#vn-search-popover.vn-search-dialog[open] { display: flex; flex-direction: column; }
#vn-search-popover.vn-search-dialog::backdrop { background: #10131bcc; backdrop-filter: blur(4px); }
#vn-search-popover.vn-search-dialog * { box-sizing: border-box; }
#vn-search-popover.vn-search-dialog [hidden] { display: none !important; }
#vn-search-popover.vn-search-dialog button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
#vn-search-popover.vn-search-dialog a { color: inherit; text-decoration: none; }
#vn-search-popover.vn-search-dialog :is(button,a):focus-visible { outline: 3px solid #C8211B; outline-offset: 3px; }
#vn-search-popover .vn-search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 32px 22px; }
#vn-search-popover .vn-search-eyebrow { margin: 0 0 7px; color: #C8211B; font: 800 11px/1.3 'Roboto', sans-serif; letter-spacing: .13em; }
#vn-search-popover .vn-search-title { margin: 0; font: 800 32px/1.15 'Roboto', sans-serif; letter-spacing: -.035em; }
#vn-search-popover.vn-search-dialog .vn-search-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0; color: #51545F; }
#vn-search-popover.vn-search-dialog .vn-search-close:hover { background: #F2F3F6; color: #C8211B; }
#vn-search-popover .vn-search-form { padding: 0 32px 24px; margin: 0; }
#vn-search-popover .vn-search-label,
#vn-search-popover .vn-search-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#vn-search-popover.vn-search-dialog .vn-search-form-row { display: flex; gap: 0; border: 2px solid #DADCE5; background: #fff; }
#vn-search-popover .vn-search-form-row:focus-within { border-color: #16181D; box-shadow: 0 0 0 3px #16181d0d; }
#vn-search-popover .vn-search-field { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding-left: 17px; }
#vn-search-popover .vn-search-field > svg { flex: none; color: #7A7E8B; }
#vn-search-popover.vn-search-dialog input { flex: 1; min-width: 0; width: 100%; padding: 17px 0; border: 0; background: transparent; color: #16181D; font: 500 17px/1.3 'Roboto', sans-serif; outline: none; }
#vn-search-popover input::placeholder { color: #868995; opacity: 1; }
#vn-search-popover.vn-search-dialog input[type="search"]::-webkit-search-cancel-button,
#vn-search-popover.vn-search-dialog input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
#vn-search-popover.vn-search-dialog .vn-search-clear { flex: none; width: 36px; height: 44px; color: #757984; font-size: 24px; line-height: 1; }
#vn-search-popover.vn-search-dialog .vn-search-submit { flex: none; padding: 14px 22px; background: #C8211B; color: #fff; font: 700 14px/1.3 'Roboto', sans-serif; }
#vn-search-popover.vn-search-dialog .vn-search-submit:hover { background: #A61B17; }
#vn-search-popover .vn-search-body { min-height: 0; padding: 0 32px; overflow-y: auto; overscroll-behavior: contain; }
#vn-search-popover .vn-search-initial { padding: 13px 0 29px; border-top: 1px solid #EBECF0; }
#vn-search-popover .vn-search-helper { margin: 0 0 18px; color: #747884; font-size: 13px; }
#vn-search-popover .vn-search-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#vn-search-popover.vn-search-dialog .vn-search-topic { min-height: 38px; padding: 8px 13px; border: 1px solid #E2E4EB; color: #404450; font-size: 12px; font-weight: 600; }
#vn-search-popover.vn-search-dialog .vn-search-topic:hover { border-color: #C8211B; color: #C8211B; background: #FFF7F6; }
#vn-search-popover .vn-search-initial strong { color: #16181D; font: 700 12px/1.5 'Roboto', sans-serif; }
#vn-search-popover .vn-search-heading { margin: 0; padding: 15px 0 12px; border-top: 1px solid #E7E9EF; color: #777B87; font: 800 10px/1.4 'Roboto', sans-serif; letter-spacing: .1em; }
#vn-search-popover .vn-search-results { list-style: none; padding: 0; margin: 0; }
#vn-search-popover .vn-search-results li { padding: 0; margin: 0; border-bottom: 1px solid #ECEEF3; }
#vn-search-popover .vn-search-results li:last-child { border-bottom: 0; }
#vn-search-popover.vn-search-dialog .vn-search-result { display: flex; align-items: center; gap: 17px; padding: 14px 0; }
#vn-search-popover .vn-search-result-image { position: relative; flex: 0 0 94px; height: 65px; display: grid; place-items: center; overflow: hidden; background: #F2F3F6; color: #B9BDCA; font: 900 23px/1 'Roboto', sans-serif; }
#vn-search-popover .vn-search-result-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
#vn-search-popover .vn-search-result-content { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
#vn-search-popover .vn-search-result-meta { color: #7B7E89; font: 600 10px/1.4 'Roboto', sans-serif; letter-spacing: .035em; }
#vn-search-popover .vn-search-result-content strong { color: #20232C; font: 700 16px/1.35 'Roboto', sans-serif; overflow-wrap: anywhere; }
#vn-search-popover .vn-search-result-arrow { flex: none; margin-left: 4px; color: #A3A7B3; font-size: 21px; }
#vn-search-popover .vn-search-result:hover strong,
#vn-search-popover .vn-search-result:hover .vn-search-result-arrow { color: #C8211B; }
#vn-search-popover .vn-search-state { padding: 25px 0 30px; border-top: 1px solid #EBECF0; }
#vn-search-popover .vn-search-state strong { font: 700 18px/1.4 'Roboto', sans-serif; }
#vn-search-popover .vn-search-state p { margin: 7px 0 0; color: #747884; font-size: 13px; }
#vn-search-popover .vn-search-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 32px; border-top: 1px solid #E7E9EF; background: #F7F8FA; }
#vn-search-popover .vn-search-footer > span { color: #8A8E9B; font: 500 11px/1.4 'Roboto', sans-serif; }
#vn-search-popover.vn-search-dialog .vn-search-all { display: inline-flex; align-items: center; gap: 12px; min-height: 38px; color: #C8211B; font: 800 13px/1.4 'Roboto', sans-serif; }
#vn-search-popover .vn-search-all:hover { text-decoration: underline; }
@media (max-width: 600px) {
    #vn-search-popover.vn-search-dialog { --vn-search-top: 12px; inset: var(--vn-search-top) 12px auto; width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
    #vn-search-popover .vn-search-head { padding: 23px 20px 20px; gap: 10px; }
    #vn-search-popover .vn-search-title { font-size: 27px; }
    #vn-search-popover .vn-search-form { padding: 0 20px 18px; }
    #vn-search-popover .vn-search-body { padding: 0 20px; }
    #vn-search-popover .vn-search-field { padding-left: 11px; gap: 8px; }
    #vn-search-popover .vn-search-field > svg { width: 17px; height: 17px; }
    #vn-search-popover.vn-search-dialog input { font-size: 16px; padding: 15px 0; }
    #vn-search-popover.vn-search-dialog .vn-search-submit { padding: 13px 12px; font-size: 12px; }
    #vn-search-popover.vn-search-dialog .vn-search-clear { width: 26px; }
    #vn-search-popover.vn-search-dialog .vn-search-result { gap: 12px; padding: 13px 0; }
    #vn-search-popover .vn-search-result-image { flex-basis: 76px; height: 57px; }
    #vn-search-popover .vn-search-result-content strong { font-size: 14px; line-height: 1.4; }
    #vn-search-popover .vn-search-result-meta { font-size: 9px; }
    #vn-search-popover .vn-search-result-arrow { display: none; }
    #vn-search-popover .vn-search-footer { padding: 14px 20px; }
    #vn-search-popover .vn-search-footer > span { display: none; }
    #vn-search-popover .vn-search-all { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    #vn-search-popover * { scroll-behavior: auto; }
}