/* Trang /tim/ (tiền tố tm-; tk- là của trang tài khoản trong web.css). Bộ lọc trái, kết quả bảng dày hoặc lưới ô bên phải.
   Ưu tiên laptop và màn lớn; màn hẹp: bộ lọc gập lại, bảng bớt cột, không cuộn ngang cả trang. Dùng biến màu của web.css. */

.trang-tim .thanh-tren .tim-nhanh { display: none; }   /* trang có ô tìm riêng, khỏi hai ô trên một màn hình */
.tm { max-width: 1480px; padding-top: var(--s4); padding-bottom: var(--s6); }

/* đầu trang: tiêu đề + ô tìm cùng một hàng */
.tm-dau { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s5); margin-bottom: var(--s4); }
.tm-h1 { display: flex; align-items: center; white-space: nowrap; font-size: var(--xl); }
.tm-h1 .bt { color: var(--link); width: 22px; height: 22px; }
.tm-meo { grid-column: 2; margin: 0; font-size: var(--xxs); color: var(--ink-3); }
.tm-meo kbd { font: 500 var(--xxs) var(--f-body); color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 5px; background: var(--surface); }
@media (max-width: 640px) {
  .tm-dau { grid-template-columns: minmax(0, 1fr); }
  .tm-meo { grid-column: 1; }
}

/* ô tìm */
.tm-o { position: relative; display: flex; align-items: center; max-width: 880px; }
.tm-o > .bieu-tuong { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.tm-o input { width: 100%; font: inherit; font-size: var(--md); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--brand); border-radius: var(--r-md); padding: 9px 42px 9px 40px; }
.tm-o input::placeholder { color: var(--ink-3); }
.tm-o input:focus { border-color: var(--link); outline-offset: 0; }
.tm-o input::-webkit-search-cancel-button { display: none; }
.tm-xoa-q { position: absolute; right: 6px; background: none; border: 0; color: var(--ink-3); padding: 6px; border-radius: var(--r-sm); cursor: pointer; display: flex; }
.tm-xoa-q:hover { color: var(--ink); background: var(--surface-2); }
.tm-xoa-q[hidden] { display: none; }

/* khung hai cột */
.tm-than { display: grid; gap: var(--s3) var(--s5); align-items: start; }
@media (min-width: 900px) { .tm-than { grid-template-columns: 252px minmax(0, 1fr); } }
@media (min-width: 1600px) { .tm-than { grid-template-columns: 272px minmax(0, 1fr); } }

/* ---------- bộ lọc */
.tm-loc { min-width: 0; }
.tm-loc__nut { display: inline-flex; align-items: center; font: 500 var(--sm) var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s2) var(--s3); cursor: pointer; }
.tm-loc__nut .bt { color: var(--link); }
.tm-loc__noi { display: none; margin-top: var(--s2); }
.tm-loc.mo .tm-loc__noi { display: block; }
@media (min-width: 900px) {
  .tm-loc__nut { display: none; }
  .tm-loc__noi { display: block; margin: 0; }
}
.tm-fc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); margin-bottom: var(--s2); }
.tm-fc h2 { display: flex; align-items: center; font: 600 var(--xxs)/1.4 var(--f-body); color: var(--ink-2); letter-spacing: .02em; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); padding: 5px var(--s3); border-radius: var(--r-md) var(--r-md) 0 0; margin: 0; }
.tm-fc h2 .bt { color: var(--link); width: 14px; height: 14px; margin-right: 6px; }
.tm-fc h2 .dem { margin-left: auto; }
.tm-fc ul { list-style: none; margin: 0; padding: var(--s1) 0; }
.tm-fc__o { padding: 6px var(--s2) 2px; }
.tm-fc__o input { width: 100%; font: 400 var(--xs) var(--f-body); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 4px 8px; }
.tm-fc__o input:focus { border-color: var(--link); outline-offset: 0; }
/* mỗi dòng lọc: biểu tượng | tên (+ loại nhỏ ở dòng dưới) | số */
.tm-fc__d { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; width: 100%; text-align: left;
  font: 400 var(--xs)/1.3 var(--f-body); color: var(--ink); background: none; border: 0; padding: 4px var(--s3); cursor: pointer; }
