/* =====================================================
   CÁC TRANG CON: chi tiết món, giỏ hàng, theo dõi đơn
   (dùng chung token màu trong style.css)
   ===================================================== */

:root {
  --blush: #fdebe4;
  --mint: #eaf2e9;
  --green: #347055;
}

.breadcrumb, .detail, .pairing, .page-head, .checkout, .tracking, .order-missing {
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}

.divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ===== Đường dẫn ===== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 13px;
}
.breadcrumb__prev, .breadcrumb__sep { color: var(--muted); }
.breadcrumb__sep, .breadcrumb__inner-sep { font-family: var(--font-symbol); }
.breadcrumb__prev:hover, .breadcrumb__current a:hover { color: var(--red); }
.breadcrumb__current { font-weight: 600; color: var(--ink); }
.breadcrumb__inner-sep { margin: 0 8px; }

/* ===== Ô nhập ===== */
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field__label { font-weight: 700; font-size: 13px; color: var(--ink); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: #b3a59b; }
.field__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(216, 60, 40, .12); }
.field__input.is-invalid { border-color: var(--red); }
.field__input--tall { min-height: 78px; }
.field__error { min-height: 0; font-size: 12px; color: var(--red); }
.field__error:empty { display: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* ===== Bộ đếm số lượng ===== */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
}
.stepper--lg { gap: 26px; height: 48px; padding: 0 18px; }
.stepper__btn {
  padding: 0;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
}
.stepper__btn--plus { color: var(--red); }
.stepper__btn:disabled { opacity: .3; cursor: not-allowed; }
.stepper__value { min-width: 12px; text-align: center; font-weight: 700; font-size: 15px; }

/* ===== CHI TIẾT MÓN ===== */
.detail {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding-top: 12px;
  padding-bottom: 56px;
}
.detail__media { display: flex; flex-direction: column; gap: 24px; flex: 0 1 600px; min-width: 0; }
.detail__photo { position: relative; aspect-ratio: 600 / 552; }
.detail__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.detail__badge {
  position: absolute;
  left: 24px;
  top: 24px;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  font-size: 12px;
}
.detail__highlights {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  background: var(--sand);
}
.highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
}
.highlight img { height: 26px; width: auto; object-fit: contain; }
.detail__story { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.detail__story-title { font-weight: 800; font-size: 20px; }
.detail__story-text { font-size: 14px; line-height: 1.8; color: var(--muted); }
.detail__allergy { font-size: 12px; line-height: 1.6; color: var(--muted); }

.detail__panel { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
.detail__rating { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--muted); }
.detail__stars { font-weight: 700; color: var(--red); }
.detail__name { font-weight: 900; font-size: 42px; line-height: 1.2; letter-spacing: -1.5px; }
.detail__price { font-weight: 800; font-size: 32px; color: var(--red); }
.detail__tagline { font-size: 15px; line-height: 1.75; color: var(--muted); }

.option-group { display: flex; flex-direction: column; gap: 12px; }
.option-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.option-group__title { font-weight: 800; font-size: 20px; }
.option-group__hint, .option-group__note { font-size: 12px; color: var(--muted); }

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.option:hover { border-color: #d9c7b4; }
.option.is-selected { border-color: var(--red); background: var(--blush); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option input:focus-visible + .option__box { outline: 2px solid var(--red); outline-offset: 2px; }
.option__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}
.option.is-selected .option__box { border-color: var(--red); background: var(--red); }
.option.is-selected .option__box::after {
  content: "✓";
  font-family: var(--font-symbol);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
}
.option--radio .option__box { border-radius: 50%; }
.option--radio.is-selected .option__box::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}
.option__text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.option__name { font-weight: 700; font-size: 14px; }
.option__desc { font-size: 12px; color: var(--muted); }
.option__price { font-weight: 700; font-size: 14px; color: var(--red); white-space: nowrap; }

.detail__panel .field__label { font-size: 14px; }
.field__input--note { min-height: 64px; padding: 16px; border-radius: 12px; font-size: 13px; }

.detail__qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.detail__unit { font-weight: 700; font-size: 14px; }
.detail__breakdown { margin-top: 5px; font-size: 11px; color: var(--muted); }
.detail__total-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.detail__total-label { font-weight: 700; font-size: 16px; }
.detail__total { font-weight: 900; font-size: 28px; color: var(--red); }
.detail__footnote { font-size: 12px; text-align: center; color: var(--muted); }

/* Ăn cùng là hết ý */
.pairing {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 40px;
  padding-bottom: 64px;
  background: var(--sand);
}
.pairing__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pairing__title { font-weight: 800; font-size: 32px; letter-spacing: -1px; }
.pairing__note { font-size: 14px; color: var(--muted); }
.pairing__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* ===== TIÊU ĐỀ TRANG + TIẾN TRÌNH ĐẶT HÀNG ===== */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 32px;
}
.page-head__text { display: flex; flex-direction: column; gap: 10px; }
.page-head__title { font-weight: 900; font-size: 40px; letter-spacing: -1.5px; }
.page-head__title--sm { font-size: 38px; }
.page-head__sub { font-size: 15px; color: var(--muted); }

