/* Khối "Lịch sử sử dụng (cũ)" ở chi tiết khách (tiền tố lc-). Dùng khung thẻ .kh-the-khung và cỡ chữ như khối "Lịch sử sử dụng" (.kh-ls).
   Tiêu đề, dòng tổng, nút "Xem thêm" đứng yên; chỉ danh sách (.lc-ds) có thanh lướt riêng, chiều cao giới hạn. Chữ không nhỏ hơn 12,5px. */
.lc-khoi { padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; }
.kh-phai .lc-khoi { overflow: visible; }
.lc-tieu { margin: 0; font-size: calc(16px * var(--co-chu)); font-weight: 700; color: var(--xanh-dam); }
.lc-tong { margin: 2px 0 6px; font-size: max(12.5px, calc(13px * var(--co-chu))); color: var(--chu-phu); font-weight: 500; line-height: 1.5; }
.lc-tong span { white-space: nowrap; }
.lc-tong span:first-child { color: var(--nau); font-weight: 700; }

/* Danh sách: thanh lướt riêng, cao tối đa khoảng 6 dòng (dòng thứ 7 lộ nửa để biết còn nữa) */
.lc-ds { list-style: none; margin: 0; padding: 0; max-height: clamp(260px, 52vh, 440px); overflow-y: auto; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #C9C4B4 transparent; border-top: 1px solid #EEEAE0; border-bottom: 1px solid #EEEAE0; }
.lc-ds::-webkit-scrollbar { width: 8px; }
.lc-ds::-webkit-scrollbar-thumb { background: #C9C4B4; border-radius: 4px; }
.lc-dong { border-bottom: 1px solid #EEEAE0; }
.lc-dong:last-child { border-bottom: 0; }
.lc-nut { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 6px; background: none; border: 0; border-radius: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 52px; }
.lc-nut:hover { background: #FCFBF8; }
.lc-nut:focus-visible { outline: 2px solid var(--xanh-rung); outline-offset: -2px; }
.lc-dau { grid-column: 1; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.lc-ngay { font-size: max(12.5px, calc(13px * var(--co-chu))); font-weight: 700; color: var(--chu); }
.lc-tien { grid-column: 2; grid-row: 1; font-size: max(12.5px, calc(13px * var(--co-chu))); font-weight: 700; color: var(--xanh-dam); white-space: nowrap; text-align: right; }
.lc-mui { grid-column: 3; grid-row: 1 / span 2; width: 8px; height: 8px; justify-self: center; border-right: 2px solid var(--chu-phu); border-bottom: 2px solid var(--chu-phu); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.lc-dong.mo .lc-mui { transform: rotate(-135deg) translate(-2px, -2px); }
.lc-tom { grid-column: 1 / 3; grid-row: 2; font-size: max(12.5px, calc(13px * var(--co-chu))); line-height: 1.4; color: var(--chu-phu); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lc-dong.mo .lc-tom { display: none; }   /* mở rộng thì đã có đủ món bên dưới, khỏi lặp */

/* Nhãn nguồn: KiotViet xanh dương nhạt, CukCuk cam nhạt; Đã hủy đỏ nhạt */
.lc-nguon, .lc-chip-huy { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: max(12.5px, calc(12.5px * var(--co-chu))); font-weight: 700; white-space: nowrap; flex: none; }
.lc-nguon.kiotviet { color: #1B4A7A; background: #E3EEF9; }
.lc-nguon.cukcuk { color: #7A4208; background: #FBE9D2; }
.lc-chip-huy { color: #9A2F25; background: #FBE6E3; }

/* Hóa đơn đã hủy: mờ đi, gạch số tiền */
.lc-dong.huy .lc-ngay, .lc-dong.huy .lc-tom { color: var(--chu-phu); }
.lc-dong.huy .lc-tien { color: var(--chu-phu); text-decoration: line-through; font-weight: 500; }

/* Mở rộng: đủ món */
.lc-ct { margin: 0 6px 10px 6px; padding: 8px 12px; background: #FCFBF8; border-left: 3px solid var(--xanh-lui); border-radius: 0 8px 8px 0; font-size: max(12.5px, calc(13px * var(--co-chu))); line-height: 1.45; color: var(--nau); }
.lc-mon { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.lc-mon li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 3px 0; }
.lc-mon li + li { border-top: 1px dashed #E6E2D6; }
.lc-mon-ten { min-width: 0; overflow-wrap: anywhere; }
.lc-mon-ten b { font-weight: 700; }
.lc-mon-tien { flex: none; white-space: nowrap; text-align: right; }
.lc-giam { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 4px; border-top: 1px solid #E6E2D6; font-weight: 600; }
.lc-ct-trong, .lc-ct-huy { color: var(--chu-phu); }
.lc-ct-huy { margin-top: 4px; color: #9A2F25; font-weight: 600; }
.lc-meta { margin-top: 6px; color: var(--chu-phu); font-size: max(12.5px, calc(12.5px * var(--co-chu))); }

.lc-them { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 2px 0; }
.lc-them button { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--xanh-rung); background: #fff; color: var(--xanh-dam); font: inherit; font-size: max(13px, calc(14px * var(--co-chu))); font-weight: 700; cursor: pointer; }
.lc-them button:hover:not(:disabled) { background: #F0FBF2; }
.lc-them button:disabled { opacity: .6; cursor: default; }
.lc-them span { font-size: max(12.5px, calc(13px * var(--co-chu))); color: var(--chu-phu); }
.lc-them span.loi { color: #B3261E; font-weight: 600; }
.lc-chi-xem { margin-top: 8px; font-size: max(12.5px, calc(12.5px * var(--co-chu))); color: var(--chu-phu); }

/* Điện thoại: chữ từ 14px như các khối cùng chỗ; danh sách vẫn có thanh lướt riêng */
@media (max-width: 767px) {
  .lc-ngay, .lc-tien, .lc-tom, .lc-ct, .lc-tong { font-size: 14px; }
  .lc-ds { max-height: clamp(280px, 50vh, 460px); }
  .lc-meta, .lc-them span, .lc-chi-xem { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .lc-mui { transition: none; } }