.tm-fc__d .bt { width: 15px; height: 15px; margin: 0; color: var(--ink-3); align-self: start; margin-top: 1px; }
.tm-fc__d:hover:not(:disabled) { background: var(--surface-2); }
.tm-fc__d[aria-pressed="true"] { background: color-mix(in srgb, var(--link) 11%, transparent); font-weight: 600; box-shadow: inset 3px 0 0 var(--link); }
.tm-fc__d[aria-pressed="true"] .bt { color: var(--link); }
.tm-fc__d:disabled { color: var(--ink-3); cursor: default; opacity: .6; }
.tm-fc__t { display: flex; flex-direction: column; min-width: 0; }
.tm-fc__ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-fc__phu { color: var(--ink-3); font-size: 11px; font-weight: 400; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-fc__d .dem { margin: 0; align-self: start; }
.tm-fc__trong { padding: 3px var(--s3); color: var(--ink-3); font-size: var(--xs); }
.tm-fc__them { display: flex; align-items: center; gap: 4px; width: 100%; font: 500 var(--xxs) var(--f-body); color: var(--link); background: none; border: 0; border-top: 1px solid var(--rule); padding: 6px var(--s3); cursor: pointer; }
.tm-fc__them .bt { width: 12px; height: 12px; margin: 0; }
.tm-fc__them[aria-expanded="true"] .bt { transform: rotate(180deg); }
.tm-fc__them:hover { background: var(--surface-2); }
.tm-fc__them[hidden] { display: none; }
.tm-bo-loc { font: 500 var(--xs) var(--f-body); color: var(--link); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 5px var(--s3); cursor: pointer; }
.tm-bo-loc:hover { border-color: var(--link); }
.tm-bo-loc[hidden] { display: none; }

/* ---------- thanh trên kết quả: số kết quả | sắp xếp | bảng/lưới, một hàng */
.tm-kq { min-width: 0; }
.tm-thanh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s2); padding: 6px var(--s3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.tm-tong { font: 600 var(--md)/1.3 var(--f-body); margin: 0; flex: 1 1 auto; min-width: 12ch; }
.tm-tong small { font-weight: 400; font-size: var(--xs); color: var(--ink-3); }
.tm-sx, .tm-xem { display: flex; align-items: center; flex-wrap: nowrap; }
.tm-sx__nhan { display: inline-flex; align-items: center; color: var(--ink-3); font-size: var(--xs); margin-right: 6px; white-space: nowrap; }
.tm-sx__nhan .bt { width: 14px; height: 14px; }
.tm-sx button, .tm-xem button { display: inline-flex; align-items: center; font: 400 var(--xs)/1.5 var(--f-body); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); padding: 2px 9px; cursor: pointer; white-space: nowrap; margin-left: -1px; }
.tm-sx button:first-of-type, .tm-xem button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.tm-sx button:last-child, .tm-xem button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tm-sx button:hover:not(:disabled), .tm-xem button:hover { background: var(--surface-2); }
.tm-sx button[aria-pressed="true"], .tm-xem button[aria-pressed="true"] { position: relative; color: var(--ink); font-weight: 600; border-color: var(--link); background: color-mix(in srgb, var(--link) 11%, var(--surface)); }
.tm-sx button:disabled { opacity: .45; cursor: default; }
.tm-xem .bt { width: 14px; height: 14px; }
@media (max-width: 1180px) and (min-width: 900px) { .tm-tong { flex-basis: 100%; } }
@media (max-width: 760px) {
  .tm-sx { flex-wrap: wrap; row-gap: 4px; }
  .tm-sx__nhan { flex-basis: 100%; }
}

/* đang lọc: các nhãn bấm để bỏ */
.tm-loc-dang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 var(--s2); font-size: var(--xs); }
.tm-loc-dang[hidden] { display: none; }
.tm-loc-dang__nhan { color: var(--ink-3); }
.tm-chip { font: 500 var(--xxs)/1.6 var(--f-body); color: var(--ink); background: color-mix(in srgb, var(--link) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--link) 40%, var(--rule)); border-radius: 999px; padding: 0 9px; cursor: pointer; }
.tm-chip:hover { border-color: var(--link); color: var(--link); }
.tm-chip span { color: var(--ink-3); margin-left: 2px; }
.tm-chip--bo { background: none; color: var(--link); }

.tm-ghi-chu { font-size: var(--xs); color: var(--ink-3); margin: 0 0 var(--s2); }
.tm-ghi-chu[hidden] { display: none; }
.tm-vd a { margin: 0 2px; }

