/* ============================================================================
   Yên Vân — bảng màu theo sắc tố tranh thuỷ mặc.
   Ba màu DỮ LIỆU (thạch lục · hoa thanh · chu sa) đã chạy qua bộ kiểm tra của
   dataviz ở cả hai chế độ: đúng dải sáng, đủ độ tươi, phân biệt được khi mù màu,
   và tương phản ≥3:1 với nền. Bốn màu cùng lúc thì KHÔNG qua nổi — nên nhóm
   "nội dung hụt" cố ý dùng mực trung tính thay vì màu thứ tư. Nó cũng đúng
   nghĩa: đó là trạng thái lưng chừng, không tốt cũng không hỏng.
   Vàng nhũ chỉ dùng cho nét trang trí, không bao giờ mã hoá dữ liệu.
   ========================================================================== */

:root {
  color-scheme: light;

  /* giấy dó */
  --surface-0: #e9dfcb;
  --surface-1: #f6f0e2;
  --surface-2: #ece3d0;
  --surface-3: #e0d5bd;
  --border: #d6c9ac;
  --border-strong: #b9a883;

  /* mực nho */
  --text-primary: #1d1a15;
  --text-secondary: #5a5245;
  --text-muted: #857b69;

  /* sắc tố */
  --jade: #0f8a5f;
  --indigo: #2a5ea8;
  --cinnabar: #b83322;
  --gold: #8a6a1e;

  --accent: var(--indigo);
  --accent-ink: #1e4a86;
  --accent-wash: rgba(42, 94, 168, 0.10);
  --pos: var(--jade);
  --neg: var(--cinnabar);

  --good-ink: #0b6e4c;
  --good-wash: rgba(15, 138, 95, 0.11);
  --warn-ink: #5a5245;              /* trung tính: nhóm lưng chừng */
  --warn-wash: rgba(90, 82, 69, 0.09);
  --bad-ink: #9a2a1b;
  --bad-wash: rgba(184, 51, 34, 0.10);

  --grid: rgba(29, 26, 21, 0.10);
  --ridge-1: rgba(38, 44, 46, 0.13);
  --ridge-2: rgba(32, 38, 40, 0.18);
  --ridge-3: rgba(26, 31, 33, 0.24);
  --mist: rgba(246, 240, 226, 0.85);
  --wind: rgba(40, 52, 58, 0.30);
  --sky: linear-gradient(180deg, #ece7d9 0%, #e9dfc9 40%, #ddd0b2 72%, #cfc09c 100%);
  --veil-a: #b9c2b4; --veil-b: #97a698; --o-veil: .5;
  --far-a: #90a396; --far-b: #6d8378; --o-far: .6;
  --mid-a: #5f7669; --mid-b: #45594e; --o-mid: .75;
  --near-a: #33413a; --near-b: #232d27; --o-near: .9;
  --moon: rgba(196, 154, 74, 0.5);
  --moon-glow: rgba(196, 154, 74, 0.25);
  --mote: rgba(138, 106, 30, 0.4);
  --stars-o: 0;
  --vignette: rgba(58, 48, 28, 0.16);
  --grain-opacity: .07;
  --grain-blend: multiply;

  --shadow-sm: 0 1px 2px rgba(29, 26, 21, 0.05);
  --shadow-lg: 0 22px 60px rgba(29, 26, 21, 0.22);
  --radius: 4px;
}

/* đêm mực — cùng sắc tố, lên bậc cho nền tối, không phải lật ngược màu */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root:not([data-theme="light"]) { }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0f1216;
    --surface-1: #171b21;
    --surface-2: #1e242b;
    --surface-3: #262d36;
    --border: #2c343e;
    --border-strong: #46515e;
    --text-primary: #f2eee4;
    --text-secondary: #b6b0a2;
    --text-muted: #857f72;

    --jade: #199e70;
    --indigo: #3987e5;
    --cinnabar: #dd5240;
    --gold: #b8933f;

    --accent: var(--indigo);
    --accent-ink: #86b6ef;
    --accent-wash: rgba(57, 135, 229, 0.16);
    --pos: var(--jade);
    --neg: var(--cinnabar);

    --good-ink: #35b083;
    --good-wash: rgba(25, 158, 112, 0.15);
    --warn-ink: #b6b0a2;
    --warn-wash: rgba(182, 176, 162, 0.09);
    --bad-ink: #ef7462;
    --bad-wash: rgba(221, 82, 64, 0.13);

    --grid: rgba(242, 238, 228, 0.09);
    --ridge-1: rgba(150, 180, 195, 0.15);
    --ridge-2: rgba(130, 162, 180, 0.21);
    --ridge-3: rgba(110, 142, 162, 0.29);
    --mist: rgba(140, 170, 190, 0.24);
--wind: rgba(178, 205, 220, 0.4);
    --sky: linear-gradient(180deg, #070d16 0%, #0d1a26 38%, #16323c 68%, #23464a 92%, #2a5150 100%);
    --veil-a: #6f8ca0; --veil-b: #4a6579; --o-veil: .35;
    --far-a: #55707f; --far-b: #33485a; --o-far: .55;
    --mid-a: #3c5260; --mid-b: #22333f; --o-mid: .75;
    --near-a: #141f26; --near-b: #090f14; --o-near: .95;
    --moon: rgba(244, 219, 156, 0.85);
    --moon-glow: rgba(238, 205, 140, 0.32);
    --mote: rgba(238, 205, 140, 0.6);
    --stars-o: .55;
    --vignette: rgba(2, 6, 10, 0.55);
    --grain-opacity: .05;
    --grain-blend: overlay;

    --shadow-sm: none;
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, .65);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #0f1216;
  --surface-1: #171b21;
  --surface-2: #1e242b;
  --surface-3: #262d36;
  --border: #2c343e;
  --border-strong: #46515e;
  --text-primary: #f2eee4;
  --text-secondary: #b6b0a2;
  --text-muted: #857f72;

  --jade: #199e70;
  --indigo: #3987e5;
  --cinnabar: #dd5240;
  --gold: #b8933f;

  --accent: var(--indigo);
  --accent-ink: #86b6ef;
  --accent-wash: rgba(57, 135, 229, 0.16);
  --pos: var(--jade);
  --neg: var(--cinnabar);

  --good-ink: #35b083;
  --good-wash: rgba(25, 158, 112, 0.15);
  --warn-ink: #b6b0a2;
  --warn-wash: rgba(182, 176, 162, 0.09);
  --bad-ink: #ef7462;
  --bad-wash: rgba(221, 82, 64, 0.13);

  --grid: rgba(242, 238, 228, 0.09);
  --ridge-1: rgba(150, 180, 195, 0.15);
  --ridge-2: rgba(130, 162, 180, 0.21);
  --ridge-3: rgba(110, 142, 162, 0.29);
  --mist: rgba(140, 170, 190, 0.24);
--wind: rgba(178, 205, 220, 0.4);
  --sky: linear-gradient(180deg, #070d16 0%, #0d1a26 38%, #16323c 68%, #23464a 92%, #2a5150 100%);
  --veil-a: #6f8ca0; --veil-b: #4a6579; --o-veil: .35;
  --far-a: #55707f; --far-b: #33485a; --o-far: .55;
  --mid-a: #3c5260; --mid-b: #22333f; --o-mid: .75;
  --near-a: #141f26; --near-b: #090f14; --o-near: .95;
  --moon: rgba(244, 219, 156, 0.85);
  --moon-glow: rgba(238, 205, 140, 0.32);
  --mote: rgba(238, 205, 140, 0.6);
  --stars-o: .55;
  --vignette: rgba(2, 6, 10, 0.55);
  --grain-opacity: .05;
  --grain-blend: overlay;

  --shadow-sm: none;
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ===================== nền tranh ===================== */
.scenery { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.scenery-svg { width: 100%; height: 100%; }
.wind { position: absolute; inset: 0; width: 100%; height: 100%; }
.ridge { transition: none; will-change: transform; }
.sky { position: absolute; inset: 0; background: var(--sky); }

/* Bốn lớp núi: càng gần càng đậm, càng nét. Tô bằng gradient dọc qua biến CSS nên đổi
   ngày/đêm không phải vẽ lại đường. */
.ridge.veil { opacity: var(--o-veil); } .ridge.veil path { fill: url(#g-veil); }
.ridge.far  { opacity: var(--o-far); }  .ridge.far path  { fill: url(#g-far); }
.ridge.mid  { opacity: var(--o-mid); }  .ridge.mid path  { fill: url(#g-mid); }
.ridge.near { opacity: var(--o-near); } .ridge.near path { fill: url(#g-near); }
.s-a-veil { stop-color: var(--veil-a); } .s-b-veil { stop-color: var(--veil-b); }
.s-a-far  { stop-color: var(--far-a); }  .s-b-far  { stop-color: var(--far-b); }
.s-a-mid  { stop-color: var(--mid-a); }  .s-b-mid  { stop-color: var(--mid-b); }
.s-a-near { stop-color: var(--near-a); } .s-b-near { stop-color: var(--near-b); }

.moon { fill: var(--moon); }
.moon-halo { fill: var(--moon-glow); }
.pavilion path { fill: var(--near-b); }
.birds path { stroke: var(--wind); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.birds { animation: drift 64s ease-in-out infinite reverse; }

/* Sao chỉ hiện ban đêm — ban ngày --stars-o là 0 nên lớp này tự tắt, không cần bật tắt
   bằng JavaScript. */
.stars {
  position: absolute; inset: 0 0 42% 0; opacity: var(--stars-o);
  background-image:
    radial-gradient(1.4px 1.4px at 11% 22%, rgba(240,245,250,.9) 50%, transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 55%, rgba(240,245,250,.7) 50%, transparent 60%),
    radial-gradient(1.6px 1.6px at 37% 14%, rgba(240,245,250,.9) 50%, transparent 60%),
    radial-gradient(1px 1px at 49% 40%, rgba(240,245,250,.6) 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 26%, rgba(240,245,250,.85) 50%, transparent 60%),
    radial-gradient(1px 1px at 72% 62%, rgba(240,245,250,.6) 50%, transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 18%, rgba(240,245,250,.9) 50%, transparent 60%),
    radial-gradient(1.1px 1.1px at 93% 47%, rgba(240,245,250,.7) 50%, transparent 60%),
    radial-gradient(1.3px 1.3px at 5% 70%, rgba(240,245,250,.7) 50%, transparent 60%);
}
.vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 36%, transparent 52%, var(--vignette) 100%); }

/* Đom đóm bay lên. Hoạ tiết lặp theo chiều dọc và khối cao gấp đôi màn hình, nên dịch
   -50% là quay về đúng vị trí cũ — vòng lặp liền mạch, không thấy điểm nối. */
.motes {
  position: absolute; left: 0; right: 0; top: 0; height: 200%;
  will-change: transform;
  background-repeat: repeat; background-size: 100% 50%;
  animation: rise 72s linear infinite;
  background-image:
    radial-gradient(2.5px 2.5px at 7% 12%, var(--mote) 45%, transparent 60%),
    radial-gradient(2px 2px at 18% 68%, var(--mote) 45%, transparent 60%),
    radial-gradient(3px 3px at 31% 34%, var(--mote) 45%, transparent 60%),
    radial-gradient(2px 2px at 44% 82%, var(--mote) 45%, transparent 60%),
    radial-gradient(2.5px 2.5px at 56% 22%, var(--mote) 45%, transparent 60%),
    radial-gradient(2px 2px at 67% 58%, var(--mote) 45%, transparent 60%),
    radial-gradient(3px 3px at 78% 40%, var(--mote) 45%, transparent 60%),
    radial-gradient(2px 2px at 89% 76%, var(--mote) 45%, transparent 60%),
    radial-gradient(2.5px 2.5px at 96% 8%, var(--mote) 45%, transparent 60%);
}
.motes.b { background-position: 50% 25%; animation-duration: 110s; opacity: .65; }
@keyframes rise { to { transform: translateY(-50%); } }

.mist { fill: var(--mist); }
/* Sương trôi rất chậm — 90 giây một vòng. Nhanh hơn là thành hiệu ứng, không còn
   là không khí nữa. */
.m1 { animation: drift 96s ease-in-out infinite; }
.m2 { animation: drift 132s ease-in-out infinite reverse; }
.m3 { animation: drift 158s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translateX(-5%); }
  50% { transform: translateX(5%); }
}
.m4 { animation: drift 118s ease-in-out infinite reverse; }
.m5 { animation: drift 84s ease-in-out infinite; }
.grain {
  position: absolute; inset: 0;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .m1, .m2, .m3, .m4, .m5, .motes, .birds { animation: none; }
  .tab-panel.on { animation: none; }
}

/* ===================== chữ ===================== */
h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 700; letter-spacing: -0.02em;
}
a { color: var(--accent); }

.seal {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--cinnabar); border-radius: 5px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.seal svg { width: 26px; height: 26px; stroke: #f6f0e2; }
.seal-lg { width: 56px; height: 56px; border-radius: 8px; margin: 0 auto 18px; }
.seal-lg svg { width: 42px; height: 42px; }

/* ===================== form ===================== */
select, button, input, textarea {
  font: inherit; color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
button { cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
button.ghost { background: transparent; }
button.icon { padding: 8px 11px; font-size: 15px; }
button.lg { padding: 12px 28px; font-size: 15px; }
button.sm { padding: 5px 11px; font-size: 13px; }
textarea { width: 100%; resize: vertical; min-height: 68px; }
label { display: block; font-size: 13.5px; color: var(--text-secondary); margin: 15px 0 5px; font-weight: 500; }
label:first-of-type { margin-top: 0; }
input[type="search"] { min-width: 200px; }
:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

/* ===================== đăng nhập ===================== */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card {
  max-width: 480px; text-align: center;
  background: var(--surface-1); border: 1px solid var(--border);
  border-top: 3px solid var(--cinnabar);
  padding: 46px 40px; box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: 36px; margin: 0 0 4px; letter-spacing: .04em; }
.tagline {
  font-style: italic;
  color: var(--gold); margin: 0 0 22px !important; font-size: 14.5px;
}
.login-card p { color: var(--text-secondary); margin: 0 0 26px; }
.fineprint { font-size: 12.5px; color: var(--text-muted); margin-top: 28px !important; line-height: 1.7; }
.err-text { color: var(--neg); font-size: 13.5px; margin-top: 18px !important; }

/* ===================== thanh trên ===================== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 11px 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); }
.who { display: flex; flex-direction: column; min-width: 0; }
.who b { font-size: 15.5px; font-weight: 600; }
.who span { color: var(--text-muted); font-size: 12.5px; }
.spacer { flex: 1; }

.tabs { max-width: 1240px; margin: 0 auto; padding: 0 22px; display: flex; gap: 3px; overflow-x: auto; }
.tabs button {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 9px 15px; color: var(--text-muted); font-weight: 500; white-space: nowrap;
}
.tabs button:hover { background: none; color: var(--text-primary); }
/* Gạch chân màu son — vệt bút trên giấy, cùng mực với con dấu ở góc trái. */
.tabs button.on { color: var(--text-primary); border-bottom-color: var(--cinnabar); font-weight: 600; }

.shell { max-width: 1240px; margin: 0 auto; padding: 26px 22px 90px; }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.section-head {
  font-size: 21px; margin: 32px 0 3px; padding-left: 13px; position: relative;
}
.section-head::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em;
  width: 3px; background: var(--gold);
}
.section-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 16px 13px; }

/* ===================== thẻ ===================== */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 3px; font-size: 17px; }
.card .sub { margin: 0 0 16px; color: var(--text-muted); font-size: 13.5px; }
.card-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head > div:first-child { flex: 1; min-width: 220px; }
.card-head .sub { margin-bottom: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 11px; margin-bottom: 18px; }
.kpi {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.kpi .label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.kpi .value {
  font-weight: 600;
  font-size: 29px; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi .note { color: var(--text-muted); font-size: 12.5px; }

.banner {
  display: flex; gap: 15px; align-items: center; flex-wrap: wrap;
  padding: 14px 17px; border-radius: var(--radius); margin-bottom: 18px;
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  background: var(--surface-1); font-size: 14px; color: var(--text-secondary);
}
.banner b { color: var(--text-primary); }
.banner .grow { flex: 1; min-width: 260px; }
.banner.err { border-left-color: var(--cinnabar); }
.banner.good { background: var(--good-wash); border-left-color: var(--jade); }

.empty { color: var(--text-muted); font-size: 13.5px; padding: 18px 0; text-align: center; }
.muted { color: var(--text-muted); font-weight: 400; }

/* ===================== việc cần làm ===================== */
.actions { display: grid; gap: 11px; }
.action {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius); padding: 16px 18px;
}
.action.hi { border-left-color: var(--accent); background: var(--accent-wash); }
.action.good { border-left-color: var(--jade); }
.action.warn { border-left-color: var(--gold); }
.action.bad { border-left-color: var(--cinnabar); }
.action .body { flex: 1; min-width: 0; }
.action .t { font-weight: 600; font-size: 15.5px; margin-bottom: 3px; }
.action .d { color: var(--text-secondary); font-size: 13.8px; }
.action .impact { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); margin-top: 7px; font-variant-numeric: tabular-nums; }
.action ul { margin: 9px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 13.5px; }
.action li { margin-bottom: 4px; }
.action li a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-strong); cursor: pointer; }
.action li a:hover { color: var(--accent); border-color: var(--accent); }

/* ===================== biểu đồ ===================== */
.chart-wrap { overflow-x: auto; }
svg { display: block; max-width: 100%; }
svg text { font-family: "Be Vietnam Pro", sans-serif; }
.axis-label { fill: var(--text-muted); font-size: 11.5px; }
.axis-title { fill: var(--text-secondary); font-size: 12px; font-weight: 600; }
.tick { stroke: var(--grid); stroke-width: 1; }
.median-line { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dot { fill: var(--accent); fill-opacity: .72; stroke: var(--surface-1); stroke-width: 2; cursor: pointer; transition: fill-opacity .12s; }
.dot:hover { fill-opacity: 1; }
.dot-label {
  fill: var(--text-primary); font-size: 11.5px; font-weight: 600;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none;
}
/* Viền cùng màu nền quanh chữ: nhãn vùng nằm đè lên các chấm ở góc, không có viền
   thì chấm cắt ngang chữ. */
.zone-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3.5px; stroke-linejoin: round;
}

.quad-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 18px; }
.zone {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
  padding: 11px 13px; cursor: pointer; background: var(--surface-1); transition: border-color .12s;
}
.zone:hover { border-color: var(--border-strong); }
.zone .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.zone .k { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.zone .w { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.zone.winner { background: var(--good-wash); border-left-color: var(--jade); } .zone.winner .k { color: var(--good-ink); }
.zone.retitle { background: var(--accent-wash); border-left-color: var(--accent); } .zone.retitle .k { color: var(--accent-ink); }
.zone.clickbait { background: var(--warn-wash); border-left-color: var(--border-strong); } .zone.clickbait .k { color: var(--warn-ink); }
.zone.drop { background: var(--bad-wash); border-left-color: var(--cinnabar); } .zone.drop .k { color: var(--bad-ink); }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { border: none; border-radius: 0; background: var(--surface-1); font-size: 13px; padding: 7px 14px; color: var(--text-muted); }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }
.seg button.on:hover { background: var(--accent-ink); color: #fff; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 90; max-width: 320px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 10px 13px; font-size: 13px; box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .1s;
}
.tooltip.on { opacity: 1; }
.tooltip .t-title { font-weight: 600; margin-bottom: 5px; line-height: 1.35; }
.tooltip .t-row { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ===================== bảng ===================== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th {
  color: var(--text-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  user-select: none; text-transform: uppercase; letter-spacing: .07em;
  position: sticky; top: 0; background: var(--surface-1); border-bottom-color: var(--border-strong);
}
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text-primary); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
td.title-cell { min-width: 290px; }
.thumb { width: 66px; height: 37px; object-fit: cover; border-radius: 3px; margin-right: 11px; vertical-align: middle; background: var(--surface-2); }
.tag {
  display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 3px;
  border: 1px solid var(--border-strong); color: var(--text-secondary); white-space: nowrap; font-weight: 500;
}
.tag.winner { background: var(--good-wash); color: var(--good-ink); border-color: transparent; }
.tag.retitle { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }
.tag.clickbait { background: var(--warn-wash); color: var(--warn-ink); border-color: transparent; }
.tag.drop { background: var(--bad-wash); color: var(--bad-ink); border-color: transparent; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius);
  padding: 5px 13px; font-size: 13px; color: var(--text-secondary);
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.chip.on:hover { background: var(--accent-ink); color: #fff; }
.chip.on .muted { color: rgba(255, 255, 255, .72); }

/* ===================== ngách ===================== */
.niche-form { display: flex; gap: 9px; flex-wrap: wrap; }
.niche-form input { flex: 1; min-width: 220px; }
.niche-list { display: grid; gap: 8px; margin-top: 18px; }
.niche-item {
  display: flex; gap: 13px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; background: var(--surface-1);
}
.niche-item.mine { background: var(--accent-wash); border-color: transparent; border-left: 3px solid var(--accent); }
.niche-item img { width: 88px; height: 50px; object-fit: cover; border-radius: 3px; background: var(--surface-2); flex-shrink: 0; }
.niche-item .n-body { flex: 1; min-width: 0; }
.niche-item .n-title { font-weight: 550; font-size: 14px; line-height: 1.4; margin-bottom: 3px; }
.niche-item .n-title a { color: inherit; text-decoration: none; }
.niche-item .n-title a:hover { text-decoration: underline; }
.niche-item .n-meta { color: var(--text-muted); font-size: 12.5px; }
.niche-item .n-rate { text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.niche-item .n-rate b { display: block; font-size: 18px; font-weight: 600; }
.niche-item .n-rate span { font-size: 11.5px; color: var(--text-muted); }

/* ===================== AI ===================== */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 11px; }
.title-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; background: var(--surface-1); }
.title-card .headline { font-size: 16px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.title-card .meta { color: var(--text-muted); font-size: 12.5px; margin-bottom: 8px; }
.title-card .why { color: var(--text-secondary); font-size: 13.5px; }
.pill-list { margin: 0; padding-left: 19px; color: var(--text-secondary); }
.pill-list li { margin-bottom: 7px; }
.h-sub { margin: 24px 0 10px; font-size: 16px; }

/* ===================== ngăn chi tiết ===================== */
.drawer-bg { position: fixed; inset: 0; background: rgba(15, 18, 22, .5); z-index: 60; animation: fade .15s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--surface-1); border-left: 3px solid var(--cinnabar);
  z-index: 70; overflow-y: auto; padding: 26px 28px 60px; box-shadow: var(--shadow-lg);
  animation: slide .22s ease-out;
}
@keyframes slide { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-close { position: absolute; top: 15px; right: 17px; background: none; border: none; font-size: 17px; color: var(--text-muted); padding: 5px 9px; }
.drawer h3 { font-size: 19px; margin: 0 0 4px; padding-right: 34px; line-height: 1.35; }
.drawer .d-thumb { width: 100%; border-radius: var(--radius); margin-bottom: 16px; background: var(--surface-2); }
.d-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.d-stat { background: var(--surface-2); border-radius: var(--radius); padding: 10px 13px; }
.d-stat .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.d-stat .v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.d-stat .c { font-size: 12px; color: var(--text-muted); }
.d-verdict { border-radius: var(--radius); padding: 13px 15px; font-size: 13.8px; margin: 16px 0; border-left: 3px solid var(--border-strong); }
.d-verdict.winner { background: var(--good-wash); border-left-color: var(--jade); }
.d-verdict.retitle { background: var(--accent-wash); border-left-color: var(--accent); }
.d-verdict.clickbait { background: var(--warn-wash); }
.d-verdict.drop { background: var(--bad-wash); border-left-color: var(--cinnabar); }
.d-verdict.unknown { background: var(--surface-2); }
.d-verdict b { display: block; margin-bottom: 3px; }

.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--border-strong); border-top-color: var(--cinnabar); border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

@media (max-width: 640px) {
  .topbar-inner, .tabs, .shell { padding-left: 14px; padding-right: 14px; }
  .card { padding: 17px; }
  .d-stats { grid-template-columns: 1fr; }
  .drawer { padding: 22px 18px 50px; }
  .login-card { padding: 34px 24px; }
  .login-card h1 { font-size: 30px; }
}

/* ===================== thẻ ý tưởng ===================== */
.title-card.idea { position: relative; padding-right: 62px; }
.idea-rank {
  position: absolute; top: 13px; right: 14px; text-align: right;
  font-weight: 600;
  font-size: 21px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums;
}
.idea-rank span { font-size: 11px; display: block; color: var(--text-muted); font-weight: 500; }
.idea .headline { font-size: 15px; }
/* Tiêu đề gợi ý là thứ chép đi dùng ngay — cho nó khối riêng, dễ quét mắt. */
.idea-title {
  border-left: 2px solid var(--cinnabar); padding: 3px 0 3px 10px; margin: 9px 0 7px;
  font-weight: 550; font-size: 14px; line-height: 1.4;
}

/* Bạn bè lần đầu vào hay khựng ở màn cảnh báo của Google rồi bỏ. Nói trước cho họ biết. */
.warn-note {
  margin-top: 22px !important; margin-bottom: 0 !important;
  background: var(--warn-wash); border-left: 3px solid var(--gold);
  padding: 11px 14px; text-align: left; font-size: 13px; line-height: 1.6;
  color: var(--text-secondary) !important;
}

/* ===================== nút giải thích cạnh tiêu đề =====================
   Mỗi bảng và biểu đồ đều có cách tính riêng, có ngưỡng riêng. Giấu phần đó đi thì người
   đọc hoặc tin mù, hoặc không dám tin. Nút này để ngay cạnh tiêu đề, rê chuột là hiện. */
.help {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; padding: 0; margin-left: 7px;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-style: italic; line-height: 1;
  vertical-align: middle; cursor: help; transition: color .12s, border-color .12s;
}
.help:hover, .help:focus-visible { color: var(--accent); border-color: var(--accent); background: transparent; }

/* Hộp chú thích dài hơn tooltip số liệu, cho xuống dòng thoải mái. */
.tooltip.wide { max-width: 400px; }
.tooltip .t-how {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12.5px; line-height: 1.55;
}
.tooltip .t-body { color: var(--text-secondary); line-height: 1.55; }