/* Thumbnail tool + modal (dùng chung trang chủ & bảng kênh) */
.thumb-tool { width: min(720px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.thumb-inner {
  background: linear-gradient(145deg, rgba(255, 26, 46, .08), transparent 42%), linear-gradient(180deg, #14141c, #0e0e14);
  border: 1px solid #2e2e3a;
  border-radius: 20px;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.thumb-kicker {
  margin: 0 0 8px;
  color: #d6ff3a;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.thumb-inner h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.thumb-copy .dim { margin: 8px 0 0; color: #9a9aa8; }
.thumb-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.thumb-form input {
  flex: 1; min-width: min(100%, 200px);
  background: #0a0a0e; color: #f4f4f7;
  border: 1px solid #353545; border-radius: 12px; padding: 14px 16px; font: inherit;
}
.thumb-form input:focus { outline: none; border-color: #d6ff3a; box-shadow: 0 0 0 3px rgba(214, 255, 58, .15); }
.thumb-form .btn, .thumb-form button.btn-primary {
  background: #ff1a2e; color: #fff; border: 0; border-radius: 999px;
  padding: 12px 20px; font-weight: 700; cursor: pointer;
}
.thumb-status { margin: 12px 0 0; color: #9a9aa8; }
.thumb-status.err { color: #ff8a8a; }
.thumb-status.ok { color: #9dffb0; }
.thumb-result { margin-top: 18px; }
.thumb-preview-wrap {
  background: #08080c; border: 1px solid #2a2a36; border-radius: 14px;
  overflow: hidden; aspect-ratio: 16 / 9;
}
.thumb-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-id { margin: 12px 0 0; color: #9a9aa8; }
.thumb-id code { color: #d6ff3a; background: #1a1a22; padding: 2px 8px; border-radius: 6px; }

.thumb-modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
}
.thumb-modal.hidden { display: none !important; }
.thumb-modal-box {
  position: relative;
  width: min(560px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: #121218;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 22px;
}
.thumb-modal .modal-x, .thumb-modal [data-thumb-close] {
  position: absolute; right: 12px; top: 10px;
  background: #272727; color: #fff; border: 1px solid #444;
  border-radius: 8px; width: 34px; height: 34px; cursor: pointer;
}
.thumb-modal .thumb-tool { width: 100%; padding: 0; }
.thumb-modal .thumb-inner { background: transparent; border: 0; box-shadow: none; padding: 8px 0 0; }

.page-thumb {
  min-height: calc(100vh - 120px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(28px, 6vh, 56px) 0 48px;
}

.nav-money {
  background: #2a2210 !important;
  color: #ffc850 !important;
  font-weight: 700;
  border: 1px solid rgba(255, 200, 80, .4) !important;
}
.nav-money:hover { background: #3a3018 !important; color: #fff !important; }

.money-result { margin-top: 16px; }
.money-badge {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 14px 16px;
  border-radius: 12px;
  text-align: center;
}
.money-badge.on {
  background: #12351f;
  color: #7ee2a0;
  border: 1px solid #2a6b44;
}
.money-badge.off {
  background: #3a1414;
  color: #ff9b9b;
  border: 1px solid #6b2a2a;
}
.money-meta { margin-top: 14px; line-height: 1.5; }
.money-meta p { margin: 6px 0; }
.money-warn { color: #ffb020 !important; font-size: .9rem; }