/* Một nguyên liệu: đầu dòng (ô icon, tên, tiền mỗi ly, nút xoá) + tên/đơn vị + giá mua + gói/định lượng */
.nguyen-lieu { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--brand-border); }
.nguyen-lieu .saly-field { margin: 0; }
.nguyen-lieu__dau { display: flex; align-items: center; gap: var(--space-3); }
.nguyen-lieu__ten { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.nguyen-lieu__tien { flex: none; }
.nguyen-lieu__xoa { flex: none; }

/* Tên rộng, đơn vị hẹp */
.ten-don-vi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 7rem); gap: var(--space-3); }

/* Hai ô cạnh nhau: xuống một cột khi khung quá hẹp */
.hai-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-3); }
.hai-cot > .saly-field { margin: 0; }

.saly-field > .saly-chips { margin-top: var(--space-1); }

/* Tóm tắt giá vốn trong thanh nút dính đáy (điện thoại) */
.tom-tat { display: grid; flex: none; gap: 0; margin: 0; line-height: 1.3; }
.tom-tat .saly-muted { font-size: var(--text-sm); }
.tom-tat strong { font-family: var(--font-heading); font-size: var(--text-lg); text-align: left; }

@media (min-width: 1024px) {
  .tom-tat { display: none; }
  .saly-main__aside .saly-sticky-cta { margin-top: 0; }
}