.success-head { display: flex; align-items: center; gap: 18px; }
.success-head .page-head__sub { font-size: 14px; }
.success-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mint);
}

.checkout-steps { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.checkout-step { display: flex; align-items: center; gap: 10px; }
.checkout-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 12px;
}
.checkout-step__label { font-weight: 600; font-size: 13px; white-space: nowrap; }
.checkout-step__line { width: 36px; height: 1px; background: var(--line); }
.checkout-step.is-todo .checkout-step__dot { background: var(--sand); color: var(--muted); }
.checkout-step.is-todo .checkout-step__label { color: var(--muted); }

/* ===== THẺ (card) ===== */
.card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}
.card__head { display: flex; align-items: center; gap: 12px; }
.card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blush);
  color: var(--red);
  font-weight: 800;
  font-size: 14px;
}
.card__title { font-weight: 800; font-size: 22px; letter-spacing: -.5px; }
.card__meta { font-size: 12px; color: var(--muted); }

/* ===== GIỎ HÀNG ===== */
.checkout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 64px;
}
.checkout__main { display: flex; flex-direction: column; gap: 24px; flex: 0 1 808px; min-width: 0; }
.checkout__side {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 440px;
  min-width: 0;
}

.cart-list { display: flex; flex-direction: column; gap: 24px; }
.cart-line { display: flex; align-items: flex-start; gap: 18px; }
.cart-line__img { flex-shrink: 0; }
.cart-line__img img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; }
.cart-line__info { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 17px; }
.cart-line__name:hover { color: var(--red); }
.cart-line__total { white-space: nowrap; }
.cart-line__meta { font-size: 12px; line-height: 1.6; color: var(--muted); }
.cart-line__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-line__links { display: flex; gap: 18px; font-size: 12px; }
.cart-line__edit { font-weight: 700; color: var(--red); }
.cart-line__remove { padding: 0; border: 0; background: none; font-size: 12px; color: var(--muted); }
.cart-line__remove:hover, .cart-line__edit:hover { text-decoration: underline; }

.cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
.cart-empty__title { font-weight: 800; font-size: 18px; }
.cart-empty__text { margin-bottom: 8px; font-size: 14px; color: var(--muted); }

.link-accent { align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--red); }
.link-accent:hover { text-decoration: underline; }

.eta-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: var(--mint);
  font-weight: 600;
  font-size: 13px;
  color: var(--green);
}

