/* Lớp phủ header: bảng tìm kiếm, menu Công Cụ, menu điện thoại. Một vật, một luật.
   Nguồn: nen/tim-kiem/ (xay.py). Chỉ đạo: nen/tim-kiem/chi-dao.md. Nạp sau v3-nhip.
   html:root body.sm-body header.sm-header.sm-header header, html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header header khi tìm đang mở, html:root body.sm-body .sm-mobile-menu.sm-mobile-menu menu điện thoại. Không !important. */
html:root { --tm-sau: #100E0A; --tm-ke: #2C2618; --tm-mo: 120ms; --tm-dong: 90ms; --tm-loi: #E5877A; }

/* ─── KHE ĐÓNG ─── trục dọc: ấn 16, chữ 64, dùng chung cho ô nhập và mọi hàng bên dưới */
@media (min-width: 769px) { html:root body.sm-body header.sm-header.sm-header .sm-header__search { position: relative; container-type: inline-size; block-size: 2.75rem; } }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form { position: relative; z-index: 1; box-sizing: border-box; gap: 1.3125rem; inline-size: 100%; block-size: 2.75rem; padding: 0 0 0 1.5rem; border: 1px solid var(--hd-ke-2); border-radius: .25rem; background: rgba(0, 0, 0, .3); box-shadow: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form:hover { border-color: rgba(220, 187, 116, .42); background: rgba(0, 0, 0, .34); }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form:focus-within { border-color: var(--hd-ke-2); background: var(--tm-sau); box-shadow: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form::after { content: ""; position: absolute; inset: auto -1px -1px -1px; block-size: 2px; background: var(--hd-vang); transform: scaleX(0); transform-origin: left; transition: transform var(--tm-mo) var(--hd-mem); pointer-events: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form:focus-within::after { transform: scaleX(1); }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-input { font-size: .875rem; line-height: 1.5; color: var(--hd-nga); caret-color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-typewriter { left: 3.9375rem; right: 3rem; font-size: .875rem; color: var(--hd-nhan); pointer-events: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-clear { flex: none; inline-size: 2.75rem; block-size: 100%; margin: 0; border: 0; border-radius: 0; background: none; color: var(--hd-nhan); transition: color var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-clear:hover { background: none; color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-clear:focus-visible { outline: 2px solid var(--hd-vang); outline-offset: -6px; border-radius: .25rem; }

/* ─── VẬT MỞ ─── ô và bảng là một tấm: tấm bắt đầu từ mép trên ô, ô nằm trong tấm */
html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-header__search { z-index: 1210; }
html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-hsearch-form { position: absolute; top: 0; right: 0; inline-size: max(100%, 28rem); background: var(--tm-sau); border-radius: .25rem .25rem 0 0; box-shadow: inset 0 0 0 2px var(--tm-sau), inset 0 0 0 3px var(--hd-ke); }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results { position: absolute; top: 0; left: auto; right: 0; z-index: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; box-sizing: border-box; inline-size: max(100%, 28rem); min-block-size: 11rem; max-block-size: calc(100dvh - 2.125rem); margin: 0; padding: 2.75rem 3px 3px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hd-nhan) transparent; background: var(--hd-son); border: 1px solid var(--hd-ke-2); border-radius: .25rem; box-shadow: inset 0 0 0 2px var(--hd-nen), inset 0 0 0 3px var(--hd-ke), 0 1.5rem 3rem rgba(0, 0, 0, .7); font-family: var(--hd-ui); opacity: 0; visibility: hidden; transform: translateY(-.25rem); transition: opacity var(--tm-dong) var(--hd-mem), transform var(--tm-dong) var(--hd-mem), visibility 0s linear var(--tm-dong); animation: none; backdrop-filter: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results.is-active { display: grid; opacity: 1; visibility: visible; transform: none; transition: opacity var(--tm-mo) var(--hd-mem), transform var(--tm-mo) var(--hd-mem), visibility 0s; animation: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results::before { display: none; }

/* Màn mờ chung cho mọi lớp phủ: bắt đầu dưới mái, không che mái */
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-backdrop { display: block; position: absolute; top: 100%; left: 50%; right: auto; bottom: auto; inline-size: 100vw; block-size: 100dvh; margin-inline-start: -50vw; background: rgba(8, 7, 5, .76); backdrop-filter: none; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: opacity var(--tm-dong) var(--hd-mem), visibility 0s linear var(--tm-dong); animation: none; }
html:root body.sm-body header.sm-header.sm-header .sm-hsearch-backdrop.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; animation: none; transition: opacity var(--tm-mo) var(--hd-mem), visibility 0s; }

/* ─── HÀNG, NHÃN ─── một giọng: tên L14 ngà, phụ L13 nhãn, mắt L12 hoa */
html:root body.sm-body header.sm-header.sm-header .sbh-sr-section-label { grid-column: 1 / -1; display: block; margin: 0; padding: .75rem .75rem .375rem; border: 0; font-family: var(--hd-ui); font-size: .75rem; font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-nhan); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-section-label svg { display: none; }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-item, .sbh-sr-history) { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: .75rem; min-block-size: 3.25rem; margin: 0; padding: .25rem .75rem; border: 0; border-radius: 0; background: none; color: var(--hd-nga); text-decoration: none; cursor: pointer; transform: none; transition: background-color var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-history { min-block-size: 2.75rem; padding-block: 0; padding-inline-end: 0; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-history:not(.sbh-sr-history + .sbh-sr-history):not(:has(+ .sbh-sr-history)) { grid-column: 1 / -1; }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-item, .sbh-sr-history, .sbh-sr-featured, .sbh-live-result-footer a):hover { background: var(--hd-o-sang); }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-item::before { display: none; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-item.is-selected { background: var(--hd-o-sang); box-shadow: inset 2px 0 0 var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header a.sbh-live-result-item:focus-visible { outline: 2px solid var(--hd-vang); outline-offset: -2px; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-icon { flex: none; box-sizing: content-box; inline-size: .875rem; block-size: .875rem; padding-inline: .6875rem; color: var(--hd-nhan); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-hist-text { flex: 1; min-inline-size: 0; overflow: hidden; font-size: .875rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; color: var(--hd-nga); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-hist-del { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: 0; background: none; font-size: 1rem; line-height: 1; color: var(--hd-nhan); cursor: pointer; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-hist-del:hover { background: none; color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-hist-del:focus-visible { outline: 2px solid var(--hd-vang); outline-offset: -6px; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-text { flex: 1; display: block; min-inline-size: 0; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-title { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--hd-ui); font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--hd-nga); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-title, .sbh-live-result-title mark) { text-shadow: none; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-title mark { padding: 0; border-radius: 0; background: none; color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-tm { display: flex; justify-content: space-between; gap: .75rem; margin: 0; padding: 0; font-size: .8125rem; line-height: 1.4; color: var(--hd-nhan); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-tg, .sbh-td) { color: var(--hd-nhan); opacity: 1; font-size: inherit; }
html:root body.sm-body header.sm-header.sm-header .sbh-td { display: none; }
html:root body.sm-body header.sm-header.sm-header .sbh-tc { color: var(--hd-vang); font-size: inherit; font-weight: 400; opacity: 0; transition: opacity var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header .sbh-cu:is(:hover, .is-selected, :focus-visible) .sbh-tc { opacity: 1; }
@media (hover: none) { html:root body.sm-body header.sm-header.sm-header .sbh-tc { color: var(--hd-nhan); opacity: 1; } }

/* Ấn và ảnh cùng một ô 36, cùng khung ấn của menu */
html:root body.sm-body header.sm-header.sm-header .sbh-ti { flex: none; box-sizing: border-box; display: grid; place-items: center; inline-size: 2.25rem; min-inline-size: 2.25rem; block-size: 2.25rem; padding: 0; border: 1px solid var(--hd-ke-2); border-radius: .125rem; background: var(--hd-nen) center / 1.375rem no-repeat; color: var(--hd-vang); transition: border-color var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header .sbh-ti[data-an] svg { display: none; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-item:is(:hover, .is-selected) .sbh-ti { border-color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-thumb, .sbh-live-result-thumb-placeholder) { flex: none; box-sizing: border-box; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; margin: 0; object-fit: cover; border: 1px solid var(--hd-ke-2); border-radius: .125rem; background: var(--hd-nen); color: var(--hd-nhan); filter: saturate(.45) sepia(.22) brightness(.86); }

/* Tra cứu hàng đầu: lưới kẻ cùng họ với thước canh và menu */
html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-wrap { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 .75rem .75rem; padding: 0; border: 1px solid var(--tm-ke); background: var(--tm-ke); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-sr-trending-tag, .sbh-sr-trending-tag:hover) { display: flex; align-items: center; justify-content: center; min-inline-size: 0; min-block-size: 2.75rem; margin: 0; padding: 0 .25rem; border: 0; border-radius: 0; font-family: var(--hd-ui); font-size: .875rem; font-weight: 400; line-height: 1.3; text-align: center; color: var(--hd-nga); cursor: pointer; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-tag { background: var(--hd-o); transition: background-color var(--tm-dong) var(--hd-mem), color var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-tag:hover, html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-tag.is-selected { background: var(--hd-o-sang); color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-tag.is-selected { box-shadow: inset 0 -2px 0 var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-tag svg { display: none; }

/* Chân: Khám Phá và Xem tất cả là một loại chân, cùng cao, cùng mũi tên, dính đáy */
html:root body.sm-body header.sm-header.sm-header :is(.sbh-sr-featured, .sbh-live-result-footer) { position: sticky; bottom: -3px; grid-column: 1 / -1; z-index: 1; box-sizing: border-box; margin: .25rem -3px -3px; padding: 0; border: 0; border-block-start: 1px solid var(--hd-ke-2); border-radius: 0 0 .25rem .25rem; background: var(--tm-sau); box-shadow: inset 0 -2px 0 var(--tm-sau), inset 2px 0 0 var(--tm-sau), inset -2px 0 0 var(--tm-sau); text-align: start; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-block-size: 3.25rem; padding: .375rem 1rem; text-decoration: none; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured::after { content: "→"; font-size: .875rem; color: var(--hd-vang); transition: transform var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-sr-featured, .sbh-live-result-all):is(:hover, .is-selected)::after { transform: translateX(.125rem); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured.is-selected { box-shadow: inset 2px 0 0 var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured-badge { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--hd-ui); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured-badge svg { display: none; }
html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured-text { font-size: .8125rem; line-height: 1.4; color: var(--hd-phu); }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-all { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 3.25rem; padding: .375rem 1rem; font-size: .875rem; font-weight: 500; line-height: 1.4; text-decoration: none; color: var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header .sbh-mui { flex: none; transition: transform var(--tm-dong) var(--hd-mem); }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-all:is(:hover, .is-selected) .sbh-mui { transform: translateX(.125rem); }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-all.is-selected { box-shadow: inset 2px 0 0 var(--hd-vang); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-sr-featured, .sbh-live-result-all):focus-visible { outline: 2px solid var(--hd-vang); outline-offset: -3px; }

/* Trạng thái rỗng, lỗi, đang tải: cùng hàng 16 / 64 */
html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-empty, .sbh-loi) { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; min-block-size: 4.5rem; margin: 0; padding: .75rem; font-size: .875rem; font-style: normal; line-height: 1.5; text-align: start; color: var(--hd-phu); }
html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-empty, .sbh-loi)::before { content: ""; flex: none; box-sizing: border-box; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--hd-ke-2); border-radius: .125rem; background: var(--hd-nen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DCBB74' d='M2 10.3H19L20.1 9Q20.1 9 20.3 9.1Q20.5 9.3 20.8 9.5Q21.1 9.8 21.4 10.1Q21.7 10.4 22 10.6Q22 11 21.4 11H2.2ZM2.2 15.4H19L20 14Q20 14 20.2 14.1Q20.4 14.3 20.7 14.6Q21 14.8 21.3 15.1Q21.6 15.4 21.8 15.7Q21.8 16 21.3 16H2.3ZM9.1 5.3H10.6V15.6H9.1ZM12.9 5.3H14.4V15.6H12.9ZM16.7 5.3H18.2V15.6H16.7ZM5.4 5.3V4.6L7.1 5.3H7V15.6H5.4ZM6.5 2.1 9 3.2Q8.9 3.3 8.7 3.4Q8.4 3.5 8.1 3.5Q6.9 5.3 5.4 6.7Q3.9 8.1 2.4 9L2.1 8.8Q2.9 8 3.7 7Q4.5 5.9 5.2 4.7Q5.9 3.4 6.5 2.1ZM6.1 5.3H18.3L19.4 3.9Q19.4 3.9 19.6 4Q19.8 4.2 20.1 4.5Q20.4 4.7 20.7 5Q21.1 5.3 21.4 5.6Q21.3 5.9 20.8 5.9H6.1ZM5.5 16.8H5.9Q6.2 18.1 5.9 19.1Q5.7 20.1 5.2 20.7Q4.7 21.3 4.1 21.6Q3.6 21.9 3.1 21.9Q2.6 21.8 2.4 21.4Q2.2 21 2.4 20.7Q2.6 20.3 3 20.1Q3.6 19.9 4.1 19.4Q4.7 19 5.1 18.3Q5.5 17.6 5.5 16.8ZM8.6 17Q9.5 17.7 10 18.4Q10.5 19.1 10.6 19.7Q10.8 20.3 10.6 20.8Q10.5 21.2 10.3 21.5Q10 21.8 9.7 21.7Q9.3 21.7 9 21.3Q9.1 20.6 9 19.9Q8.9 19.1 8.7 18.4Q8.6 17.7 8.4 17.1ZM12.5 17Q13.7 17.5 14.4 18.2Q15.1 18.8 15.4 19.4Q15.7 20 15.7 20.5Q15.8 21 15.5 21.3Q15.3 21.6 15 21.6Q14.6 21.7 14.2 21.3Q14.2 20.6 13.9 19.9Q13.5 19.1 13.1 18.4Q12.7 17.6 12.3 17.1ZM16.7 16.7Q18.3 17.2 19.3 17.8Q20.3 18.5 20.9 19.1Q21.4 19.8 21.5 20.4Q21.7 21 21.5 21.4Q21.3 21.8 20.9 21.9Q20.6 22 20.1 21.7Q19.9 20.9 19.3 20Q18.7 19.1 17.9 18.3Q17.2 17.4 16.5 16.9Z'/%3E%3C/svg%3E") center / 1.375rem no-repeat; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-empty a { color: var(--hd-vang); text-underline-offset: .2em; }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-empty a:hover { color: var(--hd-nga); }
html:root body.sm-body header.sm-header.sm-header .sbh-live-result-empty a:focus-visible { outline: 2px solid var(--hd-vang); outline-offset: 2px; }
html:root body.sm-body header.sm-header.sm-header .sbh-loi { color: var(--tm-loi); }
html:root body.sm-body header.sm-header.sm-header .sbh-loi span { flex: 1; min-inline-size: 0; }
html:root body.sm-body header.sm-header.sm-header .sbh-loi-lai { flex: none; min-block-size: 2.75rem; padding: 0 .75rem; border: 1px solid var(--hd-ke-2); border-radius: .25rem; background: none; font-family: var(--hd-ui); font-size: .875rem; font-weight: 500; color: var(--hd-vang); cursor: pointer; }
html:root body.sm-body header.sm-header.sm-header .sbh-loi-lai:hover { background: var(--hd-o-sang); }
html:root body.sm-body header.sm-header.sm-header .sbh-loi-lai:focus-visible { outline: 2px solid var(--hd-vang); outline-offset: 2px; }
html:root body.sm-body header.sm-header.sm-header .sbh-tai { grid-column: 1 / -1; display: grid; gap: 0; padding-block: .5rem; animation: sm-tm-tho 1s ease-in-out infinite alternate; }
html:root body.sm-body header.sm-header.sm-header .sbh-tai i { display: block; block-size: 3.25rem; background: linear-gradient(var(--hd-o-sang), var(--hd-o-sang)) 1rem .5rem / 2.25rem 2.25rem no-repeat, linear-gradient(var(--hd-o-sang), var(--hd-o-sang)) 4rem 1rem / 60% .5rem no-repeat, linear-gradient(var(--hd-o-sang), var(--hd-o-sang)) 4rem 2rem / 30% .5rem no-repeat; }
@keyframes sm-tm-tho { from { opacity: .55; } to { opacity: 1; } }

/* Bảng rộng: hai cột, chiều cao chỉ còn một nửa, vạch giữa chạy suốt */
@container (min-width: 32rem) {
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container (min-width: 38rem) {
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results:has(.sbh-sr-section-articles) { background: linear-gradient(var(--hd-ke), var(--hd-ke)) 50% 0 / 1px 100% no-repeat, var(--hd-son); }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results:has(.sbh-sr-section-articles) .sbh-sr-section-tools { grid-column: 1; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results:has(.sbh-sr-section-articles) .sbh-sr-section-articles { grid-column: 2; grid-row: 1; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results:has(.sbh-sr-section-articles) .sbh-cu { grid-column: 1; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results:has(.sbh-sr-section-articles) a.sbh-live-result-item:not(.sbh-cu) { grid-column: 2; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results:has(.sbh-sr-section-articles) .sbh-loi { grid-column: 2; grid-row: 2 / span 4; align-self: start; }
}

/* ─── MENU CÔNG CỤ ─── cùng họ với bảng tìm: treo từ mái, viền kép, gian kẻ, ấn 36, cùng màn mờ */
@media (min-width: 769px) {
  html:root body.sm-body header.sm-header.sm-header .sm-header__nav { z-index: 1205; }
  html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-header__nav { z-index: auto; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu { top: 100%; z-index: 1210; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 3px 3px; background: var(--hd-son); border: 1px solid var(--hd-ke-2); border-block-start: 0; border-radius: 0 0 .25rem .25rem; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .7); translate: 0 -.25rem; transition: opacity var(--tm-dong) var(--hd-mem) 100ms, translate var(--tm-dong) var(--hd-mem) 100ms, visibility 0s linear 190ms; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu::before { content: ""; position: absolute; inset: 0 2px 2px; border: 1px solid var(--hd-ke); border-block-start: 0; border-radius: 0 0 .125rem .125rem; pointer-events: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu::after { content: ""; position: static; inset: auto; display: block; align-self: stretch; inline-size: auto; block-size: auto; min-block-size: 4rem; margin: 0; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DCBB74' fill-rule='evenodd' d='M1.1 1.3 12 .8 23 1.1 23.2 12 22.8 23 12 23.2 1 22.9.8 12ZM2.9 2.9 3 21 21 21.1 21.1 3Z'/%3E%3Cpath fill='%23DCBB74' d='M16.4 11.1Q16.3 11.2 16 11.3Q15.8 11.3 15.4 11.1L15.9 11Q15.4 11.6 14.6 12.3Q13.9 12.9 12.9 13.7Q12 14.4 11 15.1Q10 15.8 9 16.5Q7.9 17.1 7 17.6L7 17.5H7.6Q7.6 18 7.4 18.4Q7.3 18.7 7 18.8L6.3 17.2Q6.3 17.2 6.4 17.2Q6.5 17.2 6.6 17.1Q6.8 17.1 6.9 17Q7.7 16.6 8.5 15.9Q9.4 15.3 10.4 14.5Q11.3 13.7 12.1 12.9Q12.9 12.1 13.6 11.3Q14.3 10.6 14.8 10ZM12.5 9.1Q12.5 9.2 12.2 9.3Q12 9.3 11.7 9.2L12.1 9.1Q11.8 9.5 11.2 10Q10.6 10.5 9.9 11Q9.3 11.5 8.6 12Q7.9 12.4 7.2 12.8L7.2 12.6H7.9Q7.8 13.2 7.7 13.5Q7.5 13.9 7.3 14L6.5 12.4Q6.5 12.4 6.7 12.4Q6.9 12.4 7 12.3Q7.5 12 8.1 11.5Q8.7 11 9.2 10.4Q9.8 9.8 10.2 9.2Q10.6 8.6 10.9 8.2ZM6.7 17.3Q7.3 17.3 8.4 17.2Q9.5 17.1 10.9 17Q12.3 16.9 13.9 16.8Q15.5 16.7 17.2 16.5L17.2 16.8Q15.5 17.1 12.9 17.6Q10.3 18 7 18.5ZM7 12.5Q7.6 12.5 8.7 12.5Q9.7 12.5 11 12.4Q12.3 12.3 13.7 12.2L13.7 12.5Q12.7 12.7 11 13Q9.4 13.4 7.5 13.7ZM10.4 5Q11.3 5.3 11.8 5.6Q12.3 6 12.5 6.3Q12.8 6.7 12.8 7Q12.8 7.3 12.6 7.5Q12.4 7.7 12.2 7.8Q11.9 7.8 11.6 7.6Q11.5 7.2 11.3 6.7Q11.1 6.3 10.8 5.8Q10.5 5.4 10.3 5.1ZM14.3 14Q15.5 14.5 16.2 15.1Q17 15.6 17.4 16.2Q17.9 16.7 18.1 17.2Q18.3 17.7 18.3 18.1Q18.3 18.5 18.1 18.8Q18 19 17.7 19Q17.4 19 17.1 18.8Q17 18.2 16.7 17.6Q16.4 16.9 15.9 16.3Q15.5 15.7 15.1 15.1Q14.6 14.6 14.2 14.1ZM17.4 6.7Q17.4 6.7 17.6 6.9Q17.7 7 18 7.2Q18.2 7.4 18.5 7.6Q18.8 7.8 19 8Q18.9 8.1 18.8 8.2Q18.7 8.3 18.6 8.3H5.2L5 7.8H16.5Z'/%3E%3C/svg%3E") right 1rem center / 2.25rem no-repeat; opacity: .8; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu > li:last-child { grid-column: auto; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu > li:is(:hover, :focus-within) > .sub-menu { translate: 0 0; transition: opacity var(--tm-mo) var(--hd-mem) 60ms, translate var(--tm-mo) var(--hd-mem) 60ms, visibility 0s linear 60ms; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li, html:root body.sm-body header.sm-header.sm-header .sm-header__menu > li:hover > .sub-menu li, html:root body.sm-body header.sm-header.sm-header .sm-header__menu > li:focus-within > .sub-menu li { background: none; border-block-end: 1px solid var(--tm-ke); border-inline-end: 1px solid var(--tm-ke); }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu > li:nth-child(4n) { border-inline-end: 0; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu > li:nth-child(n+9) { border-block-end: 0; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li a, html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li a:hover, html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li.current-menu-item a { gap: .75rem; min-block-size: 4rem; padding: 0 1rem; color: var(--hd-nga); background-color: transparent; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li a:hover, html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li.current-menu-item a { color: var(--hd-vang); background-color: var(--hd-o-sang); }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li a::before { inline-size: 2.25rem; block-size: 2.25rem; box-sizing: border-box; border: 1px solid var(--hd-ke-2); border-radius: .125rem; background-color: var(--hd-nen); background-size: 1.375rem; opacity: 1; transition: border-color var(--tm-dong) var(--hd-mem); }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li a:hover::before, html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li.current-menu-item a::before { border-color: var(--hd-vang); }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu li a:focus-visible { outline: 2px solid var(--hd-vang); outline-offset: -3px; }

  /* Mỗi lúc một lớp: tìm đang mở thì menu không thả; Esc đóng menu đang mở bằng phím */
  html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-header__menu > li > .sub-menu, html:root body.sm-body header.sm-header.sm-header .sm-header__menu > li.is-dong > .sub-menu { display: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu > li.is-dong > a::before { transform: rotate(45deg); }
  html:root body.sm-body header.sm-header.sm-header .sm-header__inner:has(.sm-header__menu > li.menu-item-has-children:is(:hover, :focus-within):not(.is-dong)) .sm-hsearch-backdrop { opacity: 1; visibility: visible; transition-delay: 60ms, 60ms; }
}

/* ─── ĐIỆN THOẠI ─── cùng vật, trải hết màn: ô là băng đầu, chân dính đáy */
@media (max-width: 768px) {
  html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-header__search { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; z-index: 1210; display: flex; flex-direction: column; gap: 0; inline-size: auto; max-inline-size: none; block-size: calc(100dvh - var(--header-bar)); margin: 0; padding: 0; background: var(--hd-son); animation: sm-tm-phu var(--tm-mo) var(--hd-mem); }
  @keyframes sm-tm-phu { from { opacity: 0; transform: translateY(-.25rem); } }
  html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-hsearch-form { position: relative; top: auto; right: auto; inline-size: 100%; flex: none; block-size: 3rem; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form { block-size: 3rem; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-input { font-size: 1rem; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-typewriter { font-size: 1rem; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results, html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results.is-active { display: flex; flex-direction: column; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results { position: static; flex: 1 1 auto; inline-size: auto; min-block-size: 0; max-block-size: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results.is-active { transition: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-backdrop { display: none; }
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-section-label { padding-inline: 1rem; }
  html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-item, .sbh-sr-history) { padding-inline: 1rem; }
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-history { padding-inline-end: 0; }
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-wrap { margin-inline: 1rem; }
  html:root body.sm-body header.sm-header.sm-header :is(.sbh-sr-section-label, .sbh-live-result-item, .sbh-sr-history, .sbh-sr-trending-wrap) { flex: none; }
  html:root body.sm-body header.sm-header.sm-header :is(.sbh-sr-featured, .sbh-live-result-footer) { flex: none; bottom: 0; margin: auto 0 0; border-radius: 0; }
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured { grid-template-columns: minmax(0, 1fr) auto; row-gap: .125rem; }
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured-text { grid-column: 1; grid-row: 2; }
  html:root body.sm-body header.sm-header.sm-header .sbh-sr-featured::after { grid-column: 2; grid-row: 1 / 3; }
  html:root body.sm-body header.sm-header.sm-header :is(.sbh-live-result-empty, .sbh-loi) { padding-inline: 1rem; }

  /* Menu điện thoại: nhóm con cùng lưới, cùng ấn */
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu { gap: 1px; background: var(--tm-ke); }
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-open > .sub-menu { border: 1px solid var(--tm-ke); border-radius: .125rem; }
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu::after { content: ""; display: block; background: var(--hd-o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DCBB74' fill-rule='evenodd' d='M1.1 1.3 12 .8 23 1.1 23.2 12 22.8 23 12 23.2 1 22.9.8 12ZM2.9 2.9 3 21 21 21.1 21.1 3Z'/%3E%3Cpath fill='%23DCBB74' d='M16.4 11.1Q16.3 11.2 16 11.3Q15.8 11.3 15.4 11.1L15.9 11Q15.4 11.6 14.6 12.3Q13.9 12.9 12.9 13.7Q12 14.4 11 15.1Q10 15.8 9 16.5Q7.9 17.1 7 17.6L7 17.5H7.6Q7.6 18 7.4 18.4Q7.3 18.7 7 18.8L6.3 17.2Q6.3 17.2 6.4 17.2Q6.5 17.2 6.6 17.1Q6.8 17.1 6.9 17Q7.7 16.6 8.5 15.9Q9.4 15.3 10.4 14.5Q11.3 13.7 12.1 12.9Q12.9 12.1 13.6 11.3Q14.3 10.6 14.8 10ZM12.5 9.1Q12.5 9.2 12.2 9.3Q12 9.3 11.7 9.2L12.1 9.1Q11.8 9.5 11.2 10Q10.6 10.5 9.9 11Q9.3 11.5 8.6 12Q7.9 12.4 7.2 12.8L7.2 12.6H7.9Q7.8 13.2 7.7 13.5Q7.5 13.9 7.3 14L6.5 12.4Q6.5 12.4 6.7 12.4Q6.9 12.4 7 12.3Q7.5 12 8.1 11.5Q8.7 11 9.2 10.4Q9.8 9.8 10.2 9.2Q10.6 8.6 10.9 8.2ZM6.7 17.3Q7.3 17.3 8.4 17.2Q9.5 17.1 10.9 17Q12.3 16.9 13.9 16.8Q15.5 16.7 17.2 16.5L17.2 16.8Q15.5 17.1 12.9 17.6Q10.3 18 7 18.5ZM7 12.5Q7.6 12.5 8.7 12.5Q9.7 12.5 11 12.4Q12.3 12.3 13.7 12.2L13.7 12.5Q12.7 12.7 11 13Q9.4 13.4 7.5 13.7ZM10.4 5Q11.3 5.3 11.8 5.6Q12.3 6 12.5 6.3Q12.8 6.7 12.8 7Q12.8 7.3 12.6 7.5Q12.4 7.7 12.2 7.8Q11.9 7.8 11.6 7.6Q11.5 7.2 11.3 6.7Q11.1 6.3 10.8 5.8Q10.5 5.4 10.3 5.1ZM14.3 14Q15.5 14.5 16.2 15.1Q17 15.6 17.4 16.2Q17.9 16.7 18.1 17.2Q18.3 17.7 18.3 18.1Q18.3 18.5 18.1 18.8Q18 19 17.7 19Q17.4 19 17.1 18.8Q17 18.2 16.7 17.6Q16.4 16.9 15.9 16.3Q15.5 15.7 15.1 15.1Q14.6 14.6 14.2 14.1ZM17.4 6.7Q17.4 6.7 17.6 6.9Q17.7 7 18 7.2Q18.2 7.4 18.5 7.6Q18.8 7.8 19 8Q18.9 8.1 18.8 8.2Q18.7 8.3 18.6 8.3H5.2L5 7.8H16.5Z'/%3E%3C/svg%3E") center / 1.75rem no-repeat; }
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu li { background: var(--hd-o); }
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu li a, html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu li a:hover { gap: .625rem; min-block-size: 3.25rem; padding: .25rem .625rem; background: none; }
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu li a::before { inline-size: 1.75rem; block-size: 1.75rem; box-sizing: border-box; border: 1px solid var(--hd-ke-2); border-radius: .125rem; background-color: var(--hd-nen); background-size: 1.125rem; opacity: 1; }
  html:root body.sm-body .sm-mobile-menu.sm-mobile-menu .sm-mobile-menu__list .sub-menu li a:hover { color: var(--hd-vang); background: var(--hd-o-sang); }
}

@media (min-width: 34rem) and (max-width: 768px) { html:root body.sm-body header.sm-header.sm-header .sbh-sr-trending-wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  html:root body.sm-body header.sm-header.sm-header :is(.sm-hsearch-results, .sm-hsearch-results.is-active, .sm-hsearch-backdrop, .sm-hsearch-backdrop.is-active, .sub-menu, .sbh-tai, .sbh-tc, .sbh-mui), html:root body.sm-body.sm-hsearch-open header.sm-header.sm-header .sm-header__search, html:root body.sm-body header.sm-header.sm-header .sm-hsearch-form::after { transition: none; animation: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-hsearch-results { transform: none; }
  html:root body.sm-body header.sm-header.sm-header .sm-header__menu .sub-menu { translate: 0 0; }
}