:root {
  --bg: #f5f5f7; --panel: #ffffff; --sidebar: #efeff1; --ink: #1d1d1f; --ink-soft: #86868b;
  --line: #e6e6ea; --accent: #2f6bff; --accent-soft: #e9f0ff;
  --good: #1a9c4e; --warn: #e8821e; --bad: #e0322c;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
}

/* =====================================================================
   DESIGN TOKENS — nền tảng (Bước 1). Bước 2: đã áp MÀU vào UI (các rule
   bên dưới dùng var(--token)). Cỡ chữ / spacing / radius vẫn để literal,
   chuẩn hoá ở Bước 4. Chú thích cuối mỗi dòng ghi mã gốc token thay thế.
   Nguồn: _design-system/AUDIT.md
   ===================================================================== */
:root {
  /* --- MÀU: thang xám trung tính (gom ~10 sắc gần giống → 5 bậc) --- */
  --text-strong: #1d1d1f;   /* = --ink */
  --text-mid:    #4a4a4f;   /* chữ subitem */
  --text-soft:   #86868b;   /* = --ink-soft  ← gom #8a8a90 #9a9aa3 */
  --text-faint:  #b0b0b6;   /* "coming soon", foot  ← gom #b9b9bf #c4c4ca */
  --neutral-200: #c7c7cf;   /* swatch / thanh spend */
  --neutral-300: #d0d0d6;   /* viền nhạt  ← gom #cfd0d6 */

  /* --- MÀU: bề mặt sáng (gom ~9 nền nhạt → 4 bậc) --- */
  --surface-hover: #f7f8fb;  /* nền hover  ← gom #f1f2f6 */
  --surface-2:     #f3f4f7;  /* header bảng studio, dòng avg  ← gom #eceef2 */
  --surface-3:     #e7e8ec;  /* header data-table  ← gom #e4e5e9 #ececef #ededf0 */
  --select:        #e1e2e7;  /* nền "đang chọn" DÙNG CHUNG: tab thể loại + menu trái (đậm hơn nền sidebar) */
  --border-input:  #dcdce1;  /* viền input/select */
  --border-strong: #c2c2ca;  /* viền ngăn nhóm */

  /* --- MÀU: accent phụ + brand --- */
  --accent-2:   #7aa2ff;            /* đầu kia gradient logo */
  --accent-10:  rgba(47,107,255,.10);

  /* --- MÀU: status lifecycle (đang hardcode trong app.js) --- */
  --status-mat-high: #5b9130;  /* Maturity High (olive) */
  --status-mat-low:  #8bc34a;  /* Maturity Low (lime) */
  --status-keep:     #2f6bff;  /* NEW HIT-Keep  = --accent */
  --status-signal:   #2fc8ff;  /* NEW HIT-Signal (XANH cyan) */
  --status-flash:    #e0322c;  /* Flash  = --bad */
  --status-testing:  #f5b400;  /* Testing (CAM/vàng — màu Signal cũ, cho nổi) */
  --tag-top:         #f5b400;  /* tag dùng chung cho game ở Top (cam/vàng) */
  --studio-banner:   #0e0e10;  /* nền ĐEN banner Top Game studio (mọi studio dùng chung) */

  /* --- MÀU: biểu đồ (đang hardcode trong template SVG app.js) --- */
  --chart-line: #2f6bff;  /* đường ROAS dự đoán */
  --chart-dot:  #ff9500;  /* chấm dữ liệu */
  --chart-be:   #e0533c;  /* đường hoà vốn 100% (LƯU Ý: KHÁC --bad #e0322c) */
  --chart-axis: #9a9aa3;  /* chữ trục */
  --chart-grid: #ededf0;  /* lưới */
  --chart-d28:  #1a9c8f;  /* mốc D28 (xanh ngọc) */
  --chart-d180: #af52de;  /* mốc D180 (tím) */

  /* --- TYPOGRAPHY --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* thang cỡ chữ (đã chuẩn hoá Bước 4: 11.5→11 · 10.5→10 · 13.5→13 · 12.5→12) */
  --fs-2xs: 11px;  --fs-xs: 12px;  --fs-sm: 13px;  --fs-base: 14px;
  --fs-md: 16px;   --fs-lg: 18px;  --fs-xl: 22px;  --fs-2xl: 26px;  --fs-hero: 76px;
  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-black: 800;

  /* --- SPACING (chuẩn hoá: số lẻ 7/9/11/13 → snap về bậc gần nhất) --- */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px;  --sp-5: 12px;
  --sp-6: 14px; --sp-7: 16px; --sp-8: 18px; --sp-9: 24px;

  /* --- RADIUS --- */
  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-pill: 999px;

  /* --- BRAND (đồng bộ với BRAND trong app.js) --- */
  --brand-gradient: linear-gradient(135deg, #2f6bff, #7aa2ff);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.layout { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar { width: 256px; flex: 0 0 256px; background: var(--sidebar); border-right: 1px solid var(--line);
  padding: 20px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; cursor: pointer; padding: 0 4px; }
/* logo iKame tô màu chữ (--ink) qua mask, không nền xanh */
.brand-mark { width: 34px; height: 28px; background-color: var(--ink);
  -webkit-mask: url("assets/logo_ikame_256.png") no-repeat center / contain;
  mask: url("assets/logo_ikame_256.png") no-repeat center / contain; }
.brand-text { font-size: 18px; letter-spacing: -.01em; }
.brand-text b { font-weight: 700; } .brand-text span { color: var(--ink-soft); font-weight: 500; }

.search { margin-bottom: 14px; position: relative; }
.search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; }
.search input { width: 100%; padding: 11px 12px 11px 38px; border-radius: 12px; border: 1px solid var(--border-input);
  background: var(--panel); font-size: 14px; color: var(--ink); outline: none; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.search input:focus { border-color: var(--accent); background: var(--panel); }

.nav { flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-item.head { cursor: pointer; }
.nav-item.active, .subitem.active { background: var(--select); }
/* Mẫu mũi tên dùng chung cho MỌI nơi */
.chev { width: 22px; height: 22px; flex: none; color: var(--ink-soft); display: inline-flex; align-items: center;
  transition: transform .18s ease, color .15s ease; transform-origin: 50% 50%; }
.chev:hover { color: var(--accent); }
.nav-item .caret { margin-left: 2px; padding: 4px; color: var(--ink-soft); cursor: pointer; transform: rotate(180deg); }
.nav-item .caret:hover { color: var(--accent); }
.navgroup.collapsed .caret { transform: rotate(0deg); }
.navgroup.collapsed .subitems { display: none; }
.nav-item.disabled { color: var(--ink-soft); cursor: default; }
.nav-item svg { color: var(--accent); }
.ni-text { line-height: 1.15; }
.ni-text .cs { font-size: 11px; font-weight: 500; color: var(--text-faint); margin-top: 1px; }
.subitems { margin: 2px 0 10px 30px; display: flex; flex-direction: column; }
.subitem { padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--text-mid); font-weight: 500; }
.subitem::before { content: "•"; color: var(--ink-soft); margin-right: 8px; }
.subitem:hover { color: var(--ink); }
.subitem.disabled { color: var(--text-faint); cursor: default; }
.subitem.disabled:hover { color: var(--text-faint); }
.subitem .cs { font-size: 10px; color: var(--text-faint); margin-left: 6px; }
/* Voodoo = mục con mở rộng được (lồng Top Game + Strategic Analysis) */
.subnav { display: flex; flex-direction: column; }
.subnav > .subitems { margin: 2px 0 4px 18px; }
.subitem.head { display: flex; align-items: center; cursor: pointer; }
.subitem.head .caret { margin-left: 2px; padding: 2px; width: 18px; height: 18px; color: var(--ink-soft); transform: rotate(180deg); }
.subitem.head .caret:hover { color: var(--accent); }
.subnav.collapsed .caret { transform: rotate(0deg); }
.subnav.collapsed > .subitems { display: none; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 16px 10px 6px; }
.sidebar-foot { font-size: 11px; color: var(--text-faint); padding: 12px 6px 0; }

/* ---------- Main ---------- */
.main { flex: 1; padding: 0 0 60px; min-width: 0; }
.loading { color: var(--ink-soft); padding: 40px; }

/* ---------- Genre tabs (chữ, scroll ngang) ---------- */
.tabs-wrap { position: sticky; top: 0; z-index: 5; background: rgba(245,245,247,.9);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 14px 36px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 50px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 50px), transparent); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: 7px 15px; border-radius: 9px; font-size: 14px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--select); color: var(--ink); font-weight: 600; }