/* Phương thức thanh toán */
.pay-option {
  display: block;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pay-option.is-selected { padding: 19.5px; border: 1.5px solid var(--red); background: var(--blush); }
.pay-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pay-option:has(input[name="payment"]:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.pay-option__row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pay-option__radio--on, .pay-option.is-selected .pay-option__radio--off { display: none; }
.pay-option.is-selected .pay-option__radio--on { display: block; }
.pay-option__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pay-option__name { font-weight: 800; font-size: 15px; }
.pay-option__desc { font-size: 12px; color: var(--muted); }
.pay-option__extra { display: none; flex-direction: column; gap: 18px; margin-top: 18px; }
.pay-option.is-selected .pay-option__extra { display: flex; }
.pay-option__help { font-size: 12px; line-height: 1.7; color: var(--muted); }
.bank-box { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 10px; background: var(--white); }
.bank-box__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.bank-box__row strong { font-weight: 600; font-size: 15px; color: var(--ink); text-align: right; }

/* Tài khoản thanh toán của khách */
.pay-from { display: flex; flex-direction: column; gap: 10px; }
.pay-from__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-from__title { font-weight: 700; font-size: 13px; color: var(--ink); }
.link-btn { padding: 0; border: 0; background: none; font-weight: 700; font-size: 13px; color: var(--red); }
.link-btn:hover { text-decoration: underline; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 13px; }
.pay-from__list { display: flex; flex-direction: column; gap: 8px; }
.pay-from__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1.5px dashed #e7b9ad;
  border-radius: 10px;
  background: var(--white);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.pay-from__empty strong { color: var(--ink); }

.bank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 6px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--sand);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--ink);
}

.account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}
.account.is-selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.account.is-selected .bank-badge { background: var(--red); color: var(--white); }
.account:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.account__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.account__name { font-weight: 700; font-size: 14px; }
.account__holder { font-size: 11px; letter-spacing: .4px; color: var(--muted); }
.account__remove { padding: 4px; border: 0; background: none; font-size: 12px; color: var(--muted); }
.account__remove:hover { color: var(--red); text-decoration: underline; }

/* Hộp thoại liên kết ngân hàng */
.modal {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(48, 34, 29, .25);
}
.modal::backdrop { background: rgba(48, 34, 29, .45); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal__box { display: flex; flex-direction: column; }
.modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 0; }
.modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blush);
}
.modal__title { font-weight: 800; font-size: 22px; letter-spacing: -.5px; }
.modal__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.modal__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sand);
  font-family: var(--font-symbol);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.modal__close:hover { background: #ecdcc6; }
.modal__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--line);
}

.bank-pick__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bank-search { width: 200px; min-height: 38px; height: 38px; padding: 0 12px; font-size: 13px; }
.bank-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 272px;
  overflow-y: auto;
  padding: 2px;
}
.bank-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.bank-option:hover { border-color: #d9c7b4; }
.bank-option input { position: absolute; opacity: 0; pointer-events: none; }
.bank-option.is-selected { border-color: var(--red); background: var(--blush); }
.bank-option.is-selected .bank-badge { background: var(--red); color: var(--white); }
.bank-option:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.bank-option__name { font-weight: 600; font-size: 12px; }
.bank-grid__empty { grid-column: 1 / -1; padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }

.field__label--sub { font-weight: 600; font-size: 12px; color: var(--muted); }
.acc-holder { text-transform: uppercase; letter-spacing: .4px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.6; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--red); }
.consent strong { color: var(--ink); }

/* Tóm tắt đơn */
.summary { gap: 24px; }
.summary__title { font-weight: 800; font-size: 24px; letter-spacing: -.6px; }
.coupon-wrap { display: flex; flex-direction: column; gap: 8px; }
.coupon { display: flex; gap: 8px; }
.coupon__input { min-height: 46px; height: 46px; padding: 0 14px; font-size: 13px; text-transform: uppercase; }
.coupon__input::placeholder { text-transform: none; }
.coupon__btn {
  height: 46px;
  padding: 0 16px;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  background: var(--sand);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
}
.coupon__btn:hover { background: #ecdcc6; }
.coupon__msg { font-size: 12px; }
.coupon__msg:empty { display: none; }
.coupon__msg.is-error { color: var(--red); }
.coupon__msg.is-success { color: var(--green); }

.summary__rows { display: flex; flex-direction: column; gap: 16px; }
.summary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.summary__row span:last-child { font-weight: 600; font-size: 15px; color: var(--ink); }
.summary__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 18px; }
.summary__total span:last-child { font-size: 26px; color: var(--red); }
.summary__tax { margin-top: -12px; font-size: 11px; color: var(--muted); }
.summary__terms { font-size: 11px; line-height: 1.7; text-align: center; color: var(--muted); }

