/* Kho thực đơn mẫu: lưới thẻ dày, rê chuột xem bữa của ngày đầu, lọc phía trình duyệt */
.tm { max-width: 1440px; margin: var(--s5) auto var(--s6); padding: 0 16px; }
.tm h1 { display: flex; align-items: center; gap: 8px; margin: 0; }
.tm-dau p { color: var(--ink-2); margin: 4px 0 var(--s3); max-width: 80ch; }
.tm-loc { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); margin-bottom: var(--s4); }
.tm-loc__tim { position: relative; display: flex; align-items: center; }
.tm-loc__tim .bt { position: absolute; left: 10px; color: var(--ink-3); margin: 0; }
.tm-loc__tim input { width: 100%; font: 400 var(--base) var(--f-body); padding: 8px 10px 8px 36px; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.tm-loc__tim input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.tm-loc__hang { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
.tm-loc__td { font: 600 var(--xs) var(--f-body); color: var(--ink-3); min-width: 72px; }
.tm-loc__hang button { font: 500 var(--xs) var(--f-body); padding: 3px 10px; border: 1px solid var(--rule); border-radius: 99px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.tm-loc__hang button:hover { border-color: var(--brand); color: var(--brand); }
.tm-loc__hang button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tm-loc__chon { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--xs) var(--f-body); color: var(--ink-3); margin-right: 12px; }
.tm-loc__chon select { font: 400 var(--sm) var(--f-body); padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.tm-dem { margin-left: auto; font-size: var(--xs); color: var(--ink-3); }
.tm-luoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tm-o { position: relative; display: grid; align-content: start; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.tm-o:hover { border-color: var(--brand); box-shadow: var(--pop); }
.tm-o[hidden] { display: none; }
.tm-o__mo { display: grid; gap: 5px; padding: 12px 14px 8px; color: var(--ink); text-decoration: none; }
.tm-o__ten { font: 700 var(--md) var(--f-display); line-height: 1.3; }
.tm-o__so { font-size: var(--sm); color: var(--ink-2); } .tm-o__so b { color: var(--brand); font-size: var(--md); }
.tm-o__plg { font-size: var(--xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tm-o__mt { font-size: var(--xs); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-o__the, .tm-o__ma { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.tm-the { font: 500 var(--xxs) var(--f-body); padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.tm-the--dt { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.tm-the--ma { background: color-mix(in srgb, var(--link) 10%, var(--surface)); color: var(--link); font-weight: 700; }
.tm-the--an { background: var(--ink-3); color: #fff; }
.tm-plg { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.tm-plg i { display: block; height: 100%; } .tm-plg__dam { background: var(--dam); } .tm-plg__beo { background: var(--beo); } .tm-plg__bot { background: var(--bot); }
.tm-o__nut { display: flex; gap: 6px; padding: 0 14px 12px; }
.tm-o__nut .nut { text-decoration: none; }
.tm-o__xem { display: none; position: absolute; z-index: 30; left: 8px; right: 8px; top: calc(100% - 46px); padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: var(--xs); }
.tm-o:hover .tm-o__xem, .tm-o:focus-within .tm-o__xem { display: block; }
.tm-o:hover .tm-o__nut { position: relative; z-index: 31; }
.tm-o__xem p { margin: 4px 0 0; color: var(--ink-2); } .tm-o__xem p span { font-weight: 700; color: var(--ink); margin-right: 6px; }
.tm-o__xem small { display: block; color: var(--ink-3); margin-top: 4px; }
.tm-trong { padding: var(--s4); background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r-md); color: var(--ink-2); }
.tm-trong p { margin: 4px 0; }
.tm-ghi { font-size: var(--xs); color: var(--ink-3); margin-top: var(--s4); max-width: 100ch; }
/* chi tiết */
.tm-ve a { font-size: var(--sm); }
.tm-ct-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.tm-ct-dau h1 { font-size: var(--xl); margin: 6px 0 4px; }
.tm-ct-mt { color: var(--ink-2); margin: 0; max-width: 90ch; }
.tm-ct-mo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tm-ct-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 var(--s4); }
.tm-ct-so > div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 12px; display: grid; gap: 4px; }
.tm-ct-so dt { font-size: var(--xs); color: var(--ink-3); } .tm-ct-so dd { margin: 0; font: 700 var(--lg) var(--f-body); font-variant-numeric: tabular-nums; } .tm-ct-so dd small { font-weight: 400; font-size: var(--xs); color: var(--ink-3); }
.tm-ct-ngay { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: var(--s3); }
@media (max-width: 600px) { .tm-ct-ngay { grid-template-columns: 1fr; } }
.tm-ngay { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--brand); border-radius: var(--r-md); padding: 10px 12px; }
.tm-ngay h2 { font-size: var(--md); margin: 0 0 6px; } .tm-ngay h2 small { font: 400 var(--xs) var(--f-body); color: var(--ink-3); }
.tm-bang { width: 100%; border-collapse: collapse; font-size: var(--sm); }
.tm-bang th, .tm-bang td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tm-bang thead th { font-size: var(--xs); color: var(--ink-3); }
.tm-bang tbody th { font-weight: 700; text-transform: uppercase; font-size: var(--xs); width: 90px; }
.tm-bang tbody th small, .tm-bang td small { display: block; font-weight: 400; text-transform: none; color: var(--ink-3); font-size: var(--xxs); }
.tm-bang .so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-bang__dau-bua > * { border-top: 2px solid var(--rule); }

/* ---------- chuyển động nhẹ (thêm 13/11) */
@media (prefers-reduced-motion: no-preference) {
  /* thẻ thực đơn: nhấc nhẹ và bóng đậm hơn khi rê chuột; z-index giữ ô xem trước nổi trên thẻ bên cạnh */
  .tm-o { transition: border-color var(--dong-tg) var(--dong-em), box-shadow var(--dong-tg) var(--dong-em), transform var(--dong-tg) var(--dong-em); }
  .tm-o:hover { transform: translateY(-3px); z-index: 2; box-shadow: 0 10px 22px -12px rgba(60, 20, 15, .3); }

  /* bộ lọc, nút, ô tìm: đổi màu êm; nút ấn xuống nhẹ */
  .tm-loc__hang button { transition: background-color var(--dong-nhanh) var(--dong-em), border-color var(--dong-nhanh) var(--dong-em), color var(--dong-nhanh) var(--dong-em), transform var(--dong-nhanh) var(--dong-em); }
  .tm-loc__hang button:active { transform: scale(.97); }
  .tm-o__nut .nut { transition: background-color var(--dong-nhanh) var(--dong-em), border-color var(--dong-nhanh) var(--dong-em), color var(--dong-nhanh) var(--dong-em); }
  .tm-loc__tim input { transition: border-color var(--dong-nhanh) var(--dong-em), box-shadow var(--dong-nhanh) var(--dong-em); }
}