/* Trang đơn sau khi đặt, tra cứu đơn, chi tiết "Đơn của tôi" (OrderView + order.js, mockup 06). Chỉ biến skin + tint của theme. */
.kit-order { display: grid; gap: 16px; }
.kit-order__msg { margin: 0; padding: 10px 14px; border-radius: var(--k-r-sm); border: 1px solid var(--k-line); background: var(--c-surface); color: var(--c-text); }
/* Rỗng: vẫn trong cây a11y (vùng aria-live có sẵn trước khi chữ đổi), chỉ không chiếm chỗ. */
.kit-order__msg:empty { padding: 0; border: 0; background: none; }
.kit-order__msg.is-error { border-color: var(--k-danger); border-left-width: 4px; }
.kit-order__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.kit-order__side { display: grid; gap: 16px; }
.kit-order__box { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--k-line); border-radius: var(--k-r-lg); background: var(--c-surface); color: var(--c-text); }
.kit-order__subh { margin: 0; font: 700 17px/1.3 var(--f-head); }
.kit-order__ic { width: 20px; height: 20px; flex: none; }

/* Đầu trang: icon tròn + tiêu đề + câu phụ */
.kit-order__head { display: flex; align-items: flex-start; gap: 14px; }
.kit-order__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--k-pill); background: var(--k-soft); color: var(--c-primary); }
.kit-order__icon.is-wait { background: var(--k-accent-soft); color: var(--c-accent); }
.kit-order__icon .kit-order__ic { width: 28px; height: 28px; }
.kit-order__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 700 24px/1.25 var(--f-head); overflow-wrap: anywhere; }
.kit-order__sub { margin: 4px 0 0; color: var(--c-muted); }
.kit-order__sub b { color: var(--c-text); }

/* Huy hiệu trạng thái: luôn có chữ (không chỉ màu) */
.kit-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--k-pill); font: 700 12px/1.5 var(--f-body); white-space: nowrap; background: var(--k-soft); color: var(--c-text); }
.kit-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kit-status--pending_payment, .kit-status--payment_review { background: var(--k-accent-soft); color: var(--c-accent); }
.kit-status--awaiting_confirm, .kit-status--confirmed, .kit-status--paid { background: var(--k-soft); color: var(--c-primary); }
.kit-status--shipping { background: color-mix(in srgb, var(--k-info) 7%, var(--c-bg)); color: var(--k-info); }
.kit-status--completed { background: var(--k-soft-2); color: var(--c-primary); }
.kit-status--cancelled { background: var(--k-line); color: var(--c-muted); }

/* Các bước: chấm số + đường nối, xuống dòng được ở điện thoại */
.kit-steps { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 0; list-style: none; color: var(--c-muted); font-size: 13px; font-weight: 600; }
.kit-steps li { display: flex; flex: 1 1 0; align-items: center; gap: 6px; min-width: 0; }
.kit-steps li::after { content: ""; flex: 1; min-width: 10px; height: 2px; margin: 0 8px; background: var(--k-line); }
.kit-steps li:last-child { flex: none; }
.kit-steps li:last-child::after { display: none; }
.kit-steps__dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--k-pill); background: var(--k-line); color: var(--c-muted); font-size: 12px; font-weight: 700; }
.kit-steps__dot .kit-order__ic { width: 14px; height: 14px; }
.kit-steps .is-done { color: var(--c-primary); }
.kit-steps .is-done .kit-steps__dot { background: var(--c-primary); color: var(--c-on-primary); }
.kit-steps .is-done::after { background: var(--c-primary); }
.kit-steps .is-now { color: var(--c-text); }
.kit-steps .is-now .kit-steps__dot { background: var(--c-accent); color: var(--c-on-primary); box-shadow: 0 0 0 4px var(--k-accent-soft); }

/* Khối chuyển khoản: QR + các dòng chép */
.kit-order__pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.kit-order__qrbox { display: grid; justify-items: center; gap: 10px; margin: 0; }
.kit-order__qr { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 27 / 32; padding: 10px; border: 1px solid var(--k-line); border-radius: var(--k-r-sm); background: var(--c-bg); }
.kit-order__qrbox figcaption { color: var(--c-muted); font-size: 12px; text-align: center; }
.kit-order__qrtools { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kit-order__qrtools .kit-order__ic { width: 16px; height: 16px; }
.kit-order__rows { display: grid; min-width: 0; }
.kit-copyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--k-line); font-size: 14px; }
.kit-copyrow__label { color: var(--c-muted); }
.kit-copyrow > b { font-weight: 700; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kit-copyrow > b:last-child { grid-column: 2 / -1; }
.kit-copyrow.is-key { margin: 6px 0 0; padding: 10px; border: 0; border-radius: var(--k-r-sm); background: color-mix(in srgb, var(--k-sale) 7%, var(--c-bg)); }
.kit-copyrow.is-key > b { font-size: 17px; }
.kit-copyrow .kit-pay__amount { color: var(--k-sale); }
.kit-copyrow .kit-pay__code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.kit-copy { min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--k-r-sm); background: var(--k-soft); color: var(--c-primary); font: 700 12px/1.2 var(--f-body); cursor: pointer; }
.kit-copy:hover { background: var(--k-soft-2); }
.kit-copy:focus-visible, .kit-order__box button:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.kit-copy.is-done { background: var(--c-primary); color: var(--c-on-primary); }

