* { box-sizing: border-box; }
body {
  margin: 0; font: 13px/1.4 "Segoe UI", Roboto, Arial, sans-serif;
  background: #0f0f0f; color: #f1f1f1;
}
header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 18px; background: #181818; border-bottom: 1px solid #2a2a2a;
  position: sticky; top: 0; z-index: 5;
}
.brand { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand img { width: 28px; height: 28px; }
.token { font-size: 12px; padding: 5px 10px; border-radius: 6px; background: #222; }
.token.ok { background: #12351f; color: #7ee2a0; }
.token.bad { background: #3a1414; color: #ff9b9b; }

.bar { display: flex; gap: 10px; padding: 10px 18px; align-items: stretch; }
.bar.add textarea {
  flex: 1; min-height: 74px; resize: vertical; background: #121212; color: #eee;
  border: 1px solid #333; border-radius: 8px; padding: 8px; font: inherit;
}
.addcol { display: flex; flex-direction: column; gap: 6px; width: 260px; }
.bar.extra { padding-top: 0; align-items: center; flex-wrap: wrap; }
.extra-grid { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.extra-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #aaa; }
.extra-grid select { width: 110px; }
.extra-grid input { width: 150px; }
td.yn { cursor: pointer; text-align: center; }
td.yn.y { color: #6fdc8c; }
td.yn.n { color: #ff7a7a; }
td.yn:hover { background: #222; }
th.xf { color: #e8c46a; }
.tools { align-items: center; padding-top: 0; flex-wrap: wrap; }
.grow { flex: 1; }
input, select {
  background: #121212; color: #eee; border: 1px solid #333; border-radius: 6px;
  padding: 6px 8px; font: inherit;
}
#search { width: 260px; }
button {
  background: #272727; color: #f1f1f1; border: 1px solid #3a3a3a; border-radius: 6px;
  padding: 6px 12px; font: inherit; cursor: pointer;
}
button:hover { background: #333; }
button.primary { background: #cc0000; border-color: #cc0000; font-weight: 600; }
button.primary:hover { background: #e01b1b; }
button:disabled { opacity: .5; cursor: default; }

.progress { margin: 0 18px 8px; padding: 6px 10px; background: #1d2a3a; border-radius: 6px; color: #9fc9ff; }
.hidden { display: none !important; }

.cards { display: flex; gap: 10px; padding: 0 18px 10px; flex-wrap: wrap; }
.card { background: #181818; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px 14px; min-width: 150px; }
.card .t { color: #aaa; font-size: 12px; }
.card .v { font-size: 20px; font-weight: 700; margin-top: 2px; }

.tblwrap {
  margin: 0 18px 20px; overflow: auto; max-height: calc(100vh - var(--hh, 49px) - 16px);
  border: 1px solid #242424; border-radius: 8px;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 6px 8px; border-bottom: 1px solid #242424; white-space: nowrap; background: #0f0f0f; }
th {
  position: sticky; top: 0; background: #181818; text-align: left; font-weight: 600;
  color: #ccc; cursor: pointer; user-select: none; z-index: 2;
  vertical-align: bottom; line-height: 1.25;
}
th.idx, td.idx { position: sticky; left: 0; width: 38px; min-width: 38px; max-width: 38px; z-index: 3; }
th.ch, td.ch { position: sticky; left: 38px; z-index: 3; min-width: 220px; max-width: 260px; box-shadow: 4px 0 6px -2px rgba(0,0,0,.6); border-right: 1px solid #2a2a2a; }
th.idx, th.ch { z-index: 4; background: #181818; }
td.sp { cursor: pointer; padding: 2px 8px; }
.spark { display: block; }
th.num, td.num { text-align: right; }
th.sorted::after { content: attr(data-dir); color: #ff4e45; margin-left: 4px; }
tr:hover td { background: #1a1a1a; }
td.ch .chin { display: flex; align-items: center; gap: 8px; }
td.ch img { width: 32px; height: 32px; border-radius: 50%; background: #333; flex: none; }
td.ch .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
td.ch .chbtn { flex: none; margin-left: auto; background: #3ea6ff; color: #0f0f0f; border: 0; border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 0 8px rgba(62,166,255,.45); }
td.ch .chbtn:hover { background: #65b8ff; box-shadow: 0 0 12px rgba(62,166,255,.8); transform: scale(1.06); }
td.ch .nm a, td.ch .hd { display: block; overflow: hidden; text-overflow: ellipsis; }
td.ch a { color: #f1f1f1; text-decoration: none; font-weight: 600; }
td.ch a:hover { text-decoration: underline; }
td.ch .hd { color: #888; font-size: 11px; }
.pos { color: #6fdc8c; }
.neg { color: #ff7a7a; }
.dim { color: #777; font-size: 11px; }
.st { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.st.ok { background: #12351f; }
.st.weak { background: #3a3214; }
.st.warn { background: #3a2a14; }
.st.bad { background: #3a1414; }
td.edit { cursor: pointer; color: #ccc; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
td.edit:hover { color: #fff; text-decoration: underline dotted; }
td.act button { padding: 2px 8px; margin-left: 2px; }
.empty { text-align: center; color: #888; padding: 30px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal .box { background: #181818; border: 1px solid #333; border-radius: 12px; padding: 18px 22px; width: min(1000px, 94vw); max-height: 92vh; overflow: auto; position: relative; }
.modal .x { position: absolute; right: 12px; top: 10px; }
.mhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mhead img { width: 56px; height: 56px; border-radius: 50%; }
.mhead h2 { margin: 0; font-size: 18px; }
.ranges { margin: 8px 0; display: flex; gap: 6px; }
.ranges button.on { background: #cc0000; border-color: #cc0000; }
.chart { width: 100%; height: auto; background: #121212; border-radius: 8px; }
.legend { color: #aaa; font-size: 12px; margin-top: 4px; }
.legend b.v { color: #3ea6ff; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }

/* Hai mục kênh */
.tabs { display: flex; gap: 6px; padding: 0 18px 8px; }
.tabs button { border-radius: 8px 8px 0 0; padding: 8px 16px; }
.tabs button.on { background: #cc0000; border-color: #cc0000; font-weight: 600; }
.badge { background: #ff8a00; color: #000; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; margin-left: 4px; }
button.fire { background: linear-gradient(90deg, #ff5f00, #ffb300); border-color: #ff8a00; color: #111; font-weight: 700; }
button.fire:hover { filter: brightness(1.1); background: linear-gradient(90deg, #ff5f00, #ffb300); }

/* Video nổ / chuỗi nổ: càng nhiều ngày liên tiếp càng nổi */
td.streak { font-weight: 700; cursor: pointer; }
td.streak.lv1 { color: #ffb36b; }
td.streak.lv2 { color: #ff9a3c; }
td.streak.lv3 { color: #ff7a1a; }
td.streak.lv4 { color: #ff4d00; text-shadow: 0 0 6px rgba(255, 90, 0, .8); }
td.hotc { cursor: pointer; color: #ffb36b; }
@keyframes pulse1 { 0%, 100% { background: #0f0f0f; } 50% { background: #2a1d10; } }
@keyframes pulse2 { 0%, 100% { background: #0f0f0f; } 50% { background: #3d2410; } }
@keyframes pulse3 { 0%, 100% { background: #1a0e05; } 50% { background: #5a2a08; } }
@keyframes pulse4 { 0%, 100% { background: #2a0f00; box-shadow: inset 0 0 0 1px #ff5a00; } 50% { background: #7a2e00; box-shadow: inset 0 0 12px 2px #ff7a00; } }
tr.hot1 td.ch, tr.hot1 td.idx { animation: pulse1 3s ease-in-out infinite; }
tr.hot2 td.ch, tr.hot2 td.idx { animation: pulse2 2s ease-in-out infinite; }
tr.hot3 td.ch, tr.hot3 td.idx, tr.hot3 td.streak { animation: pulse3 1.3s ease-in-out infinite; }
tr.hot4 td { animation: pulse4 .8s ease-in-out infinite; }
tr.hot3 td.ch a, tr.hot4 td.ch a { color: #ffd2a8; }

/* Danh sách video trong cửa sổ chi tiết */
h3 { margin: 18px 0 6px; font-size: 15px; }
.vtable { width: 100%; border-collapse: collapse; margin-top: 6px; }
.vtable th { position: static; background: #202020; }
.vtable td { background: transparent; }
.vtable td.vt { white-space: normal; min-width: 380px; }
.vtable td.vt a { color: #eee; text-decoration: none; }
.vtable td.vt a:hover { text-decoration: underline; }
.vtable tr.vhot td { background: #2a1a0a; }

/* Cửa sổ xu hướng */
.modal .box.wide { width: min(1300px, 97vw); }
.tctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.tsec { background: #121212; border: 1px solid #262626; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.tsec h3 { margin: 0 0 8px; }
.tsec table { width: 100%; border-collapse: collapse; }
.tsec th { position: static; background: #1c1c1c; cursor: default; }
.tsec td { background: transparent; white-space: normal; vertical-align: top; }
.tsec tr.clickable { cursor: pointer; }
.tsec tr.clickable:hover td { background: #1c1c1c; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #262626; margin: 2px 4px 2px 0; font-size: 12px; cursor: pointer; }
.chip:hover { background: #333; }
.chip.new { background: #12351f; color: #8ff0ae; }
.tp-hook { color: #ffcc4d; font-weight: 700; }
.tp-name { color: #6fc3ff; font-weight: 700; }
.tp-set { color: #c79bff; }
.tp-game { color: #888; }
.sugg { list-style: none; padding: 0; margin: 0; }
.sugg li { padding: 6px 8px; border-bottom: 1px solid #222; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sugg li button { padding: 2px 8px; font-size: 12px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#tq { width: 360px; font-size: 14px; padding: 8px 10px; }
td.dead { color: #ff9b9b; white-space: nowrap; }

/* Kênh mới thêm (xanh) và kênh bị thêm trùng (vàng) nhấp nháy trong 24 giờ */
@keyframes flashNew { 0%, 100% { background: #0f0f0f; } 50% { background: #13261b; } }
@keyframes flashDup { 0%, 100% { background: #0f0f0f; } 50% { background: #2a240f; } }
tr.flashnew td.ch, tr.flashnew td.idx { animation: flashNew 3s ease-in-out infinite; }
tr.flashdup td.ch, tr.flashdup td.idx { animation: flashDup 3s ease-in-out infinite; }
tr.flashnew td.ch { box-shadow: inset 4px 0 0 #2ecc71, 4px 0 6px -2px rgba(0,0,0,.6); }
tr.flashdup td.ch { box-shadow: inset 4px 0 0 #f5c518, 4px 0 6px -2px rgba(0,0,0,.6); }
td.eng { cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.eng.lv1 { color: #ffd27a; }
td.eng.lv2 { color: #fff; background: #5a1a1a !important; }
td.eng.lv2 b { color: #ff6b6b; }