/* =========================================================
   BỔ SUNG — Shipping Info (Carrier + Tracking Number)
   Bản đã chỉnh lại cho gọn — nối thêm vào CUỐI file
   assets/css/pages/tracking.css hiện có (không tạo enqueue riêng).
   ========================================================= */

/* Badge trạng thái "Shipped" — tô màu gold giống "processing" để nhận
   diện nhanh đơn đang trên đường vận chuyển */
.dx-scope .dx-tracking-status-badge--shipped{
  color: var(--dx-gold);
  border-color: var(--dx-gold-dim);
}

/* Mã đơn hàng (#1024) — làm nổi bật hơn bằng màu gold + đậm */
.dx-scope .dx-tracking-result__order-number{
  color: var(--dx-gold) !important;
  font-weight: 700;
}

/* ---------- Khối Carrier / Tracking Number (đã gọn lại) ----------
   Thay đổi so với bản cũ:
   - Bỏ dashed border quanh mã tracking (trông giống input rỗng)
   - Gộp "eyebrow" + "carrier" thành 1 label duy nhất phía trên mã,
     tránh 2 dòng label cùng cấp gây rối mắt
   - Icon căn giữa theo chiều dọc của khối text (chỉ còn 2 dòng thay vì 3)
   - Thu nhỏ nút CTA, bớt padding + bớt viền dày
*/
.dx-scope .dx-tracking-shipping-info{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 28px;
  padding: 14px 18px;
  background: var(--dx-charcoal-2);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
  overflow: hidden;
}

/* Viền nhấn bên trái — solid thay vì gradient để đỡ rối, không bo góc
   (đúng nguyên tắc: border 1 cạnh thì không bo góc) */
.dx-scope .dx-tracking-shipping-info::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--dx-gold);
  border-radius: 0;
}

.dx-scope .dx-tracking-shipping-info__icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201,162,74,.12);
  color: var(--dx-gold);
}

.dx-scope .dx-tracking-shipping-info__body{
  flex: 1 1 auto;
  min-width: 0;
}

/* Nhãn duy nhất phía trên mã — gộp vai trò của eyebrow cũ, luôn hiện.
   Nếu có tên hãng (carrier) thì nối luôn vào đây dạng "via GHN" ở
   template PHP, KHÔNG tách thành dòng __carrier riêng nữa để tránh
   3 tầng chữ chồng lên nhau. */
.dx-scope .dx-tracking-shipping-info__eyebrow{
  margin: 0 0 4px;
  font-family: var(--dx-font-body);
  font-size: 10.5px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted-2);
}

/* Giữ selector __carrier để không phải sửa markup PHP, nhưng cho hiển
   thị inline ngay sau eyebrow thay vì xuống dòng riêng — nếu template
   không truyền carrier thì phần này rỗng, không ảnh hưởng layout */
.dx-scope .dx-tracking-shipping-info__carrier{
  display: inline;
  margin: 0;
  color: var(--dx-muted-2);
  font-family: var(--dx-font-mono);
  font-size: 10.5px;
  text-transform: none;
}
.dx-scope .dx-tracking-shipping-info__carrier::before{
  content: ' · ';
}
.dx-scope .dx-tracking-shipping-info__carrier:empty{
  display: none;
}

/* Mã tracking — bỏ dashed box, chỉ còn text đậm màu ivory/gold, không
   còn viền dashed dễ bị hiểu nhầm là placeholder */
.dx-scope .dx-tracking-shipping-info__code-row{
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
/* Bỏ nhãn "Tracking Number" lặp lại ở đây vì đã có ở __eyebrow rồi —
   ẩn đi để không lặp thông tin 2 lần */
.dx-scope .dx-tracking-shipping-info__code-label{
  display: none;
}
.dx-scope .dx-tracking-shipping-info__code{
  display: inline-block;
  color: var(--dx-ivory);
  font-family: var(--dx-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  background: none;
  border: none;
  padding: 0;
  word-break: break-all;
}

/* Nút CTA — nhỏ gọn lại, viền mảnh hơn, bớt padding */
.dx-scope .dx-tracking-shipping-info__cta{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--dx-gold);
  border-radius: 999px;
  color: var(--dx-gold) !important;
  font-family: var(--dx-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.dx-scope .dx-tracking-shipping-info__cta svg{
  transition: transform .2s;
}
.dx-scope .dx-tracking-shipping-info__cta:hover{
  background: var(--dx-gold);
  color: var(--dx-black) !important;
}
.dx-scope .dx-tracking-shipping-info__cta:hover svg{
  transform: translateX(2px);
}

@media (max-width: 850px){
  .dx-scope .dx-tracking-shipping-info{
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .dx-scope .dx-tracking-shipping-info__cta{
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}