/* Trang danh sách và nhóm (chế độ Operate). Tiền tố .ds-. Dùng biến của web.css; thử ở 1536×864.
   Không cuộn lồng: trang cuộn bằng thanh cuộn của trình duyệt; thanh lọc và tiêu đề cột dính. Không cắt chữ "…". */

.ds-trang { --ds-loc-cao: 0px; padding: var(--s2) 0 var(--s4); }
@media (min-width: 1100px) { .ds-trang { --ds-loc-cao: 52px; } }
.ds-trang .duong-dan ol { margin-bottom: var(--s1); }
.nw { white-space: nowrap; }
.bt-td { width: .85em; height: .85em; color: var(--loai-chu); vertical-align: -.05em; margin-right: .3em; }

/* ---------- dải đầu trang: tên + tóm tắt */
.ds-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5); margin-bottom: var(--s2); }
.ds-dau h1 { font-size: var(--xl); }
.ds-tom { margin: 0; font-size: var(--sm); color: var(--ink-2); }
.ds-tom strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-cong-cu { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.ds-ghi { margin: 0 0 var(--s2); max-width: 90ch; font-size: var(--sm); color: var(--ink-2); }
.ds-ghi--bang { margin: var(--s3); }

/* thanh lọc: một hàng, dính dưới thanh trên cùng (từ 1100px) */
.ds-thanh-loc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); background: var(--ground); margin-bottom: var(--s2); padding: 6px 0; }
@media (min-width: 1100px) {
  .ds-thanh-loc { position: sticky; top: var(--cao-dinh); z-index: 9; height: var(--ds-loc-cao); margin-bottom: 0; padding: 0; flex-wrap: nowrap; border-bottom: 1px solid var(--rule); }
}
.ds-loc { position: relative; display: block; }
.ds-loc .bt { position: absolute; left: 10px; top: 50%; margin: -.575em 0 0; color: var(--ink-3); pointer-events: none; width: 16px; height: 16px; }
.ds-loc input { width: 300px; max-width: 100%; font: inherit; font-size: var(--sm); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 6px 10px 6px 34px; }
.ds-loc input::placeholder, .ds-ngan__loc input::placeholder { color: var(--ink-3); }
.ds-chon { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--xs); color: var(--ink-2); }
.ds-chon .bt { color: var(--loai-chu); margin: 0; }
.ds-chon select { font: inherit; font-size: var(--sm); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 5px 8px; }
.ds-tick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sm); color: var(--ink-2); cursor: pointer; }
.ds-tick input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
.ds-dem { margin: 0 0 0 auto; font-size: var(--xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-nut { display: inline-flex; align-items: center; font: 500 var(--sm) var(--f-body); color: var(--link); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 5px var(--s3); text-decoration: none; cursor: pointer; }
.ds-nut:hover { background: var(--surface-2); color: var(--link-hover); }
.ds-nut--nho { padding: 2px var(--s2); font-size: var(--xs); margin-left: var(--s2); }

/* ---------- khung chính: cột trái (nhóm, nhóm phụ) + bảng; cả hai cuộn theo trang */
.ds-than { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: var(--s3); align-items: start; margin-top: var(--s2); }
.ds-rail { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
/* JS bật lớp này và đặt top: cột trái dính; cao hơn màn hình thì top âm để mép dưới đứng yên ở đáy màn hình (xem hết mọi nhóm không cần khung cuộn). */
.ds-rail--dinh { position: sticky; top: calc(var(--cao-dinh) + var(--ds-loc-cao) + var(--s2)); }
.ds-ngan--phu { order: -1; }
.ds-ngan { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.ds-ngan__td { display: flex; align-items: center; background: color-mix(in srgb, var(--loai) 12%, var(--surface)); padding: 5px var(--s3); font: 600 var(--xxs)/1.4 var(--f-body); color: var(--ink-2); letter-spacing: .02em; cursor: pointer; }
.ds-ngan__td .bt { width: 14px; height: 14px; color: var(--loai-chu); }
.ds-ngan__than { list-style: none; margin: 0; padding: 0; }
.ds-ngan__than li + li { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.ds-ngan__than a, .ds-loc-nut { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); width: 100%; text-align: left;
  font: 400 var(--xs)/1.35 var(--f-body); color: var(--ink); background: none; border: 0; padding: 4px var(--s3); text-decoration: none; cursor: pointer; }
.ds-ngan__than a > span:first-child, .ds-loc-nut > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ds-ngan__than a:hover, .ds-loc-nut:hover { background: var(--surface-2); color: var(--ink); }
.ds-ngan__than a[aria-current], .ds-loc-nut[aria-pressed="true"] { background: color-mix(in srgb, var(--link) 12%, transparent); font-weight: 600; }
.ds-ngan__than .dem { flex: none; margin: 0; }
.ds-ngan__loc { position: relative; padding: 4px var(--s2); border-bottom: 1px solid var(--rule); }
.ds-ngan__loc .bt { position: absolute; left: 14px; top: 50%; margin: -7px 0 0; width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }
.ds-ngan__loc input { width: 100%; font: inherit; font-size: var(--xs); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 3px 8px 3px 28px; }
/* nhóm phụ: hiện 8 dòng đầu, "Xem thêm" mở tại chỗ */
.ds-gon:not(.ds-mo):not(.ds-dang-loc) .ds-them-li { display: none; }
.ds-them { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 6px; border: 0; border-top: 1px solid var(--rule); background: var(--surface-2); color: var(--link); font: 500 var(--xs) var(--f-body); cursor: pointer; }
.ds-them:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.ds-them .bt { margin: 0; }
.ds-them[aria-expanded="true"] .bt { transform: rotate(180deg); }

/* bảng: không khung cuộn, đứng trong dòng của trang */
.ds-khung-bang { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); min-width: 0; }

/* ---------- bảng: dày như bảng tính */
.ds-bang { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--xs); line-height: 1.35; }
.ds-bang th, .ds-bang td { padding: 4px var(--s2); border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); vertical-align: middle; overflow-wrap: break-word; }
.ds-bang thead th { position: sticky; top: calc(var(--cao-dinh) + var(--ds-loc-cao)); z-index: 2; background: color-mix(in srgb, var(--loai) 12%, var(--surface)); border-bottom: 1px solid var(--rule);
  font: 600 var(--xxs)/1.3 var(--f-body); color: var(--ink-2); text-align: left; padding: 0; vertical-align: bottom; }
.ds-bang thead th > button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px var(--s2); cursor: pointer; font: inherit; }
.ds-bang thead th > button:hover { background: color-mix(in srgb, var(--loai) 22%, var(--surface)); color: var(--ink); }
.ds-bang thead th > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ds-bang thead th:not(:has(button)) { padding: 6px var(--s2); }
.ds-bang thead .dv { font-weight: 400; color: var(--ink-3); }
.ds-bang thead .bt { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.ds-bang thead th[aria-sort] > button::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: 2px; border: 4px solid transparent; }
.ds-bang thead th[aria-sort="ascending"] > button::after { border-bottom: 5px solid currentColor; border-top: 0; }
.ds-bang thead th[aria-sort="descending"] > button::after { border-top: 5px solid currentColor; border-bottom: 0; }
.ds-bang thead th.c-dam { color: var(--dam); } .ds-bang thead th.c-beo { color: var(--beo-chu); } .ds-bang thead th.c-bot { color: var(--bot); }
.ds-bang tbody tr:hover > * { background: var(--surface-2); }
.ds-bang tbody tr:last-child > * { border-bottom: 0; }

