/* ===============================
   WT CoinGecko Ticker — Theme Match (Responsive)
   =============================== */
:root {
  --wtcg-bg: #0b0d10;
  --wtcg-border: #1a1c22;
  --wtcg-text: #e7e7e7;
  --wtcg-muted: #9aa0aa;
  --wtcg-row: #121419;
  --wtcg-sep: #1b1c20;
  --wtcg-accent: #ff9b22;
  --wtcg-accent-soft: rgba(255,155,34,.18);
  --wtcg-pos: #16c784;
  --wtcg-neg: #ea3943;
  --wtcg-radius: 14px;
  --wtcg-shadow: 0 6px 24px rgba(0,0,0,.35);
  --wtcg-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

.wtcg-wrap {
  background: linear-gradient(180deg, rgba(255,155,34,.04), rgba(255,155,34,0) 20%), var(--wtcg-bg);
  color: var(--wtcg-text);
  border: 1px solid var(--wtcg-border);
  border-radius: var(--wtcg-radius);
  padding: 18px 16px;
  box-shadow: var(--wtcg-shadow);
  font-family: var(--wtcg-font);
  max-width: 100%;
  overflow: hidden;
}

.wtcg-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.wtcg-title { margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; color:#f0b90b; position:relative; padding-bottom:6px; }
.wtcg-title::after { content:""; position:absolute; left:0; bottom:0; width:110px; height:3px; background:linear-gradient(90deg, var(--wtcg-accent), transparent 80%); border-radius:3px; }
.wtcg-meta { font-size:12px; color:var(--wtcg-muted); }
.wtcg-meta strong { color:#f0b90b; }

/* Scroll wrapper for small screens */
.wtcg-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width: thin; }
.wtcg-scroll::-webkit-scrollbar { height:8px; }
.wtcg-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius:8px; }

table.wtcg { width:100%; border-collapse:separate; border-spacing:0; min-width:760px; }
table.wtcg thead th { text-align:left; font-size:12px; font-weight:700; padding:10px 8px; color:var(--wtcg-muted); border-bottom:1px solid var(--wtcg-sep); text-transform:uppercase; letter-spacing:.4px; }
table.wtcg tbody td { padding:12px 8px; border-bottom:1px dashed var(--wtcg-sep); font-size:14px; vertical-align:middle; }
table.wtcg tbody tr:hover { background:var(--wtcg-row); }

td.coin { display:flex; align-items:center; gap:10px; min-width:170px; }
td.coin img { width:24px; height:24px; border-radius:50%; background:#222; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; flex:0 0 24px; }
td.coin .name { font-weight:700; line-height:1.2; }
td.coin .sym { font-size:12px; color:var(--wtcg-muted); margin-top:2px; }
td.price, td.mc, td.vol { white-space:nowrap; }
td.chg.up { color:var(--wtcg-pos); font-weight:600; }
td.chg.down { color:var(--wtcg-neg); font-weight:600; }

.wtcg-foot { margin-top:10px; font-size:12px; color:var(--wtcg-muted); }
.wtcg-foot .u { padding:2px 6px; border-radius:999px; background:var(--wtcg-accent-soft); color:#f0b90b; border:1px solid rgba(255,155,34,.35); }

.loading, .empty { text-align:center; color:var(--wtcg-muted); }

/* Breakpoints */
@media (max-width: 1024px) {
  table.wtcg { min-width: 680px; }
}
@media (max-width: 768px) {
  table.wtcg { min-width: 620px; }
  table.wtcg tbody td { padding:10px 8px; }
  td.coin { min-width:150px; }
}
/* Phone portrait */
@media (max-width: 540px) {
  table.wtcg { min-width: 560px; }
  .wtcg-title { font-size:16px; }
  .wtcg-meta { font-size:11px; }
  td.coin img { width:20px; height:20px; flex:0 0 20px; }
  /* Ẩn bớt cột để không vỡ layout: 1h, Market Cap, Volume */
  table.wtcg thead th:nth-child(3),
  table.wtcg tbody td:nth-child(3),
  table.wtcg thead th:nth-child(6),
  table.wtcg tbody td:nth-child(6),
  table.wtcg thead th:nth-child(7),
  table.wtcg tbody td:nth-child(7) { display:none; }
}
/* Rất nhỏ */
@media (max-width: 400px) {
  /* Ẩn thêm cột 7d, giữ: Coin, Price, 24h */
  table.wtcg thead th:nth-child(5),
  table.wtcg tbody td:nth-child(5) { display:none; }
  td.coin { min-width: 140px; }
}
/* Optional compact mode */
.wtcg-wrap.wtcg-compact table.wtcg thead th { padding:8px 6px; }
.wtcg-wrap.wtcg-compact table.wtcg tbody td { padding:9px 6px; font-size:13px; }
.wtcg-wrap.wtcg-compact .wtcg-title { font-size:16px; }

/* Placeholder circle when no icon */
td.coin .noimg{display:inline-block;width:24px;height:24px;border-radius:50%;background:#222;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;}

/* Icon sizing + fallback */
td.coin img { width:24px; height:24px; border-radius:50%; background:#222; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; }
td.coin .noimg{display:inline-block;width:24px;height:24px;border-radius:50%;background:#222;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;}


/* Widen table for extra columns */
@media (min-width: 541px) {
  table.wtcg { min-width: 900px; }
}




/* Compact width for 4-column layout */
table.wtcg { min-width: 560px; }
@media (max-width: 540px) {
  /* no extra columns to hide; keep 4 cols */
  table.wtcg thead th, table.wtcg tbody td { padding: 10px 8px; }
}

/* Mobile fix: cho phép bảng cuộn ngang */
.wtcg-scroll {
  overflow-x: auto;
}

table.wtcg {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px; /* đảm bảo đủ chỗ hiển thị giá đầy đủ */
}

table.wtcg td, table.wtcg th {
  white-space: nowrap; /* tránh chữ bị xuống dòng */
}

.coin-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.coin-cell img {
  width: 20px;
  height: 20px;
}

.coin-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.coin-info .sym {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

.coin-info .name {
  font-size: 12px;
  color: #aaa;
}

@media (max-width: 540px) {
  .coin-info .name {
    display: none; /* ẩn tên dài, chỉ giữ ký hiệu trên mobile */
  }
}