/* Giao diện Lịch sử Giao dịch */
.trade-table-card {
  overflow: visible;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #c8d9e8;
  background: #f7faff;
  box-shadow: 0 4px 18px rgba(13, 62, 102, 0.08);
}
.trade-header-row {
  display: grid;
  grid-template-columns: 110px 180px 110px minmax(200px, 1fr) 48px minmax(200px, 1fr) 110px 180px;
  background: #d8e6f5;
  border-bottom: 2px solid #b8d2eb;
  color: #173b5c;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
  align-items: center;
  padding: 10px 8px;
}
.trade-row {
  display: grid;
  grid-template-columns: 110px 180px 110px minmax(200px, 1fr) 48px minmax(200px, 1fr) 110px 180px;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid #d4e3f0;
  background: #fbfdff;
  transition: background 0.15s ease;
}
.trade-row:nth-child(even) {
  background: #f5f9fd;
}
.trade-row:hover {
  background: #edf5fc;
}

/* Cột Time */
.trade-time {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0b5c9e;
  line-height: 1.4;
}

/* Cột Nhân vật (Người gửi / Người nhận) */
.trade-player-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.trade-player-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e4eff8;
  border: 2px solid #b2d0eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.trade-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.trade-player-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #552882;
  text-align: center;
  word-break: break-all;
}

/* Cột Mini Bag (Hành trang 20 ô) */
.trade-mini-bag {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  grid-template-rows: repeat(4, 30px);
  gap: 3px;
  padding: 6px;
  background: #eaf1f8;
  border: 1px solid #b8cfdf;
  border-radius: 8px;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.trade-bag-slot {
  width: 30px;
  height: 30px;
  background: #f9fbfd;
  border: 1px solid #cbdae6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.trade-bag-slot img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}
.trade-bag-slot .trade-slot-qty {
  position: absolute;
  bottom: 0;
  right: 1px;
  font-size: 8.5px;
  font-weight: 800;
  color: #1a3c5a;
  background: rgba(255,255,255,0.85);
  padding: 0 2px;
  border-radius: 2px;
  line-height: 1;
}

/* Cột Item Gửi / Nhận (Trade box) */
.trade-box {
  background: #ffffff;
  border: 1px solid #bdd3e6;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.trade-box-gold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #8c5d00;
}
.trade-box-gold img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
.trade-box-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trade-item-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.trade-item-line:hover {
  background: #f0f6fc;
}
.trade-item-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3b285b;
}
.trade-item-left img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
.trade-item-qty {
  font-size: 12px;
  font-weight: 700;
  color: #0b5c9e;
  background: #eef6fd;
  border: 1px solid #cce2f5;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* Cột icon mũi tên đảo chiều (Center exchange icon) */
.trade-center-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.trade-arrow-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e4eff8;
  border: 1px solid #a9c7df;
  color: #1765a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

/* Thanh tìm kiếm & lọc người gửi / người nhận */
.trade-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: #f1f7fc;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid #cce0f0;
}
.trade-search-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.trade-search-input-group span {
  position: absolute;
  left: 10px;
  color: #718da6;
  font-size: 14px;
  pointer-events: none;
}
.trade-search-input-group input {
  padding: 8px 12px 8px 30px;
  font-size: 13px;
  border: 1px solid #b3cde3;
  border-radius: 6px;
  background: #fff;
  width: 170px;
  outline: none;
}
.trade-search-input-group input:focus {
  border-color: #0b5c9e;
  box-shadow: 0 0 0 2px rgba(11, 92, 158, 0.2);
}

/* Phân trang tròn màu tím/xanh chuẩn thiết kế ảnh */
.trade-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
}
.trade-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #b8d2eb;
  background: #fff;
  color: #173b5c;
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.trade-page-btn:hover {
  background: #edf5fc;
  border-color: #7bb1de;
}
.trade-page-btn.active {
  background: #3952ba;
  color: #ffffff;
  border-color: #3952ba;
  box-shadow: 0 2px 6px rgba(57, 82, 186, 0.35);
}