/* Tab "Mua thêm nội dung" — danh sách chủ đề của kho 1 vạn câu hỏi vì sao */

/* #page-store là .tab-page (flex) -> cho nội dung chiếm hết bề ngang */
#page-store { flex-direction: column; padding: 28px; overflow-y: auto; }

.store-head { text-align: center; margin-bottom: 6px; }

.store-title {
  font-size: 19px;
  font-weight: 700;
  color: #66ddbb;
  letter-spacing: .5px;
}

.store-sub {
  font-size: 12.5px;
  color: #888;
  margin-top: 6px;
  line-height: 1.6;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.topic-card {
  border: 1px solid #225544;
  background: rgba(0, 160, 120, .06);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, background .2s;
}

.topic-card:hover {
  border-color: #66ddbb;
  background: rgba(0, 160, 120, .12);
}

.topic-head { display: flex; align-items: center; gap: 10px; }

.topic-icon { font-size: 26px; line-height: 1; }

.topic-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
}

.topic-stats { display: flex; gap: 8px; flex-wrap: wrap; }

.topic-stat {
  font-size: 11px;
  color: #9fd;
  background: rgba(0, 200, 150, .1);
  border: 1px solid #225544;
  border-radius: 20px;
  padding: 3px 10px;
}

.topic-stat.muted { color: #888; background: rgba(255, 255, 255, .03); border-color: #333; }

.btn-buy {
  margin-top: 4px;
  padding: 10px;
  background: linear-gradient(90deg, #00a878, #00d9a0);
  border: none;
  border-radius: 8px;
  color: #04241c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: opacity .2s;
}

.btn-buy:hover { opacity: .85; }

.store-empty {
  text-align: center;
  color: #777;
  font-size: 13px;
  padding: 40px 0;
}

.store-empty.error { color: #ff8888; }

/* ── Thiết bị của tôi (chỉ hiện khi đã đăng nhập) ───────────────────────── */
.mydev-box {
  margin-top: 22px;
  border: 1px solid #225544;
  border-radius: 12px;
  background: rgba(0, 160, 120, .05);
  padding: 18px;
}

.mydev-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #66ddbb;
  margin-bottom: 14px;
}

.mydev-item {
  border: 1px solid #1e3f34;
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, .2);
}

.mydev-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.mydev-name { font-size: 13.5px; font-weight: 700; color: #fff; }

.mydev-key { font-size: 10.5px; color: #6f8f83; font-family: Consolas, monospace; }

.mydev-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* Nút nạp ở đầu tab — chỉ điều hướng xuống khối robot, vì ví gắn theo từng máy */
.store-cta {
  margin-top: 12px;
  padding: 10px 22px;
  width: auto;
  display: inline-block;
}

/* ── Ví token của từng robot ─────────────────────────────────────────────── */
.token-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 11px;
  border: 1px solid #225544;
  border-radius: 8px;
  background: rgba(0, 200, 150, .07);
}

/* Sắp hết (dưới 10 lượt) → vàng; hết sạch → đỏ. */
.token-row.low { border-color: #6a4a1a; background: rgba(255, 170, 0, .09); }
.token-row.empty { border-color: #552222; background: rgba(255, 60, 60, .08); }

.token-bal { font-size: 15px; font-weight: 700; color: #66ddbb; }
.token-row.low .token-bal { color: #ffd28a; }
.token-row.empty .token-bal { color: #ff9999; }

.token-calls { font-size: 11px; color: #6f8f83; }

.token-hist {
  margin-left: auto;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #2c4d43;
  background: transparent;
  color: #8fb5a8;
  font-family: inherit;
  cursor: pointer;
}

.token-hist:hover { border-color: #4a7c6c; color: #cfe; }

.token-warn {
  margin-top: 7px;
  font-size: 11.5px;
  color: #ff9999;
}

.token-ledger {
  margin-top: 9px;
  border-top: 1px dashed #1e3f34;
  padding-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.lg-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.lg-delta { font-weight: 700; min-width: 44px; font-family: Consolas, monospace; }
.lg-delta.plus { color: #66ddbb; }
.lg-delta.minus { color: #ff9999; }
.lg-reason { color: #cfe; min-width: 74px; }
.lg-what { color: #8fb5a8; font-family: Consolas, monospace; font-size: 10.5px; }
.lg-after { color: #6f8f83; margin-left: auto; }
.lg-when { color: #556; font-size: 10px; }

/* Chủ đề nay mở sẵn cho mọi robot — thay chỗ của nút "Mua thêm nội dung" cũ. */
.topic-open {
  margin-top: 4px;
  padding: 9px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #225544;
  background: rgba(0, 200, 150, .08);
  color: #66ddbb;
  font-size: 12.5px;
  font-weight: 700;
}

.chip {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid #333;
  color: #999;
  background: rgba(255, 255, 255, .03);
  text-transform: capitalize;
}

.chip.ok { color: #9fd; border-color: #225544; background: rgba(0, 200, 150, .1); }
.chip.off { color: #ff9999; border-color: #552222; background: rgba(255, 60, 60, .07); }

/* Chip khoá = nút mua cho riêng thiết bị đó */
.chip.buy {
  color: #ffd28a;
  border-color: #6a4a1a;
  background: rgba(255, 170, 0, .1);
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.chip.buy:hover { background: rgba(255, 170, 0, .22); border-color: #ffcc66; }
.chip.buy:disabled { opacity: .55; cursor: default; }

.mydev-claim { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.mydev-claim .form-input { flex: 1; min-width: 240px; }
.mydev-claim .btn-buy { margin-top: 0; flex-shrink: 0; padding: 10px 18px; }

/* Khung QR chuyển khoản */
.pay-box {
  margin-top: 14px;
  border: 1px solid #4a3a1a;
  border-radius: 11px;
  background: rgba(255, 170, 0, .06);
  padding: 16px;
}

.pay-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffcc66;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* Giới hạn bề ngang: để tự do co giãn thì trên màn hình rộng, giá trị bị đẩy
   sang tận mép phải, cách nhãn cả gang tay và dễ nằm ngoài vùng nhìn thấy. */
.pay-grid {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 720px;
}

.pay-qr {
  width: 230px;
  max-width: 100%;
  border-radius: 9px;
  background: #fff;
  padding: 6px;
}

.pay-info { flex: 1; min-width: 230px; max-width: 430px; display: flex; flex-direction: column; gap: 7px; }

/* Nhãn cột trái cố định, giá trị ngay sát bên phải nhãn — không dùng
   space-between vì nó ném giá trị ra mép ngoài cùng. */
.pay-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
}

.pay-row span { color: #9a8a74; }
.pay-row b { color: #fff; font-family: Consolas, monospace; word-break: break-all; }
.pay-memo { color: #ffcc66 !important; }

.pay-note {
  font-size: 11.5px;
  color: #b0a08c;
  line-height: 1.6;
  border-top: 1px solid #3a2f1a;
  padding-top: 9px;
  margin-top: 4px;
}

.pay-note b { color: #ffcc66; }

.pay-status {
  font-size: 12.5px;
  color: #b0a08c;
  line-height: 1.6;
  margin-top: 4px;
  border-left: 3px solid #4a3a1a;
  padding-left: 10px;
}

.pay-status.wait { color: #ffcc66; border-left-color: #ffcc44; }
.pay-status.ok { color: #66ddbb; border-left-color: #00d9a0; }
.pay-status.err { color: #ff9999; border-left-color: #ff6666; }

.pay-actions { display: flex; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.pay-actions .btn-buy { margin-top: 0; flex: 1; min-width: 130px; }

.btn-buy.ghost {
  background: transparent;
  border: 1px solid #3a3a4a;
  color: #999;
}

.btn-buy.ghost:hover { border-color: #666; color: #ccc; opacity: 1; }
.btn-buy:disabled { opacity: .6; cursor: default; }

.mydev-msg { font-size: 12px; margin-top: 9px; min-height: 16px; }
.mydev-msg.error { color: #ff9999; }
.mydev-msg.ok { color: #66ddbb; }

/* Tóm tắt "Robot của tôi". KHÔNG cộng token các máy thành một số — ví gắn theo
   từng robot, con số tổng sẽ nói sai về tiền của khách. */
.mydev-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  font-size: 12px;
  color: #ccc;
}

.mydev-summary b { color: #fff; }
.mydev-summary-note { font-size: 11px; color: #8d8d8d; line-height: 1.45; }
.mydev-summary-note b.warn { color: #f0a14b; }