.promise-box { display: flex; align-items: flex-start; gap: 14px; padding: 22px; border-radius: 16px; background: var(--sand); }
.promise-box img { flex-shrink: 0; }
.promise-box__title { font-weight: 800; font-size: 14px; }
.promise-box__text { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.promise-box__text--ink { margin-top: 0; font-size: 13px; color: var(--ink); }
.side-help { font-size: 13px; text-align: center; color: var(--muted); }
.side-help a:hover { color: var(--red); }

/* ===== THEO DÕI ĐƠN ===== */
.page-head:has(.success-head) { padding-bottom: 36px; }

.tracking {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 64px;
}
.tracking__main { display: flex; flex-direction: column; gap: 24px; flex: 0 1 808px; min-width: 0; }
.tracking__side { display: flex; flex-direction: column; gap: 20px; flex: 0 1 440px; min-width: 0; }

.eta-card { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 20px; background: var(--yellow); }
.eta-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eta-card__code { font-weight: 800; font-size: 13px; }
.eta-card__live { display: flex; align-items: center; gap: 7px; font-size: 11px; white-space: nowrap; }
.eta-card__live img { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.eta-card__body { display: flex; align-items: center; gap: 28px; }
.eta-card__time { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.eta-card__label { font-weight: 600; font-size: 16px; }
.eta-card__clock { font-weight: 900; font-size: 88px; line-height: 1.1; letter-spacing: -5px; color: var(--red); }
.eta-card__left { font-weight: 800; font-size: 16px; }
.eta-card__window { font-size: 12px; }
.eta-card__foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-size: 12px;
  line-height: 1.6;
}
.eta-card__foot img { flex-shrink: 0; }

/* Hình tài xế: ghép từ các lớp SVG theo đúng vị trí trong Figma (khung 276×216) */
.rider { position: relative; width: 276px; height: 216px; flex-shrink: 0; overflow: hidden; }
.rider__part { position: absolute; max-width: none; }
.rider__lines   { left: 19.5px;  top: 115.7px; }
.rider__stars   { left: 55px;    top: 25.5px; }
.rider__wheel--rear  { left: 67.5px;  top: 149.5px; }
.rider__wheel--front { left: 189.5px; top: 149.5px; }
.rider__box     { left: 53.5px;  top: 76.5px; }
.rider__arm     { left: 137.5px; top: 83.5px; }
.rider__legs    { left: 108.1px; top: 115.2px; }
.rider__scooter { left: 57.76px; top: 81.1px; }
.rider__body    { left: 108.5px; top: 68.5px; }
.rider__head    { left: 126.3px; top: 31.9px; }
.rider.is-moving { animation: ride 0.6s ease-in-out infinite alternate; }
.rider.is-moving .rider__lines { animation: lines 0.6s ease-in-out infinite alternate; }
@keyframes ride { to { transform: translateY(-3px); } }
@keyframes lines { to { transform: translateX(-4px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .rider.is-moving, .rider.is-moving .rider__lines, .eta-card__live img { animation: none; }
}

.track-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.track-head__title { font-weight: 800; font-size: 22px; }
.track-head__step { font-weight: 700; font-size: 12px; color: var(--red); white-space: nowrap; }

.track-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.track-step { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.track-step__marker { display: flex; align-items: center; width: 100%; }
.track-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sand);
  color: var(--muted);
}
.track-step__icon.to-white { filter: brightness(0) invert(1); }
/* ≈ #7B6A60 */
.track-step__icon.to-muted { filter: brightness(0) invert(44%) sepia(10%) saturate(800%) hue-rotate(338deg) brightness(95%); }
.track-step__line { flex: 1; height: 3px; background: var(--line); }
.track-step__line.is-done { background: var(--green); }
.track-step__label { font-weight: 800; font-size: 13px; color: var(--muted); }
.track-step__sub { font-size: 11px; color: var(--muted); }
.track-step.is-done .track-step__dot { background: var(--green); color: var(--white); }
.track-step.is-done .track-step__label { color: var(--green); }
.track-step.is-active .track-step__dot { background: var(--red); color: var(--white); }
.track-step.is-active .track-step__label { color: var(--red); }

.kitchen-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--blush);
  font-size: 13px;
  line-height: 1.6;
}
.kitchen-note img { flex-shrink: 0; }

/* --- Animation tiến trình giao hàng --- */
.track-step { --ring: var(--red); animation: step-in .5s calc(var(--i) * 130ms) ease-out both; }
.track-step.is-done { --ring: var(--green); }
.track-step__dot { position: relative; transition: background-color .3s ease; }
.track-step__label { transition: color .3s ease; }

/* chấm bước đã xong "bật" lên */
.track-step.is-done .track-step__dot { animation: dot-pop .5s calc(var(--i) * 130ms + 120ms) cubic-bezier(.3, 1.6, .5, 1) both; }

/* đường nối đã đi qua: chạy dài ra từ trái */
.track-step__line.is-done { transform-origin: left center; animation: line-fill .6s calc(var(--i) * 130ms + 250ms) ease-out both; }

/* đoạn đang đi tới bước kế: vạch chạy liên tục */
.track-step__line.is-progress {
  background-color: var(--line);
  background-image: repeating-linear-gradient(90deg, var(--ring) 0 10px, transparent 10px 20px);
  background-size: 40px 3px;
  animation: line-dash .9s linear infinite;
}
.track-step.is-done .track-step__line.is-progress { --ring: var(--green); }

/* bước hiện tại: vòng sóng lan ra */
.track-step.is-current .track-step__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ring);
  border-radius: 50%;
  animation: dot-ring 1.8s ease-out infinite;
  pointer-events: none;
}
.track-step.is-current .track-step__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ring);
  border-radius: 50%;
  animation: dot-ring 1.8s .9s ease-out infinite;
  pointer-events: none;
}