.tm-tai { color: var(--ink-3); font-size: var(--sm); padding: var(--s5) 0; }
.tm-tai::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid var(--rule); border-top-color: var(--link); border-radius: 50%; margin-right: var(--s2); vertical-align: -1px; animation: tm-quay .8s linear infinite; }
@keyframes tm-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tm-tai::before { animation: none; border-top-color: var(--rule); } }
.tm-trong { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s4); color: var(--ink-2); font-size: var(--sm); }
.tm-trong p { margin: 0 0 var(--s2); }
.tm-trong ul { margin: 0; padding-left: var(--s5); }
.tm-trong li { margin-bottom: var(--s1); }
.tm-thieu { color: var(--ink-3); }

/* ---------- bảng kết quả */
.tm-bang { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: var(--xs); line-height: 1.35; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.tm-bang thead th { position: sticky; top: var(--cao-dinh); z-index: 2; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); font: 600 var(--xxs)/1.4 var(--f-body); color: var(--ink-2); text-align: left; padding: 6px var(--s2); white-space: nowrap; border-bottom: 1px solid var(--rule); }
.tm-bang thead th:first-child { border-radius: var(--r-md) 0 0 0; padding-left: var(--s3); }
.tm-bang thead th:last-child { border-radius: 0 var(--r-md) 0 0; }
.tm-bang thead .dv { font-weight: 400; color: var(--ink-3); }
.tm-bang thead th.c-dam { color: var(--dam); } .tm-bang thead th.c-beo { color: var(--beo-chu); } .tm-bang thead th.c-bot { color: var(--bot); }
.tm-th-sx { display: inline-flex; align-items: baseline; gap: 3px; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tm-th-sx:hover { color: var(--link); }
.tm-mui { font-size: 9px; color: var(--ink-3); }
th[aria-sort] .tm-mui { color: var(--link); }
.tm-bang td { padding: 4px var(--s2); vertical-align: middle; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.tm-bang td:first-child { padding-left: var(--s3); }
.tm-bang tbody tr:first-child td { border-top: 0; }
.tm-bang tbody tr:hover > td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.tm-ten { min-width: 14ch; }
.tm-ten a { font-weight: 500; overflow-wrap: anywhere; text-decoration: none; }
.tm-ten a:hover span { text-decoration: underline; }
.tm-ten .bt-ds { margin-right: 6px; vertical-align: -.2em; }
.tm-ten mark, .tm-the mark { background: color-mix(in srgb, var(--beo) 32%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.tm-phu { display: none; font-size: var(--xxs); color: var(--ink-3); }
.tm-c-loai { white-space: nowrap; color: var(--ink-2); width: 1%; }
.tm-c-loai .cham { margin-right: 5px; }
.tm-c-nhom { color: var(--ink-2); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-kcal { text-align: right; white-space: nowrap; width: 1%; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm-bang thead th.tm-kcal, .tm-bang thead th.tm-g { text-align: right; }
.tm-kcal .so { color: var(--ink); font-weight: 600; }
.tm-kcal .so.so-uoc { color: var(--uoc); }
.tm-kcal small { font-size: 11px; color: var(--ink-3); margin-left: 2px; }
.tm-g { text-align: right; white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.tm-bang td.tm-g .so { color: var(--ink); }
.tm-bang td.c-dam { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--dam) 25%, transparent); }
.tm-vach { width: 1%; min-width: 64px; }
.tm-vach .vach { width: 60px; height: 4px; }
.tm-bang thead th.tm-vach { font-weight: 400; color: var(--ink-3); }
.tm-c-nguon { white-space: nowrap; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; padding-right: var(--s3) !important; }
.tm-nguon { color: var(--ink-3); font-size: var(--xxs); }
.tm-nguon--vdd { font: 500 var(--xxs)/1.4 var(--f-body); color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: 3px; padding: 0 5px; }
.tm-nguon--rni { font: 500 var(--xxs)/1.4 var(--f-body); color: var(--link); border: 1px solid color-mix(in srgb, var(--link) 45%, var(--rule)); border-radius: 3px; padding: 0 5px; }
.tm-bai { font: 500 var(--xxs)/1.5 var(--f-body); color: var(--link); background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 6px; margin-left: var(--s1); cursor: pointer; white-space: nowrap; }
.tm-bai:hover { border-color: var(--link); }
.tm-bai[aria-expanded="true"] { background: color-mix(in srgb, var(--link) 12%, transparent); border-color: var(--link); }
.tm-con td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tm-con .tm-ten { padding-left: var(--s6) !important; }
.tm-con .tm-ten a { font-weight: 400; }
.tm-so-bai { font-size: var(--xxs); color: var(--ink-3); font-weight: 400; }

/* bớt cột theo bề rộng: thông tin bị ẩn vẫn có ở dòng phụ dưới tên và trong thẻ nổi */
@media (max-width: 1279px) {
  .tm-c-nhom, .tm-c-nguon { display: none; }
  .tm-phu { display: block; }
  .tm-c-loai { display: none; }
}
@media (max-width: 760px) {
  .tm-g, .tm-vach { display: none; }
  .tm-bang thead th { position: static; }
  .tm-bang td, .tm-bang thead th { padding-left: 6px; padding-right: 6px; }
}

/* ---------- lưới ô */
.tm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 6px; }
.tm-the { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 7px var(--s3) 8px; font-size: var(--xs); }
.tm-the:hover { border-color: color-mix(in srgb, var(--link) 50%, var(--rule)); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
.tm-the__dau { line-height: 1.3; }
.tm-the__dau a { font-weight: 600; font-size: var(--sm); text-decoration: none; overflow-wrap: anywhere; }
.tm-the__dau a:hover span { text-decoration: underline; }
.tm-the__dau .bt-ds { margin-right: 5px; vertical-align: -.2em; }
.tm-the__phu { color: var(--ink-3); font-size: var(--xxs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-the__phu .cham { margin-right: 4px; }
.tm-the__so { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s2); margin-top: 2px; }
.tm-the__so .tm-kcal { width: auto; text-align: left; }
.tm-the__so .tm-kcal .so { font-size: var(--md); }
.tm-the__g { display: inline-flex; gap: 6px; font-size: var(--xxs); font-variant-numeric: tabular-nums; }
.tm-the__g .c-beo { color: var(--beo-chu); }
.tm-the .vach { height: 3px; margin-top: 2px; }
.tm-the__cuoi { margin-top: auto; padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-the__con { list-style: none; margin: 4px 0 0; padding: 4px 0 0; border-top: 1px dashed var(--rule); font-size: var(--xxs); }
.tm-the__con li { display: flex; justify-content: space-between; gap: var(--s2); padding: 1px 0; }
.tm-the__con .tm-kcal { width: auto; }
.tm-the__con .tm-kcal .so { font-size: var(--xxs); }

/* ---------- thẻ nổi khi rê chuột (vị trí do JS kẹp trong màn hình) */
.tm-noi { position: fixed; z-index: 40; width: max-content; max-width: min(360px, calc(100vw - 16px)); min-width: 240px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--pop); padding: var(--s3); font-size: var(--xs); line-height: 1.45; pointer-events: none; }
.tm-noi[hidden] { display: none; }
.tm-noi__phu { color: var(--ink-3); font-size: var(--xxs); margin-bottom: var(--s2); }
.tm-noi__phu .cham { margin-right: 4px; }
.tm-noi__bang { width: 100%; border-collapse: collapse; margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.tm-noi__bang th { font-weight: 400; text-align: left; padding: 2px 0; color: inherit; }
.tm-noi__bang td { text-align: right; padding: 2px 0; color: var(--ink); }
.tm-noi__bang tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.tm-noi__bang tr.c-beo th { color: var(--beo-chu); }
.tm-noi__ghi { color: var(--ink-2); font-size: var(--xxs); margin-bottom: var(--s1); }
.tm-noi__vach { margin-bottom: var(--s2); font-size: var(--xxs); }
.tm-noi__vach .vach { height: 6px; margin-bottom: 3px; }
.tm-noi__vach .c-beo { color: var(--beo-chu); }
.tm-noi__nguon { font-size: var(--xxs); color: var(--ink-2); margin-bottom: var(--s1); }
.tm-noi__nguon .tm-nguon { white-space: normal; }

.tm-them { margin-top: var(--s3); }
.tm-them[hidden] { display: none; }
.nut-them { font: 500 var(--sm) var(--f-body); color: var(--link); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s2) var(--s4); cursor: pointer; }
.nut-them:hover { border-color: var(--link); }