.ds-k-phu { width: 200px; } .ds-k-th { width: 140px; } .ds-k-tren { width: 76px; } .ds-k-kcal { width: 72px; }
.ds-k-so { width: 68px; } .ds-k-so2 { width: 84px; } .ds-k-vach { width: 76px; }
.ds-c-ten { text-align: left; }
.ds-c-phu, .ds-c-th, .ds-c-tren { color: var(--ink-3); }
.ds-c-phu .bt-ds { margin-right: 5px; vertical-align: -3px; }
.ds-c-tren { font-size: var(--xxs); }
.ds-c-so { text-align: right; font-variant-numeric: tabular-nums; }
.ds-c-so .so { white-space: nowrap; }
.ds-bang thead th.ds-c-so > button { text-align: right; }
.ds-bang tbody td.kcal { color: var(--ink); font-weight: 600; }
.ds-bang tbody td.ds-c-so .so { color: inherit; }
.ds-bang tbody td.c-xo, .ds-bang thead th.c-xo { color: color-mix(in srgb, var(--xo) 62%, var(--ink)); }
.ds-bang tbody td.c-dam { color: var(--dam); } .ds-bang tbody td.c-beo { color: var(--beo-chu); } .ds-bang tbody td.c-bot { color: var(--bot); }
.ds-bang tbody td.ds-c-so .so-uoc { color: var(--uoc); }
.ds-trong { color: var(--ink-3); }
.ds-c-chua-co { text-align: left; }
.ds-c-vach { padding-right: var(--s3) !important; }
.ds-c-vach .vach { height: 3px; }