/* icon của bước hiện tại chuyển động theo ý nghĩa */
.track-step.is-current[data-icon="step-chef"] .track-step__icon { animation: icon-wiggle 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.track-step.is-current[data-icon="step-bike"] .track-step__icon { animation: icon-ride .5s ease-in-out infinite alternate; }
.track-step.is-current[data-icon="step-check"] .track-step__icon,
.track-step.is-current[data-icon="step-package"] .track-step__icon { animation: icon-bounce 1.6s ease-in-out infinite; }

/* hộp lời nhắn trượt vào, ngọn lửa nhấp nháy */
.kitchen-note { animation: note-in .5s .65s ease-out both; }
.kitchen-note img[src*="flame"] { animation: flame 1.3s ease-in-out infinite; transform-origin: 50% 100%; }
.track-head__step { animation: note-in .4s .1s ease-out both; }

@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes dot-pop { from { transform: scale(.3); } }
@keyframes line-fill { from { transform: scaleX(0); } }
@keyframes line-dash { to { background-position: 40px 0; } }
@keyframes dot-ring { from { transform: scale(1); opacity: .65; } to { transform: scale(1.75); opacity: 0; } }
@keyframes icon-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes icon-ride { from { transform: translate(-1.5px, 0); } to { transform: translate(1.5px, -2px); } }
@keyframes icon-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes flame {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.08, .92) rotate(-5deg); }
  65% { transform: scale(.95, 1.07) rotate(4deg); }
}

/* lần tự cập nhật mà chưa đổi bước: không chạy lại hiệu ứng vào trang */
.tracking.is-static .track-step,
.tracking.is-static .track-step.is-done .track-step__dot,
.tracking.is-static .track-step__line.is-done,
.tracking.is-static .kitchen-note,
.tracking.is-static .track-head__step { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .track-step, .track-step__dot, .track-step__dot::before, .track-step__dot::after,
  .track-step__line, .track-step__icon, .kitchen-note, .kitchen-note img, .track-head__step { animation: none !important; }
}

