/* Trang mục Sản phẩm (tiền tố .sp-). Theo du_an_web/ung_dung/DESIGN.md v0.2: dày thông tin, lưới ô, chi tiết trong ô nổi. */
:root { --sp-loi: #A3271B; --sp-loi-nen: #FBEAE7; }
@media (prefers-color-scheme: dark) { :root { --sp-loi: #F0968A; --sp-loi-nen: #3A1D1A; } }

/* ô nổi đang ẩn của ô sát mép phải làm trang rộng hơn màn hình (cũng gặp ở trang mẫu Rau muống): cắt phần tràn ngang, không ảnh hưởng thanh dính */
.trang-muc { overflow-x: clip; }

.sp-phu { color: var(--ink-3); font-size: var(--xxs); font-weight: 400; }
.sp-lien { text-decoration: none; }
.sp-lien:hover { text-decoration: underline; }
.sp-ghi { font-size: var(--sm); color: var(--ink-2); margin: 0 0 var(--s2); max-width: 110ch; }
.sp-ghi--trong { padding: var(--s3); margin: 0; }

/* ---- đầu trang: lưới nhận diện nhỏ gọn, giá, số dinh dưỡng đến từ đâu */
.sp-dau { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; margin: var(--s3) 0 var(--s2); max-width: 880px; }
.sp-dau .o { padding: 3px var(--s2) 4px; }
.sp-dau .o__gt { font-size: var(--xs); line-height: 1.35; }
.sp-gia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s4); margin: 0 0 var(--s1); font-size: var(--sm); color: var(--ink-2); }
.sp-gia__td { font-size: var(--xxs); color: var(--ink-3); min-width: 6.4em; }
.sp-gia__m strong { font-weight: 600; color: var(--ink); }
.sp-gia--so { font-size: var(--xs); }

/* ---- dị ứng: dải nổi bật nhất của khối an toàn */
.sp-diung { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-bottom: var(--s2);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.sp-diung--chua, .sp-diung--co-the { border: 2px solid var(--sp-loi); background: var(--sp-loi-nen); }
.sp-diung__nhan { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); font: 650 var(--md)/1 var(--f-display); color: var(--ink-2); }
.sp-diung--chua .sp-diung__nhan, .sp-diung--co-the .sp-diung__nhan { color: var(--sp-loi); }
.sp-diung__o { position: relative; padding: var(--s2) var(--s4); border-left: 1px solid var(--rule); font-size: var(--sm); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sp-diung--chua .sp-diung__o, .sp-diung--co-the .sp-diung__o { border-left-color: color-mix(in srgb, var(--sp-loi) 35%, transparent); }
.sp-diung__td { font-size: var(--xxs); color: var(--ink-3); line-height: 1.3; }
.sp-diung__chua { font-size: var(--md); font-weight: 650; color: var(--sp-loi); }
.sp-diung__co-the { font-weight: 500; color: var(--ink); }
.sp-diung__o--rong { flex: 1 1 320px; color: var(--ink-2); }
.sp-diung__o--rong em { font-style: normal; color: var(--ink-2); display: block; font-size: var(--xs); }
.sp-diung__o--tt { margin-left: auto; cursor: help; }
.sp-diung__o--tt:hover, .sp-diung__o--tt:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sp-diung__o--tt .noi { left: auto; right: 0; }
.sp-luoi { margin-top: var(--s2); }

/* ---- khối nói rõ nguồn số dinh dưỡng */
.sp-so { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: var(--s2) var(--s4); margin-bottom: var(--s3); font-size: var(--sm); max-width: 1180px; }
.sp-so p { margin: 0 0 var(--s1); }
.sp-so--muon { border-color: color-mix(in srgb, var(--uoc) 55%, var(--rule)); background: color-mix(in srgb, var(--uoc) 6%, var(--surface)); }
.sp-so--muon strong { color: var(--uoc); }
.sp-so--goc { border-color: color-mix(in srgb, var(--link) 45%, var(--rule)); }
.sp-so--khong { border-style: dashed; color: var(--ink-2); }
.sp-so__chu { font-size: var(--xs); color: var(--ink-3); margin: var(--s1) 0 0; }
.sp-tc { list-style: none; margin: var(--s1) 0 var(--s1); padding: 0; }
.sp-tc li { display: grid; grid-template-columns: minmax(0, 24em) auto 9em minmax(0, 1fr); align-items: baseline; gap: 0 var(--s3); padding: 3px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); font-size: var(--xs); }
.sp-tc li:first-child { border-top: 0; }
.sp-tc li > a { font-weight: 500; overflow-wrap: anywhere; }
.sp-tc .kcal { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-tc .kcal small { font-size: var(--xxs); color: var(--ink-3); }
.sp-tc__ly { color: var(--ink-2); }
@media (max-width: 760px) { .sp-tc li { grid-template-columns: 1fr auto; } .sp-tc__ly { grid-column: 1 / -1; } }

/* ---- nơi bán và giá: hai ngăn cạnh nhau, KHÔNG cuộn lồng; 6 dòng đầu, "Xem thêm" mở tại chỗ; chữ xuống dòng, không cắt */
.cac-ngan.sp-ngan2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.sp-bang { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--xs); line-height: 1.35; }
.sp-bang th { background: var(--surface); font: 600 var(--xxs)/1.4 var(--f-body); color: var(--ink-3); text-align: left; padding: 4px var(--s2); border-bottom: 1px solid var(--rule); }
.sp-bang td { padding: 3px var(--s2); vertical-align: baseline; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); overflow-wrap: anywhere; }
.sp-bang tbody tr:first-child td { border-top: 0; }
.sp-xem-them > table tbody tr:first-child td { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.sp-bang tbody tr:hover > * { background: var(--surface-2); }
.sp-bang th:first-child, .sp-bang td:first-child { padding-left: var(--s3); }
.sp-bang .phai { text-align: right; }
.sp-bang .so { font-variant-numeric: tabular-nums; }
.sp-bang .ngay { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-xem-them > summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-top: 1px solid var(--rule); background: var(--surface-2); color: var(--link); font: 500 var(--xs) var(--f-body); cursor: pointer; list-style: none; border-radius: 0 0 var(--r-md) var(--r-md); }
.sp-xem-them > summary::-webkit-details-marker { display: none; }
.sp-xem-them > summary:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.sp-xem-them > summary .bt { margin: 0; }
.sp-xem-them[open] > summary { border-radius: 0; border-bottom: 1px solid var(--rule); }
.sp-xem-them[open] > summary .bt { transform: rotate(180deg); }
.sp-xem-them__dong, .sp-xem-them[open] .sp-xem-them__mo { display: none; }
.sp-xem-them[open] .sp-xem-them__dong { display: inline; }

/* tên khác còn lại ở đầu trang: mở tại chỗ */
.sp-them-ten { font-size: var(--sm); color: var(--ink-2); margin: var(--s1) 0 0; }
.sp-them-ten > summary { cursor: pointer; color: var(--link); display: inline-block; }
.sp-them-ten > p { margin: var(--s1) 0 0; max-width: 90ch; }

/* biểu tượng đi kèm chữ */
.o__td .bt { width: 13px; height: 13px; margin-right: 4px; color: var(--link); vertical-align: -.15em; }
.o--canh-bao .o__td .bt { color: inherit; }
.bt-diung { width: 22px; height: 22px; margin-right: var(--s2); }
.khoi > h2 > .bt { width: 20px; height: 20px; margin-right: var(--s2); color: var(--link); align-self: center; }
.sp-gia__td .bt, .sp-diung__td .bt { width: 13px; height: 13px; margin-right: 4px; color: var(--link); }
.tab-khoi .bt { width: 14px; height: 14px; margin-right: 5px; }
.sp-so strong .bt { width: 15px; height: 15px; margin-right: 5px; vertical-align: -.2em; }
.sp-gia__td { display: inline-flex; align-items: center; }

/* điện thoại: cột đầu trang không được rộng hơn nội dung dài nhất (tên nhóm, mã vạch) */
.dau-muc > * { min-width: 0; }
.sp-gia { min-width: 0; }
@media (max-width: 760px) {
  .sp-diung__o--tt { margin-left: 0; }
  .sp-diung__o { border-left: 0; border-top: 1px solid var(--rule); flex: 1 1 100%; }
  .sp-diung__nhan { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .sp-bang { table-layout: auto; }
  .sp-bang .ngay { white-space: nowrap; }
}