.ds-ten { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); min-width: 0; }
.ds-ten a { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ds-bai { flex: none; font: 500 var(--xxs)/1.5 var(--f-body); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 6px; cursor: help; }
.ds-bai--khop { border-color: var(--link); color: var(--link); }
.ds-bai:hover, .ds-bai:focus-visible { background: var(--surface-3); color: var(--ink); }
.ds-trong-bang { margin: 0; padding: var(--s5) var(--s4); text-align: center; color: var(--ink-2); font-size: var(--sm); }
.ds-chu-thich { margin: 0; padding: var(--s2) var(--s3); border-top: 1px solid var(--rule); font-size: var(--xxs); color: var(--ink-3); max-width: 120ch; }

/* ---------- mục lục nhóm */
.ds-bang--nhom { table-layout: fixed; font-size: var(--sm); }
.ds-bang--nhom th, .ds-bang--nhom td { padding: 6px var(--s3); }
.ds-bang--nhom thead th { padding: 6px var(--s3); }
.ds-bang--nhom tbody th { font-weight: 500; text-align: left; }
.ds-bang--nhom .ds-c-ten { width: 340px; }
.ds-bang--nhom .ds-c-so-muc { width: 200px; text-align: left; }
.ds-bang--nhom tbody .ds-c-so-muc { position: relative; }
.ds-bang--nhom .ds-c-co-so { width: 140px; text-align: left; }
.ds-bang--nhom .ds-c-tv { width: 200px; text-align: left; }
.ds-bang--nhom .ds-c-gom { color: var(--ink-2); font-size: var(--xs); }
.ds-bang--nhom .ds-c-ten a { display: inline-flex; align-items: baseline; }
.ds-bang--nhom .ds-c-ten .bt { color: var(--loai-chu); align-self: center; margin-right: .5em; width: 1.2em; height: 1.2em; }
.ds-bang--nhom .ds-c-so-muc .so, .ds-bang--nhom .ds-c-co-so .so, .ds-bang--nhom .ds-c-tv .so { position: relative; font-weight: 600; }
.ds-thanh { position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--w); max-width: 100%; background: color-mix(in srgb, var(--loai) 16%, transparent); z-index: 0; }
.ds-c-so-muc > :not(.ds-thanh) { position: relative; }
.ds-phu { font-size: var(--xxs); color: var(--ink-3); font-weight: 400; }
.ds-chua th a { font-style: italic; }
.bt-ds { width: 15px; height: 15px; }

/* ---------- ô nổi dùng chung của trang (định vị theo màn hình) */
.ds-noi { position: fixed; z-index: 40; min-width: 260px; max-width: 420px; max-height: 60vh; overflow: auto; }
.ds-noi.hien { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.ds-noi ul { list-style: none; margin: 0; padding: 0; }
.ds-noi li { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; border-top: 1px solid var(--rule); }
.ds-noi li a { min-width: 0; overflow-wrap: anywhere; }
.ds-noi li span { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- máy tính nhỏ và điện thoại */
@media (max-width: 1100px) {
  .ds-than { grid-template-columns: 210px minmax(0, 1fr); }
  .ds-k-phu { width: 140px; } .ds-k-th { width: 100px; }
}
@media (max-width: 860px) {
  .ds-than { grid-template-columns: 1fr; }
  .ds-rail--dinh { position: static; }
  .ds-cong-cu { margin-left: 0; width: 100%; }
  .ds-loc { flex: 1 1 100%; } .ds-loc input { width: 100%; }
  .ds-dem { margin-left: 0; }
  .ds-bang { table-layout: auto; }
  .ds-bang th, .ds-bang td { padding: 4px 5px; }
  .ds-bang col, .ds-bang .ds-c-th, .ds-bang .ds-c-vach, .ds-bang .ds-c-tren, .ds-bang td.c-xo, .ds-bang th.c-xo, .ds-bang .ds-c-phu { display: none; }
  .ds-bang--nhom col { display: table-column; }
  .ds-bang--nhom .ds-c-gom { display: none; }
  .ds-bang--nhom { table-layout: auto; }
  .ds-bang--nhom .ds-c-ten, .ds-bang--nhom .ds-c-so-muc, .ds-bang--nhom .ds-c-co-so, .ds-bang--nhom .ds-c-tv { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ds-noi { transition: none; } }