.address-head { display: flex; align-items: center; gap: 10px; }
.address-head__title { font-weight: 800; font-size: 22px; }
.address__who { font-weight: 800; font-size: 15px; }
.address__where { font-size: 14px; line-height: 1.7; color: var(--muted); }
.address__note { padding: 14px; border-radius: 10px; background: var(--cream); font-size: 12px; line-height: 1.6; color: var(--muted); }
.tracking .card:has(.address-head) { gap: 18px; }

.support-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
.support-row__title { font-weight: 800; font-size: 17px; }
.support-row__text { margin-top: 8px; font-size: 13px; color: var(--muted); }

.order-card__title { font-weight: 800; font-size: 24px; letter-spacing: -.6px; }
.order-card__meta { margin-top: 8px; font-size: 12px; color: var(--muted); }
.order-item { display: flex; align-items: flex-start; gap: 12px; }
.order-item__img { width: 68px; height: 68px; flex-shrink: 0; object-fit: cover; border-radius: 10px; }
.order-item__info { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.order-item__name { font-weight: 800; font-size: 13px; }
.order-item__detail { font-size: 11px; line-height: 1.6; color: var(--muted); }
.order-item__price { font-weight: 800; font-size: 14px; }
.order-item__note { font-size: 11px; color: var(--muted); }
.order-card .summary__rows { gap: 14px; }

.paid-box { display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 12px; background: var(--mint); color: var(--green); }
.paid-box__title { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; }
.paid-box__text { font-size: 11px; line-height: 1.6; }
.paid-box--cod { background: var(--sand); color: var(--ink); }

.order-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 72px; padding-bottom: 120px; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .detail { gap: 40px; }
  .checkout__side, .tracking__side { flex-basis: 380px; }
  .eta-card__clock { font-size: 72px; letter-spacing: -4px; }
  .pairing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .detail, .checkout, .tracking { flex-direction: column; align-items: stretch; }
  .detail__media, .checkout__main, .checkout__side, .tracking__main, .tracking__side { flex: none; width: 100%; }
  .checkout__side { position: static; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .eta-card__body { flex-direction: column; align-items: flex-start; }
  .rider { align-self: center; }
}

@media (max-width: 600px) {
  .detail__name { font-size: 32px; }
  .detail__price { font-size: 26px; }
  .detail__highlights { padding: 16px; }
  .option-group__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pairing__head { flex-direction: column; align-items: flex-start; }
  .pairing__title { font-size: 26px; }
  .pairing__list { grid-template-columns: 1fr; }
  .page-head__title, .page-head__title--sm { font-size: 30px; }
  .success-head { align-items: flex-start; }
  .success-head__icon { width: 48px; height: 48px; }
  .success-head__icon img { width: 24px; height: 24px; }
  .checkout-steps { gap: 14px; flex-wrap: wrap; }
  .checkout-step { gap: 8px; }
  .checkout-step__line { display: none; }
  .checkout-step__label { font-size: 12px; }
  .card { padding: 20px; }
  .card__head { flex-wrap: wrap; }
  .field-row { grid-template-columns: 1fr; }
  .cart-line__img img { width: 80px; height: 80px; }
  .cart-line__top { font-size: 15px; }
  .eta-card { padding: 24px; }
  .eta-card__clock { font-size: 64px; }
  .rider { transform: scale(.85); margin: -16px 0; }
  .track-step__label { font-size: 12px; }
  .track-step__dot { width: 36px; height: 36px; }
  .support-row { flex-direction: column; align-items: flex-start; }
  .bank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bank-pick__head { flex-direction: column; align-items: stretch; }
  .bank-search { width: 100%; }
  .pay-from__empty { flex-direction: column; align-items: flex-start; }
  .modal__head, .modal__body { padding-left: 18px; padding-right: 18px; }
  .modal__actions { padding: 14px 18px 18px; }
  .modal__actions .btn { flex: 1; }
}