/* ============================================================
   TRẠM UI — design system dùng chung cho các trang tài khoản /
   publisher / tools. Cùng bảng màu, font, glow với website lesonmkt.
   Theme: tối gốc ở :root, sáng khi <html data-theme="sang"> (đặt theo giờ).
   ============================================================ */
:root{
  --bg:#070A12; --bg-2:#0A1322; --bg-3:#0E1A30;
  --text:#E9EEF6; --muted:#9AA8C2; --faint:#6A7A98;
  --azure:#2E86FF; --azure-bright:#4D9BFF; --cyan:#46D0EE;
  --glow:rgba(46,134,255,.45); --glow-soft:rgba(46,134,255,.14);
  --line:rgba(120,160,220,.14); --line-2:rgba(120,160,220,.08);
  --green:#3DDC97; --amber:#FFB547; --red:#FF6B6B;
  --green-soft:rgba(61,220,151,.14); --amber-soft:rgba(255,181,71,.14); --red-soft:rgba(255,107,107,.14);
  --head:"Bricolage Grotesque",sans-serif; --body:"Be Vietnam Pro",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:16px; --r-s:11px;
}
html[data-theme="sang"]{
  --bg:#E9EDF4; --bg-2:#F7F9FC; --bg-3:#FFFFFF;
  --text:#141E2C; --muted:#5A6575; --faint:#8A95A8;
  --azure:#2470E8; --azure-bright:#1A53B0; --cyan:#0C7187;
  --glow:rgba(36,112,232,.22); --glow-soft:rgba(36,112,232,.08);
  --line:rgba(25,45,85,.17); --line-2:rgba(25,45,85,.09);
  --green:#127C4A; --amber:#B4690E; --red:#C0392B;
  --green-soft:rgba(18,124,74,.1); --amber-soft:rgba(180,105,14,.1); --red-soft:rgba(192,57,43,.1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--bg);color:var(--text);font:400 14.5px/1.55 var(--body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 420px at 15% -10%,var(--glow-soft),transparent 60%),radial-gradient(700px 360px at 95% 0%,rgba(70,208,238,.08),transparent 55%)}
html[data-theme="sang"] body{background-image:radial-gradient(900px 420px at 15% -10%,rgba(36,112,232,.10),transparent 60%),radial-gradient(700px 360px at 95% 0%,rgba(12,113,135,.08),transparent 55%)}
a{color:var(--azure-bright)} html[data-theme="sang"] a{color:var(--azure)}

/* Layout */
.tu-wrap{max-width:1040px;margin:0 auto;padding:24px 20px 60px}
.tu-top{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.tu-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--azure),var(--cyan));color:#fff;font:800 19px var(--head);box-shadow:0 10px 26px -10px var(--glow)}
.tu-top h1{margin:0;font:800 22px/1.15 var(--head);letter-spacing:-.02em}
.tu-top p{margin:2px 0 0;color:var(--muted);font-size:13px}
.tu-top .r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;max-width:100%}
.tu-top .r .tu-chip{min-width:0;max-width:100%}
.tu-top .r .tu-chip>*:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tu-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:7px 12px 7px 8px;font-size:13px;font-weight:500}
.tu-chip .ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--azure),var(--cyan));color:#fff;display:grid;place-items:center;font:800 11px var(--head)}

/* Card */
.tu-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px;position:relative;
  box-shadow:0 0 0 1px rgba(46,134,255,.05),0 18px 40px -22px var(--glow)}