/* ---------- Sections / pages ---------- */
.content { padding: 22px 36px 0; }
.section { margin-bottom: 30px; }
.section-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; cursor: pointer; width: fit-content; }
.section-head.static { cursor: default; }
.st-top-sections { margin-top: 24px; }
/* Top Game: tên studio trái + button Strategic Analysis phải (song song) */
.st-top-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Banner ĐEN cho trang Top Game studio (mọi studio dùng chung 1 nền đen). KHÔNG dùng ở Strategic Analysis. */
.st-banner { background: var(--studio-banner); border-radius: 0 0 22px 22px; margin: -26px -18px 26px;
  min-height: 210px; padding: 36px 34px; display: flex; align-items: center;
  position: sticky; top: 0; z-index: 20; }
.st-banner .st-top-head { width: 100%; }
.st-banner .st-title { color: #fff; margin: 0; }
.st-analysis-btn { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 15px;
  padding: 13px 26px; border-radius: 14px; white-space: nowrap; }
.st-analysis-btn:hover { background: rgba(255,255,255,.24); color: #fff; }
/* Strategic Analysis: overline kiêm nút back (mũi tên trỏ trái + text) */
.st-back-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.st-back-link .back-chev { transform: rotate(90deg); }
.st-back-link:hover { color: var(--accent); }
.section-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.section-arrow { transform: rotate(-90deg); }
.section-head:hover .chev { color: var(--accent); }
.section-desc { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.section-empty { color: var(--ink-soft); font-size: 14px; padding: 6px 0 14px; }

.page { padding: 26px 36px 0; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600;
  font-size: 14px; cursor: pointer; margin-bottom: 16px; }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.page-sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 20px; }

/* ---------- Lưới 5 cột · thẻ ngang (icon trái + tên + subtitle + View) ---------- */
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 14px; }
.cardrow { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; cursor: pointer; min-width: 0; }
.cardrow:hover { background: var(--panel); box-shadow: var(--shadow); }
.cardrow .icon, .cardrow .icon-letter { width: 60px; height: 60px; border-radius: 14px; margin: 0; flex: 0 0 60px;
  box-shadow: var(--shadow); background: var(--panel); }
.cardrow .icon { object-fit: cover; }
.cardrow .icon-letter { display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 600; }
.cardrow .info { min-width: 0; }
.cardrow .nm { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardrow .sb { font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 0; }
.view { display: inline-block; padding: 4px 18px; background: var(--accent-soft); color: var(--accent);
  border-radius: 8px; font-size: 13px; font-weight: 600; }

/* ---------- Detail ---------- */
.dt-head { display: flex; gap: 24px; align-items: center; margin-bottom: 22px; }
.dt-head .icon, .dt-head .icon-letter { width: 132px; height: 132px; border-radius: 28px; margin: 0; flex: 0 0 132px;
  box-shadow: var(--shadow); background: var(--panel); }
.dt-head .icon { object-fit: cover; }
.dt-head .icon-letter { display: grid; place-items: center; color: #fff; font-size: 54px; font-weight: 600; }
.dt-name { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.dt-tagline { font-size: 16px; color: var(--ink-soft); margin-top: 2px; }
.dt-pkg { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.dt-links { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.store-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; }

/* ---------- Banner chi tiết game (kiểu App Store: nền = icon phóng to + blur) ---------- */
/* banner NHÔ RA so với bảng data: tràn lên đỉnh + thụt 2 bên CHỈ 18px (data thụt 36px theo .page) → lệch ra ~18px mỗi bên, vẫn chừa khoảng nhỏ với sidebar */
.dt-banner { position: relative; border-radius: 0 0 22px 22px; overflow: hidden; margin: -26px -18px 26px; isolation: isolate; }
/* nền: icon blur phủ kín (gán qua JS); fallback màu khi game không có icon */
.dt-banner-bg { position: absolute; inset: -60px; z-index: 0; background-size: cover; background-position: center;
  filter: blur(46px) saturate(1.5) brightness(1.22); transform: scale(1.25); }
/* lớp tối hoá NHẸ chỉ ở mép trái (nơi có chữ) — nền sáng hơn, vẫn đủ tương phản cho chữ trắng */
.dt-banner::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 46%, rgba(0,0,0,0) 78%); }
.dt-banner-inner { position: relative; z-index: 2; display: flex; gap: 28px; align-items: center; padding: 28px 34px; }
.dt-banner .icon, .dt-banner .icon-letter { width: 150px; height: 150px; border-radius: 30px; flex: 0 0 150px; margin: 0;
  background: var(--panel); }
.dt-banner .icon { object-fit: cover; }
.dt-banner .icon-letter { display: grid; place-items: center; color: #fff; font-size: 54px; font-weight: 700; }
.dt-banner-text { min-width: 0; color: #fff; }
.dt-banner .dt-name { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.05; }
.dt-banner .dt-sub { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
.dt-banner .dt-genre { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.75); margin: 0; }
.dt-banner .dt-links { display: flex; gap: 12px; margin-top: 16px; }
/* icon store = PNG trắng (web/assets), hiển thị trắng opacity 75% */
.dt-store-img { height: 30px; width: 30px; object-fit: contain; opacity: .75; transition: opacity .15s ease; }
.dt-store-img:hover { opacity: 1; }

.statrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px; }
.stat { padding: 0; text-align: center; }
.stat .lab { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.stat .val { font-size: 25px; font-weight: 700; margin-top: 8px; line-height: 1.1; }
.stat .val.good { color: var(--good); } .stat .val.warn { color: var(--warn); } .stat .val.bad { color: var(--bad); }
.stat .note { font-size: 11px; color: var(--ink-soft); margin-top: 5px; text-transform: uppercase; letter-spacing: .03em; }
.stat .note.good { color: var(--good); } .stat .note.warn { color: var(--warn); } .stat .note.bad { color: var(--bad); }

.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.charts.two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.chart-card { background: var(--panel); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.chart-card h3 { margin: 0; font-size: 15px; }
.chart-card .sublab { font-size: 12px; margin: 3px 0 10px; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 11px; height: 11px; border-radius: 2px; background: var(--neutral-200); display: inline-block; }
.chart-legend .ln { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-card .sublab.good { color: var(--good); } .chart-card .sublab.warn { color: var(--warn); }
.chart-card .sublab.bad { color: var(--bad); } .chart-card .sublab.muted { color: var(--ink-soft); }
/* ---------- Bảng dữ liệu theo tuần ---------- */
.tablesec { margin-top: 26px; }
.data-card { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.tablesec-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.tablesec-title { font-size: 17px; font-weight: 700; margin: 0; }
/* Segmented toggle (All | Android | iOS) — giống Cohort|Real time */
.seg { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.seg-btn.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-btn.disabled { color: var(--text-faint); cursor: default; }

.data-table-wrap { overflow: auto; max-height: 70vh; background: var(--panel); }
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 11px; color: var(--ink); }
.data-table th, .data-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 12px; text-align: left; white-space: nowrap; }
/* Khoá cứng độ rộng các cột ngày (header dòng 2 + ô body không-freeze) → không xê dịch khi đổi All/Android/iOS */
.data-table thead tr:nth-child(2) th, .data-table tbody td:not(.frz) { width: 72px; min-width: 72px; max-width: 72px; }
.data-table thead th { background: var(--surface-3); color: var(--ink); font-weight: 700; }
/* Freeze HEADER khi cuộn dọc: cả khối thead dính lên đỉnh vùng cuộn (2 dòng tiêu đề + header cột) */
.data-table thead { position: sticky; top: 0; z-index: 5; }
.data-table thead tr:first-child th { border-bottom: 1px solid var(--line); }
/* Cột freeze trái */
.data-table .frz { position: sticky; z-index: 2; background: var(--panel); }
.data-table thead .frz { z-index: 6; background: var(--surface-3); }
.data-table .frz-end { border-right: 1px solid var(--border-strong); }
/* Vạch ngăn cách giữa các nhóm lớn (ROAS IAA / IAP / Total / Prediction) */
.data-table .grp { border-left: 1px solid var(--border-strong); }
.data-table td.wk { font-weight: 600; }
.data-table td.be { font-weight: 700; }
.data-table td.be.good { color: var(--good); } .data-table td.be.warn { color: var(--warn); } .data-table td.be.bad { color: var(--bad); }
.data-table tbody tr:hover td { background: var(--surface-hover); }
.data-table tbody tr:hover td.frz { background: var(--surface-hover); }
.data-table tr.avg td { background: var(--surface-2); font-weight: 600; border-top: 2px solid var(--neutral-300); }
.data-table tr.avg td.frz { background: var(--surface-2); }
svg.spend-svg { cursor: pointer; user-select: none; -webkit-user-select: none; }
.chart-tip { position: fixed; z-index: 60; pointer-events: none; display: none; background: var(--panel);
  border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.16); padding: 12px 16px; min-width: 150px; font-size: 14px; }
.chart-tip .tip-head { font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.chart-tip .tip-roas { font-weight: 600; margin: 3px 0; }
.chart-tip .tip-spend { color: var(--ink-soft); margin-top: 7px; }
svg.spend-svg .bar { transition: opacity .12s ease; }
svg .grid { stroke: var(--chart-grid); }
svg text { fill: var(--ink-soft); font-size: 11px; }

/* ---------- Studio Insight ---------- */
.st-page { padding-bottom: 60px; }
/* Tầng 1: summary cards */
.st-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 4px 0 22px; }
.st-card { background: var(--panel); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.st-card-lab { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.st-card-val { font-size: 26px; font-weight: 700; margin-top: 8px; letter-spacing: -.01em; }
/* Tầng 2: chip lifecycle */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.st-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid; background: var(--panel); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s ease; }
.st-chip:hover { filter: brightness(.97); }
.st-chip-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.06); }
.st-chip.active .st-chip-n { background: rgba(255,255,255,.28); }
/* toolbar: search + sort */
.st-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.st-search { position: relative; flex: 1; min-width: 220px; max-width: 360px; color: var(--accent); }
.st-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.st-search input { width: 100%; padding: 10px 12px 10px 34px; border-radius: 11px; border: 1px solid var(--border-input);
  background: var(--panel); font-size: 14px; color: var(--ink); outline: none; }
.st-search input:focus { border-color: var(--accent); }
.st-sortwrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.st-sortwrap select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-input); background: var(--panel); color: var(--ink); cursor: pointer; }
.st-dir { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-input); background: var(--panel); color: var(--ink); cursor: pointer; }
.st-dir:hover { border-color: var(--accent); color: var(--accent); }
/* Tầng 3: bảng game */
/* overflow: visible → KHÔNG tạo vùng cuộn riêng, để header sticky khoá vào đỉnh màn hình theo trang */
.st-tablewrap { overflow: visible; }
.st-table thead { position: sticky; top: 67px; z-index: 5; }

/* --- Studio: header (tên studio lớn + biểu đồ chiến lược) --- */
.st-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin: 4px 0 22px; flex-wrap: wrap; }
.st-header-left { flex: 1 1 220px; min-width: 0; }
.st-overline { font-size: 18px; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; }
.st-title { font-size: 76px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 6px 0 0; }
/* Tổng kết chiến lược tự sinh — gọn, sát Voodoo, không vượt quá chiều cao biểu đồ */
.st-narr { margin-top: 8px; max-width: 560px; }
.st-narr-title { font-size: 14px; line-height: 1.3; color: var(--ink); }
.st-narr-title b { font-weight: 700; }
.st-narr-list { margin: 5px 0 0; padding-left: 16px; }
.st-narr-list li { font-size: 12px; line-height: 1.35; color: var(--ink-soft); margin-bottom: 2px; }
.st-narr-list li.st-narr-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.st-narr-note { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
.st-narr-toggle { display: inline-flex; align-items: center; gap: 2px; border: none; background: none; padding: 0; margin-top: 4px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.st-narr-toggle .chev { width: 16px; height: 16px; color: var(--accent); }
.st-narr-toggle .chev.up { transform: rotate(180deg); }
.st-narr-toggle:hover { text-decoration: underline; }
.st-header-right { flex: 0 1 624px; min-width: 360px; }
/* Biểu đồ chiến lược BUTTERFLY (absolute): trái = số game, phải = spend, trục giữa; label tràn lề phải */
.strat { position: relative; }
.strat-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 22px; pointer-events: none; }
.strat-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--surface-3); }
.strat-grid i.center { background: var(--neutral-300); }
.strat-rows { position: relative; display: flex; flex-direction: column; gap: 9px; }
.strat-row { position: relative; height: 21px; width: 100%; border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; transition: opacity .15s ease; }
.strat-row.dim { opacity: .22; }
.strat-bar { position: absolute; top: 0; height: 21px; border-radius: 6px; }
.strat-bar.lite { opacity: .4; }
.strat-num { position: absolute; top: 0; height: 21px; display: flex; align-items: center; padding-right: 5px; font-size: 10px; font-weight: 800; }
.strat-val { position: absolute; top: 0; height: 21px; display: flex; align-items: center; padding-left: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.strat-pct { color: inherit; font-weight: 600; margin-left: 4px; } /* % theo màu cột (ngoài) / trắng (trong), KHÔNG opacity */
/* label nằm TRONG cột (cột chạm mép) — chữ trắng */
.strat-num.inside { padding-right: 0; padding-left: 9px; color: #fff; }
.strat-val.inside { padding-left: 0; padding-right: 9px; color: #fff; justify-content: flex-end; }
.strat-foot { position: relative; height: 14px; margin-top: 9px; font-size: 10px; color: var(--ink-soft); }
.strat-foot span { position: absolute; top: 0; white-space: nowrap; }

/* --- Studio: card bảng (header = search + chips) --- */
/* overflow: visible để header bảng (sticky) khoá theo TRANG, không bị card cắt vùng cuộn */
.st-card2 { background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); overflow: visible; }
/* bo góc trên (tablehead) + góc dưới (hàng cuối) thay cho overflow:hidden đã gỡ */
.st-card2 .st-tablehead { border-radius: 16px 16px 0 0; }
.st-table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.st-table tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; }
.st-tablehead { display: flex; align-items: center; gap: 14px 18px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 7; background: var(--panel); }
.st-tablehead .st-search { flex: 0 0 270px; max-width: 320px; margin: 0; }
.st-tablehead .st-chips { margin: 0; flex: 1; justify-content: flex-end; }
.st-card2 .st-pausenote { padding: 10px 18px 0; margin: 0; }
.st-table td.st-game { overflow: hidden; }
.st-table .st-name { max-width: 100%; }
.st-table th.st-sortable { cursor: pointer; user-select: none; }
.st-table th.st-sortable:hover, .st-table th.st-sortable.on { color: var(--ink); }
.st-th-sub { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: 10px; margin-top: 3px; }
.st-table td.be { font-weight: 700; }
.st-table td.be.good { color: var(--good); } .st-table td.be.warn { color: var(--warn); } .st-table td.be.bad { color: var(--bad); }
.st-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 13px; color: var(--ink); }
.st-table th, .st-table td { padding: 11px 10px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* Tiêu đề cột căn GIỮA (cả cột Game); riêng Ô dữ liệu cột Game căn trái */
.st-table td.st-game { text-align: left; }
.st-table .st-no { color: var(--ink-soft); font-weight: 600; }
.st-table thead th { padding-top: 16px; padding-bottom: 14px; vertical-align: middle; }
.st-table .st-th-main { display: inline-block; }
.st-spark svg { margin: 0 auto; }
.st-sort-ord { font-size: 9px; font-weight: 700; vertical-align: super; }
.st-table th { background: var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); position: sticky; top: 67px; vertical-align: top; }
.st-th-main { white-space: nowrap; }
.st-table th.num, .st-table td.num { text-align: center; }
.st-table tbody tr:hover td { background: var(--surface-hover); }
.st-table tbody tr:last-child td { border-bottom: none; }
.st-gamewrap { display: flex; align-items: center; gap: 11px; }
.st-gamewrap .icon, .st-gamewrap .icon-letter { width: 30px; height: 30px; border-radius: 8px; margin: 0; flex: 0 0 30px; box-shadow: var(--shadow); background: var(--panel); }
.st-gamewrap .icon { object-fit: cover; }
.st-gamewrap .icon-letter { display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 600; }
.st-gtext { min-width: 0; }
.st-name { font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.st-pkg { font-size: 11px; color: var(--ink-soft); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.st-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-table td.num.good { color: var(--good); font-weight: 700; }
.st-table td.num.warn { color: var(--warn); font-weight: 700; }
.st-table td.num.bad { color: var(--bad); font-weight: 700; }
.st-sub { font-size: 11px; color: var(--ink-soft); margin-left: 3px; }
.st-spark { padding-top: 6px; padding-bottom: 4px; }
.spark { display: block; }
.st-cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .st-cards { grid-template-columns: repeat(2, 1fr); } }

/* --- Studio: ma trận tổng quan 3 nhóm × 4 trạng thái --- */
.st-mx-wrap { margin: 4px 0 20px; }
.st-mx-title { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.st-matrix { border-collapse: separate; border-spacing: 7px; }
.st-matrix th { font-size: 12px; font-weight: 700; padding: 2px 6px; }
.st-mx-corner { color: var(--ink-soft); font-weight: 500; font-size: 11px; text-align: right; white-space: nowrap; }
.st-mx-col { cursor: pointer; }
.st-mx-row { cursor: pointer; text-align: right; min-width: 84px; white-space: nowrap; }
.st-mx-col:hover, .st-mx-row:hover { text-decoration: underline; }
.st-mx-cell { cursor: pointer; width: 116px; padding: 10px 12px; text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-bottom: 3px solid var(--c); border-radius: 12px; transition: background .12s ease; }
.st-mx-cell:hover { background: var(--surface-hover); }
.st-mx-cell.on { outline: 2px solid var(--c); outline-offset: -1px; }
.st-mx-cell.empty { opacity: .4; }
.st-mx-n { font-size: 20px; font-weight: 700; color: var(--c); line-height: 1.1; }
.st-mx-s { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

/* --- Studio: khung tổng quan 6 nhóm (1 hàng ô) --- */
.st-ov { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.st-ov-cell { cursor: pointer; text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-bottom: 3px solid var(--c); border-radius: 12px; padding: 12px 14px; font: inherit; transition: background .12s ease; }
.st-ov-cell:hover { background: var(--surface-hover); }
.st-ov-cell.on { outline: 2px solid var(--c); outline-offset: -1px; }
.st-ov-cell.empty { opacity: .45; }
.st-ov-name { font-size: 12px; font-weight: 700; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ov-n { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-top: 4px; }
.st-ov-s { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 1100px) { .st-ov { grid-template-columns: repeat(3, 1fr); } }

/* --- Studio: bộ lọc 2 cấp (chip theo trục) --- */
.st-filterbar { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.st-chiprow { display: flex; align-items: flex-start; gap: 12px; }
.st-chiplab { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); width: 78px; flex: none; padding-top: 8px; }
.st-chiprow .st-chips { margin-bottom: 0; }

/* --- Studio: badge phân loại (nhóm + trạng thái + flash) --- */
.st-class { white-space: nowrap; }
.st-gbadge { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 700; margin-right: 5px; }
.st-sbadge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.st-flash { font-size: 13px; margin-left: 3px; }
.dt-genre { color: var(--ink-soft); margin-left: 6px; font-size: 14px; }

/* --- Studio: ghi chú thu gọn Testing·Pause --- */
.st-pausenote { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.st-linkbtn { border: none; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.st-linkbtn:hover { text-decoration: underline; }

/* --- Theme Research --- */
#themeTabs { padding: 2px 0; margin-bottom: 4px; }
.theme-h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 26px 0 4px; }
.theme-h2:first-of-type { margin-top: 8px; }

/* Zone 1 — thẻ cơ hội */
.th-opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; margin-bottom: 6px; }
.th-opp { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; cursor: pointer; transition: box-shadow .12s ease; }
.th-opp:hover { box-shadow: var(--shadow); }
.th-opp.feat { border: 2px solid var(--accent); padding: 14px 16px; }
.th-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-bottom: 9px; }
.th-tag.good { background: rgba(26,156,78,.12); color: var(--good); }
.th-tag.warn { background: rgba(245,180,0,.18); color: #946c00; }
.th-opp-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.th-opp-why { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 12px; }
.th-opp-metrics { display: flex; gap: 8px; margin-bottom: 12px; }
.th-metric { flex: 1; background: var(--surface-2); border-radius: 9px; padding: 7px 9px; }
.th-metric .l { font-size: 11px; color: var(--ink-soft); }
.th-metric .v { font-size: 17px; font-weight: 700; color: var(--ink); }
.th-metric .v.good { color: var(--good); } .th-metric .v.warn { color: var(--status-testing); }
.th-exlab { font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
.th-chips2 { display: flex; flex-wrap: wrap; gap: 4px; }
.th-ex { font-size: 11px; background: var(--surface-2); color: var(--ink-soft); padding: 3px 9px; border-radius: 8px; }

/* Zone 2 — heatmap */
.th-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--ink-soft); margin: 8px 0 12px; }
.th-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; vertical-align: -1px; margin-right: 5px; }
.th-heat-wrap { overflow-x: auto; margin-bottom: 6px; }
.th-heat { border-collapse: separate; border-spacing: 5px; }
.th-heat th { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: center; padding-bottom: 2px; white-space: nowrap; }
.th-heat td.lab { font-size: 12px; color: var(--ink); text-align: right; white-space: nowrap; padding-right: 6px; cursor: pointer; }
.th-heat td.lab:hover { color: var(--accent); }
.th-heat td.lab.selrow { font-weight: 700; color: var(--accent); }
.th-cell { width: 62px; height: 34px; border-radius: 7px; border: 1px solid var(--line); cursor: pointer; text-align: center; vertical-align: middle; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.th-cell.g { background: rgba(26,156,78,.15); border-color: rgba(26,156,78,.4); color: var(--good); }
.th-cell.a { background: rgba(245,180,0,.18); border-color: rgba(245,180,0,.5); color: #946c00; }
.th-cell.r { background: rgba(224,50,44,.10); border-color: rgba(224,50,44,.28); color: var(--bad); }
.th-cell.e { background: var(--surface-2); border-color: transparent; }
.th-cell.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.th-cell.e.sel { outline: none; }   /* ô rỗng ở hàng đang chọn: không viền cho gọn */

/* Zone 3 — hồ sơ theme */
.th-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.th-pick { font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; color: var(--ink-soft); }
.th-pick:hover { color: var(--ink); }
.th-pick.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.th-profile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 17px 20px; }
.th-verdict { font-size: 14px; color: var(--ink); line-height: 1.6; margin-bottom: 14px; }
.th-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.th-bar-lab { width: 140px; flex: none; font-size: 12px; color: var(--ink-soft); }
.th-bar-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.th-bar-fill { height: 100%; border-radius: 999px; }
.th-bar-val { width: 28px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); }
.th-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.th-stat .l { font-size: 11px; color: var(--ink-soft); }
.th-stat .v { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; }
#themeBody .st-table { table-layout: auto; min-width: 100%; } /* cột co theo nội dung (không cắt tên theme) */
#themeBody .st-tablewrap { overflow-x: auto; }                /* màn hẹp → cuộn ngang thay vì cắt cột */
#themeBody .st-table thead, #themeBody .st-table thead th { position: static; top: auto; } /* bảng ngắn → không cần header dính (tránh chồng) */
#themeBody .st-table td:first-child, #themeBody .st-table th:first-child { padding-left: 18px; }
#themeBody .st-table td.th-wrap { text-align: left; white-space: normal; color: var(--ink-soft); font-size: 12px; line-height: 1.45; min-width: 220px; }