.kit-order__hold { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--k-r-sm); background: var(--k-accent-soft); color: var(--c-text); font-size: 13px; font-weight: 600; }
.kit-order__hold .kit-order__ic { width: 18px; height: 18px; color: var(--c-accent); }
.kit-order__left { font-variant-numeric: tabular-nums; }
.kit-order__payact, .kit-order__alt, .kit-order__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kit-order__paid { flex: 1 1 240px; }
.kit-order__box button:disabled { opacity: .6; cursor: not-allowed; }
.kit-order__note, .kit-order__info { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--k-r-sm); background: color-mix(in srgb, var(--k-info) 7%, var(--c-bg)); color: var(--c-text); font-size: 14px; line-height: 1.5; }
.kit-order__note { display: block; }
.kit-order__cancel { display: contents; }

/* COD: trả khi nhận, ngày giao, cam kết của shop */
.kit-order__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.kit-order__facts li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--k-r-sm); background: var(--c-bg); color: var(--c-muted); font-size: 13.5px; line-height: 1.45; }
.kit-order__facts .kit-order__ic { color: var(--c-primary); }
.kit-order__facts b { display: block; color: var(--c-text); }

/* Tóm tắt đơn */
.kit-order__lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kit-order-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.kit-order__media { display: block; width: 52px; height: 52px; border-radius: var(--k-r-sm); background: var(--k-soft); overflow: hidden; }
.kit-order__media img { display: block; width: 52px; height: 52px; object-fit: cover; }
.kit-order__lineinfo { display: grid; gap: 2px; min-width: 0; }
.kit-order__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.kit-order__name a { color: inherit; }
.kit-order__lineinfo small { color: var(--c-muted); font-size: 12.5px; }
.kit-order__parts { display: block; color: var(--c-muted); }
.kit-order__sum { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit-order__totals, .kit-order__meta { display: grid; gap: 6px; margin: 0; padding-top: 14px; border-top: 1px solid var(--k-line); }
.kit-order__totals > div, .kit-order__meta > div { display: flex; justify-content: space-between; gap: 12px; }
.kit-order__totals dt, .kit-order__meta dt { color: var(--c-muted); white-space: nowrap; }
.kit-order__totals dd, .kit-order__meta dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Dòng voucher (0.20): nhãn "Voucher CODE" và số tiền trừ cùng màu giảm giá */
.kit-order__discount dt, .kit-order__discount dd { color: var(--k-sale); }
.kit-order__grand { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--k-line); }
.kit-order__grand dt { color: var(--c-text); font-weight: 700; }
.kit-order__grand dd { font: 700 20px/1.2 var(--f-head); }

/* Mời lưu đơn vào tài khoản (khách) */
.kit-order__save { gap: 10px; background: var(--k-soft); }
.kit-order__save p { margin: 0; color: var(--c-muted); font-size: 14px; }
.kit-order__save.is-asked { border-color: var(--c-primary); }
.kit-order__save form { margin: 0; }
.kit-order__saveact { display: flex; flex-wrap: wrap; gap: 10px; }

/* Không mở được đơn */
.kit-order-missing { display: grid; justify-items: start; gap: 12px; padding: 20px; border: 1px solid var(--k-line); border-radius: var(--k-r-lg); background: var(--c-surface); }
.kit-order-missing p { margin: 0; }

/* Trang tra cứu */
.kit-lookup { display: grid; gap: 24px; max-width: 520px; }
.kit-lookup__form { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--k-line); border-radius: var(--k-r-lg); background: var(--c-surface); }
.kit-lookup__form .kit-field { display: grid; gap: 4px; margin: 0; }
.kit-lookup__form #kit-lk-code:not(:placeholder-shown) { text-transform: uppercase; }
.kit-lookup__form button:disabled { opacity: .6; cursor: not-allowed; }
.kit-lookup__status { margin: 0; font-size: 14px; }
.kit-lookup__status:empty { display: none; }
.kit-lookup__status.is-error { color: var(--k-danger); font-weight: 600; }
.kit-lookup__recent[hidden] { display: none; }
.kit-lookup__recent h2 { margin: 0 0 8px; font: 700 17px/1.3 var(--f-head); }
.kit-lookup__recent ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kit-lookup__recent a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--k-line); border-radius: var(--k-r-sm); background: var(--c-bg); color: var(--c-text); text-decoration: none; }
.kit-lookup__recent small { color: var(--c-muted); }

/* Bảng chọn app ngân hàng (k-sheet của shop-ui.css + phần riêng) */
.kit-banks .k-sheet__hint { margin: 0; padding: 10px 16px 0; color: var(--c-muted); font-size: 13px; }
.kit-banks .k-sheet__list { max-height: 60vh; overflow-y: auto; }
.kit-banks .k-sheet__list a { display: flex; justify-content: space-between; gap: 12px; }
.kit-banks .k-sheet__list small { color: var(--c-primary); font-weight: 700; }

@media (min-width: 641px) {
  .kit-order__pay { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .kit-order__box { padding: 16px; }
  .kit-order__head { gap: 12px; }
  .kit-order__icon { width: 44px; height: 44px; }
  .kit-order__title { font-size: 20px; }
  .kit-steps { font-size: 11.5px; }
  .kit-steps li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kit-steps li::after { display: none; }
  .kit-order__qr { width: 200px; }
  .kit-order.is-js .kit-order__qrtools { display: flex; }
  /* "Tôi đã chuyển khoản" dính đáy (z-index 45 như thanh mua) */
  .kit-order__payact { position: sticky; bottom: 0; z-index: 45; margin: 0 -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--k-line); background: var(--c-bg); box-shadow: var(--shadow); }
  .kit-order__payact .k-btn { flex: 1 1 100%; }
}
@media (min-width: 901px) {
  .kit-order__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
}