.tu-card.hot{border-color:rgba(46,134,255,.45);box-shadow:0 0 0 1px rgba(46,134,255,.18),0 22px 48px -20px var(--glow)}
.tu-card.hot::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:linear-gradient(135deg,rgba(46,134,255,.10),transparent 45%)}
.tu-h{margin:0 0 16px;font:700 15.5px var(--head);display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.tu-h .c{margin-left:auto;font:500 12.5px var(--body);color:var(--muted)}
.tu-h svg{width:18px;height:18px;color:var(--cyan)}

/* KPI */
.tu-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tu-kpi .t{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-s);padding:15px 16px;position:relative;overflow:hidden}
.tu-kpi .t::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--azure),var(--cyan));opacity:.55}
.tu-kpi .l{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tu-kpi b{display:block;margin-top:8px;font:700 26px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tu-kpi .s{margin-top:6px;font-size:12px;color:var(--faint)}
.tu-kpi .g b{color:var(--green)} .tu-kpi .a b{color:var(--amber)} .tu-kpi .r b{color:var(--red)} .tu-kpi .c b{color:var(--cyan)}

/* Buttons */
.tu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:600 14px var(--body);
  padding:11px 18px;border-radius:12px;color:#fff;background:linear-gradient(90deg,var(--azure),#2BA7E8);box-shadow:0 12px 28px -12px var(--glow);transition:transform .15s,box-shadow .15s}
.tu-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px -12px var(--glow)}
.tu-btn:disabled{opacity:.55;cursor:default;transform:none}
.tu-btn.ghost{background:var(--bg-3);color:var(--text);border:1px solid var(--line);box-shadow:none}
.tu-btn.ghost:hover{border-color:var(--azure)}
.tu-btn.done{background:var(--green-soft);color:var(--green);box-shadow:none;cursor:default;border:1px solid rgba(61,220,151,.3)}
.tu-btn.sm{padding:8px 13px;font-size:13px;border-radius:9px}
.tu-btn svg{width:16px;height:16px;flex:0 0 auto}
.tu-btn{white-space:nowrap}
/* thẻ <a> mang .tu-btn: thắng luật a{color} của theme */
html[data-theme] a.tu-btn{color:#fff} html[data-theme] a.tu-btn.ghost{color:var(--text)} html[data-theme] a.tu-btn.done{color:var(--green)}
/* icon nhỏ nằm trong dòng kv / chữ thường */
.tu-kv svg{width:15px;height:15px;vertical-align:-3px;color:var(--cyan);margin-right:2px}

/* Pills / status */
.tu-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.tu-pill svg{width:13px;height:13px}
.tu-pill.az{background:var(--glow-soft);color:var(--azure-bright);border-color:rgba(46,134,255,.3)} html[data-theme="sang"] .tu-pill.az{color:var(--azure)}
.tu-pill.ok{background:var(--green-soft);color:var(--green);border-color:rgba(61,220,151,.3)}
.tu-pill.wn{background:var(--amber-soft);color:var(--amber);border-color:rgba(255,181,71,.3)}
.tu-pill.er{background:var(--red-soft);color:var(--red);border-color:rgba(255,107,107,.3)}
.tu-pill.mt{background:var(--bg-3);color:var(--muted);border-color:var(--line)}

/* Table */
.tu-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tu-grid>*,.tu-card{min-width:0}
.tu-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tu-table th{text-align:left;padding:9px 12px;color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);white-space:nowrap}
.tu-table td{padding:11px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tu-table tr:last-child td{border-bottom:0}
.tu-table td.m{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* Key-value rows */
.tu-kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.tu-kv:last-child{border-bottom:0} .tu-kv b{font-weight:600;text-align:right}
.tu-kv .mono{font-family:var(--mono);color:var(--cyan);letter-spacing:.08em}

/* Product / tool item */
.tu-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tu-item{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s}
.tu-item:hover{border-color:rgba(46,134,255,.4);transform:translateY(-2px)}
.tu-item .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;background:var(--glow-soft);color:var(--cyan)}
.tu-item .ic svg{width:21px;height:21px}
.tu-item .ic.off{background:var(--bg-2);color:var(--faint)}
.tu-item .nm{font:700 15px var(--head);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tu-item .mt{color:var(--muted);font-size:13px;margin:6px 0 12px;flex:1;line-height:1.5}
.tu-item .gia{font:800 22px/1 var(--mono);letter-spacing:-.02em}
.tu-item .gia small{font:500 12px var(--body);color:var(--muted)}
.tu-item .ft{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tu-tag{font:700 10.5px var(--body);text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,var(--azure),var(--cyan));color:#fff}

/* Progress */
.tu-prog{height:7px;background:var(--line-2);border-radius:999px;overflow:hidden;margin:9px 0 5px}
.tu-prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--azure),var(--cyan));box-shadow:0 0 8px var(--cyan)}

/* Bars chart */
.tu-bars{display:flex;align-items:flex-end;gap:7px;height:120px;padding-top:22px}
.tu-bars .b{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.tu-bars .b i{background:linear-gradient(180deg,var(--cyan),var(--azure));border-radius:6px 6px 0 0;min-height:4px;width:100%;box-shadow:0 0 12px -4px var(--glow)}
.tu-bars .b span{position:absolute;top:-18px;left:0;right:0;text-align:center;font:600 11px var(--mono);color:var(--muted)}
.tu-bars .b em{margin-top:6px;text-align:center;font-size:10.5px;color:var(--faint);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sidebar layout (publisher) */
.tu-shell{display:grid;grid-template-columns:232px 1fr;gap:18px;align-items:start}
.tu-side{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px;position:sticky;top:20px}
.tu-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500}
.tu-side a svg{width:17px;height:17px}
.tu-side a.on,.tu-side a:hover{background:var(--glow-soft);color:var(--text)}
.tu-side a.on{color:var(--azure-bright);box-shadow:inset 3px 0 0 var(--cyan)} html[data-theme="sang"] .tu-side a.on{color:var(--azure)}
.tu-side .sec{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding:12px 12px 6px;font-weight:700}
@media(max-width:820px){.tu-shell{grid-template-columns:1fr}.tu-side{position:static;display:flex;flex-wrap:wrap;gap:4px}.tu-side .sec{display:none}.tu-side a{padding:8px 11px}}

/* Inputs */
.tu-in{font:500 13.5px var(--body);padding:10px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg-3);color:var(--text);outline:none;width:100%}
.tu-in:focus{border-color:var(--azure);box-shadow:0 0 0 3px var(--glow-soft)}
.tu-in.mono{font-family:var(--mono);font-size:12.5px}

/* Misc */
.tu-note{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-s);padding:12px 14px;font-size:13px;color:var(--muted);line-height:1.55}
.tu-note.wn{border-color:rgba(255,181,71,.35);color:var(--amber)}
.tu-center{text-align:center;color:var(--muted);padding:40px 20px}
.tu-an{display:none}
.tu-lbl{color:var(--muted);font-size:13px}
.tu-link{color:var(--azure-bright);text-decoration:none;font-weight:500} html[data-theme="sang"] .tu-link{color:var(--azure)}
.tu-back{display:inline-flex;align-items:center;gap:6px;margin-top:22px;color:var(--muted);text-decoration:none;font-size:13px}
.tu-back svg{width:14px;height:14px}
.tu-modal{position:fixed;inset:0;background:rgba(4,10,26,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;z-index:60}
.tu-modal.hien{display:flex}
.tu-modal .box{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;max-width:420px;width:100%;padding:26px;box-shadow:0 30px 80px -24px var(--glow)}
@media(max-width:560px){.tu-wrap{padding:18px 14px 50px}.tu-top h1{font-size:19px}.tu-card{padding:17px}}