/* Trang tính thực đơn (mau/thuc_don.html, tinh/thuc_don.js). Bảng tính dày, ưu tiên laptop 15,6" trở lên. */
.td { max-width: none; padding: 0 var(--le) 120px; }
:root {
  --vai-dam: #C23A22; --vai-rau: #3F8A1E; --vai-canh: #1E7FA8; --vai-hon_hop: #D9711C; --vai-tinh_bot: #A97B12;
  --vai-trang_mieng: #C2417A; --vai-do_uong: #0F8C9A; --vai-an_vat: #8A5A2B; --vai-kem: #6B6B6B; --vai-khac: #8C7F78;
  --bua-sang: #FFE9A8; --bua-trua: #FFD2C2; --bua-xe: #E3F0C8; --bua-toi: #D6E2F5; --bua-phu: #EFE0F5; --bua-khac: #F1E6DF;
  --nh-0: #DA251D; --nh-1: #3F8A1E; --nh-2: #E0A21A; --nh-3: #2F74B5; --nh-4: #C2417A; --nh-5: #0F8C9A; --nh-6: #8A5A2B; --nh-7: #7A5BA6;
  /* nhóm thực phẩm của tháp dinh dưỡng: lương thực, rau, quả, đạm, sữa, dầu mỡ, đường, muối, khác */
  --th-luong_thuc: #C9961A; --th-rau: #3E9B47; --th-qua: #EE7F1F; --th-dam: #B23A2A; --th-sua: #4A8BD0;
  --th-beo: #93A12C; --th-duong: #CF4F98; --th-muoi: #7468B3; --th-khac: #9A938F;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --th-luong_thuc: #E5BC4E; --th-rau: #7FCB7A; --th-qua: #F7A25A; --th-dam: #F07C68; --th-sua: #86B6EA;
  --th-beo: #C4D05E; --th-duong: #EE8AC2; --th-muoi: #A99EE0; --th-khac: #B4ACA8;
  --vai-dam: #F07A5E; --vai-rau: #8FD16A; --vai-canh: #6FB8E0; --vai-hon_hop: #F0A35E; --vai-tinh_bot: #E2C35A;
  --vai-trang_mieng: #EE8AB5; --vai-do_uong: #5CC6D6; --vai-an_vat: #D9A46B; --vai-kem: #B0B0B0; --vai-khac: #A99D97;
  --bua-sang: #332D1C; --bua-trua: #342722; --bua-xe: #262E1F; --bua-toi: #1F2630; --bua-phu: #2B2430; --bua-khac: #2A2725;
  --nh-0: #FF6A5A; --nh-1: #8FD16A; --nh-2: #F2C94C; --nh-3: #7FB2E8; --nh-4: #EE8AB5; --nh-5: #5CC6D6; --nh-6: #D9A46B; --nh-7: #B49BDB;
} }
:root[data-theme="dark"] {
  --th-luong_thuc: #E5BC4E; --th-rau: #7FCB7A; --th-qua: #F7A25A; --th-dam: #F07C68; --th-sua: #86B6EA;
  --th-beo: #C4D05E; --th-duong: #EE8AC2; --th-muoi: #A99EE0; --th-khac: #B4ACA8;
  --vai-dam: #F07A5E; --vai-rau: #8FD16A; --vai-canh: #6FB8E0; --vai-hon_hop: #F0A35E; --vai-tinh_bot: #E2C35A;
  --vai-trang_mieng: #EE8AB5; --vai-do_uong: #5CC6D6; --vai-an_vat: #D9A46B; --vai-kem: #B0B0B0; --vai-khac: #A99D97;
  --bua-sang: #332D1C; --bua-trua: #342722; --bua-xe: #262E1F; --bua-toi: #1F2630; --bua-phu: #2B2430; --bua-khac: #2A2725;
  --nh-0: #FF6A5A; --nh-1: #8FD16A; --nh-2: #F2C94C; --nh-3: #7FB2E8; --nh-4: #EE8AB5; --nh-5: #5CC6D6; --nh-6: #D9A46B; --nh-7: #B49BDB;
}

/* ---------- thanh đầu: tên thực đơn · Mẫu · Xuất · Hiển thị · Chế độ · trang 1/2 · Hoàn tác */
.td-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 15; background: var(--ground); }
.td-ten input { font: 700 var(--lg)/1.2 var(--f-display); color: var(--ink); background: transparent; border: 1px dashed transparent; border-radius: var(--r-sm); padding: 4px 6px; min-width: 16ch; }
.td-ten input:hover, .td-ten input:focus { border-color: var(--rule); background: var(--surface); }
.td-nut-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.td-menu { position: relative; }
.td-menu__hop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--pop); padding: 6px; display: grid; gap: 2px; }
.td-menu__hop[hidden], .td-goi-y[hidden], .td-thong-bao[hidden] { display: none; }
.td-menu__hop--rong { min-width: 420px; padding: 10px 12px; }
.td-menu__hop > button, .td-menu__tep { text-align: left; font: 400 var(--sm) var(--f-body); color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; }
.td-menu__hop > button:hover, .td-menu__tep:hover { background: var(--surface-2); }
.td-menu__tep input { display: block; margin-top: 4px; font-size: var(--xs); }
.td-menu__hop hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; width: 100%; }
.td-menu__td { margin: 8px 0 4px; font: 700 var(--xs) var(--f-body); color: var(--ink-2); }
.td-menu__td:first-child { margin-top: 0; }
.td-cot-chon { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--sm); }
.td-cot-chon--doc { flex-direction: column; }
.td-cot-chon label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.td-che-do { display: inline-flex; align-items: center; gap: 6px; font-size: var(--xs); color: var(--ink-2); }
.td-che-do select { font: 400 var(--sm) var(--f-body); max-width: 340px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.td-tab { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.td-tab button { font: 500 var(--sm) var(--f-body); border: 0; background: var(--surface); color: var(--ink-2); padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; }
.td-tab button + button { border-left: 1px solid var(--rule); }
.td-tab button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }

/* ---------- thân trang 1: bảng + cột tóm tắt */
.td-than { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; margin-top: var(--s3); }
.td-than[hidden] { display: none; }
.td-than--danh-gia { grid-template-columns: minmax(0, 1100px); }
@media (max-width: 1199px) { .td-than { grid-template-columns: minmax(0, 1fr); } }
.td-tang { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; font-size: var(--xxs); background: var(--surface); }
.td-tang span { padding: 0 8px; color: var(--ink-3); }
.td-tang button { font: 500 var(--xxs) var(--f-body); border: 0; border-left: 1px solid var(--rule); background: none; color: var(--ink-2); padding: 5px 9px; cursor: pointer; }
.td-tang button:hover { background: var(--surface-2); color: var(--ink); }
.td-suat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--xxs); color: var(--ink-3); cursor: help; }
.td-suat input { width: 54px; font: 500 var(--sm) var(--f-body); padding: 3px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.td-hoi { position: relative; }
.td-hoi__nut { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); font: 700 var(--sm)/1 var(--f-body); cursor: help; }
.td-hoi__hop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 420px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--pop); padding: 10px 12px; font-size: var(--xs); color: var(--ink-2); }
.td-hoi:hover .td-hoi__hop, .td-hoi:focus-within .td-hoi__hop { display: block; }
.td-hoi__hop p { margin: 0 0 8px; } .td-hoi__hop p:last-child { margin: 8px 0 0; }
.td-chu-giai { display: flex; flex-wrap: wrap; gap: 3px 12px; color: var(--ink-2); }
.td-chu-giai span { display: inline-flex; align-items: center; white-space: nowrap; }
.td-chu-giai .td-cham { margin-right: 4px; }
.td-bang-cuon { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.td-bang { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 var(--xs)/1.3 var(--f-body); font-variant-numeric: tabular-nums; }
.td-bang thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); color: var(--ink-2); font-weight: 700; text-align: left; padding: 6px 6px; border-bottom: 2px solid var(--brand); vertical-align: bottom; }
.td-bang th.td-so, .td-bang td.td-so { text-align: right; white-space: nowrap; }
.td-bang thead th.td-so span { display: block; }
.td-bang thead th small { font-weight: 400; color: var(--ink-3); }
.td-bang td, .td-bang tbody th { padding: 2px 6px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.td-cot-ten { min-width: 340px; text-align: left; font-weight: 400; }
.td-bang tbody th.td-cot-ten { position: sticky; left: 0; z-index: 1; background: inherit; }
.td-cot-nut { white-space: nowrap; text-align: right; width: 1%; }
.td-bang td.td-so { min-width: 62px; }

/* tầng: ngày, bữa, món, thực phẩm */
.td-h--ngay { background: var(--brand); color: var(--brand-ink); }
.td-h--ngay td, .td-h--ngay th { border-bottom: 0; padding-top: 5px; padding-bottom: 5px; font-weight: 700; font-size: var(--sm); }
.td-h--ngay .td-ten-o { color: var(--brand-ink); font: 700 var(--sm) var(--f-display); }
.td-h--ngay .td-nho { color: var(--brand-ink); border-color: rgba(255,255,255,.4); }
.td-h--ngay .td-mo::before { border-color: var(--brand-ink); }
.td-h--bua { background: var(--surface-2); font-weight: 700; cursor: pointer; }
.td-h--bua th.td-cot-ten { padding-left: 18px; }
.td-h--mon { background: var(--surface); cursor: pointer; }
.td-h--mon th.td-cot-ten { padding-left: 34px; box-shadow: inset 4px 0 0 var(--vai-c, var(--vai-khac)); }
.td-h--mon td { font-weight: 700; }
.td-mon-ten { font-weight: 700; margin-right: 6px; }
.td-mon-ten a { color: var(--ink); text-decoration: none; } .td-mon-ten a:hover { color: var(--link); text-decoration: underline; }
.td-dong { background: var(--surface); }
.td-dong th.td-cot-ten { padding-left: 50px; }
.td-dong:hover, .td-h--mon:hover { background: color-mix(in srgb, var(--sao) 10%, var(--surface)); }
.td-tp-ten a { color: var(--ink); text-decoration: none; } .td-tp-ten a:hover { color: var(--link); text-decoration: underline; }
.td-tp-nhom { color: var(--ink-3); margin-left: 8px; font-size: var(--xxs); }
.td-tp-ly-do { display: block; color: var(--loi); font-size: var(--xxs); }
.td-dong--thieu { background: color-mix(in srgb, var(--loi) 5%, var(--surface)); }
.la-dich { outline: 2px solid var(--focus); outline-offset: -2px; }
.td-trong td { color: var(--ink-3); padding: 8px 6px 8px 58px; font-style: italic; }
.td-dem { margin-left: 8px; font-weight: 400; color: var(--ink-3); font-size: var(--xxs); }
.td-lk { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-weight: 500; color: var(--link); font-size: var(--xxs); border: 1px solid currentColor; border-radius: 99px; padding: 0 6px; }
.td-lk .bt { width: 12px; height: 12px; margin: 0; }

.td-mo { width: 18px; height: 18px; border: 0; background: none; cursor: pointer; vertical-align: middle; margin-right: 2px; padding: 0; position: relative; }
.td-mo::before { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform var(--dong-tg) var(--dong-em), top var(--dong-tg) var(--dong-em); }
.td-mo[aria-expanded="true"]::before { transform: rotate(45deg); top: 3px; }
.td-ten-o { font: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 1px 4px; width: 12ch; color: inherit; }
.td-ten-o--bua { width: 9ch; }
.td-ten-o:hover, .td-ten-o:focus { border-color: currentColor; }

/* ô số sửa được như Excel */
.td-o { width: 100%; min-width: 52px; font: inherit; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 2px; padding: 2px 4px; }
.td-o:hover { border-color: var(--rule); background: var(--surface); }
.td-o:focus { border-color: var(--focus); background: var(--surface); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 30%, transparent); }
.td-h--mon .td-o { font-weight: 700; }
/* ô vừa đổi số: nền vàng nhạt giữ một nhịp rồi tan về màu cũ (một lần) */
.vua-doi, .vua-doi .td-o { animation: td-nhay 1.3s var(--dong-em); }
@keyframes td-nhay { 0%, 30% { background-color: color-mix(in srgb, var(--sao) 36%, transparent); } }
@media (prefers-reduced-motion: reduce) { .vua-doi, .vua-doi .td-o { animation: none !important; background: color-mix(in srgb, var(--sao) 26%, transparent); } }
.td-bang .chua-co { color: var(--ink-3); }
.td-thieu { color: var(--loi); font-size: 9px; margin-left: 2px; }
.td-h--ngay .td-thieu { color: var(--sao); }

.td-nho { font: 500 var(--xxs) var(--f-body); color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1px 6px; cursor: pointer; margin-left: 3px; display: inline-flex; align-items: center; }
.td-nho:hover { background: var(--surface-2); color: var(--ink); }
.td-nho .bt { width: 12px; height: 12px; margin: 0; }
.td-nho--xoa:hover { color: var(--loi); border-color: var(--loi); }

/* vai món và đặc điểm ở đầu món */
.td-vai { display: inline-block; font: 500 var(--xxs)/1.5 var(--f-body); padding: 0 7px; border-radius: 99px; color: #fff; background: var(--vai-khac); white-space: nowrap; vertical-align: 1px; }
.td-vai--dam { background: var(--vai-dam); } .td-vai--rau { background: var(--vai-rau); } .td-vai--canh { background: var(--vai-canh); }
.td-vai--hon_hop { background: var(--vai-hon_hop); } .td-vai--tinh_bot { background: var(--vai-tinh_bot); } .td-vai--trang_mieng { background: var(--vai-trang_mieng); }
.td-vai--do_uong { background: var(--vai-do_uong); } .td-vai--an_vat { background: var(--vai-an_vat); } .td-vai--kem { background: var(--vai-kem); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .td-vai { color: #1a1210; } }
:root[data-theme="dark"] .td-vai { color: #1a1210; }
.td-dac { font-weight: 400; color: var(--ink-3); font-size: var(--xxs); margin-left: 6px; }
.td-canh-bao { color: var(--loi); font-weight: 500; }
.td-uoc { font: 500 9px/1.4 var(--f-body); color: var(--uoc); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 5px; vertical-align: 1px; }

.td-them-ngay { margin-top: var(--s3); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- cột phải: THỰC ĐƠN CUNG CẤP */
.td-tom-tat { position: sticky; top: 64px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: var(--sm); }
.td-tom-tat h2 { font-size: var(--md); display: flex; align-items: center; }
.td-tom-tat h3 { font: 700 var(--sm) var(--f-body); margin: var(--s4) 0 var(--s2); display: flex; align-items: center; gap: 2px; }
.td-tom-tat h3 small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.td-tt-phu { font-size: var(--xs); color: var(--ink-3); margin: 4px 0 var(--s3); }
.td-tt-nl { display: flex; align-items: baseline; gap: 6px; }
.td-tt-nl span { display: inline-flex; align-items: center; color: var(--ink-2); }
.td-tt-nl b { font: 700 var(--xxl)/1 var(--f-display); color: var(--brand); font-variant-numeric: tabular-nums; }
.td-tt-nl small { color: var(--ink-3); }
.td-plg__vach { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin: var(--s2) 0; }
.td-c--dam { background: var(--dam); } .td-c--beo { background: var(--beo); } .td-c--bot { background: var(--bot); }
.td-cham { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.td-plg__bang { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.td-plg__bang th, .td-plg__bang td { padding: 3px 0; border-bottom: 1px solid var(--rule); text-align: right; }
.td-plg__bang th:first-child, .td-plg__bang tbody th { text-align: left; font-weight: 500; }
.td-plg__bang thead th { font: 500 var(--xxs) var(--f-body); color: var(--ink-3); }
.td-plg__bang small { color: var(--ink-3); }
.td-tt-khac { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: var(--s3) 0 0; }
.td-tt-khac div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--rule); }
.td-tt-khac dt { color: var(--ink-2); } .td-tt-khac dd { margin: 0; font-variant-numeric: tabular-nums; }
.td-nhom { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.td-nhom li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: var(--xs); }
.td-nhom__so { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.td-nhom__vach { grid-column: 1 / -1; height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.td-nhom__vach i { display: block; height: 100%; }
.td-nh-0 { background: var(--nh-0); } .td-nh-1 { background: var(--nh-1); } .td-nh-2 { background: var(--nh-2); } .td-nh-3 { background: var(--nh-3); }
.td-nh-4 { background: var(--nh-4); } .td-nh-5 { background: var(--nh-5); } .td-nh-6 { background: var(--nh-6); } .td-nh-7 { background: var(--nh-7); }
.td-vai-ds { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.td-tt-data { font-size: var(--xs); color: var(--ink-2); margin-top: var(--s3); display: flex; gap: 4px; align-items: baseline; }
.td-tt-ngay { width: 100%; border-collapse: collapse; font-size: var(--xs); font-variant-numeric: tabular-nums; }
.td-tt-ngay th, .td-tt-ngay td { padding: 2px 4px; border-bottom: 1px solid var(--rule); text-align: right; }
.td-tt-ngay th:first-child { text-align: left; font-weight: 500; }

/* ---------- trang 2: CHI TIẾT ĐÁNH GIÁ */
.td-danh-gia { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s4) var(--s5); }
.td-danh-gia h2 { display: flex; align-items: center; margin-bottom: var(--s3); }
.td-danh-gia h3 { margin: var(--s5) 0 var(--s2); font-size: var(--md); }
.td-dg-cd { font-size: var(--md); margin-bottom: 4px; }
.td-dg-nhom { color: var(--ink-3); font-size: var(--sm); }
.td-dg-ghi { color: var(--ink-2); font-size: var(--sm); }
.td-dg-trong { color: var(--ink-2); }
.td-dg { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--s3); }
.td-dg th, .td-dg td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: right; }
.td-dg th:first-child { text-align: left; }
.td-dg thead th { font: 700 var(--sm) var(--f-body); vertical-align: bottom; }
.td-dg thead small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--xxs); }
.td-dg tbody th small { color: var(--ink-3); font-weight: 400; }
/* hai cột luôn tách màu: số thực đơn (đỏ cờ) và khuyến nghị (xanh) để không nhầm */
.td-dg .td-dg-cc { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.td-dg thead .td-dg-cc { border-top: 3px solid var(--brand); }
.td-dg .td-dg-kn { background: color-mix(in srgb, var(--bot) 9%, var(--surface)); }
.td-dg thead .td-dg-kn { border-top: 3px solid var(--bot); }
.td-dg-nx { font-weight: 500; }
.td-dg-thieu { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--xxs); }
.td-dg--dat .td-dg-nx, td.td-dg--dat { color: var(--xo); }
.td-dg--thieu .td-dg-nx, td.td-dg--thieu { color: var(--bot); }
.td-dg--du .td-dg-nx, td.td-dg--du { color: var(--loi); }
.td-dg--chua .td-dg-nx, td.td-dg--chua { color: var(--ink-3); }
.td-dg--ngay td { font-weight: 500; }
.td-dg-nguon { font-size: var(--xs); color: var(--ink-3); margin-top: var(--s3); }

/* ---------- ô tìm dính dưới đáy */
.td-tim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); border-top: 2px solid var(--brand); box-shadow: 0 -6px 18px -8px rgba(60,20,15,.25); padding: 8px var(--le); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.td-tim[hidden] { display: none; }
.td-tim__dich { display: inline-flex; gap: 6px; align-items: center; font-size: var(--xs); color: var(--ink-2); }
.td-tim__dich select { font: 500 var(--sm) var(--f-body); max-width: 360px; padding: 5px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); }
.td-tim__o { flex: 1 1 520px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; position: relative; }
.td-tim__o > .bt { position: absolute; left: 10px; top: 10px; color: var(--ink-3); }
.td-tim__o input { flex: 1 1 360px; font: 400 var(--base) var(--f-body); padding: 7px 10px 7px 34px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.td-tim__o input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.td-tim__loai { display: inline-flex; gap: 4px; }
.td-tim__loai button { font: 500 var(--xs) var(--f-body); border: 1px solid var(--rule); border-radius: 99px; background: var(--surface); color: var(--ink-2); padding: 3px 10px; cursor: pointer; }
.td-tim__loai button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.td-goi-y { position: fixed; left: var(--le); right: var(--le); bottom: 62px; max-height: min(60vh, 520px); overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--pop); z-index: 26; }
.td-goi-y li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto 110px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--sm); }
.td-goi-y li[aria-selected="true"], .td-goi-y li:hover { background: var(--surface-2); }
.td-goi-y li[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--brand); }
.td-gy-bt .bt { width: 18px; height: 18px; color: var(--ink-3); margin: 0; }
.td-gy-ten b { font-weight: 500; } .td-gy-ten small { display: block; color: var(--ink-3); font-size: var(--xxs); }
.td-gy-loai { font: 500 var(--xxs) var(--f-body); padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; }
.td-gy-loai--mon { color: var(--l-mon-chu); } .td-gy-loai--thuc_pham { color: var(--l-tp-chu); } .td-gy-loai--do_uong { color: var(--l-du-chu); } .td-gy-loai--san_pham { color: var(--l-sp-chu); }
.td-gy-kcal { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.td-gy-kcal small { color: var(--ink-3); font-weight: 400; margin-left: 2px; }
.td-gy-khong { color: var(--ink-3); cursor: default !important; display: block !important; }
.td-thong-bao { position: fixed; right: var(--le); bottom: 74px; z-index: 30; background: var(--ink); color: var(--ground); padding: 8px 14px; border-radius: var(--r-md); font-size: var(--sm); box-shadow: var(--pop); max-width: 460px; }

@media print {
  .thanh-tren, .td-tim, .td-nut-dau, .td-tang, .td-them-ngay, .td-cot-nut, .td-mo, .td-goi-y, .td-thong-bao, .chan-trang { display: none !important; }
  .td-than { grid-template-columns: 1fr; }
  .td-tom-tat { position: static; break-before: page; }
  .td-o { border: 0; }
  .td-bang-cuon { overflow: visible; border: 0; }
}

/* ---------- màu nhóm thực phẩm (tháp dinh dưỡng) */
.th-luong_thuc { background: var(--th-luong_thuc); } .th-rau { background: var(--th-rau); } .th-qua { background: var(--th-qua); }
.th-dam { background: var(--th-dam); } .th-sua { background: var(--th-sua); } .th-beo { background: var(--th-beo); }
.th-duong { background: var(--th-duong); } .th-muoi { background: var(--th-muoi); } .th-khac { background: var(--th-khac); }
.th-chua_tach { background: repeating-linear-gradient(135deg, var(--th-khac) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--th-khac); }
/* thanh tỷ lệ nhóm thực phẩm: dải mảnh ở đáy ô tên của ngày, bữa, món */
.td-cot-ten .td-thap--dai { position: absolute; left: var(--thut, 18px); right: 10px; bottom: 2px; height: 4px; display: flex; border-radius: 99px; overflow: hidden; background: var(--surface-3); cursor: help; }
.td-h--mon .td-cot-ten { --thut: 56px; }
.td-h--mon .td-cot-ten:has(.td-thap--dai) { padding-bottom: 8px; }
.td-thap i { display: block; height: 100%; }
.td-thap i + i { box-shadow: -1px 0 0 var(--surface); }
.td-tom-hang { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-weight: 400; font-size: var(--xxs); color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.td-tom-hang b { font-weight: 700; font-size: var(--xs); color: var(--ink); }
.td-h--ngay .td-tom-hang, .td-h--ngay .td-tom-hang b { color: var(--brand-ink); }
.td-thap--nho { display: inline-flex; width: 110px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-3); cursor: help; }
.td-h--ngay .td-thap--nho { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.td-nguon { font: 500 9px/1.5 var(--f-body); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; cursor: help; white-space: nowrap; }
.td-chu-y { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--uoc, #B5650F); color: #fff; font: 700 11px/1 var(--f-body); margin-left: 6px; vertical-align: 1px; cursor: help; }
.td-hoi__hop .td-chu-y { margin: 0 2px 0 0; }
.td-so--nha { color: var(--ink-2); background: color-mix(in srgb, var(--sao) 8%, transparent); }
thead .td-so--nha { background: color-mix(in srgb, var(--sao) 18%, var(--surface-2)) !important; }
/* kéo thả: chỗ sẽ thả, nhãn theo chuột, hình kéo gọn */
.td-cho-tha td { padding: 0 !important; border: 0 !important; }
.td-cho-tha span { display: block; margin: 2px 6px; padding: 5px 12px; border: 2px dashed var(--focus); border-radius: var(--r-sm); background: color-mix(in srgb, var(--focus) 10%, var(--surface)); color: var(--ink); font-size: var(--xs); font-weight: 500; }
.td-tha-nhan { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--ground); font-size: var(--xs); padding: 4px 10px; border-radius: var(--r-sm); box-shadow: var(--pop); max-width: 420px; }
.td-tha-nhan[hidden] { display: none; }
.td-anh-keo { position: fixed; left: -1000px; top: -1000px; background: var(--brand); color: var(--brand-ink); font: 500 13px var(--f-body); padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
body:has(main.td) .chan-trang { display: none; }
/* đi chợ */
.td-cho-ngay { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--sm); }
.td-cho-ngay label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.td-di-cho h3 { display: flex; align-items: center; font-size: var(--sm); margin: var(--s4) 0 0; }
.td-cho th label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; cursor: pointer; }
.td-cho th:has(.td-cho-tick:checked) { text-decoration: line-through; color: var(--ink-3); }
.td-cho td small { color: var(--ink-3); }
.td-dg-chon select { font: 400 var(--sm) var(--f-body); max-width: 420px; padding: 3px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.td-dg-chon td { text-align: left !important; }
.td-dg-chon th small { font-weight: 400; color: var(--ink-3); }
@media print { body[data-td-trang="di_cho"] .td-cho-ngay, .td-cho-nut, .td-hoi, .td-tang, .td-suat { display: none !important; } }
.td-thap--lon { display: flex; width: 100%; height: 14px; margin: 0 0 var(--s2); border-radius: 99px; overflow: hidden; }
.td-cham-thap { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* mã chế độ ở hàng ngày */
.td-cd-chon { font: 500 var(--xxs) var(--f-body); max-width: 230px; margin-left: 6px; padding: 2px 4px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: var(--brand-ink); vertical-align: middle; }
.td-cd-chon option, .td-cd-chon optgroup { color: var(--ink); background: var(--surface); }

/* nút kéo, khóa, ba chấm: hiện khi rê chuột vào hàng */
.td-keo { display: inline-block; width: 10px; height: 16px; margin: 0 2px 0 -12px; vertical-align: middle; cursor: grab; opacity: 0;
  background: radial-gradient(circle, var(--ink-3) 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
.td-h:hover .td-keo, .td-dong:hover .td-keo { opacity: 1; }
.td-cot-nut { min-width: 54px; }
.td-ba-cham, .td-khoa { width: 22px; height: 20px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer; color: inherit; vertical-align: middle; opacity: 0; position: relative; padding: 0; }
.td-ba-cham::before { content: "⋯"; font: 700 15px/1 var(--f-body); position: absolute; inset: 0; display: grid; place-items: center; }
.td-khoa::before { content: ""; position: absolute; left: 6px; top: 9px; width: 9px; height: 7px; border-radius: 1px; background: currentColor; }
.td-khoa::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.td-khoa.mo { opacity: 1; color: var(--uoc, #B5650F); }
.td-khoa.mo::after { left: 11px; top: 2px; transform: rotate(20deg); }
.td-h:hover .td-ba-cham, .td-dong:hover .td-ba-cham, .td-h:hover .td-khoa, .td-dong:hover .td-khoa, .td-ba-cham:focus-visible, .td-khoa:focus-visible { opacity: 1; }
.td-ba-cham:hover, .td-khoa:hover { border-color: currentColor; }
.td-mo-khoa { outline: 1.5px dashed var(--uoc, #B5650F); outline-offset: -2px; }
.td-mo-khoa .td-o { background: color-mix(in srgb, var(--uoc, #B5650F) 7%, transparent); }
.o-sua { position: relative; }
.o-sua::after { content: ""; position: absolute; right: 1px; top: 1px; border: 4px solid transparent; border-top-color: var(--uoc, #B5650F); border-right-color: var(--uoc, #B5650F); }
.o-uoc .td-o, td.o-uoc { font-style: italic; color: var(--ink-2); }
.td-sua-tay { font: 500 9px/1.4 var(--f-body); color: #fff; background: var(--uoc, #B5650F); border-radius: 3px; padding: 0 4px; margin-left: 5px; vertical-align: 1px; }

/* kéo thả */
.td-tha-vao > * { background: color-mix(in srgb, var(--focus) 16%, var(--surface)) !important; }
.td-tha-vao { outline: 2px solid var(--focus); outline-offset: -2px; }
.td-tha-truoc > * { box-shadow: inset 0 3px 0 var(--focus) !important; }
.td-dang-keo { opacity: .45; }
.td-goi-y.dang-keo { opacity: .12; pointer-events: none; }
.td-goi-y li[draggable] { cursor: grab; }

/* menu thao tác */
.td-ngu-canh { position: fixed; z-index: 40; min-width: 230px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--pop); padding: 5px; display: grid; gap: 1px; }
.td-ngu-canh[hidden] { display: none; }
.td-ngu-canh button { text-align: left; font: 400 var(--sm) var(--f-body); color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer; }
.td-ngu-canh button:hover, .td-ngu-canh button:focus { background: var(--surface-2); outline: none; }
.td-ngu-canh button.xoa { color: var(--loi); }
.td-ngu-canh hr { border: 0; border-top: 1px solid var(--rule); margin: 3px 0; width: 100%; }
.td-ngu-canh__td { margin: 2px 10px; font: 700 var(--xxs) var(--f-body); color: var(--ink-3); }
.td-ngu-canh__td ~ button { padding-left: 22px; }
.td-ngu-canh hr ~ button { padding-left: 10px; }

/* thẻ rê chuột: nguồn, lý do, mô tả */
.td-the { position: fixed; z-index: 45; width: 360px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--pop); padding: 10px 12px; font-size: var(--xs); pointer-events: none; }
.td-the[hidden] { display: none; }
.td-the__ten { font: 700 var(--sm) var(--f-body); margin: 0; }
.td-the__phu { color: var(--ink-3); margin: 2px 0 6px; }
.td-the__mo-ta { margin: 0 0 8px; color: var(--ink-2); line-height: 1.45; }
.td-the dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.td-the dt { color: var(--ink-3); } .td-the dd { margin: 0; }
.td-the__khoa { margin: 8px 0 0; color: var(--ink-3); font-size: var(--xxs); }

/* hộp lặp bữa */
.td-hop { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); color: var(--ink); padding: var(--s4) var(--s5); max-width: 460px; box-shadow: var(--pop); }
.td-hop::backdrop { background: rgba(30,10,8,.35); }
.td-hop h2 { font-size: var(--md); margin: 0 0 var(--s3); }
.td-hop__o { display: grid; gap: 4px; font-size: var(--sm); font-weight: 500; }
.td-hop__o input { font: 400 var(--base) var(--f-body); padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.td-hop__ghi { font-size: var(--xs); color: var(--ink-3); margin: 6px 0 var(--s3); }
.td-hop__chon { display: flex; gap: 8px; align-items: baseline; font-size: var(--sm); margin-bottom: 6px; cursor: pointer; }
.td-hop__nut { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--s3); }

/* thanh dưới: trang 1/2 · chỗ thêm · ô tìm */
.td-tim .td-tab { flex: 0 0 auto; }
.td-tim__phan { flex: 1 1 700px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.td-tim__phan[hidden] { display: none; }
.td-dich { display: inline-flex; align-items: center; gap: 6px; font-size: var(--xs); max-width: 420px; padding: 4px 8px; border: 1px solid var(--focus); border-radius: var(--r-md); background: color-mix(in srgb, var(--focus) 8%, var(--surface)); }
.td-dich b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-dich__nhan { color: var(--ink-3); white-space: nowrap; }
.td-dich button { border: 0; background: none; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.td-gy-ten small .td-cham { width: 7px; height: 7px; margin-right: 4px; }

/* hiển thị: chọn cột theo nhóm */
.td-bo-cot { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.td-bo-cot .td-nho { margin: 0; }
.td-cot-chon--nhom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.td-cot-chon--nhom fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.td-cot-chon--nhom legend { font: 700 var(--xxs) var(--f-body); color: var(--ink-3); padding: 0; margin-bottom: 2px; }
.td-menu__hop--rong { min-width: 560px; max-height: 70vh; overflow: auto; }
.td-menu__td small { font-weight: 400; color: var(--ink-3); }

/* tóm tắt: vi chất mở/thu */
.td-tt-vi { border-top: 1px solid var(--rule); padding: 4px 0; }
.td-tt-vi summary { cursor: pointer; font-weight: 500; font-size: var(--xs); }
.td-tt-vi summary small { color: var(--ink-3); font-weight: 400; }
.td-tt-vi .td-tt-khac { margin: 4px 0 2px; font-size: var(--xs); }
.td-tt-data span { flex: 1; }
.td-dg-nhom-cd { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s4); }
.td-dg-nhom-cd:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.td-dg-ngay-ap { color: var(--ink-2); font-size: var(--sm); margin: 0 0 4px; }
@media print { .td-keo, .td-ngu-canh, .td-the, .td-cd-chon, .td-khoa, .td-ba-cham { display: none !important; } }

/* vòng 4: nút chuyển trang ở góc phải trên; tầng ở đầu cột tên; đi chợ trong cột phải */
.td-nut-dau { flex: 1 1 auto; }
.td-tab--tren { margin-left: auto; }
.td-tab--tren button { padding: 6px 14px; font-weight: 600; }
.td-tang-dau { display: inline-flex; align-items: center; gap: 2px; font-weight: 400; color: var(--ink-3); font-size: var(--xxs); white-space: nowrap; }
.td-tang-dau button { font: 600 var(--xs) var(--f-body); color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 2px 7px; cursor: pointer; }
.td-tang-dau button:first-child { margin-left: 4px; }
.td-tang-dau button:hover { border-color: var(--rule); color: var(--ink); }
.td-tang-dau button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.td-ten-o--doi { width: 22ch; font-weight: 600; border-color: var(--focus) !important; background: var(--surface); color: var(--ink); }
.td-cho-tien { margin: 0 0 6px; font-size: var(--sm); }
.td-cho-tien b { font-size: var(--md); color: var(--brand); font-variant-numeric: tabular-nums; }
.td-cho-tien small { color: var(--ink-3); }
details.td-cho summary { cursor: pointer; font-size: var(--xs); color: var(--ink-2); margin-bottom: 4px; }
details.td-cho ul { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
details.td-cho li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 8px; align-items: baseline; padding: 2px 0; border-bottom: 1px dotted var(--rule); font-size: var(--xs); font-variant-numeric: tabular-nums; }
details.td-cho li label { display: flex; align-items: center; gap: 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.td-cho li label:has(:checked) { text-decoration: line-through; color: var(--ink-3); }
details.td-cho li .td-cham { margin: 0; flex: none; }
details.td-cho li span { font-weight: 500; text-align: right; }
details.td-cho li small { color: var(--ink-3); text-align: right; }
details.td-cho .td-nho { margin: 6px 0 0; }
@media print {
  body.td-in-cho main > *:not(.td-than), body.td-in-cho .td-bang-khung, body.td-in-cho .td-tom-tat > *:not(h3):not(.td-cho):not(.td-cho-tien) { display: none !important; }
  body.td-in-cho .td-tom-tat > h3:not(:has(+ .td-cho-tien, + .td-cho)) { display: none !important; }
  body.td-in-cho details.td-cho ul { max-height: none; overflow: visible; }
  .td-tab--tren { display: none !important; }
}

/* vòng 5: thẻ rê chuột cùng kiểu ô nổi trang món; hàng ngày chỉ viền đỏ */
.td-the { width: max-content; max-width: min(440px, 86vw); min-width: 260px; border-top: 1px solid var(--rule); padding: var(--s3); line-height: 1.5; }
.td-the .noi__lc li { display: inline-flex; align-items: center; gap: 4px; }
.td-the .noi__lc .td-cham { width: 7px; height: 7px; margin: 0; }
.td-the .noi__lq small { color: var(--ink-3); }
.td-the__so { width: 100%; border-collapse: collapse; margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; }
.td-the__so td { font-weight: 600; } .td-the__so td small { font-weight: 400; color: var(--ink-3); }
.td-the__khoa { border-top: 1px solid var(--rule); padding-top: 6px; }
.td-h--ngay { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); color: var(--brand); }
.td-h--ngay td, .td-h--ngay th { border-top: 2px solid var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.td-h--ngay th.td-cot-ten { box-shadow: inset 4px 0 0 var(--brand); }
.td-h--ngay .td-ten-o { color: var(--brand); }
.td-h--ngay .td-mo::before { border-color: var(--brand); }
.td-h--ngay .td-tom-hang { color: var(--ink-2); } .td-h--ngay .td-tom-hang b { color: var(--brand); }
.td-h--ngay .td-thap--nho { box-shadow: none; }
.td-h--ngay .td-thieu { color: var(--loi); }
.td-h--ngay td.chua-co { color: var(--ink-3); }
.td-h--bua th.td-cot-ten, .td-h--ngay th.td-cot-ten { white-space: nowrap; }
.td-h--bua .td-thap--nho { width: 90px; }
/* mỗi ngày một khối riêng, cách nhau một khoảng */
.td-bang-cuon { border: 0; background: none; border-radius: 0; }
.td-bang thead th { border-top: 1px solid var(--rule); }
.td-bang thead th:first-child { border-left: 1px solid var(--rule); border-top-left-radius: var(--r-md); }
.td-bang thead th:last-child { border-right: 1px solid var(--rule); border-top-right-radius: var(--r-md); }
.td-bang tbody.td-ngay > tr > :first-child { border-left: 1px solid var(--rule); }
.td-bang tbody.td-ngay > tr > :last-child { border-right: 1px solid var(--rule); }
.td-bang tbody.td-ngay > tr:last-child > * { border-bottom: 1px solid var(--rule); }
.td-bang tbody.td-ngay > tr:last-child > :first-child { border-bottom-left-radius: var(--r-md); }
.td-bang tbody.td-ngay > tr:last-child > :last-child { border-bottom-right-radius: var(--r-md); }
.td-bang tbody.td-ngay > tr.td-h--ngay > :first-child { border-left: 1px solid var(--brand); }
.td-bang tbody.td-ngay > tr.td-h--ngay > :last-child { border-right: 1px solid var(--brand); }
.td-trong { background: var(--surface); }
.td-cach td { height: 22px; padding: 0 !important; border: 0 !important; background: var(--ground); }
.td-cach th.td-cot-ten { background: var(--ground); }
/* nút thêm món ở cuối mỗi bữa */
.td-them-mon td { padding: 3px 6px 3px 40px !important; font-style: normal !important; }
.td-them-mon__nut { font: 600 var(--xs) var(--f-body); color: var(--link); background: none; border: 1px dashed color-mix(in srgb, var(--link) 50%, transparent); border-radius: var(--r-sm); padding: 3px 10px; cursor: pointer; }
.td-them-mon__nut:hover { background: color-mix(in srgb, var(--link) 8%, transparent); border-style: solid; }
.td-them-mon span { margin-left: 10px; color: var(--ink-3); font-size: var(--xxs); font-style: italic; }
@media print { .td-them-mon { display: none !important; } }
.td-them-mon__nut + .td-them-mon__nut { margin-left: 6px; }
.td-them-mon__nut--tao { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.td-them-mon__nut--tao:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.td-mon-trong td { padding-left: 58px !important; }
/* chỗ đang thêm vào: tô sáng nhẹ cả khối bữa hoặc món; nháy khi vừa chọn */
.td-bang tr.td-dk { background-color: color-mix(in srgb, var(--sao) 14%, var(--surface)); }
.td-bang tr.td-dk.td-dk--dau { background-color: color-mix(in srgb, var(--sao) 26%, var(--surface)); }
/* chỗ vừa chọn / hàng vừa thêm: nền vàng sao + vạch vàng bên trái, giữ một nhịp rồi tan dần về màu cũ, MỘT lần (trước: chớp 2–3 lần) */
.td-bang tr.td-dk--nhay { animation: td-den 1.2s var(--dong-em); }
.td-bang tr.td-moi-them { animation: td-den 1.7s var(--dong-em); }
.td-bang tr.td-dk--nhay > :first-child { animation: td-vach 1.2s var(--dong-em); }
.td-bang tr.td-moi-them > :first-child { animation: td-vach 1.7s var(--dong-em); }
@keyframes td-den { 0%, 35% { background-color: color-mix(in srgb, var(--sao) 42%, var(--surface)); } }
@keyframes td-vach { 0%, 60% { box-shadow: inset 3px 0 0 var(--sao); } }
.la-dich { outline: 0; }
@media (prefers-reduced-motion: reduce) {
  .td-bang tr.td-dk--nhay, .td-bang tr.td-moi-them { animation: none !important; background-color: color-mix(in srgb, var(--sao) 32%, var(--surface)); }
  .td-bang tr.td-dk--nhay > :first-child, .td-bang tr.td-moi-them > :first-child { animation: none !important; box-shadow: inset 3px 0 0 var(--sao); }
}
details.td-cho li[data-cho-di] { cursor: pointer; }
details.td-cho li[data-cho-di]:hover { background: var(--surface-2); }
.td-dich { cursor: pointer; }
@media print { .td-bang tr.td-dk { background: none; } }

/* đi chợ: thải bỏ */
.td-cho-tb { font-size: var(--xxs); color: var(--ink-2); margin: 0 0 6px; }
.td-cho-tb label { display: inline-flex; gap: 3px; align-items: center; margin-right: 8px; cursor: pointer; }
.td-cho-tb small { display: block; color: var(--ink-3); }
.td-cho-tb__so { font-size: 9px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }

/* thẻ rê chuột bấm được (link nguồn) */
.td-the { pointer-events: auto; }
.td-the a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.td-the a:hover { color: var(--link-hover); }
.td-the__nguon-ten { font-weight: 600; margin: 0 0 4px; }
.td-the__link { margin: 0 0 8px; }
.td-nguon:hover, .td-nguon:focus { border-color: var(--link); color: var(--link); outline: none; }

/* thẻ thực phẩm: thay bằng thực phẩm khác trong kho */
.td-thay { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 6px; }
.td-thay__td { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.td-thay__td small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.td-thay input { width: 100%; font: 400 var(--xs) var(--f-body); padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); margin-bottom: 4px; }
.td-thay input:focus { border-color: var(--focus); outline: none; }
.td-thay ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.td-thay button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left;
  font: 400 var(--xs) var(--f-body); color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); padding: 3px 6px; cursor: pointer; }
.td-thay button:hover, .td-thay button:focus { background: color-mix(in srgb, var(--focus) 12%, var(--surface)); outline: none; }
.td-thay button .td-cham { grid-row: 1 / 3; width: 8px; height: 8px; margin: 0; }
.td-thay button b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-thay button small { grid-column: 2; color: var(--ink-3); font-size: var(--xxs); }
.td-thay button span { grid-column: 3; grid-row: 1 / 3; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: var(--xxs); }
.td-thay__cho { color: var(--ink-3); font-size: var(--xxs); padding: 3px 6px; }

/* hàng tiêu đề cột ghim khi cuộn: bảng tự cuộn trong khung cao gần bằng màn hình (như Excel cố định dòng đầu) */
.td-bang-cuon { max-height: var(--td-cao, calc(100vh - 230px)); min-height: 280px; overflow: auto; }
.td-bang thead th { position: sticky; top: 0; z-index: 5; }
.td-bang thead th.td-cot-ten { left: 0; z-index: 6; }
@media print { .td-bang-cuon { max-height: none; overflow: visible; } }

.td-so--luong { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* số ở hàng ngày và hàng món in nghiêng (số tổng cộng, phân biệt với số của từng thực phẩm) */
.td-h--ngay td.td-so, .td-h--mon td.td-so, .td-h--mon .td-o { font-style: italic; }

/* bảng và cột phải cùng cao bằng màn hình, mỗi bên tự cuộn: trang không cuộn nên bảng không bị cắt */
.td-bang-cuon { height: var(--td-cao, calc(100vh - 230px)); max-height: none; }
.td-them-ngay { position: sticky; left: 0; margin: var(--s3) 0 var(--s3) 0; }
.td-tom-tat { position: static; max-height: var(--td-cao, calc(100vh - 230px)); overflow-y: auto; }
.td { padding-bottom: 0; }
.td-than { margin-bottom: 0; }
@media print { .td-bang-cuon, .td-tom-tat { height: auto; max-height: none; overflow: visible; } }

/* thanh đầu gọn, thấp hơn */
.td-dau { padding: 6px 0; gap: 6px 10px; }
.td-ten input { font-size: var(--md); padding: 2px 6px; }
.td-dau .nut--nho { padding: 3px 8px; }
.td-tab--tren button { padding: 4px 12px; font-size: var(--xs); }
.td-hoi__nut { width: 24px; height: 24px; font-size: var(--xs); }
.td-suat input { padding: 2px 6px; font-size: var(--xs); }
.td-than { margin-top: 8px; }
.td-bang thead th { padding-top: 4px; padding-bottom: 4px; }

/* ô tìm: nguồn rõ ràng, báo thiếu số, thẻ chi tiết khi rê vào gợi ý */
.td-gy-nguon { font: 500 var(--xxs)/1.4 var(--f-body); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.td-gy-nguon--vdd { color: #fff; background: var(--brand); border-color: var(--brand); }
.td-gy-thieu { display: block; color: var(--uoc, #B5650F) !important; font-weight: 500; }
.td-gy-kcal--nghi { color: var(--uoc, #B5650F); }
.td-the--gy { z-index: 60; pointer-events: none !important; width: 420px; max-width: 46vw; }
.td-gy-nl { width: 100%; border-collapse: collapse; margin: 4px 0; font-variant-numeric: tabular-nums; }
.td-gy-nl td { padding: 2px 0; border-bottom: 1px dotted var(--rule); }
.td-gy-nl td + td { text-align: right; padding-left: 8px; white-space: nowrap; }
.td-gy-nl tr.thieu td { color: var(--uoc, #B5650F); }
.td-gy-ghi { margin: 6px 0 0; color: var(--ink-3); font-size: var(--xxs); }

.td-the__doi { display: flex; align-items: center; gap: 6px; font-size: var(--xxs); color: var(--ink-3); margin: 0 0 6px; }
.td-the__doi input { flex: 1; font: 500 var(--xs) var(--f-body); padding: 3px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.td-the__doi input:focus { border-color: var(--focus); outline: none; }
.td-mon-ten, .td-tp-ten { cursor: text; }

/* phân biệt rõ MÓN và THỰC PHẨM: món là hàng chính (to, đậm, nền nhạt theo vai, cách khối);
   thực phẩm là hàng phụ (nhỏ, chữ xám, sát nhau, nhãn nguồn chỉ hiện khi rê chuột) */
.td-bang tr.td-h--mon > * { padding-top: 7px; padding-bottom: 7px; border-top: 2px solid color-mix(in srgb, var(--vai-c, var(--rule)) 35%, var(--rule)); font-size: var(--sm); }
.td-bang tr.td-h--mon { background: color-mix(in srgb, var(--vai-c, var(--ink)) 6%, var(--surface)); }
.td-h--mon .td-mon-ten { font-size: var(--sm); font-weight: 700; }
.td-dem--mon { margin: 0 6px 0 0; font-weight: 500; }
.td-bang tr.td-dong > * { padding-top: 0; padding-bottom: 0; font-size: 12.5px; color: var(--ink-2); border-bottom-color: color-mix(in srgb, var(--rule) 55%, transparent); }
.td-bang tr.td-dong .td-o { color: var(--ink-2); padding-top: 1px; padding-bottom: 1px; }
.td-bang tr.td-dong th.td-cot-ten { padding-left: 54px; background-image: linear-gradient(to right, transparent 36px, color-mix(in srgb, var(--vai-c, var(--rule)) 50%, transparent) 36px, color-mix(in srgb, var(--vai-c, var(--rule)) 50%, transparent) 39px, transparent 39px); }
.td-bang tr.td-dong.td-dong--cuoi > * { border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.td-dong .td-tp-ten { font-weight: 400; }
.td-dong .td-nguon, .td-dong .td-uoc { opacity: 0; transition: opacity .1s; }
.td-dong:hover .td-nguon, .td-dong:hover .td-uoc, .td-dong:focus-within .td-nguon { opacity: 1; }
.td-dong .td-chu-y { width: 13px; height: 13px; font-size: 9px; opacity: .75; }
.td-dong .td-cham-thap { width: 7px; height: 7px; }

/* vòng 7: biểu đồ tròn P/L/G */
.td-plg { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; align-items: center; margin-top: var(--s2); }
.td-banh svg { width: 112px; height: 112px; transform: rotate(0deg); }
.td-banh circle { transition: stroke-dasharray var(--dong-tg) var(--dong-em); }
.td-banh__dam { stroke: var(--dam); } .td-banh__beo { stroke: var(--beo); } .td-banh__bot { stroke: var(--bot); }
.td-banh__so { font: 700 5.2px var(--f-display); fill: var(--ink); text-anchor: middle; }
.td-banh__dv { font: 400 2.6px var(--f-body); fill: var(--ink-3); text-anchor: middle; }
.td-plg__bang { grid-column: 2; }
/* ô tìm trong đi chợ */
.td-cho-tim { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); }
.td-cho-tim .bt { width: 14px; height: 14px; margin: 0; color: var(--ink-3); }
.td-cho-tim input { flex: 1; border: 0; background: none; font: 400 var(--xs) var(--f-body); color: var(--ink); outline: none; }
details.td-cho li[hidden] { display: none; }
details.td-cho summary[data-loc]:not([data-loc=""])::after { content: " · " attr(data-loc); color: var(--focus); }
/* hàng bữa to hơn, ngang tầm ngày và món */
.td-bang tr.td-h--bua > * { padding-top: 6px; padding-bottom: 6px; font-size: var(--sm); }
.td-h--bua .td-ten-o--bua { font: 700 var(--sm) var(--f-body); width: 10ch; }
.td-h--bua .td-tom-hang b { font-size: var(--sm); }
/* thanh đỏ gộp với thanh công cụ thực đơn: một dòng */
.thanh-tren--td .td-thanh { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; max-width: none; padding: 6px var(--le); }
.thuong-hieu--gon .thuong-hieu__chu { font-size: var(--md); }
.td-dau--do { flex: 1 1 auto; position: static; background: none; border: 0; padding: 0; min-width: 0; color: var(--brand-ink); }
.td-dau--do .td-ten input { color: var(--brand-ink); font-size: var(--md); max-width: 26ch; }
.td-dau--do .td-ten input::placeholder { color: rgba(255,255,255,.75); }
.td-dau--do .td-ten input:hover, .td-dau--do .td-ten input:focus { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
.td-dau--do .nut--nho, .td-dau--do .td-hoi__nut { background: rgba(255,255,255,.95); border-color: transparent; color: #2a1c1c; } /* nền trắng trên thanh đỏ: chữ luôn tối, cả khi web ở chế độ tối */
.td-dau--do .nut--nho:disabled { opacity: .6; }
.td-dau--do .td-suat { color: rgba(255,255,255,.85); }
.td-dau--do .td-tab--tren { border-color: rgba(255,255,255,.6); }
.td-dau--do .td-tab--tren button { background: rgba(255,255,255,.12); color: var(--brand-ink); }
.td-dau--do .td-tab--tren button[aria-selected="true"] { background: #fff; color: var(--brand); }
.td-dau--do .td-menu__hop, .td-dau--do .td-hoi__hop { color: var(--ink); }
.td-ra { display: flex; align-items: center; gap: 4px; flex: none; }
.td-ra a, .td-ra__hd { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-ink); text-decoration: none; font: 500 var(--xs) var(--f-body); padding: 4px 8px; border-radius: var(--r-sm); background: none; border: 1px solid transparent; cursor: pointer; }
.td-ra a:hover, .td-ra__hd:hover { border-color: rgba(255,255,255,.55); }
.td-ra .bt { width: 15px; height: 15px; margin: 0; }
.thanh-tren--td::after { display: none; }
.td-plg { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; }
.td-banh svg { width: 92px; height: 92px; }
.td-plg__bang th, .td-plg__bang td { white-space: nowrap; font-size: var(--xs); }

/* vòng 8: menu Hiển thị/Xuất không bị thanh đỏ cắt */
.thanh-tren.thanh-tren--td { overflow: visible; }
/* dấu ! của thực phẩm thẳng hàng: dồn về mép phải cột tên */
.td-bang tr.td-dong th.td-cot-ten .td-chu-y { float: right; margin: 2px 4px 0 6px; }
.td-dong .td-nguon, .td-dong .td-uoc { opacity: 0; }
/* tên phụ, tiếng Anh */
.td-gy-anh { font-style: italic; font-weight: 400; color: var(--ink-3); font-size: var(--xs); margin-left: 4px; }
.td-gy-phu { color: var(--ink-3); }
.td-gy-phu b { color: var(--focus); font-weight: 600; }
.td-the__phu { margin: 0 0 6px; color: var(--ink-2); font-size: var(--xxs); }

/* vòng 9: dòng thực phẩm thoáng hơn */
.td-bang tr.td-dong > * { padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
.td-bang tr.td-dong .td-o { padding-top: 2px; padding-bottom: 2px; }
/* dấu ! của thực phẩm: neo cố định ở mép phải cột tên (mọi trình duyệt) */
.td-bang tr.td-dong th.td-cot-ten { padding-right: 30px; }
.td-bang tr.td-dong th.td-cot-ten .td-chu-y { float: none; position: absolute; right: 8px; top: 50%; margin: -7px 0 0; }
/* ô bị khóa (không gõ được): rê vào thấy con trỏ hỏi và ổ khóa nhỏ, tooltip ghi sửa ở đâu */
.td-bang td.o-khoa { cursor: help; position: relative; }
.td-bang td.o-khoa:hover { background-color: color-mix(in srgb, var(--ink) 6%, transparent); }
.td-bang td.o-khoa:hover::before { content: "🔒"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); font-size: 9px; opacity: .55; }

/* P/L/G: biểu đồ tròn ở trên, bảng đủ rộng ở dưới (không tràn cột phải) */
.td-plg { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.td-banh { justify-self: center; }
.td-banh svg { width: 120px; height: 120px; }
.td-plg__bang { grid-column: 1; width: 100%; table-layout: auto; }
.td-plg__bang th, .td-plg__bang td { font-size: var(--sm); }

.td-hop__chon--phu { font-size: var(--xs); color: var(--ink-2); margin-top: 10px; }

/* bỏ số nhỏ đếm dòng thiếu data trên đầu các ô (vẫn xem được khi rê chuột vào ô) */
sup.td-thieu { display: none; }

/* tầng rõ hơn: NGÀY to nhất, BỮA in đậm, MÓN in nghiêng */
.td-bang tr.td-h--ngay > * { font-size: var(--md); padding-top: 9px; padding-bottom: 9px; }
.td-h--ngay .td-ten-o { font-size: var(--lg); width: 9ch; }
.td-h--ngay .td-tom-hang, .td-h--ngay .td-tom-hang b { font-size: var(--sm); }
.td-bang tr.td-h--bua > *, .td-h--bua .td-ten-o--bua, .td-h--bua .td-tom-hang b { font-weight: 800; }
.td-bang tr.td-h--bua td.td-so { font-style: normal; }
.td-h--mon .td-mon-ten { font-style: italic; }
.td-bang tr.td-h--mon td.td-so, .td-h--mon .td-o { font-style: italic; font-weight: 600; }

/* bữa nổi bật: dải nền đậm hơn, chữ to, vạch trái đậm, đường kẻ trên */
.td-bang tr.td-h--bua { background: color-mix(in srgb, var(--ink) 11%, var(--surface)); }
.td-bang tr.td-h--bua > * { font-size: var(--md); padding-top: 8px; padding-bottom: 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.td-bang tr.td-h--bua th.td-cot-ten { box-shadow: inset 5px 0 0 var(--ink-2); }
.td-h--bua .td-ten-o--bua { font: 800 var(--md) var(--f-body); text-transform: uppercase; letter-spacing: .02em; width: 9ch; }
.td-h--bua .td-tom-hang b { font-size: var(--md); }

/* đi chợ: chọn kiểu lượng thành hai nút cùng hàng, trung bình ngày xuống dòng riêng */
.td-cho-tb__nhan { display: block; margin-bottom: 4px; }
.td-cho-tb__chon { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.td-cho-tb__chon label { margin: 0 !important; padding: 3px 10px; gap: 5px; white-space: nowrap; }
.td-cho-tb__chon label + label { border-left: 1px solid var(--rule); }
.td-cho-tb__chon label:has(:checked) { background: color-mix(in srgb, var(--focus) 12%, var(--surface)); font-weight: 600; color: var(--ink); }
.td-cho-tb small { margin-top: 4px; }
.td-cho-tien__tb { display: block; font-size: var(--xxs); }

/* thẻ: chọn nhóm thực phẩm, vai món */
.td-the__chon-td { margin: 8px 0 2px; font-weight: 600; font-size: var(--xs); }
.td-the__chon-td small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.td-the__chon-td button { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.td-the__chon li { padding: 0 !important; border: 0 !important; background: none !important; }
.td-the__chon button { display: inline-flex; align-items: center; gap: 4px; font: 400 var(--xxs) var(--f-body); color: var(--ink-3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1px 7px; cursor: pointer; }
.td-the__chon button:hover { border-color: var(--focus); color: var(--ink); }
.td-the__chon li.chon button { color: var(--ink); border-color: var(--link); background: color-mix(in srgb, var(--link) 12%, transparent); font-weight: 600; }
.td-the__chon .td-cham { width: 7px; height: 7px; margin: 0; }

/* gạch phân cách giữa các mục ở cột phải */
.td-tom-tat > h3 { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s4); }

/* viên thuốc kcal: viền là dải tỷ lệ nhóm thực phẩm */
.td-vien { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface-3); margin-left: 10px; vertical-align: middle; cursor: help; }
.td-vien__trong { display: inline-flex; align-items: baseline; gap: 4px; background: var(--surface); border-radius: 99px; padding: 1px 12px; font: 400 var(--xxs)/1.5 var(--f-body); color: var(--ink-2); white-space: nowrap; font-style: normal; }
.td-vien__trong b { font: 700 var(--sm) var(--f-body); color: var(--ink); }
.td-h--ngay .td-vien__trong b { color: var(--brand); font-size: var(--md); }
.td-h--bua .td-vien__trong b { font-size: var(--sm); }

/* viên kcal: viền dày hơn, màu chạy vòng quanh viên cho dễ thấy tỷ lệ */
.td-vien { padding: 5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent); }
.td-vien__trong { padding: 2px 12px; box-shadow: 0 0 0 1.5px var(--surface); }

/* viên kcal: bỏ nền trắng, cả viên là màu nhóm thực phẩm, chữ trắng có viền tối cho nổi */
.td-vien { padding: 0; }
.td-vien__trong { background: none !important; box-shadow: none; padding: 3px 14px; color: #fff !important;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.8); font-weight: 600; }
.td-vien__trong b, .td-h--ngay .td-vien__trong b { color: #fff !important; }

/* thẻ rê chuột: không bao giờ tràn màn hình (màn nhỏ, phóng to 140 %): cao tối đa bằng màn hình, cuộn bên trong; gọn hơn */
.td-the { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; width: min(440px, calc(100vw - 16px)); }
.td-the .noi__lq { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 3px 0; }
.td-the .noi__lq > span:first-child { font-size: var(--xxs); }
.td-the .noi__mo-ta { margin-bottom: 6px; }
@media (max-height: 700px) { .td-the { font-size: var(--xxs); padding: 8px 10px; } .td-the .noi__lc { margin-top: 4px; } }
.td-hop__ghi--td { font-weight: 700; color: var(--ink); margin: 12px 0 4px; }

/* so với nhu cầu khuyến nghị */
.td-rni h3 { display: flex; align-items: center; gap: 4px; }
.td-rni__chon { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 6px 0; }
.td-rni__chon select { font: 400 var(--sm) var(--f-body); max-width: 520px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.td-rni__luu-y { border-left: 3px solid var(--uoc, #B5650F); padding-left: 8px; }
.td-dg--gan .td-dg-nx, td.td-dg--gan { color: var(--uoc, #B5650F); }

/* món: nền trắng hết, không tô theo vai (đã có nhãn vai) */
.td-bang tr.td-h--mon { background: var(--surface); }
.td-bang tr.td-h--mon > * { border-top-color: var(--rule); }
.td-bang tr.td-h--mon th.td-cot-ten { box-shadow: inset 3px 0 0 var(--rule); }
.td-bang tr.td-dong th.td-cot-ten { background-image: linear-gradient(to right, transparent 36px, var(--rule) 36px, var(--rule) 38px, transparent 38px); }
.td-rni__sao { color: var(--uoc, #B5650F); cursor: help; font-weight: 700; margin-left: 2px; }

.td-tk-ds { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.td-tk-ds button { width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left; font: 500 var(--sm) var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.td-tk-ds button:hover { border-color: var(--brand); }
.td-tk-ds small { color: var(--ink-3); font-weight: 400; }

/* ---------- hồ sơ người ăn, đối chiếu khẩu phần, tăng trưởng, đơn vị ăn (trang Chi tiết đánh giá) */
.td-hs { margin: var(--s3) 0 var(--s5); display: grid; gap: var(--s4); }
.td-hs h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--s2); font-size: var(--md); }
.td-hs h3 small { font: 400 var(--xs) var(--f-body); color: var(--ink-3); }
.td-hs-khung { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 900px) { .td-hs-khung { grid-template-columns: 1fr; } }
.td-hs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); }
.td-hs-form label { display: grid; gap: 4px; font: 600 var(--xs) var(--f-body); color: var(--ink-2); }
.td-hs-form select, .td-hs-form input { font: 400 var(--sm) var(--f-body); padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-width: 0; width: 100%; }
.td-hs-form input:focus, .td-hs-form select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.td-hs-o-nhap { display: flex; align-items: center; gap: 4px; }
.td-hs-o-nhap input { flex: 1; font-variant-numeric: tabular-nums; }
.td-hs-o-nhap select { width: auto; flex: none; }
.td-hs-o-nhap i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.td-hs-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.td-hs-luoi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.td-hs-o { display: grid; gap: 2px; align-content: start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--c, var(--rule)); border-radius: var(--r-sm); }
.td-hs-o span { font-size: var(--xs); color: var(--ink-3); }
.td-hs-o span em { font-style: normal; color: var(--brand); margin-left: 4px; }
.td-hs-o b { font: 700 var(--lg) var(--f-body); font-variant-numeric: tabular-nums; color: var(--c, var(--ink)); }
.td-hs-o b small { font-size: var(--xs); font-weight: 400; color: var(--ink-3); }
.td-hs-o small { font-size: var(--xs); color: var(--ink-2); }
.td-hs-o.td-dg--dat { --c: var(--xo); } .td-hs-o.td-dg--thieu { --c: var(--bot); } .td-hs-o.td-dg--du { --c: var(--loi); } .td-hs-o.td-dg--gan { --c: var(--uoc, #B5650F); }
.td-hs-o--trong b { color: var(--ink-3); }
.td-hs-nguon { color: var(--ink-3) !important; font-size: var(--xxs) !important; }
.td-hs-kq { display: grid; gap: var(--s2); }
.td-hs-tt, .td-hs-dc, .td-hs-dv { padding-top: var(--s3); border-top: 1px solid var(--rule); }
.td-hs-2cot { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s4); margin-top: var(--s3); align-items: start; }
.td-hs-2cot > div:first-child { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s3); align-items: center; }
.td-hs-2cot > div:first-child > p { grid-column: 1 / -1; }
@media (max-width: 1000px) { .td-hs-2cot { grid-template-columns: 1fr; } }
.td-hs-plg, .td-hs-bua { margin-top: 0; }
.td-hs-plg small { font-weight: 400; }
.td-hs-vach { display: block; height: 5px; background: var(--surface-2); border-radius: 3px; margin-top: 4px; max-width: 220px; }
.td-hs-vach i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.td-hs-dvi { font-weight: 700; color: var(--xo); }
.td-hs-cach { text-align: left !important; color: var(--ink-2); font-size: var(--xs); white-space: nowrap; }
.td-cuon { overflow-x: auto; }
/* biểu đồ tăng trưởng */
.td-tt-bds { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.td-tt-bd { margin: 0; padding: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.td-tt-bd figcaption { font-size: var(--sm); margin-bottom: 4px; } .td-tt-bd figcaption small { color: var(--ink-3); }
.td-tt-bd svg { width: 100%; height: auto; display: block; }
.td-tt-bd text { font: 400 11px var(--f-body); fill: var(--ink-2); }
.td-tt-nen { fill: var(--surface); stroke: var(--rule); }
.td-tt-luoi { stroke: var(--rule); stroke-dasharray: 2 3; }
.td-tt-bd polyline { fill: none; stroke-width: 1.5; }
.td-tt-z0 { stroke: var(--xo); stroke-width: 2.4 !important; }
.td-tt-z2, .td-tt-za2 { stroke: var(--uoc, #B5650F); }
.td-tt-z3, .td-tt-za3 { stroke: var(--loi); stroke-dasharray: 5 3; }
.td-tt-moc { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.td-tt-diem { fill: var(--brand); stroke: #fff; stroke-width: 2; }
.td-tt-chu { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: var(--xs); color: var(--ink-2); margin: var(--s2) 0 0; }
.td-tt-k { display: inline-block; width: 18px; height: 3px; margin-right: 4px; vertical-align: middle; }
.td-tt-k--3 { background: var(--loi); } .td-tt-k--2 { background: var(--uoc, #B5650F); } .td-tt-k--0 { background: var(--xo); height: 4px; }
.td-tt-k--d { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }

/* ---------- nút Lưu và hộp gửi xác minh */
.td-dau--do .nut--chinh-nho { background: var(--surface); color: var(--brand); border-color: var(--surface); font-weight: 700; }
.td-menu__hop > button small { display: block; color: var(--ink-3); font-size: var(--xxs); }
.td-hop--gui { max-width: 560px; }
.td-gui-tt { margin: var(--s3) 0; padding: 10px 12px 10px 28px; background: var(--surface-2); border-radius: var(--r-sm); font-size: var(--sm); display: grid; gap: 4px; }
.td-gui-o { display: grid; gap: 4px; font: 600 var(--sm) var(--f-body); }
.td-gui-o small { font-weight: 400; color: var(--ink-3); }
.td-gui-o textarea { font: 400 var(--sm) var(--f-body); padding: 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); resize: vertical; }
.td-gui-dong { display: flex; gap: 8px; align-items: flex-start; font-size: var(--sm); margin: var(--s3) 0; }

/* ---------- biểu đồ phân tích khẩu phần */
.td-hs-bd { padding-top: var(--s3); border-top: 1px solid var(--rule); }
.td-bd-luoi-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--s4); }
@media (max-width: 600px) { .td-bd-luoi-o { grid-template-columns: 1fr; } }
.td-bd { margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.td-bd figcaption b { display: block; font-size: var(--sm); }
.td-bd figcaption small { display: block; color: var(--ink-3); font-size: var(--xs); margin: 2px 0 6px; }
.td-bd svg { width: 100%; height: auto; display: block; }
.td-bd svg text { font: 400 11px var(--f-body); fill: var(--ink-2); }
.td-bd .td-bd-so { font-weight: 700; fill: var(--ink); }
.td-bd .td-bd-dv { font-size: 10.5px; fill: var(--ink-3); }
.td-bd-luoi { stroke: var(--rule); stroke-dasharray: 2 3; }
.td-bd-truc { stroke: var(--ink-3); }
.td-bd-chu { display: flex; gap: 12px; font-size: var(--xs); color: var(--ink-2); margin: 4px 0 0; }
.td-bd-k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.td-bd-day { display: flex; height: 22px; border-radius: 4px; overflow: hidden; margin: 4px 0 8px; background: var(--surface-2); }
.td-bd-day i { display: block; height: 100%; }
.td-bd-bang { font-size: var(--xs); margin-top: 8px; }
.td-bd-bang th, .td-bd-bang td { padding: 4px 8px; }
.td-bd-bang .td-hs-vach { display: inline-block; width: 70px; margin: 0 0 0 8px; vertical-align: middle; }
.td-bd-dam { fill: var(--dam); background: var(--dam); }
.td-bd-beo { fill: var(--beo); background: var(--beo); }
.td-bd-bot { fill: var(--bot); background: var(--bot); }
.td-bd-xo { fill: var(--xo); background: var(--xo); }
.td-bd-na { fill: #6B7C93; background: #6B7C93; }
.td-bd-chol { fill: #B5651D; background: #B5651D; }
.td-bd-purin { fill: #7A5BA6; background: #7A5BA6; }
.td-bd-c0 { fill: #A8A29E; background: #A8A29E; }
.td-bd-c1 { fill: #B23A2A; background: #B23A2A; }
.td-bd-c2 { fill: #E08A3C; background: #E08A3C; }
.td-bd-c3 { fill: #2F74B5; background: #2F74B5; }
.td-bd-c4 { fill: #C9961A; background: #C9961A; }
.td-bd-c5 { fill: #3E9B47; background: #3E9B47; }
.td-bd-th-luong_thuc { fill: var(--th-luong_thuc, #A8A29E); background: var(--th-luong_thuc, #A8A29E); }
.td-bd-th-rau { fill: var(--th-rau, #A8A29E); background: var(--th-rau, #A8A29E); }
.td-bd-th-qua { fill: var(--th-qua, #A8A29E); background: var(--th-qua, #A8A29E); }
.td-bd-th-dam { fill: var(--th-dam, #A8A29E); background: var(--th-dam, #A8A29E); }
.td-bd-th-sua { fill: var(--th-sua, #A8A29E); background: var(--th-sua, #A8A29E); }
.td-bd-th-beo { fill: var(--th-beo, #A8A29E); background: var(--th-beo, #A8A29E); }
.td-bd-th-duong { fill: var(--th-duong, #A8A29E); background: var(--th-duong, #A8A29E); }
.td-bd-th-muoi { fill: var(--th-muoi, #A8A29E); background: var(--th-muoi, #A8A29E); }
.td-bd-th-khac { fill: var(--th-khac, #A8A29E); background: var(--th-khac, #A8A29E); }
.td-bd-th-chua_tach { fill: var(--th-chua_tach, #A8A29E); background: var(--th-chua_tach, #A8A29E); }
/* menu gộp trong thanh đỏ trang thực đơn */
.td-ra .menu-nhom { position: relative; }
.td-ra .menu-tha { display: none; position: absolute; top: 100%; left: -6px; z-index: 60; min-width: 220px; padding: 6px; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.td-ra .menu-tha--phai { left: auto; right: -6px; }
.td-ra .menu-nhom:hover .menu-tha, .td-ra .menu-nhom:focus-within .menu-tha { display: flex; }
.td-ra .menu-tha a, .td-ra .menu-tha button { color: var(--ink); font: 500 var(--sm) var(--f-body); padding: 7px 10px; border: 0; justify-content: flex-start; white-space: nowrap; }
.td-ra .menu-tha a:hover, .td-ra .menu-tha button:hover { background: var(--surface-2); color: var(--brand); border-color: transparent; }
.td-ra .menu-tha .bieu-tuong, .td-ra .menu-tha .bt { width: 16px; height: 16px; color: var(--brand); }
.td-hs-vach i.td-bd-dam { background: var(--dam); }
.td-hs-vach i.td-bd-beo { background: var(--beo); }
.td-hs-vach i.td-bd-bot { background: var(--bot); }
.td-hs-vach i.td-bd-xo { background: var(--xo); }
.td-hs-vach i.td-bd-na { background: #6B7C93; }
.td-hs-vach i.td-bd-chol { background: #B5651D; }
.td-hs-vach i.td-bd-purin { background: #7A5BA6; }
.td-hs-vach i.td-bd-c0 { background: #A8A29E; }
.td-hs-vach i.td-bd-c1 { background: #B23A2A; }
.td-hs-vach i.td-bd-c2 { background: #E08A3C; }
.td-hs-vach i.td-bd-c3 { background: #2F74B5; }
.td-hs-vach i.td-bd-c4 { background: #C9961A; }
.td-hs-vach i.td-bd-c5 { background: #3E9B47; }
.td-hs-vach i.td-bd-th-luong_thuc { background: var(--th-luong_thuc, #A8A29E); }
.td-hs-vach i.td-bd-th-rau { background: var(--th-rau, #A8A29E); }
.td-hs-vach i.td-bd-th-qua { background: var(--th-qua, #A8A29E); }
.td-hs-vach i.td-bd-th-dam { background: var(--th-dam, #A8A29E); }
.td-hs-vach i.td-bd-th-sua { background: var(--th-sua, #A8A29E); }
.td-hs-vach i.td-bd-th-beo { background: var(--th-beo, #A8A29E); }
.td-hs-vach i.td-bd-th-duong { background: var(--th-duong, #A8A29E); }
.td-hs-vach i.td-bd-th-muoi { background: var(--th-muoi, #A8A29E); }
.td-hs-vach i.td-bd-th-khac { background: var(--th-khac, #A8A29E); }
.td-hs-vach i.td-bd-th-chua_tach { background: var(--th-chua_tach, #A8A29E); }

/* menu phải trang thực đơn: cùng cỡ chữ, khoảng cách, nút Đăng nhập như menu các trang khác */
.td-ra { gap: var(--s4); }
.td-ra > a, .td-ra .menu-nhom__dau { font: 500 var(--sm) var(--f-body); padding: 6px 0; border: 0; border-radius: 0; opacity: .92; gap: 6px; }
.td-ra > a:hover, .td-ra .menu-nhom__dau:hover { opacity: 1; border-color: transparent; text-decoration: underline; text-underline-offset: .35em; }
.td-ra > a[aria-current] { opacity: 1; box-shadow: inset 0 -3px 0 var(--sao); text-decoration: none; }
.td-ra > a .bieu-tuong, .td-ra .menu-nhom__dau .bieu-tuong { width: 16px; height: 16px; }
.td-ra > a.tk-nut { padding: 5px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-sm); font-size: var(--xs); margin-left: 0; }
.td-ra > a.tk-nut:hover { background: rgba(255,255,255,.15); text-decoration: none; }
@media (max-width: 1500px) { .td-ra { gap: var(--s3); } }

/* trang thực đơn chật chỗ: menu chung chỉ hiện biểu tượng (rê chuột hiện tên; menu thả xuống vẫn đủ chữ), thanh đỏ giữ một dòng */
.td-ra { gap: 2px; }
.td-ra .td-ra__chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.td-ra > a:not(.tk-nut), .td-ra .menu-nhom__dau { padding: 6px 7px; border-radius: var(--r-sm); text-decoration: none !important; }
.td-ra > a:not(.tk-nut):hover, .td-ra .menu-nhom__dau:hover, .td-ra .menu-nhom:focus-within .menu-nhom__dau { background: rgba(255,255,255,.16); }
.td-ra > a:not(.tk-nut) .bieu-tuong, .td-ra .menu-nhom__dau .bieu-tuong { width: 19px; height: 19px; }
.td-ra > a.tk-nut { margin-left: 6px; max-width: 150px; }
.td-ra > a.tk-nut span { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 2300px) { .td-ra .td-ra__chu { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .td-ra { gap: var(--s3); } }
/* chọn cách xem biểu đồ khi nhiều ngày */
.td-bd-xem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 var(--s3); }
.td-bd-xem > span { font-size: var(--xs); color: var(--ink-3); margin-right: 4px; }
.td-bd-xem button { font: 500 var(--xs) var(--f-body); padding: 4px 10px; border: 1px solid var(--rule); border-radius: 99px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.td-bd-xem button:hover { border-color: var(--brand); color: var(--brand); }
.td-bd-xem button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* thẻ chi tiết khi rê chuột vào biểu đồ cơ cấu (hàng bảng hoặc đoạn thanh) */
.td-bd-day { overflow: visible; }
.td-bd-doan { position: relative; display: block; height: 100%; cursor: help; }
.td-bd-doan:first-child { border-radius: 4px 0 0 4px; } .td-bd-doan:last-child { border-radius: 0 4px 4px 0; }
.td-bd-doan:hover, .td-bd-doan:focus { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 5; }
.td-bd-co-the { cursor: help; }
.td-bd-co-the th { position: relative; }
.td-bd-co-the:hover, .td-bd-co-the:focus-within { background: var(--surface-2); }
.td-bd-xem-them { font-size: var(--xxs); font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.td-bd-the { display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: min(380px, 80vw); padding: 10px 12px; text-align: left;
  background: var(--surface); color: var(--ink); 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: 400 var(--xs) var(--f-body); white-space: normal; }
.td-bd-doan .td-bd-the { top: calc(100% + 6px); }
.td-bd-doan:nth-last-child(-n+2) .td-bd-the { left: auto; right: 0; }
.td-bd-co-the:hover .td-bd-the, .td-bd-co-the:focus-within .td-bd-the, .td-bd-doan:hover .td-bd-the, .td-bd-doan:focus .td-bd-the { display: block; }
.td-bd-the > b { display: block; font-size: var(--sm); }
.td-bd-the > small { display: block; color: var(--ink-3); margin-bottom: 6px; }
.td-bd-the table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.td-bd-the td { padding: 3px 4px; border-bottom: 1px solid var(--rule); font-weight: 400; }
.td-bd-the td:nth-child(2), .td-bd-the td:nth-child(3) { text-align: right; white-space: nowrap; color: var(--ink-2); }
.td-bd-the td:last-child { width: 60px; } .td-bd-the .td-hs-vach { margin: 0; width: 56px; }
.td-bd-the__con td { color: var(--ink-3); font-style: italic; }
.td-bd { overflow: visible; }
.td-bd-bang td:last-child, .td-bd-bang th:not(:first-child) { white-space: nowrap; }

/* ---------- nhiều mã chế độ ăn, áp cho ngày tùy chọn */
.td-cd { margin: var(--s4) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.td-cd h3, .td-cd-ss h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--md); margin: 0 0 var(--s2); }
.td-cd h3 small, .td-cd-ss h3 small { font: 400 var(--xs) var(--f-body); color: var(--ink-3); }
.td-cd-ds { display: grid; gap: 6px; justify-items: start; }
.td-cd-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--brand); border-radius: var(--r-sm); width: 100%; }
.td-cd-hang select { font: 400 var(--sm) var(--f-body); padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); max-width: 380px; }
.td-cd-ap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.td-cd-ap > span { font-size: var(--xs); color: var(--ink-3); margin-right: 2px; }
.td-cd-ap button { font: 500 var(--xs) var(--f-body); padding: 3px 9px; border: 1px solid var(--rule); border-radius: 99px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.td-cd-ap button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.td-cd-xoa { margin-left: auto; border: 0; background: none; font-size: 18px; color: var(--ink-3); cursor: pointer; padding: 0 6px; }
.td-cd-xoa:hover { color: var(--loi); }
/* thẻ nguồn tham khảo của mã */
.td-cd-nguon { position: relative; display: inline-flex; align-items: center; gap: 3px; font: 500 var(--xs) var(--f-body); color: var(--link); cursor: help; padding: 2px 6px; border-radius: var(--r-sm); }
.td-cd-nguon .bt { width: 14px; height: 14px; margin: 0; }
.td-cd-nguon:hover, .td-cd-nguon:focus-within { background: var(--surface-2); }
.td-cd-the { display: none; position: absolute; z-index: 45; top: 100%; left: 0; width: min(420px, 86vw); padding: 10px 12px; background: var(--surface); color: var(--ink); 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: 400 var(--xs)/1.5 var(--f-body); cursor: auto; }
.td-cd-nguon:hover .td-cd-the, .td-cd-nguon:focus-within .td-cd-the { display: grid; gap: 5px; }
.td-cd-the b { font-weight: 700; } .td-cd-the > b:first-child { font-size: var(--sm); }
.td-cd-the small { color: var(--ink-3); }
.td-cd-hang .td-cd-the { left: auto; right: 0; }
/* bảng so sánh nhanh */
.td-cd-ss__ma { text-align: center !important; min-width: 130px; }
.td-cd-ss__ma b { display: block; } .td-cd-ss__ma small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--xxs); }
.td-cd-ss td { text-align: center !important; } .td-cd-ss td b { display: block; } .td-cd-ss td small { display: block; color: var(--ink-3); font-size: var(--xxs); }

/* biểu đồ cột: vùng rê chuột trùm từng cột; dòng trong thẻ bấm được để về bảng */
.td-bd-ve { position: relative; }
.td-bd-vung { position: absolute; top: 0; bottom: 0; cursor: help; border-radius: 4px; }
.td-bd-vung:hover, .td-bd-vung:focus { background: rgba(0,0,0,.05); outline: none; }
.td-bd-vung .td-bd-the { top: 40%; left: 50%; }
.td-bd-vung--phai .td-bd-the { left: auto; right: 50%; }
.td-bd-vung:hover .td-bd-the, .td-bd-vung:focus .td-bd-the, .td-bd-vung:focus-within .td-bd-the { display: block; }
.td-bd-the tr[data-bd-di] { cursor: pointer; }
.td-bd-the tr[data-bd-di]:hover td { background: var(--surface-2); color: var(--brand); }

/* theo dõi thai kỳ trong hồ sơ người ăn */
.td-hs-thai { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 4px 0 0; padding: 10px; border: 1px solid #d3b45d; border-radius: var(--r-sm); background: color-mix(in srgb, #F5C518 9%, var(--surface)); }
.td-hs-thai legend { font: 700 var(--xs) var(--f-body); color: #7a5b00; padding: 0 4px; }
.td-hs-rong { grid-column: 1 / -1; }
.td-hs-thai textarea { font: 400 var(--sm) var(--f-body); padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); resize: vertical; width: 100%; }
.td-hs-thai > small { color: var(--ink-3); font-size: var(--xxs); }
.td-hs-o--thai { --c: #B5650F; }
.td-hs-o--phu { border-style: dashed; cursor: help; }

/* menu Mẫu: link kho thực đơn mẫu; hộp đưa vào kho mẫu */
.td-menu__lk { display: block; text-align: left; font: 400 var(--sm) var(--f-body); color: var(--ink); text-decoration: none; padding: 6px 8px; border-radius: var(--r-sm); }
.td-menu__lk:hover { background: var(--surface-2); color: var(--brand); }
.td-menu__lk small { display: block; color: var(--ink-3); font-size: var(--xxs); }
.td-menu__hop [hidden] { display: none !important; }
.td-hop--mau { max-width: 600px; }
.td-hop--mau form { display: grid; gap: 10px; }
.td-hop--mau input:not([type=checkbox]) { font: 400 var(--sm) var(--f-body); padding: 7px 9px; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.td-mau-chon { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--sm); }
.td-mau-chon legend { font: 600 var(--xs) var(--f-body); color: var(--ink-2); padding: 0 4px; }

/* xem tới tầng Món (hoặc Bữa): hàng món gọn lại cho dễ lướt cả ngày */
.td-bang[data-tang="3"] .td-h--mon > th, .td-bang[data-tang="3"] .td-h--mon > td { padding-top: 3px; padding-bottom: 3px; }
.td-bang[data-tang="3"] .td-h--mon .td-mon-ten { font-size: var(--sm); }
.td-bang[data-tang="3"] .td-h--mon .td-o { font-size: var(--sm); padding-top: 1px; padding-bottom: 1px; }
.td-bang[data-tang="3"] tr.td-them-mon > * { padding-top: 2px; padding-bottom: 2px; }

/* ---------- chuyển động nhẹ trang tính (thêm 13/11) */
@media (prefers-reduced-motion: no-preference) {
  /* hiện ra: trượt rất ngắn (<= 4px) và mờ dần; không giữ trạng thái cuối nên không đè opacity khi kéo */
  @keyframes td-cd-xuong { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes td-cd-len { from { opacity: 0; transform: translateY(4px); } }
  @keyframes td-cd-thong-bao { from { opacity: 0; transform: translateY(6px); } }
  @keyframes td-cd-mo { from { opacity: 0; } }
  @keyframes td-cd-nhay-nhe { 0%, 25% { background-color: color-mix(in srgb, var(--sao) 30%, transparent); } 100% { background-color: transparent; } }

  .td-the:not([hidden]) { animation: td-cd-xuong var(--dong-tg) var(--dong-em); }
  .td-menu__hop:not([hidden]) { animation: td-cd-xuong var(--dong-tg) var(--dong-em); }
  .td-ngu-canh:not([hidden]) { animation: td-cd-xuong 140ms var(--dong-em); }
  .td-goi-y:not([hidden]) { animation: td-cd-len var(--dong-tg) var(--dong-em); }
  .td-thong-bao:not([hidden]) { animation: td-cd-thong-bao 180ms var(--dong-em); }
  .td-than:not([hidden]) { animation: td-cd-mo 180ms var(--dong-em); }

  /* hàng bảng: chỉ đổi nền khi rê chuột, không animate lúc render lại (innerHTML) */
  .td-bang tr { transition: background-color var(--dong-nhanh) var(--dong-em); }

  /* nút, tab, nút tầng: đổi màu mượt và nhún nhẹ khi nhấn */
  .td-tab button, .td-dau .nut--nho, [data-td-tang], .td-nho, .td-menu__hop > button, .td-ngu-canh button {
    transition: background-color var(--dong-nhanh) var(--dong-em), color var(--dong-nhanh) var(--dong-em), box-shadow var(--dong-nhanh) var(--dong-em), transform var(--dong-nhanh) var(--dong-em);
  }
  .td-tab button:active, .td-dau .nut--nho:active, [data-td-tang]:active, .td-nho:active, .td-menu__hop > button:active, .td-ngu-canh button:active { transform: scale(.97); }

  /* ô vừa đổi: nền vàng nhạt mờ dần trong 900ms (thay cho thời lượng 1.3s ở trên) */
  .vua-doi, .vua-doi .td-o { animation: td-cd-nhay-nhe 900ms var(--dong-em); }
}

/* đầu cột chất kéo qua lại để đổi thứ tự cột */
.td-bang th.td-cot-keo { cursor: grab; user-select: none; }
.td-bang th.td-cot-keo:hover span { text-decoration: underline dotted; text-underline-offset: 3px; }
.td-bang th.td-cot-keo:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.td-bang th.td-cot-dang-keo { opacity: .45; }
.td-bang th.td-cot-tha-truoc { box-shadow: inset 3px 0 0 var(--brand); }
.td-bang th.td-cot-tha-sau { box-shadow: inset -3px 0 0 var(--brand); }

/* mã bài trong kho cạnh tên món / thực phẩm: nhỏ, mờ; bấm để chép */
.td-ma { margin-left: 6px; padding: 0 4px; border: 0; border-radius: 3px; background: none; font: 400 10px/1.4 ui-monospace, Consolas, monospace; color: var(--ink-3); opacity: .7; cursor: copy; vertical-align: middle; font-style: normal; }
.td-ma:hover, .td-ma:focus-visible { opacity: 1; background: var(--surface-2); color: var(--ink-2); }
@media print { .td-ma { display: none; } }

/* điện thoại: thông báo trang tính cần màn hình lớn */
.td-dt { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(20, 8, 8, .72); }
.td-dt[hidden] { display: none; }
.td-dt__hop { width: min(420px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--r-md); border-top: 4px solid var(--brand); padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.4); text-align: center; }
.td-dt__bt { font-size: 40px; margin: 0; line-height: 1; }
.td-dt h2 { font-size: var(--lg, 1.25rem); margin: 8px 0; }
.td-dt p { margin: 0 0 10px; font-size: var(--sm); line-height: 1.5; }
.td-dt__lk { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px; border-radius: var(--r-sm); background: var(--surface-2); font: 400 var(--xs) ui-monospace, Consolas, monospace; }
.td-dt__nut { display: grid; gap: 8px; margin-top: 6px; }
.td-dt__nut .nut { justify-content: center; }
.td-dt__van { background: none; border: 0; color: var(--ink-3); font: inherit; font-size: var(--xs); text-decoration: underline; cursor: pointer; padding: 6px; }

/* hồ sơ người ăn chia 2 ô: theo Viện Dinh dưỡng | theo bệnh viện (mã chế độ ăn) — 14/11 */
.td-hs-2o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
@media (max-width: 1000px) { .td-hs-2o { grid-template-columns: 1fr; } }
.td-hs-ben { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--rule); border-top: 3px solid var(--c, var(--brand)); border-radius: var(--r-md); background: var(--surface); }
.td-hs-ben--vdd { --c: var(--xo); } .td-hs-ben--bv { --c: var(--bot); }
.td-hs-ben h4 { font: 700 var(--sm) var(--f-body); display: grid; gap: 2px; }
.td-hs-ben h4 small { font-weight: 400; color: var(--ink-3); font-size: var(--xs); }
.td-hs-ben .td-hs-form { border: 0; padding: 0; background: none; }
.td-hs-nguon-o { margin: 0; font-size: var(--xxs); color: var(--ink-3); line-height: 1.45; }
.td-hs-nguon-o a { color: inherit; }

/* tầng Bữa: ô bữa ăn + tên món (xem nhanh, người thường lên thực đơn) — 14/11 */
.td-bang[data-tang="2"] thead th { background: var(--surface-2); }
.td-lb-goi-y { margin-left: 12px; font-weight: 400; color: var(--ink-3); font-size: var(--xxs); }
.td-lb-o { padding: 12px 0 4px !important; background: var(--ground); }
.td-lb-ngay { margin: 0 0 18px; }
.td-lb-ngay__td { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 700 var(--lg) var(--f-display); }
.td-lb-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.td-lb-bua { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); }
.td-lb-bua header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.td-lb-bua header b { text-transform: uppercase; letter-spacing: .04em; font-size: var(--sm); }
.td-lb-bua ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; }
.td-lb-bua li { display: flex; align-items: baseline; gap: 8px; font-size: var(--sm); line-height: 1.35; }
.td-lb-cham { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vai-c, var(--rule)); transform: translateY(-1px); }
.td-lb-trong { margin: 0; color: var(--ink-3); font-size: var(--xs); flex: 1; }
.td-lb-them { align-self: flex-start; border: 1px dashed var(--rule); background: transparent; color: var(--ink-2); border-radius: var(--r-sm); padding: 3px 10px; font: 500 var(--xs) var(--f-body); cursor: pointer; }
.td-lb-them:hover { border-color: var(--brand); color: var(--brand); }
/* đường kẻ bảng tính đậm hơn cho dễ dò hàng (14/11: nền trắng mới làm --rule quá nhạt); thêm vạch dọc nhẹ giữa các cột số */
.td-bang { --rule: #C4C4BF; }
.td-bang td + td, .td-bang th + td { box-shadow: inset 1px 0 0 #E6E6E2; }
@media (prefers-color-scheme: dark) { .td-bang { --rule: #4A4A4A; } .td-bang td + td, .td-bang th + td { box-shadow: inset 1px 0 0 #2E2E2E; } }