:root {
    --bg-deep: #030509;
    --bg-main: #060b14;
    --bg-card: rgba(13, 21, 36, 0.55);
    --bg-card-solid: #0a111f;
    --glass-border: rgba(126, 166, 224, 0.16);
    --text-main: #eef4ff;
    --text-dim: #93a7c4;
    --text-faint: #5d7190;
    --cyan: #22d3ee;
    --cyan-glow: rgba(34, 211, 238, 0.20);
    --green: #34d399;
    --green-glow: rgba(52, 211, 153, 0.16);
    --red: #fb7185;
    --red-glow: rgba(251, 113, 133, 0.16);
    --violet: #a78bfa;
    --hairline: rgba(255, 255, 255, 0.07);
    --amber: #fbbf24;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 34px -14px rgba(0,0,0,0.55);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --font: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --font-serif: 'Be Vietnam Pro', 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono: 'Be Vietnam Pro', 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    container-type: inline-size;
    padding: 28px 2px 118px;
    background:
      radial-gradient(900px 620px at 86% -10%, rgba(34,211,238,0.10), transparent 60%),
      radial-gradient(820px 570px at -8% 112%, rgba(167,139,250,0.11), transparent 60%),
      radial-gradient(720px 490px at 106% 96%, rgba(52,211,153,0.075), transparent 55%),
      linear-gradient(180deg, var(--bg-main), var(--bg-deep));
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
  }

  /* Hai quả cầu neon trôi nổi phía sau */
  body::before,
  body::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    pointer-events: none;
  }
  body::before {
    width: 360px; height: 360px;
    top: -90px; right: -70px;
    background: radial-gradient(circle, var(--cyan-glow), transparent 68%);
    animation: orbFloat 14s ease-in-out infinite alternate;
  }
  body::after {
    width: 430px; height: 430px;
    bottom: -130px; left: -100px;
    background: radial-gradient(circle, rgba(167,139,250,0.5), transparent 66%);
    animation: orbFloat 18s ease-in-out infinite alternate-reverse;
  }

  @keyframes orbFloat {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(42px, 30px) scale(1.12); }
  }

  /* ---------- Thanh công cụ ---------- */
  .toolbar {
    position: relative;
    z-index: 2;
    max-width: 1216px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: fadeUp .7s ease both;
  }
  .toolbar input[type="file"] {
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .25s, box-shadow .25s;
  }
  .toolbar input[type="file"]:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 14px var(--cyan-glow);
  }
  .toolbar input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(129,140,248,0.18));
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 4px 10px;
    margin-right: 10px;
    cursor: pointer;
    transition: all .25s;
  }
  .toolbar input[type="file"]::file-selector-button:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 12px var(--cyan-glow);
  }

  .status { font-size: 12.5px; color: var(--text-dim); }
  .status.error { color: var(--red); text-shadow: 0 0 12px var(--red-glow); }
  .status.ok { color: var(--green); text-shadow: 0 0 12px var(--green-glow); }

  /* ---------- Dashboard ---------- */
  .dashboard {
    position: relative;
    z-index: 2;
    max-width: 1216px;
    margin: 0 auto;
    display: none;
  }
  .dashboard.show { animation: fadeUp .6s ease both; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 32px;
    padding: 18px 22px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    margin-bottom: 18px;
    animation: fadeUp .75s .08s ease both;
  }
  .top-info .field { display: flex; gap: 8px; font-size: 13px; align-items: baseline; }
  .top-info .label { color: var(--text-dim); font-weight: 600; letter-spacing: .3px; }
  .top-info .value {
    color: var(--text-main);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, #ffffff, var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ---------- Tiêu đề mục ---------- */
  .section-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-weight: 700;
    padding: 12px 16px;
    font-size: 15px;
    letter-spacing: 1px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(120deg, rgba(23,37,84,0.95), rgba(8,47,73,0.85));
    border: 1px solid var(--glass-border);
    border-bottom: none;
    margin-top: 30px;
    overflow: hidden;
  }
  .section-title::before {           /* vạch neon bên trái */
    content: "";
    width: 4px;
    height: 62%;
    border-radius: 4px;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan-glow), 0 0 26px var(--cyan-glow);
  }
  .section-title::after {            /* ánh sáng lướt qua */
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 46%;
    height: 130%;
    background: linear-gradient(100deg, transparent, rgba(186,230,253,0.18), transparent);
    transform: skewX(-20deg);
    animation: shimmer 5.5s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%, 54% { left: -60%; }
    86%, 100% { left: 125%; }
  }
  .section-title.small { font-size: 13px; text-align: center; }

  .section-title .total-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0;
  }
  /* Bọc "Ngày cập nhật" + "Tổng giá trị" xếp dọc: tổng nằm ngay dưới nhãn ngày cập nhật */
  .section-title .fund-meta {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
        .fund-update {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fcd34d;
    letter-spacing: 0;
    background: rgba(252,211,77,.10);
    border: 1px solid rgba(252,211,77,.32);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .fund-update #fund-update-date {
      color: #fde047;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      text-shadow: 0 0 12px rgba(253,224,71,.55);
    }
    .ct-recorded {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 550;
        color: var(--text-dim);
        letter-spacing: 0;
        margin-left: auto;
        white-space: nowrap;
      }
      .ct-recorded .ct-rec-num {
        font-weight: 800;
        color: #fcd34d;
        font-variant-numeric: tabular-nums;
        text-shadow: 0 0 10px rgba(252,211,77,.45);
      }


  .section-title .total-inline .total-label {
    color: var(--text-dim);
    font-weight: 700;
    font-size: 13px;
  }
  .section-title .total-inline .total-value {
    color: var(--cyan);
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px var(--cyan-glow);
  }
  .section-title .total-inline .total-unit {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
  }
  .section-title .total-inline .total-pl {
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .section-title .total-inline .total-pl.pl-loi {
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
  }
  .section-title .total-inline .total-pl.pl-lo {
    color: var(--red);
    text-shadow: 0 0 10px var(--red-glow);
  }

    /* ---------- Khóa toàn trang (trust device) ---------- */
  .lock-toggle { font-size: 15px; }
  .global-lock {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 50% 20%, rgba(29,78,216,0.18), rgba(4,9,20,0.86) 60%), rgba(4,9,20,0.84);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .global-lock.hidden { display: none; }
  .global-lock-card {
    width: min(360px, 90vw);
    padding: 44px 36px 38px;
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.35);
    background: rgba(13,22,44,0.85);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 46px rgba(79,70,229,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
    text-align: center;
    animation: fadeUp .5s ease both;
  }
  .global-lock-icon { font-size: 48px; margin-bottom: 12px; filter: drop-shadow(0 0 18px rgba(249,115,22,0.5)); animation: floatY 3s ease-in-out infinite; }
  @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .global-lock-title { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .4px; }
  .global-lock-sub { font-size: 13px; color: var(--text-dim); margin: 8px 0 24px; }
  .global-lock-field { position: relative; margin-bottom: 12px; }
  .global-lock-field .gl-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-dim); opacity: .85; pointer-events: none; }
  .global-lock-card input[type="email"],
  .global-lock-card input[type="password"] {
    width: 100%;
    padding: 13px 16px 13px 42px;
    font-size: 15px;
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    border: 1.5px solid var(--glass-border);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
  }
  .global-lock-card input[type="email"]::placeholder,
  .global-lock-card input[type="password"]::placeholder { color: var(--text-dim); opacity: .7; }
  .global-lock-card input[type="email"]:focus,
  .global-lock-card input[type="password"]:focus { border-color: var(--cyan); box-shadow: 0 0 18px var(--cyan-glow); }
  .global-lock-btn { width: 100%; margin-top: 14px; padding: 13px; font-size: 15px; }
  .global-lock-hint { min-height: 20px; margin-top: 12px; font-size: 12.5px; color: #fb7185; }
  .global-lock-devices { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(148,163,184,.12); font-size: 12px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; gap: 6px; opacity: .9; }
  .global-lock-devices b { color: var(--cyan); font-weight: 700; }
  /* ---------- Quản lý dữ liệu: thiết bị tin cậy ---------- */
  .dm-card { background: linear-gradient(160deg, rgba(13,21,36,0.55), rgba(13,21,36,0.38)); border: 1px solid rgba(139,151,255,0.22); border-radius: 14px; padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.28); }
  .dm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .dm-title { font-weight: 700; font-size: 14px; color: #e2e8f0; }
  .dm-count { background: rgba(56,189,248,0.15); color: var(--cyan); border: 1px solid rgba(56,189,248,0.3); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
  .dm-refresh { margin-left: auto; background: rgba(139,151,255,0.12); border: 1px solid rgba(139,151,255,0.3); color: #cbd5e1; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px; transition: transform .2s, background .2s; }
  .dm-refresh:hover { background: rgba(139,151,255,0.25); transform: rotate(180deg); }
  .dm-table-wrap { overflow-x: auto; }
  .dm-table { width: 100%; }
  .dm-table td, .dm-table th { padding: 9px 10px; vertical-align: middle; }
  .dm-device { display: flex; align-items: center; gap: 9px; }
  .dm-device-icon { font-size: 18px; }
  .dm-device-name { font-weight: 600; color: #e2e8f0; font-size: 13px; }
  /* Hàng thiết bị hiện tại: tô màu nổi (cyan) thay cho chú thích */
  .dm-cur-row { background: rgba(56,189,248,0.10); }
  .dm-cur-row .dm-device-name { color: var(--cyan); font-weight: 700; }
  .dm-device-id { font-size: 11px; color: var(--text-dim); opacity: .75; word-break: break-all; }
  .dm-revoke { background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.35); color: #fb7185; padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; white-space: nowrap; transition: background .2s; }
  .dm-revoke:hover { background: rgba(244,63,94,0.28); }
  .dm-hint { margin-top: 12px; font-size: 12px; color: var(--text-dim); opacity: .85; }
  .dm-hint.success { color: #4ade80; opacity: 1; font-weight: 600; }
  .dm-hint.error { color: #ff6b6b; opacity: 1; font-weight: 600; }
  .dm-empty { text-align: center; color: var(--text-dim); padding: 22px 10px; font-size: 13px; }
  .dm-lock-card { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
  .dm-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
  .dm-lock-row + .dm-lock-row { border-top: 1px solid rgba(126,166,224,0.14); }
  .dm-lock-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .dm-lock-icon { font-size: 26px; flex-shrink: 0; }
  .dm-lock-text { min-width: 0; }
  .dm-lock-title { font-weight: 700; font-size: 14px; color: #e2e8f0; }
  .dm-lock-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
  .dm-lock-toggle { flex-shrink: 0; background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.35); color: var(--cyan); padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s; }
  .dm-lock-toggle:hover { background: rgba(56,189,248,0.28); }
  .dm-acc-form { display: flex; flex-direction: column; gap: 12px; }
  .dm-field { display: flex; flex-direction: column; gap: 5px; }
  .dm-field > span { font-size: 12px; color: var(--text-dim); }
  .dm-field input { background: rgba(15,23,42,0.6); border: 1px solid rgba(139,151,255,0.25); border-radius: 9px; padding: 10px 12px; color: #e2e8f0; font-size: 14px; outline: none; transition: border-color .2s; }
  .dm-field input:focus { border-color: rgba(56,189,248,0.6); }
  /* Card Giao diện: trường chọn theme nằm riêng 1 dòng, nút bên dưới */
  .dm-theme-form { display: flex; flex-direction: column; gap: 12px; }
  .dm-theme-form .dm-field select {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(139,151,255,0.25);
    border-radius: 9px;
    padding: 10px 12px;
    color: #e2e8f0;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    cursor: pointer;
  }
  .dm-theme-form .dm-field select:focus { border-color: rgba(56,189,248,0.6); }
  .dm-theme-form .dm-theme-toggle { align-self: flex-start; }
  .dm-save { align-self: flex-start; margin-top: 2px; }
  .dm-lock-card.locked .dm-lock-toggle { background: rgba(234,179,8,0.15); border-color: rgba(234,179,8,0.4); color: #fbbf24; }
  .dm-lock-card.locked .dm-lock-toggle:hover { background: rgba(234,179,8,0.28); }
  .dm-lock-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .dm-theme-toggle { background: rgba(139,151,255,0.14); border: 1px solid rgba(139,151,255,0.35); color: var(--violet); }
  .dm-theme-toggle:hover { background: rgba(139,151,255,0.28); }
/* ---------- Bảng ---------- */
  table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  thead th {
    background: linear-gradient(180deg, rgba(15,118,110,0.9), rgba(8,51,68,0.92));
    color: var(--text-main);
    font-weight: 700;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid var(--glass-border);
    white-space: nowrap;
    letter-spacing: .4px;
    position: sticky;
    top: 0;
  }
  tbody td {
    padding: 9px 12px;
    border: 1px solid var(--glass-border);
    background: rgba(10,17,31,0.72);
    white-space: nowrap;
    transition: background .25s, box-shadow .25s;
  }
  tbody tr { animation: rowIn .5s ease both; }
  tbody tr:nth-child(even) td { background: rgba(14,23,41,0.82); }
  tbody tr:hover td {
    background: rgba(30,41,59,0.9);
    box-shadow: inset 0 0 0 1px var(--cyan-glow);
  }
  @keyframes rowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  td.num { text-align: right; font-variant-numeric: tabular-nums; }
  td.center { text-align: center; }
  td.sp { font-weight: 650; color: #dfeaff; }

  /* ---------- Dòng tổng giá trị ---------- */
  .total-row td {
    padding: 12px 16px;
    background: rgba(34,211,238,0.06);
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--cyan-glow);
    text-align: right;
    animation: none;
  }
  .total-label {
    color: var(--text-dim);
    font-weight: 700;
    font-size: 13px;
    margin-right: 10px;
  }
  .total-value {
    color: var(--cyan);
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px var(--cyan-glow);
  }
  .total-unit {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
  }

  /* ---------- Tag phân loại ---------- */
  .tag {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .2s, box-shadow .2s;
  }
  .tag:hover { transform: translateY(-1px); }
  .tag.tp {
    background: rgba(249,115,22,0.14);
    color: #fdba74;
    box-shadow: 0 0 10px rgba(249,115,22,0.25), inset 0 0 8px rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.35);
  }
  .tag.cb {
    background: rgba(56,189,248,0.14);
    color: #7dd3fc;
    box-shadow: 0 0 10px rgba(56,189,248,0.25), inset 0 0 8px rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.35);
  }
  .tag.unk {
    background: rgba(203,213,225,0.10);
    color: var(--text-dim);
    border: 1px solid var(--glass-border);
  }
  .tag.cp {
    background: rgba(52,211,153,0.14);
    color: #6ee7b7;
    box-shadow: 0 0 10px rgba(52,211,153,0.25), inset 0 0 8px rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.35);
  }
  .tag.mmf {
    background: rgba(167,139,250,0.14);
    color: #c4b5fd;
    box-shadow: 0 0 10px rgba(167,139,250,0.25), inset 0 0 8px rgba(167,139,250,0.12);
    border: 1px solid rgba(167,139,250,0.35);
  }

  .pl.tp { color: var(--red); font-weight: 700; text-shadow: 0 0 10px var(--red-glow); }
  .pl.cb { color: var(--green); font-weight: 700; text-shadow: 0 0 10px var(--green-glow); }
  .pl.cp { color: var(--green); font-weight: 700; text-shadow: 0 0 10px var(--green-glow); }
  .pl.mmf { color: var(--violet); font-weight: 700; text-shadow: 0 0 10px rgba(167,139,250,0.40); }
  .pl.loi { color: var(--green); font-weight: 700; text-shadow: 0 0 10px var(--green-glow); }
  .pl.lo { color: var(--red); font-weight: 700; text-shadow: 0 0 10px var(--red-glow); }
  .pl.unk { color: var(--text-main); font-weight: 700; }
  .ty-trong { color: var(--cyan); font-weight: 700; text-shadow: 0 0 10px var(--cyan-glow); }

  /* ---------- Biểu đồ ---------- */
  #sunburst {
    width: 100%;
    height: 545px;
    background: rgba(8,14,26,0.6);
    border: 1px solid var(--glass-border);
    border-radius: 0 0 16px 16px;
    box-shadow: inset 0 0 60px rgba(34,211,238,0.045);
  }

  /* Treemap "mờ" trước khi mở khóa: chỉ hiện khung + số ô, không lộ tỷ trọng thật */
  #treemapBox { position: relative; }
  #treemapBox.blurred #sunburst {
    filter: blur(7px);
    opacity: .70;
    pointer-events: none;
  }
  #treemapLock {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    background: rgba(6,11,20,0.35);
    border-radius: 0 0 16px 16px;
    z-index: 5;
    pointer-events: none;
  }
  #treemapBox.blurred #treemapLock { display: flex; }

  #legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    margin-top: 30px;
    font-size: 12.5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #legend .lg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--glass-border);
    transition: transform .2s, box-shadow .2s;
  }
  #legend .lg-item:hover { transform: translateY(-2px); box-shadow: 0 0 14px var(--cyan-glow); }
  #legend .lg-swatch { width: 16px; height: 16px; border-radius: 5px; box-shadow: 0 0 8px currentColor; }
  #legend .lg-name { font-weight: 700; }
  #legend .lg-pct { color: var(--text-dim); font-weight: 700; }
  #legend .lg-total {
    margin-left: auto;              /* đẩy sang phải, cùng hàng với các nhóm phân loại */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(34,211,238,0.07);
    border: 1px solid var(--cyan-glow);
    color: var(--text-dim);
    font-weight: 700;
    box-shadow: 0 0 16px rgba(34,211,238,0.18), inset 0 0 10px rgba(34,211,238,0.06);
    white-space: nowrap;
  }
  #legend .lg-total b { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
  #legend .lg-total { transition: transform .2s, box-shadow .2s; }
  #legend .lg-total:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px var(--cyan-glow), inset 0 0 12px rgba(34,211,238,0.12);
  }
  /* Nhãn trở thành nút lọc treemap */
  #legend .lg-item, #legend .lg-total { cursor: pointer; user-select: none; }
  #legend .lg-item.active {
    background: rgba(34,211,238,0.12);
    border-color: var(--cyan);
    box-shadow: 0 0 14px var(--cyan-glow), inset 0 0 10px rgba(34,211,238,0.10);
  }
  #legend .lg-total.active {
    border-color: var(--green);
    box-shadow: 0 0 18px var(--green-glow), inset 0 0 12px rgba(52,211,153,0.14);
  }
  .table-wrapper {
    overflow-x: auto;
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--glass-border);
    border-top: none;
    background: rgba(6,11,20,0.5);
    box-shadow: 0 10px 34px rgba(0,0,0,0.35);
  }

  /* ---------- Ghi chú ---------- */
  .note {
    position: relative;
    z-index: 2;
    max-width: 1216px;
    margin: 22px auto 0;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.7;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    padding: 14px 18px;
    background: var(--bg-card);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .note b { color: var(--cyan); }

  /* ---------- Thanh cuộn ---------- */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--cyan), #6366f1);
    border-radius: 8px;
    border: 2px solid var(--bg-main);
  }
  ::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 10px var(--cyan-glow); }

  /* ---------- Con trỏ neon ---------- */
  .cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 390px; height: 390px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483000;
    background: radial-gradient(circle, rgba(34,211,238,0.16), transparent 62%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .35s ease;
    mix-blend-mode: screen;
    will-change: transform;
  }

  /* ---------- Scroll reveal ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }

  /* ---------- Viền gradient xoay cho thẻ thông tin ---------- */
  @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  .top-info {
    position: relative;
    border: none;
  }
  .top-info::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--angle), var(--cyan), var(--violet), var(--green), var(--cyan));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: spinBorder 6s linear infinite;
    pointer-events: none;
  }
  .top-info > * { position: relative; z-index: 1; }
  @keyframes spinBorder { to { --angle: 360deg; } }

  /* ---------- Giảm chuyển động & thiết bị cảm ứng ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .cursor-glow { display: none; }
    .reveal { opacity: 1; transform: none; }
  }
  @media (hover: none) { .cursor-glow { display: none; } }

  @container (max-width: 820px) {
    body { padding: 14px; font-size: 12px; }
    /* Ẩn các cột phụ khi màn hình hẹp (điện thoại) để bảng dễ đọc */
    .hide-sm { display: none; }
    td.sp { white-space: normal; word-break: break-word; }
    thead th { white-space: normal; }
    .top-info { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- Thanh điều hướng tab ---------- */
  
  /* ---------- Header + KPI tổng quan ---------- */
  .main-tabbar {
      max-width: 1216px;
      margin: 0 auto;
      padding: 26px 30px 6px;
    }
  .main-tab-container {
    border: 1px solid rgba(153,120,255,.4);
    border-radius: 20px;
    background: rgba(255,255,255,.014);
    box-shadow: 0 0 0 1px rgba(170,142,255,.16), 0 14px 36px -18px rgba(107,60,255,.35);
    overflow: hidden;
  }
  .main-tab-head-row { display: flex; justify-content: center; align-items: stretch; gap: 10px; padding: 20px 0 6px; width: fit-content; margin: 0 auto; }
  .main-tab-head-row .main-tab-head { flex: 0 1 auto; width: auto; }
  .main-tab-head { flex: 1; }
  .header-lock {
    flex: 0 0 auto;
    align-self: center;
    padding: 16px 18px;
    border: 1px solid rgba(198,168,255,.35);
    border-radius: 14px;
    background: rgba(47,30,96,.25);
    font-size: 19px;
    cursor: pointer;
    transition: all .2s ease;
  }
  .header-lock:hover { border-color: rgba(251,113,133,.6); background: rgba(225,29,72,.18); }
  .main-tab-head {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 17px 22px;
      cursor: pointer;
      border-radius: 998px;
      background: linear-gradient(135deg, rgba(101,58,235,.24), rgba(182,130,255,.12));
      transition: all .2s ease;
      font-family: inherit;
    }
  .main-tab-head:hover { background: linear-gradient(135deg, rgba(101,58,235,.32), rgba(196,142,255,.18)); }
  .main-tab-logo { font-size: 28px; line-height: 1; }
  .main-tab-titles { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .main-tab-title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: #f8fbff; text-shadow: 0 1px 10px rgba(214,194,255,.4); }
  .main-tab-sub { font-size: 11px; color: var(--text-dim); }
  .main-tab-switch { margin-left: auto; font-size: 13px; font-weight: 600; color: #c4b5fd; background: rgba(33,20,80,.35); border: 1px solid rgba(187,155,255,.35); padding: 7px 15px; border-radius: 999px; transition: all .2s ease; white-space: nowrap; }
  .main-tab-head:hover .main-tab-switch { background: rgba(40,24,92,.45); color: #ddd6fe; }
  .main-tab-body { display: none; }
  .main-tab-body.active { display: block; padding: 8px 24px 26px; border-top: 1px dashed rgba(161,178,205,.26); }
  @container (max-width: 740px) {
    .main-tabbar { padding: 18px 14px 6px; }
    .main-tab-head { padding: 14px 18px; }
    .main-tab-title { font-size: 18px; }
    .main-tab-body { padding: 2px 16px 18px; }
  }
  .app-brand { display: flex; align-items: center; gap: 14px; }
  .app-logo {
    font-size: 30px;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(167,139,250,0.14));
    border: 1px solid rgba(127,166,224,0.22);
    box-shadow: 0 6px 20px rgba(34,211,238,0.12);
  }
    .app-eyebrow {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cyan);
  }
.app-title {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.2px;
    color: var(--text-main);
  }
  .app-sub { font-size: 13px; color: var(--text-dim); margin: 5px 0 0; font-family: var(--font-mono); }

  .kpi-row {
    max-width: 1216px;
    margin: 20px auto;
    padding: 0 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
  }
  .kpi-card {
    position: relative;
    background: linear-gradient(160deg, rgba(13,21,36,0.70), rgba(13,21,36,0.42));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 18px 20px;
    overflow: hidden;
    transition: transform .2s, border-color .2s;
  }
  .kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(167,139,250,0.9), rgba(34,211,238,0.6));
    opacity: 0.7;
  }
  .kpi-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120px 70px at 20% 0%, rgba(34,211,238,0.07), transparent 70%);
    pointer-events: none;
  }
  .kpi-card:hover { transform: translateY(-2px); border-color: rgba(122,164,240,0.35); }
  .kpi-card.kpi-survive {
    background: linear-gradient(160deg, rgba(244,187,54,0.10), rgba(203,96,179,0.05)), linear-gradient(160deg, rgba(13,21,36,0.72), rgba(13,21,36,0.45));
    border-color: rgba(247,188,54,0.30);
  }
  .kpi-card.kpi-survive .kpi-value { color: #f6c453; }

  /* Card gộp "Tài sản / Dư sống" — 2 dòng trong 1 card, làm nổi 2 giá trị */
  .kpi-card.kpi-combined {
    grid-column: 1 / -1;
    padding: 14px 22px;
  }
  .kpi-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
  }
  .kpi-line .kpi-label {
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 0.8px;
  }
  .kpi-line .kpi-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
  }
  .kpi-line + .kpi-line {
    border-top: 1px solid rgba(126,166,224,0.14);
    margin-top: 8px;
    padding-top: 10px;
  }
  #kpi-toggle { position: relative; cursor: pointer; }
  #kpi-toggle .kpi-toggle-arrow {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    color: #f6c453; font-size: 28px; font-weight: 700; line-height: 1;
    text-shadow: 0 0 14px rgba(246,196,83,0.5);
    transition: transform .2s ease; pointer-events: none;
  }
  #kpi-toggle.open .kpi-toggle-arrow { transform: translateY(-50%) rotate(180deg); }
  .kpi-assets-val { color: #22d3ee; text-shadow: 0 0 16px rgba(34,211,238,0.35); }
  .kpi-survive-val { color: #f6c453; text-shadow: 0 0 16px rgba(246,196,83,0.35); }

  /* ---------- Phân bổ tài sản ---------- */
.alloc-card {
    max-width: 1216px;
    margin: 16px auto 4px;
    padding: 18px 22px;
    background: linear-gradient(160deg, rgba(13,21,36,0.65), rgba(13,21,36,0.4));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
  }
  .alloc-head { margin-bottom: 14px; }
  .alloc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
  .alloc-body { display: flex; align-items: center; gap: 26px; }
  .alloc-chart { width: 230px; height: 165px; flex: 0 0 auto; }
  .alloc-list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .alloc-item { display: flex; align-items: center; gap: 10px; font-size: 15px; }
    .alloc-dot { width: 12px; height: 12px; border-radius: 999px; flex: 0 0 auto; }
    .alloc-item-name { color: var(--text-dim); flex: 1; font-size: 15px; }
    .alloc-item-val { font-weight: 650; color: var(--text-main); font-size: 15px; }
    .alloc-item-pct { color: var(--text-dim); font-size: 14px; min-width: 52px; text-align: right; }
  @container (max-width: 680px) {
    .alloc-body { flex-direction: column; }
    .alloc-chart { width: 360px; height: 205px; }
    .alloc-list { grid-template-columns: 1fr; }
  }
  .kpi-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 7px; }
  .kpi-value { display: block; font-size: 20px; font-weight: 700; color: var(--text-main); }
  .kpi-value.up { color: var(--green); }
  .kpi-value.down { color: var(--red); }

  @container (max-width: 760px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
    .app-header { padding: 20px 20px 6px; }
  }
.tabnav {
    position: relative;
    z-index: 3;
    max-width: 1216px;
    margin: 0 auto 22px;
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    animation: fadeUp .7s ease both;
  }
  .tab-btn {
    flex: 0 0 auto;
    padding: 11px 16px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .4px;
    cursor: pointer;
    transition: all .25s;
  }
  .tab-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.045); }

  /* Đồng nhất độ rộng tab trên máy tính (≥960px) */
  @container (min-width: 960px) {
    .tab-btn { flex: 1 1 0; padding: 12px 6px; text-align: center; white-space: nowrap; }
    .lock-toggle { flex: 0 0 auto; padding: 12px 14px; }
  }

  /* Bộ chọn tab cho màn hình hẹp (mobile) */
    .mobile-tabs { display: none; }
    @container (max-width: 808px) {
      .tabnav { display: none; }
      /* Sub-tab Đời sống luôn hiện trên màn hình hẹp, đặt dưới bảng phân bố thời gian */
      .tabnav.lifetab-nav { display: flex; margin: 14px auto 4px; }
      .tabnav.lifetab-nav .tab-btn { flex: 1 1 0; text-align: center; white-space: nowrap; }
    .mobile-tabs {
          display: flex;
          align-items: center;
          gap: 9px;
          max-width: 1320px;
          margin: 10px auto 4px;
          padding: 10px 14px;
          background: linear-gradient(160deg, rgba(13,21,36,0.55), rgba(13,21,36,0.38));
          border: 1px solid rgba(139,151,255,0.22);
          border-radius: 14px;
          box-shadow: 0 6px 24px rgba(0,0,0,0.28);
        }
    .mobile-tabs select {
      flex: 1;
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      background-color: rgba(14,17,32,0.75);
      background-image:
        linear-gradient(135deg, rgba(56,189,248,0.12), rgba(129,140,248,0.06)),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 13px center;
      background-size: 15px;
      color: var(--text-main);
      border: 1px solid rgba(129,140,248,0.35);
      border-radius: 12px;
      padding: 11px 36px 11px 14px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2px;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 10px rgba(0,0,0,0.25);
      transition: border-color .2s, box-shadow .2s, transform .15s;
    }
    .mobile-tabs select:active { transform: scale(0.99); }
    .mobile-tabs select:focus {
          outline: none;
          border-color: #818cf8;
          box-shadow: 0 0 0 3px rgba(129,140,248,0.25), 0 2px 12px rgba(0,0,0,0.3);
        }
      }
  .tab-btn.active {
    color: #06121f;
    background: linear-gradient(135deg, var(--cyan), #818cf8);
    box-shadow: 0 4px 18px var(--cyan-glow);
  }
  .tab-panel { position: relative; z-index: 2; max-width: 1216px; margin: 0 auto; width: 100%; }

  /* ===================== BOTTOM-NAV (mobile-first) =====================
   * Fixed bottom, touch target ≥48px, ngón cái chạm dễ.
   * Ẩn trên desktop (≥860px), hiện trên mobile + tablet.
   */
  .bottom-nav {
    display: none;
  }
  @container (max-width: 860px) {
    .bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 60;
      justify-content: space-around;
      align-items: stretch;
      gap: 2px;
      padding: 6px 4px max(6px, env(safe-area-inset-bottom)) 4px;
      background: linear-gradient(180deg, rgba(8,10,22,0.88), rgba(6,8,18,0.96));
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-top: 1px solid rgba(148,163,255,0.18);
      box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
    }
    .bottom-nav-spacer { height: 78px; }
    .bn-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      flex: 1 1 0;
      min-height: 48px;          /* touch target ≥48px */
      min-width: 44px;
      padding: 6px 2px;
      border: none;
      background: transparent;
      color: var(--text-dim);
      font-family: inherit;
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 10px;
      transition: color .15s, background .15s, transform .1s;
    }
    .bn-item.bn-lock { color: rgba(251,113,133,0.7); }
    .bn-icon { font-size: 20px; line-height: 1; }
    .bn-label { font-size: 9px; line-height: 1.15; letter-spacing: 0.2px; white-space: nowrap; text-transform: uppercase; }
    .bn-item:active { transform: scale(0.94); background: rgba(129,140,248,0.12); }
    .bn-item.active {
      color: #06121f;
      background: linear-gradient(135deg, var(--cyan), #818cf8);
      box-shadow: 0 4px 14px rgba(56,189,248,0.35);
    }
    .bn-item.active .bn-label { font-weight: 700; }

    /* Vạch phân cách giữa các tab — màu nổi, trừ tab cuối (bn-lock) */
    .bn-item:not(:last-child) {
      border-right: 1px solid rgba(56,189,248,0.30);
    }
    .bn-item.active:not(:last-child) {
      border-right-color: rgba(255,255,255,0.55);
    }

    /* Ẩn tabnav desktop + mobile-tabs cũ khi có bottom-nav */
        .tabnav#finance-tabnav { display: none; }
        .mobile-tabs { display: none; }

        /* Mobile: ẩn nút tiêu đề (Tài chính/Đời sống cá nhân) + nút khóa — đã có trong bottom-nav */
        #main-toggle, #lock-toggle { display: none; }

    /* Body padding giảm trên mobile */
    body { padding: 10px 8px 76px !important; font-size: 13px; }
    .main-tabbar { padding: 12px 8px 4px; }
    .main-tab-head-row { padding: 10px 0 4px; flex-wrap: wrap; gap: 6px; }
    .main-tab-head { padding: 10px 14px; }
    .main-tab-title { font-size: 18px; }
    .main-tab-logo { font-size: 24px; }
    .main-tab-body { padding: 2px 8px 14px; }
    .main-tab-body.active { padding: 2px 8px 14px; }

    /* KPI: 1 cột trên mobile */
    .kpi-row { flex-direction: column; gap: 10px; padding: 8px; }
    .kpi-card { min-width: 100%; }

    /* Bảng: cuộn ngang, ẩn cột phụ */
    .hide-sm { display: none; }
    table { font-size: 12px; }
    thead th { white-space: normal; }

    /* Form chi tiêu: 1 cột */
    .ct-form { flex-direction: column; gap: 10px; }
    .ct-total-box, .ct-add-box { flex: 1 1 100%; }
    .ct-add-box { flex-direction: column; align-items: stretch; }
    .ct-add-box input, .ct-add-box .ct-dd { width: 100%; }

    /* Biểu đồ chiề cao thấp */
    .section-title { font-size: 13px; }

    /* Lifetab-nav: pill ngang cuộn */
    .tabnav.lifetab-nav { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
    .tabnav.lifetab-nav .tab-btn { min-height: 40px; padding: 8px 14px; white-space: nowrap; }

    /* Bảng: bỏ khung bao quanh, header gạch chân kéo dài toàn bộ chiều rộng */
    .main-tab-container {
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    .table-wrapper, .stock-table-wrap, .gold-table-wrap, .gold-own-wrap,
    .ct-table-wrap, .ct-cat-wrap, .dm-table-wrap {
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    /* Đồng nhất độ rộng bảng: vàng sở hữu full-width, khớp các bảng khác */
    .gold-card { padding-left: 14px !important; padding-right: 14px !important; min-width: 0 !important; }
    .gold-own-wrap table { width: 100%; }
    .gold-own-wrap th, .gold-own-wrap td { white-space: normal; word-break: break-word; }
    .gold-own-note-cell { max-width: none; white-space: normal; }
    /* Form thêm vàng: xếp dọc để không ép card rộng */
    .gold-own-add { flex-direction: column !important; align-items: stretch !important; }
    .gold-own-add .stock-field, .gold-own-add .gold-own-note { min-width: 0 !important; width: 100% !important; }
    .gold-own-add input { width: 100% !important; box-sizing: border-box !important; }
    .gold-own-add .btn-primary { align-self: stretch !important; }
    .gold-card-head { font-size: 15px !important; flex-wrap: wrap !important; line-height: 1.3; }
    /* Máy tính mua/bán: giá trị dài không tràn ra ngoài card */
    .gold-calc-result { grid-template-columns: 1fr 1fr; }
    .gold-result-card { min-width: 0 !important; padding: 12px 8px !important; }
    .gold-result-val { font-size: clamp(14px, 4.5vw, 20px) !important; overflow-wrap: break-word; word-break: break-word; line-height: 1.25; }
    /* Chi tiêu: tổng chi bỏ dấu "=", giá trị xuống dòng riêng */
    .ct-total-eq { display: none !important; }
    .ct-total-box { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
    .ct-total-val {
      flex-basis: 100% !important;
      text-align: left !important;
      min-width: 0 !important;
      font-size: clamp(18px, 6.5vw, 33px) !important;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-all;
      line-height: 1.25;
    }
    .alloc-card { padding-left: 14px; padding-right: 14px; }
    thead th, tbody td { border: none !important; }
    thead th {
      border-bottom: 1px solid var(--glass-border) !important;
      background: transparent !important;
    }
    tbody td { border-bottom: 1px solid rgba(148,163,184,0.10) !important; }
    tbody tr:last-child td { border-bottom: none !important; }
    .total-row td { border: none !important; border-top: 2px solid var(--cyan-glow) !important; }
  }

  /* ≥861px: desktop → bottom-nav ẩn, tabnav cũ hiện */
  @container (min-width: 861px) {
    .bottom-nav { display: none; }
    .bottom-nav-spacer { display: none; }
  }

  /* ---------- Animation chuyển tab (fade-in + stagger) ---------- */
  @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes itemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .tab-panel.panel-enter { animation: panelIn 0.35s cubic-bezier(.22,1,.36,1) both; }
  .tab-panel.panel-enter .section-title,
  .tab-panel.panel-enter .card,
  .tab-panel.panel-enter .stat-card,
  .tab-panel.panel-enter .stock-card,
  .tab-panel.panel-enter .gold-card,
  .tab-panel.panel-enter .dep-card,
  .tab-panel.panel-enter .sub-card,
  .tab-panel.panel-enter .ct-card { animation: itemIn 0.42s cubic-bezier(.22,1,.36,1) both; }
  .tab-panel.panel-enter .section-title { animation-delay: 0.04s; }
  .tab-panel.panel-enter .card:nth-child(1) { animation-delay: 0.08s; }
  .tab-panel.panel-enter .card:nth-child(2) { animation-delay: 0.14s; }
  .tab-panel.panel-enter .card:nth-child(3) { animation-delay: 0.20s; }
  .tab-panel.panel-enter .card:nth-child(4) { animation-delay: 0.26s; }
  .tab-panel.panel-enter .card:nth-child(5) { animation-delay: 0.32s; }
  .tab-panel.panel-enter .card:nth-child(6) { animation-delay: 0.38s; }

  .tab-panel.hidden { display: none; }
  .tab-right { margin-left: auto; }

  /* ---------- Chi tiêu: thẻ tổng hợp ---------- */
  .ct-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }
  .ct-card {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: fadeUp .6s ease both;
  }
  .ct-card .ct-label { font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }
  .ct-card .ct-val {
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
  }
  .ct-card.thu .ct-val { color: var(--green); text-shadow: 0 0 16px var(--green-glow); }
  .ct-card.chi .ct-val { color: var(--red); text-shadow: 0 0 16px var(--red-glow); }
  .ct-card.balance .ct-val { color: var(--cyan); text-shadow: 0 0 16px var(--cyan-glow); }

  /* ---------- Chi tiêu: thanh công cụ & form ---------- */
  .ct-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
  }
  .ct-toolbar input[type="month"],
  .ct-form input[type="number"],
  .ct-form input[type="date"],
  .ct-form input[type="text"],
  .ct-form select {
    padding: 9px 12px;
    background: rgba(255,255,255,0.055);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }
  .ct-form input[type="number"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .ct-toolbar input[type="month"]:focus,
  .ct-form input:focus, .ct-form select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 12px var(--cyan-glow);
  }
  .ct-toolbar select { color-scheme: dark; }
  /* Droplist phân loại tùy chỉnh */
  .ct-dd { position: relative; min-width: 130px; }
  .ct-dd-toggle {
    width: 100%;
    padding: 9px 34px 9px 12px;
    background: rgba(255,255,255,0.055);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .25s, box-shadow .25s;
  }
  .ct-dd-toggle::after {
    content: '';
    position: absolute;
    right: 13px; top: 47%;
    width: 7px; height: 7px;
    border-right: 1.6px solid var(--text-dim);
    border-bottom: 1.6px solid var(--text-dim);
    transform: translateY(-60%) rotate(45deg);
    transition: transform .2s;
  }
  .ct-dd.open .ct-dd-toggle::after { transform: translateY(-20%) rotate(225deg); }
  .ct-dd.open .ct-dd-toggle { border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }
  .ct-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #0d1626;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 6px;
    max-height: 248px;
    overflow-y: auto;
    z-index: 40;
    display: none;
    box-shadow: 0 14px 30px rgba(0,0,0,.5);
    list-style: none;
    margin: 0;
  }
  .ct-dd.open .ct-dd-menu { display: block; }
  .ct-dd-menu li {
    padding: 8px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
    transition: background .15s;
  }
  .ct-dd-menu li:hover { background: rgba(122,171,255,.13); }
  .ct-dd-menu li.selected { background: rgba(74,214,255,.16); color: var(--cyan); }
  .ct-dd-menu li.new-cat {
    border-top: 1px solid var(--glass-border);
    margin-top: 4px;
    padding-top: 10px;
    color: var(--cyan);
  }
  /* Bảng chọn tháng/năm tùy chỉnh */
  .ct-mp { position: relative; min-width: 118px; }
  .ct-mp-toggle {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.055);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s;
  }
  .ct-mp-toggle:hover { border-color: rgba(124,172,255,.5); }
  .ct-mp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 230px;
    background: #0d1526;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px;
    z-index: 48;
    display: none;
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
  }
  .ct-mp.open .ct-mp-panel { display: block; }
  .ct-mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .ct-mp-nav {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    width: 28px; height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background .15s;
  }
  .ct-mp-nav:hover { background: rgba(124,172,255,.12); }
  .ct-mp-year {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-bright);
    letter-spacing: .5px;
  }
  .ct-mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .ct-mp-grid button {
    padding: 7px 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .ct-mp-grid button:hover { background: rgba(124,172,255,.12); }
  .ct-mp-grid button.sel { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.5); color: var(--cyan); font-weight: 600; }
  .ct-dd-menu::-webkit-scrollbar { width: 6px; }
  .ct-dd-menu::-webkit-scrollbar-thumb { background: rgba(126,166,224,.3); border-radius: 4px; }
  .btn {
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--cyan), #818cf8);
    color: #06121f;
    box-shadow: 0 4px 16px var(--cyan-glow);
  }
  .btn-primary:hover { filter: brightness(1.12); }
  .btn-ghost {
    background: rgba(255,255,255,0.065);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
  }
  .btn-ghost:hover { border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }
  .btn-danger {
    background: rgba(251,113,133,0.14);
    color: var(--red);
    border: 1px solid rgba(251,113,133,0.35);
  }
  .btn-danger:hover { background: rgba(251,113,133,0.26); }

  .ct-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        align-items: stretch;
        padding: 14px 16px;
        margin-bottom: 16px;
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        background: var(--bg-card);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        animation: fadeUp .4s ease both;
        position: relative;
        z-index: 59;
      }
      .ct-total-box {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        flex: 0 0 auto;
        padding: 12px 16px;
        border: 1px solid rgba(159,166,255,0.20);
        border-radius: 12px;
        background: linear-gradient(160deg, rgba(51,65,85,0.42), rgba(31,41,55,0.28));
      }
      .ct-add-box {
        display: flex;
        flex: 1 1 340px;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding: 12px 16px;
        border: 1px solid rgba(134,239,172,0.18);
        border-radius: 12px;
        background: linear-gradient(160deg, rgba(20,43,36,0.35), rgba(15,30,28,0.22));
      }
    .ct-form input[type="number"] { width: 170px; text-align: center; }
    .ct-total-label {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--text-dim);
      white-space: nowrap;
    }
    .ct-total-eq {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-dim);
    }
    .ct-total-val {
        font-family: var(--font-mono);
        font-size: 29px;
        font-weight: 800;
        color: #fb7185;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        letter-spacing: .01em;
        text-shadow: 0 0 18px rgba(251, 113, 133, 0.35);
      }
    .ct-form input[type="date"] { color-scheme: dark; }

  /* ---------- Chi tiêu: bảng ---------- */
  .ct-table-wrap { margin-top: 20px; }
  .tag { display:inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
  .tag.thu { color: var(--green); background: rgba(52,211,153,0.14); }
  .tag.chi { color: var(--red); background: rgba(251,113,133,0.14); }
  .amt.thu { color: var(--green); }
  .amt.chi { color: var(--red); }
  .row-actions { display:flex; gap:6px; justify-content: flex-end; }
  .icon-btn {
    padding: 4px 9px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    transition: all .2s;
  }
  .icon-btn:hover { color: var(--text-main); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
  .icon-btn.del:hover { color: var(--red); border-color: var(--red); box-shadow: 0 0 10px var(--red-glow); }

  .ct-chart { width: 100%; height: 310px; margin-top: 10px; }
  #ct-chart-years { height: 396px; }
  .ct-pies-row { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
  .ct-pie-box { flex: 1 1 290px; min-width: 270px; }
  .ct-pie-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 2px;
    font-weight: 600;
  }
  #ct-pie-avg-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: #fb7185;
    letter-spacing: .01em;
    line-height: 1.25;
    text-shadow: 0 0 18px rgba(251,113,133,.35);
  }
  .ct-budget-line {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--text-main);
    margin-bottom: 8px;
    line-height: 1.35;
    padding: 0 6px;
    min-height: 34px;
  }
  .ct-budget-line .ct-x {
    color: #fb7185;
    font-weight: 800;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
  }
  .ct-budget-line .ct-y {
    color: #38bdf8;
    font-weight: 800;
    font-size: 21px;
  }
  .ct-empty { text-align:center; color: var(--text-faint); padding: 40px 0; }

  /* ===== Giá vàng SJC ===== */
  .gold-update { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
  .gold-update-label { color: var(--text-faint); font-size: 13px; }
  .gold-update-time { font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: .3px; }
  .gold-refresh { margin-left: auto; }
  .gold-table-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .gold-table-bar .gold-update-label { color: var(--text-faint); font-size: 12px; }
  .gold-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
  }
  @container (max-width: 960px) {
    .gold-grid { grid-template-columns: 1fr; }
  }
  .gold-card {
    background: linear-gradient(165deg, rgba(253,230,138,.07), rgba(217,119,6,.02));
    border: 1px solid rgba(251,191,36,.22);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 14px 44px rgba(146,64,14,.10);
  }
  .gold-card-head {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fcd34d;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #gold-own-toggle { position: relative; cursor: pointer; }
  #gold-own-toggle .gold-own-toggle-arrow {
    margin-left: auto; color: #f6c453; font-size: 22px; font-weight: 700; line-height: 1;
    text-shadow: 0 0 12px rgba(246,196,83,0.5);
    transition: transform .2s ease;
  }
  #gold-own-toggle.open .gold-own-toggle-arrow { transform: rotate(180deg); }
  #fund-detail-toggle { position: relative; cursor: pointer; }
  #fund-detail-toggle .fund-detail-toggle-arrow {
    margin-left: auto; color: #f6c453; font-size: 22px; font-weight: 700; line-height: 1;
    text-shadow: 0 0 12px rgba(246,196,83,0.5);
    transition: transform .2s ease; pointer-events: none;
  }
  #fund-detail-toggle.open .fund-detail-toggle-arrow { transform: rotate(180deg); }
  .gold-calc { padding: 4px 2px; background: transparent; border: none; }
  .gold-calc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .gold-calc-title { font-weight: 700; font-size: 15px; color: #fbbf24; }
  .gold-chi-label { margin-left: auto; color: var(--text-faint); font-size: 13px; }
  .gold-select-wrap { position: relative; }
  .gold-select-wrap select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: linear-gradient(135deg, rgba(255,215,0,.16), rgba(255,215,0,.05));
    color: var(--text);
    border: 1px solid rgba(255,215,0,.35);
    border-radius: 10px;
    padding: 10px 40px 10px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .gold-select-wrap select:hover { border-color: rgba(255,215,0,.6); box-shadow: 0 0 0 3px rgba(255,215,0,.12); }
  .gold-select-wrap select:focus { outline: none; border-color: #ffd700; box-shadow: 0 0 0 3px rgba(255,215,0,.2); }
  .gold-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffd700;
    font-size: 14px;
    pointer-events: none;
  }
  .gold-select-wrap select option { background: #1a1a24; color: var(--text); }
  .gold-calc-result { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .gold-result-card { padding: 16px; border-radius: 12px; text-align: center; }
  .gold-result-card.buy { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.35); }
  .gold-result-card.sell { background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.35); }
  .gold-result-label { font-size: 12px; letter-spacing: 1px; opacity: .7; margin-bottom: 6px; }
  .gold-result-val { font-size: 24px; font-weight: 800; }
  .gold-result-card.buy .gold-result-val { color: #34d399; }
  .gold-result-card.sell .gold-result-val { color: #fb7185; }
  .gold-pick-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
  .gold-pick-select { display: flex; flex-direction: column; gap: 6px; }
  .gold-pick-label { font-size: 12px; color: var(--text-faint); }
  .gold-pick-result { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  /* Ép droplist vàng không tràn ngang trên mobile: co 100% + cắt bớt tên dài */
  .gold-pick-select .gold-select-wrap { width: 100%; max-width: 100%; }
  .gold-pick-select .gold-select-wrap select {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .gold-calc-note { margin-top: 12px; font-size: 12px; color: var(--text-faint); }

  /* Quản lý vàng sở hữu */
  .gold-own { margin-top: 6px; }
  .gold-own-add { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; padding: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 14px; }
  .gold-own-note { flex: 1; min-width: 180px; }
  .gold-own-wrap { margin-bottom: 12px; }
  .gold-own-chi { font-weight: 800; color: #fff; }
  .gold-own-note-cell { font-size: 12px; color: var(--text-dim); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gold-own-total { display: flex; justify-content: flex-end; gap: 22px; padding: 14px 18px; background: linear-gradient(135deg, rgba(252,211,77,.1), rgba(245,158,11,.04)); border: 1px solid rgba(245,158,11,.3); border-radius: 12px; font-size: 14px; color: var(--text-dim); }
  .gold-total-chi, .gold-total-val, .gold-total-pl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
  .gold-total-chi .gt-lab, .gold-total-val .gt-lab, .gold-total-pl .gt-lab { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
  .gold-total-chi b { color: #fff; font-size: 16px; }
  .gold-total-val b { font-size: 16px; }
  .gold-empty { text-align: center; color: var(--text-faint); padding: 22px; }

  /* Tiền gửi ngân hàng */
  .dep-add { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px; background: linear-gradient(145deg, rgba(59,130,246,.12), rgba(16,185,129,.05)); border: 1px solid rgba(79,148,255,.22); border-radius: 14px; margin-bottom: 18px; }
  .dep-add .stock-field { flex: 1 1 170px; }
  .dep-add-btn { background: linear-gradient(135deg, #3b82f6, #10b981); color: #fff; border: none; padding: 11px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 14px rgba(37,99,235,.35); transition: transform .15s, box-shadow .15s; }
  .dep-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.5); }
  .dep-wrap { overflow-x: auto; }
  .dep-bank { font-weight: 800; color: #fff; }
  .dep-date { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
  .dep-term { color: #93c5fd; font-weight: 700; white-space: nowrap; }
  .dep-maturity-hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
  .dep-rate { color: #60a5fa; font-weight: 700; }
  .dep-early { color: var(--text-dim); }
  .dep-rec-today { color: #fbbf24; font-weight: 700; white-space: nowrap; }
  .dep-rec-mat { color: #34d399; font-weight: 700; white-space: nowrap; }
  .dep-warn { color: #fb923c; font-weight: 800; }
  .dep-mat { color: #34d399; font-weight: 800; }
  .dep-total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 22px; padding: 14px 18px; background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(16,185,129,.04)); border: 1px solid rgba(79,148,255,.3); border-radius: 12px; font-size: 14px; color: var(--text-dim); }
  .dep-total b { color: #fff; font-size: 15px; }

  /* Thuê bao */
  .sub-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
  .sub-card { background: linear-gradient(145deg, rgba(168,85,247,.14), rgba(88,28,135,.05)); border: 1px solid rgba(192,132,252,.28); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
  .sub-card-icon { font-size: 26px; }
  .sub-card-label { font-size: 11px; color: var(--text-faint); letter-spacing: .4px; }
  .sub-card-val { font-size: 20px; font-weight: 800; color: #fff; margin-top: 3px; }
  .sub-add { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px; background: linear-gradient(145deg, rgba(147,51,234,.12), rgba(249,115,22,.05)); border: 1px solid rgba(167,139,250,.22); border-radius: 14px; margin-bottom: 18px; }
  .sub-add .stock-field { flex: 1 1 165px; }
  .sub-add-btn { background: linear-gradient(135deg, #9333ea, #f59e0b); color: #fff; border: none; padding: 11px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 14px rgba(147,51,234,.35); transition: transform .15s, box-shadow .15s; }
  .sub-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(147,51,234,.5); }
  .sub-name { font-weight: 800; color: #fff; }
  .sub-cat { font-size: 12px; color: var(--text-dim); }
  .sub-amt { color: #c084fc; font-weight: 700; white-space: nowrap; }
  .sub-cycle { font-size: 12px; color: var(--text-dim); }
  .sub-date { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
  .sub-warn { color: #fb923c; font-weight: 800; }
  .sub-overdue { color: #f87171; font-weight: 800; }
  .sub-off { color: var(--text-faint); font-size: 11px; }
  .sub-inactive { opacity: .55; }
  .sub-note-cell { font-size: 12px; color: var(--text-dim); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sub-actions { white-space: nowrap; }
  .sub-actions .stock-note-edit { margin-right: 4px; }
  .sub-total { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 22px; padding: 14px 18px; background: linear-gradient(135deg, rgba(147,51,234,.1), rgba(251,146,60,.04)); border: 1px solid rgba(167,139,250,.3); border-radius: 12px; font-size: 14px; color: var(--text-dim); }
  .sub-total b { color: #fff; font-size: 15px; }
  .sub-year { color: #fbbf24; font-weight: 700; }
  .sl-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0;
  }
  .sl-count #sl-count {
    color: #93c5fd;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .sl-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
  @container (max-width: 1080px) { .sl-summary { grid-template-columns: repeat(3, 1fr); } }
  @container (max-width: 600px) { .sl-summary { grid-template-columns: repeat(2, 1fr); } }
  .sl-card { background: linear-gradient(160deg, rgba(139,92,246,.12), rgba(88,28,135,.05)); border: 1px solid rgba(167,139,250,.22); border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 10px 30px rgba(76,29,149,.08); }
  .sl-card-icon { font-size: 20px; margin-bottom: 4px; }
  .sl-card-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 6px; }
  .sl-card-val { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: #c4b5fd; }
  .sl-chart { width: 100%; height: 271px; margin-bottom: 8px; }
    .sl-late { background: linear-gradient(160deg, rgba(56,189,248,.08), rgba(8,145,178,.03)); border: 1px solid rgba(56,189,248,.22); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
    .sl-late-head { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: #7dd3fc; margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .sl-late-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .sl-late-rate { font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: #38bdf8; line-height: 1; min-width: 89px; }
    .sl-late-bar { flex: 1; min-width: 168px; height: 14px; background: rgba(148,163,184,.15); border-radius: 999px; overflow: hidden; }
    .sl-late-bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width .6s ease; }
    .sl-late-detail { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); white-space: nowrap; }

  /* ===== Sổ sách — cuốn lịch trang trọng ===== */
  .sosach-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
  @container (max-width: 920px) { .sosach-layout { grid-template-columns: 1fr; } }

  .sosach-cal {
    background: linear-gradient(165deg, rgba(66,74,120,.16), rgba(15,20,38,.30));
    border: 1px solid rgba(158,148,224,.22);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 14px 40px rgba(10,14,30,.35);
  }
  .sosach-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .sosach-nav-btn {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(159,146,235,.10); border: 1px solid rgba(169,157,236,.28);
    color: #e6e2ff; font-size: 20px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
  }
  .sosach-nav-btn:hover { background: rgba(161,146,237,.22); border-color: rgba(185,172,255,.5); }
  .sosach-month {
    flex: 1; text-align: center;
    font-family: var(--font-serif); font-size: 19px; font-weight: 700;
    color: #f3efff; letter-spacing: .2px;
  }
  .sosach-today {
    padding: 7px 14px; border-radius: 9px;
    background: rgba(156,146,232,.14); border: 1px solid rgba(174,164,242,.32);
    color: #ddd7ff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
  }
  .sosach-today:hover { background: rgba(173,160,241,.26); }

  .sosach-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
  .sosach-week span {
    text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: #8d86b8; text-transform: uppercase; padding: 4px 0;
  }
  .sosach-week span:last-child { color: #c98ea8; }

  .sosach-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .sosach-day {
    position: relative; min-height: 66px; border-radius: 10px;
    background: rgba(233,230,255,.035);
    border: 1px solid rgba(171,163,226,.14);
    padding: 5px 6px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 3px;
    transition: all .15s;
  }
  .sosach-day:hover { background: rgba(181,169,240,.12); border-color: rgba(198,187,255,.4); }
  .sosach-day.out { opacity: .34; background: rgba(220,218,255,.015); }
  .sosach-day.today { border-color: rgba(253,224,71,.55); box-shadow: 0 0 0 1px rgba(253,224,71,.35), 0 0 14px rgba(234,179,8,.12); }
  .sosach-day.selected {
    background: linear-gradient(160deg, rgba(154,144,233,.24), rgba(95,84,180,.16));
    border-color: rgba(206,196,255,.65);
    box-shadow: 0 0 0 1px rgba(205,195,255,.4), 0 0 18px rgba(183,170,255,.18);
  }
  .sosach-day-num { font-size: 13px; font-weight: 700; color: #ece8ff; line-height: 1; }
  .sosach-day.out .sosach-day-num { color: #9aa0c4; }
  .sosach-day.today .sosach-day-num { color: #fde047; }
  .sosach-day-hol { font-size: 9px; line-height: 1.15; color: #f3b8c2; font-weight: 600; }
  .sosach-day-dots { margin-top: auto; display: flex; gap: 3px; flex-wrap: wrap; min-height: 6px; }
  .ss-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .ss-dot-note { background: #7dd3fc; box-shadow: 0 0 6px rgba(125,211,252,.7); }
  .ss-dot-event { background: #c084fc; box-shadow: 0 0 6px rgba(192,132,252,.7); }
  .ss-dot-reminder { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.7); }
  .ss-dot-holiday { background: #fb7185; box-shadow: 0 0 6px rgba(251,113,133,.7); }

  .sosach-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(182,174,232,.12); }
  .ss-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #a7a3c9; font-weight: 600; }

  .sosach-detail {
    background: linear-gradient(165deg, rgba(73,66,120,.14), rgba(14,18,36,.30));
    border: 1px solid rgba(158,148,224,.22);
    border-radius: 16px; padding: 16px;
    box-shadow: 0 14px 40px rgba(10,14,30,.35);
  }
  .sosach-detail-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(182,174,232,.14); }
  .sosach-detail-date { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: #f3efff; }
  .sosach-detail-holiday { margin-top: 4px; font-size: 12px; color: #f3b8c2; font-weight: 600; }

  .sosach-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
  .sosach-form-row { display: flex; gap: 9px; }
  .sosach-form select, .sosach-form input, .sosach-form textarea {
    background: rgba(10,12,22,.55); color: var(--text); border: 1px solid rgba(163,155,235,.26);
    border-radius: 9px; padding: 9px 12px; font-size: 13px; font-family: var(--font);
    transition: border-color .15s, box-shadow .15s;
  }
  .sosach-form select { flex: 1; }
  .sosach-form input[type=time] { width: 108px; }
  .sosach-form input, .sosach-form textarea { width: 100%; }
  .sosach-form textarea { resize: vertical; }
  .sosach-form ::placeholder { color: rgba(223,220,255,.3); }
  .sosach-form select:focus, .sosach-form input:focus, .sosach-form textarea:focus {
    outline: none; border-color: #a99bff; box-shadow: 0 0 0 3px rgba(150,132,255,.16);
  }
  .sosach-form .btn-primary { align-self: flex-end; }

  /* Ô phân loại sự kiện */
  .ss-type-wrap { flex: 1; position: relative; }
  .ss-type-wrap select {
    appearance: none; -webkit-appearance: none; width: 100%;
    background:
      linear-gradient(45deg, transparent 48%, #a99bff 49%, #a99bff 51%, transparent 52%) calc(100% - 18px) 50%/8px 8px no-repeat,
      rgba(33,29,58,.66);
    padding-right: 34px; cursor: pointer; font-weight: 550; letter-spacing: .2px;
  }
  .ss-type-wrap select:hover { border-color: rgba(178,166,255,.5); }

  /* Time picker tùy chỉnh */
  .ss-time-wrap { position: relative; }
  .ss-time-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, rgba(96,80,168,.95), rgba(56,48,104,.95));
    color: #f5f1ff; border: 1px solid rgba(170,156,255,.45);
    border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 650;
    font-family: var(--font); cursor: pointer; min-width: 128px; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(88,70,160,.25);
    transition: border-color .15s, box-shadow .15s, transform .1s;
  }
  .ss-time-btn:hover { border-color: rgba(186,174,255,.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 12px rgba(102,84,184,.35); }
  .ss-time-btn:active { transform: translateY(1px); }
  .ss-time-btn #ss-time-val { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
  .ss-time-pop {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    background: linear-gradient(165deg, #232042, #171528);
    border: 1px solid rgba(167,154,238,.35); border-radius: 13px; padding: 12px;
    box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(139,126,220,.12);
    gap: 14px;
  }
  .ss-time-wrap.open .ss-time-pop { display: flex; }
  .ss-time-col { display: flex; flex-direction: column; gap: 8px; }
  .ss-time-col-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: #9f96d4; text-transform: uppercase; text-align: center; }
  .ss-time-grid { display: grid; grid-template-columns: repeat(4, 46px); gap: 5px; max-height: 208px; overflow-y: auto; padding-right: 2px; }
  .ss-min-grid { grid-template-columns: repeat(1, 74px); }
  .ss-time-opt {
    background: rgba(122,109,205,.10); color: #ddd7ff; border: 1px solid transparent;
    border-radius: 8px; padding: 8px 0; font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums;
    font-family: var(--font); cursor: pointer; text-align: center;
    transition: background .12s, border-color .12s, color .12s;
  }
  .ss-time-opt:hover { background: rgba(158,142,236,.22); border-color: rgba(189,177,255,.4); color: #fff; }
  .ss-time-opt.active { background: linear-gradient(135deg, #7c5cff, #5f3fe8); color: #fff; border-color: #9d8aff; box-shadow: 0 0 10px rgba(121,89,255,.4); }
  .ss-time-opt.clear { color: #a99fce; font-weight: 560; }
  .ss-time-opt.clear:hover { color: #fff; }
  .ss-time-grid::-webkit-scrollbar { width: 6px; }
  .ss-time-grid::-webkit-scrollbar-thumb { background: rgba(157,143,233,.3); border-radius: 4px; }

  .sosach-list { display: flex; flex-direction: column; gap: 8px; }
  .sosach-empty-list { text-align: center; color: #8d86b8; font-size: 13px; padding: 18px 0; font-style: italic; }
  .sosach-item {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(239,236,255,.025); border: 1px solid rgba(176,168,230,.16);
    border-radius: 11px; padding: 10px 12px; transition: all .15s;
  }
  .sosach-item:hover { background: rgba(243,240,255,.05); border-color: rgba(196,188,250,.3); }
  .sosach-item.done { opacity: .55; }
  .sosach-item.done .sosach-item-title { text-decoration: line-through; }
  .sosach-item-check {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
    border: 1.5px solid rgba(207,199,255,.4); background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent; font-size: 12px; transition: all .15s;
  }
  .sosach-item.done .sosach-item-check { background: #34d399; border-color: #34d399; color: #06231a; }
  .sosach-item-body { flex: 1 1 auto; min-width: 0; }
  .sosach-item-title { font-size: 13px; font-weight: 650; color: #f0ecff; word-break: break-word; }
  .sosach-item-time { font-size: 11px; color: #fbbf24; font-weight: 700; margin-right: 6px; }
  .sosach-item-note { font-size: 12px; color: #a7a3c9; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
  .sosach-item-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
  .sosach-item-tag.note { background: rgba(125,211,252,.16); color: #7dd3fc; border: 1px solid rgba(125,211,252,.3); }
  .sosach-item-tag.event { background: rgba(192,132,252,.16); color: #c084fc; border: 1px solid rgba(192,132,252,.3); }
  .sosach-item-tag.reminder { background: rgba(251,191,36,.16); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
  .sosach-item-actions { flex: 0 0 auto; display: flex; gap: 4px; }
  .sosach-item-btn {
    background: transparent; border: none; cursor: pointer; font-size: 13px;
    opacity: .4; padding: 2px 3px; border-radius: 6px; transition: all .15s;
  }
  .sosach-item-btn:hover { opacity: 1; background: rgba(221,214,255,.1); transform: scale(1.12); }

  /* Sổ sách — chống tràn ngang trên mobile (calendar + form thêm ghi chú) */
  @container (max-width: 850px) {
    .sosach-layout, .sosach-cal, .sosach-detail,
    .sosach-grid, .sosach-week, .sosach-form-row,
    .ss-type-wrap, .ss-time-wrap { min-width: 0; }
    .sosach-day { min-width: 0; }
    .sosach-day-hol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sosach-form select, .sosach-form input, .sosach-form textarea { min-width: 0; }
    .ss-time-btn { min-width: 0; padding: 9px 10px; }
    .sosach-cal, .sosach-detail { padding: 12px; }
  }

  .gold-table-wrap { margin-top: 8px; }
  .gold-table-wrap td { padding: 10px 14px; }
  .gold-buy-cell { color: #34d399; font-weight: 600; white-space: nowrap; }
  .gold-own-pl { font-weight: 600; white-space: nowrap; }
  .gold-total-pl { margin-left: 4px; }
  .gold-sell-cell { color: #fb7185; font-weight: 600; white-space: nowrap; }
  .gold-loading, .gold-error { text-align: center; color: var(--text-faint); padding: 24px 0; }
  .gold-error { color: var(--red); }
  .gold-source { margin-top: 10px; font-size: 12px; color: var(--text-faint); }
  .gold-source a { color: var(--accent); }

  /* ===== Cổ phiếu ===== */
  .stock-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .stock-stat { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(72,110,255,.12), rgba(124,77,255,.06)); border: 1px solid rgba(112,132,255,.22); border-radius: 14px; padding: 16px 18px; transition: transform .18s ease, box-shadow .18s ease; }
  .stock-stat::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 60px at 100% 0%, rgba(139,92,246,.25), transparent); pointer-events: none; }
  .stock-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(82,99,255,.18); }
  .stock-stat-icon { font-size: 20px; margin-bottom: 6px; }
  .stock-stat-label { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; letter-spacing: .3px; }
  .stock-stat-val { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }

  .stock-add { margin-bottom: 22px; padding: 18px; background: linear-gradient(160deg, rgba(127,90,255,.10), rgba(59,130,246,.05)); border: 1px solid rgba(125,110,255,.22); border-radius: 14px; }
  .stock-add-title { font-weight: 700; margin-bottom: 14px; color: var(--accent); font-size: 15px; display: flex; align-items: center; gap: 8px; }
  .stock-add-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
  .stock-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
  .stock-field label { font-size: 12px; color: var(--text-faint); font-weight: 600; }
  .stock-field input { background: rgba(10,12,22,.55); color: var(--text); border: 1px solid rgba(148,163,255,.25); border-radius: 9px; padding: 10px 13px; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
  .stock-field input::placeholder { color: rgba(255,255,255,.28); }
  .stock-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(126,116,255,.15); }

  /* ---------- Droplist đẹp (thuê bao + tiền gửi) ---------- */
  .stock-field select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%;
    background-color: rgba(10,12,22,.55);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    color: var(--text-main);
    border: 1px solid rgba(148,163,255,.28);
    border-radius: 9px;
    padding: 10px 34px 10px 13px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
  }
  .stock-field select:hover { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.13); transform: translateY(-1px); }
  .stock-field select:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.19); }
  .stock-field select option { background: #151826; color: var(--text-main); font-weight: 500; }

  /* Tiền gửi: accent xanh dương/teal */
  .dep-add select {
    border-color: rgba(91,164,255,.34);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(66,153,247,.16), rgba(16,185,129,.07));
  }
  .dep-add select:hover { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.16); }
  .dep-add select:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.22); }

  /* Thuê bao: accent tím/violet */
  .sub-add select {
    border-color: rgba(173,143,252,.34);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(161,103,240,.16), rgba(249,115,22,.07));
  }
  .sub-add select:hover { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.16); }
  .sub-add select:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.22); }
  .stock-field input[type="date"] { cursor: pointer; color-scheme: dark; padding-right: 42px; }
  .stock-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .95; width: 17px; height: 17px;
    filter: invert(0.82) sepia(0.5) saturate(3) hue-rotate(205deg) brightness(1.1);
    transition: transform .15s, opacity .15s;
  }
  .stock-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; transform: scale(1.18); }
  .stock-field input[type="date"]::-webkit-inner-spin-button { display: none; }
  .stock-preview { font-size: 13px; color: var(--text); margin-top: 6px; padding: 6px 10px; background: rgba(83,255,157,.08); border: 1px solid rgba(83,255,157,.25); border-radius: 8px; }
  .stock-preview b { color: var(--accent); }
  .stock-msg { margin-top: 12px; font-size: 13px; font-weight: 600; }
  .stock-msg.ok { color: #4caf50; }
  .stock-msg.err { color: #f44336; }
  .btn-plus { font-weight: 900; }

  .stock-table-wrap { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
  .stock-table-wrap thead th { background: rgba(119,102,255,.10); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); padding: 12px 14px; }
  .stock-table-wrap tbody tr { transition: background .15s; }
  .stock-table-wrap tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
  .stock-table-wrap tbody tr:hover { background: rgba(137,120,255,.08); }
  .stock-table-wrap td { padding: 12px 14px; }
  .stock-row { cursor: pointer; }
  .stock-sym { font-weight: 900; color: #fff; font-size: 15px; letter-spacing: .6px; display: inline-flex; align-items: center; gap: 8px; }
  .stock-sym::before { content: ''; width: 4px; height: 17px; border-radius: 3px; background: linear-gradient(180deg, #8978ff, #4fc3f7); box-shadow: 0 0 8px rgba(137,120,255,.55); }
  .stock-note-cell { font-size: 12px; color: var(--text-dim); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stock-note-empty { color: var(--text-faint); opacity: .5; }
  .stock-note-edit { background: transparent; border: none; cursor: pointer; font-size: 13px; opacity: .45; padding: 2px 3px; border-radius: 6px; transition: all .15s; vertical-align: middle; }
  .stock-note-edit:hover { opacity: 1; background: rgba(251,191,36,.12); transform: scale(1.15); box-shadow: 0 0 8px rgba(251,191,36,.3); }
    .stock-exch { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
  .exch-hose { background: rgba(41,151,255,.18); color: #64b5f6; border: 1px solid rgba(41,151,255,.35); }
  .exch-hnx { background: rgba(42,214,148,.16); color: #4ade80; border: 1px solid rgba(42,214,148,.35); }
  .exch-upcom { background: rgba(168,85,247,.16); color: #c084fc; border: 1px solid rgba(168,85,247,.35); }
  .stock-price { font-weight: 700; font-size: 15px; }
  .stock-change { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 700; }
  .pos { color: #4ade80; }
  .neg { color: #ff6b6b; }
  .pos .stock-change { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.28); }
  .neg .stock-change { background: rgba(244,63,94,.14); border: 1px solid rgba(244,63,94,.28); }
  .stock-pl { font-weight: 800; padding: 3px 10px; border-radius: 8px; display: inline-block; white-space: nowrap; }
  .stock-pl.pos { color: #4ade80; background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.3); }
  .stock-pl.neg { color: #ff6b6b; background: rgba(244,63,94,.14); border: 1px solid rgba(244,63,94,.3); }
  .stock-pl small { font-weight: 600; opacity: .85; }
  .stock-mv { font-weight: 600; }
  .stock-del { background: rgba(244,63,94,.14); border: 1px solid rgba(244,63,94,.45); color: #ff8096; cursor: pointer; font-size: 14px; width: 30px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; line-height: 1; }
  .stock-del:hover { background: rgba(244,63,94,.3); border-color: #ff6b81; transform: scale(1.12); box-shadow: 0 0 12px rgba(244,63,94,.35); }
  .stock-empty, .stock-loading, .stock-error { text-align: center; color: var(--text-faint); padding: 34px 0; font-size: 14px; }
  .stock-error { color: #f44336; }
  .stock-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; justify-content: flex-end; }
  .stock-updated { font-size: 12px; color: var(--text-faint); letter-spacing: .3px; }
  .stock-chart-box { margin-top: 20px; background: linear-gradient(160deg, rgba(53,64,120,.20), rgba(20,22,38,.30)); border: 1px solid rgba(147,130,255,.22); border-radius: 14px; padding: 16px; }
  .stock-note-view { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .stock-note-view-text { flex: 1 1 auto; font-size: 14px; color: var(--text-dim); line-height: 1.6; word-break: break-word; }
  .stock-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 700; color: var(--accent); }
  .btn-close { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text-faint); cursor: pointer; font-size: 14px; width: 28px; height: 28px; border-radius: 8px; transition: all .15s; }
  .btn-close:hover { color: #fff; background: rgba(244,67,54,.2); border-color: rgba(244,67,54,.4); }
  .stock-chart { width: 100%; height: 360px; }

  
  /* ---------- Toast thông báo ---------- */
  .toast-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    background: linear-gradient(160deg, rgba(15,23,42,0.97), rgba(15,23,42,0.9));
    border: 1px solid rgba(148,163,255,0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: toastIn .3s ease;
  }
  .toast.success { border-color: rgba(74,222,128,0.45); }
  .toast.success .toast-icon { color: #4ade80; }
  .toast.error { border-color: rgba(255,107,107,0.5); }
  .toast.error .toast-icon { color: #ff6b6b; }
  .toast.info { border-color: rgba(56,189,248,0.45); }
  .toast.info .toast-icon { color: #38bdf8; }
  .toast-icon { font-size: 18px; }
  @keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
  .toast.out { animation: toastOut .3s ease forwards; }
  @keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
  /* ============================================================
   * REDESIGN OPEN-DESIGN (giữ nguyên font Be Vietnam Pro)
   * Precision fintech: refined dark, restrained accent, disciplined type
   * ============================================================ */
  :root {
    --bg-deep: #060a13;
    --bg-main: #0a101d;
    --bg-card: rgba(17, 25, 40, 0.62);
    --bg-card-solid: #0d1424;
    --glass-border: rgba(148, 163, 184, 0.14);
    --hairline: rgba(255, 255, 255, 0.07);
    --text-main: #f1f5fb;
    --text-dim: #9aa8c0;
    --text-faint: #64748b;
    --cyan: #22d3ee;
    --cyan-glow: rgba(34, 211, 238, 0.32);
    --green: #34d399;
    --red: #fb7185;
    --amber: #fbbf24;
    --violet: #a78bfa;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 34px -14px rgba(0,0,0,0.55);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --chart-tip-bg: rgba(13,21,36,0.95);
    --chart-tip-border: rgba(126,166,224,0.30);
    --chart-tip-text: #eef4ff;
    --chart-tip-sub: #93a7c4;
    --chart-tip-strong: #eef4ff;
    --chart-split: rgba(229,231,235,0.08);
    --chart-axis: #9aa8c0;
  }

  /* Nền tinh tế hơn, bớt neon */
  body {
    background:
      radial-gradient(1100px 660px at 88% -12%, rgba(34,211,238,0.065), transparent 62%),
      radial-gradient(900px 560px at -6% 108%, rgba(167,139,250,0.06), transparent 60%),
      linear-gradient(180deg, #0a101d, #060a13);
  }
  body::before, body::after { opacity: .16; filter: blur(120px); }

  /* Typography discipline */
  .section-title { letter-spacing: 0.085em; }
  .kpi-label { letter-spacing: 0.095em; }
  thead th { letter-spacing: 0.062em; text-transform: uppercase; }
  .app-eyebrow { letter-spacing: 0.30em; }
  .ct-total-label { letter-spacing: 0.09em; }

  /* State coverage: loading / error + retry */
  .ct-empty { animation: none; }
  .ct-error { padding: 34px 0; }
  .ct-err-msg { color: var(--red); margin-bottom: 14px; font-size: 13px; }
  .ct-retry { margin: 0 auto; }

  /* Phân tích danh mục (thêm mới) */
  .ana-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
  .ana-kpi { background: rgba(148,163,184,0.05); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; }
  .ana-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 6px; }
  .ana-value { display: block; font-size: 19px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
  .ana-value.pos { color: var(--green); }
  .ana-value.neg { color: var(--red); }
  .ana-status { font-size: 12px; color: var(--text-faint); margin-top: 8px; }
  @container (max-width: 860px) { .ana-grid { grid-template-columns: repeat(2, 1fr); } }

  /* Buttons — bỏ gradient "trust", dùng solid accent */
  .btn-primary {
    background: #22d3ee;
    color: #04121a;
    border: 1px solid rgba(34,211,238,0.45);
    box-shadow: 0 4px 18px -8px rgba(34,211,238,0.55);
  }
  .btn-primary:hover { background: #38e0f5; filter: none; }
  .btn-primary:active { transform: translateY(1px); }
  .btn { border-radius: var(--radius-md); }

  /* Tab active — solid accent */
  .tab-btn.active {
    color: #04121a;
    background: #22d3ee;
    box-shadow: 0 4px 18px -8px rgba(34,211,238,0.6);
  }
  .tabnav { border-radius: 14px; border-color: var(--hairline); }

  /* Cards — đồng bộ radius + border mượt */
  .kpi-card, .alloc-card, .gold-card, .gold-calc, .ct-total-box, .ct-add-box,
  .table-wrapper, .toolbar, .note, .top-info, .dm-card, .dm-lock-card {
    border-color: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .kpi-card::before { height: 2px; opacity: 0.45; }

  /* Bảng — header phẳng, phân cách mảnh */
  thead th {
    background: rgba(148,163,184,0.055);
    color: var(--text-dim);
    font-weight: 650;
    font-size: 11px;
    border: none;
    border-bottom: 1px solid var(--hairline);
  }
  tbody td {
    border: none;
    border-bottom: 1px solid rgba(148,163,184,0.08);
    background: transparent;
  }
  tbody tr:nth-child(even) td { background: rgba(148,163,184,0.032); }
  tbody tr:hover td { background: rgba(34,211,238,0.055); box-shadow: none; }
  tbody tr:last-child td { border-bottom: none; }

  /* Inputs — focus rõ ràng */
  input, select, textarea {
    border-radius: 10px;
  }
  input:focus, select:focus, textarea:focus {
    border-color: rgba(34,211,238,0.55) !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,0.14) !important;
    outline: none;
  }

  /* Scrollbar — mượt hơn */
  ::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.35);
    border: 2px solid var(--bg-main);
  }
  ::-webkit-scrollbar-thumb:hover { box-shadow: none; }

  /* Focus-visible cho bàn phím */
  :focus-visible {
    outline: 2px solid rgba(34,211,238,0.7);
    outline-offset: 2px;
  }

  /* Tôn trọng prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001s !important;
      scroll-behavior: auto !important;
    }
  }

  /* Mobile: giảm bớt hiệu ứng nặng */
  @container (max-width: 860px) {
    body::before, body::after { display: none; }
    .kpi-card { border-radius: var(--radius-md); }
  }

  /* ============================================================
     THEME SÁNG (light) — kích hoạt bằng <html data-theme="light">
     ============================================================ */
  html[data-theme="light"] {
    --bg-deep: #e9edf4;
    --bg-main: #f4f7fb;
    --bg-card: rgba(255,255,255,0.78);
    --bg-card-solid: #ffffff;
    --glass-border: rgba(15,23,42,0.10);
    --hairline: rgba(15,23,42,0.10);
    --text-main: #0f172a;
    --text-dim: #475569;
    --text-faint: #64748b;
    --cyan: #0891b2;
    --cyan-glow: rgba(8,145,178,0.16);
    --green: #059669;
    --green-glow: rgba(5,150,105,0.14);
    --red: #dc2626;
    --red-glow: rgba(220,38,38,0.12);
    --violet: #7c3aed;
    --amber: #b45309;
    --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 30px -18px rgba(15,23,42,0.35);
    --chart-tip-bg: rgba(255,255,255,0.97);
    --chart-tip-border: rgba(15,23,42,0.14);
    --chart-tip-text: #0f172a;
    --chart-tip-sub: #475569;
    --chart-tip-strong: #0f172a;
    --chart-split: rgba(15,23,42,0.08);
    --chart-axis: #475569;
    color-scheme: light;
  }
  html[data-theme="light"] body {
    background:
      radial-gradient(1100px 640px at 88% -12%, rgba(8,145,178,0.08), transparent 62%),
      radial-gradient(900px 550px at -6% 108%, rgba(124,58,237,0.07), transparent 60%),
      linear-gradient(180deg, #f4f7fb, #e9edf4);
  }
  html[data-theme="light"] body::before,
  html[data-theme="light"] body::after { opacity: .10; filter: blur(110px); }
  /* Nền cứng dark → sáng */
  html[data-theme="light"] .kpi-card,
  html[data-theme="light"] .dm-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(248,250,252,0.85));
  }
  html[data-theme="light"] .table-wrapper {
    background: rgba(255,255,255,0.7);
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 8px 24px -18px rgba(15,23,42,0.3);
  }
  html[data-theme="light"] .alloc-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(240,246,252,0.85));
  }
  html[data-theme="light"] .kpi-card.kpi-survive {
    background: linear-gradient(160deg, rgba(254,243,199,0.65), rgba(248,250,252,0.85));
  }
  html[data-theme="light"] .mobile-tabs {
    background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(248,250,252,0.85));
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 6px 20px -16px rgba(15,23,42,0.3);
  }
  html[data-theme="light"] .bottom-nav {
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(236,241,248,0.98));
    border-top-color: rgba(15,23,42,0.10);
    box-shadow: 0 -8px 24px -18px rgba(15,23,42,0.3);
  }
  html[data-theme="light"] .bn-item:not(:last-child) {
    border-right-color: rgba(15,23,42,0.14);
  }
  html[data-theme="light"] .bn-item.active:not(:last-child) {
    border-right-color: rgba(15,23,42,0.30);
  }
  html[data-theme="light"] .main-tab-container {
    border-color: rgba(147,197,253,0.55);
    background: rgba(239,246,255,0.6);
    box-shadow: 0 0 0 1px rgba(191,219,254,0.6), 0 14px 36px -18px rgba(30,64,175,0.18);
  }
  html[data-theme="light"] .main-tab-head {
    background: linear-gradient(135deg, rgba(186,230,253,0.7), rgba(233,213,255,0.5));
  }
  html[data-theme="light"] .main-tab-title { color: #0f172a; text-shadow: none; }
  html[data-theme="light"] .main-tab-switch {
    color: #0369a1; background: rgba(190,227,248,0.6); border-color: rgba(56,189,248,0.4);
  }
  html[data-theme="light"] .main-tab-head:hover .main-tab-switch { background: rgba(176,216,242,0.7); color: #075985; }
  html[data-theme="light"] .header-lock {
    border-color: rgba(156,163,175,0.4); background: rgba(241,245,249,0.7);
  }
  html[data-theme="light"] .header-lock:hover { border-color: rgba(220,38,38,0.5); background: rgba(254,226,226,0.6); }
  /* Nút chuyển theme — nổi bật nhẹ, phân biệt với nút khóa */
  .header-theme {
    border-color: rgba(125,211,252,0.4);
    background: rgba(56,189,248,0.14);
    color: var(--cyan);
  }
  .header-theme:hover { background: rgba(56,189,248,0.26); transform: translateY(-1px); }
  html[data-theme="light"] .header-theme {
    border-color: rgba(129,140,248,0.45);
    background: rgba(165,180,252,0.22);
    color: #4338ca;
  }
  html[data-theme="light"] .header-theme:hover { background: rgba(165,180,252,0.34); }
  html[data-theme="light"] .app-logo {
    background: linear-gradient(135deg, rgba(34,211,238,0.25), rgba(167,139,250,0.2));
    border-color: rgba(56,189,248,0.35);
    box-shadow: 0 6px 20px rgba(8,145,178,0.12);
  }
  /* Bảng + input — header bảng trong light: nền sáng đặc, ép thắng mọi độ ưu tiên */
  html[data-theme="light"] thead th {
    background: rgba(241,245,249,0.98) !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,0.12) !important;
  }
  html[data-theme="light"] tbody td { border-bottom: 1px solid rgba(15,23,42,0.08); }
  html[data-theme="light"] tbody tr:nth-child(even) td { background: rgba(15,23,42,0.025); }
  html[data-theme="light"] tbody tr:hover td { background: rgba(8,145,178,0.06); }
  /* Tiêu đề mỗi phần (vd "PHÂN TÍCH CHI TIÊU") — bỏ nền navy tối, sang nền sáng */
  html[data-theme="light"] .section-title {
    background: linear-gradient(120deg, rgba(239,246,255,0.95), rgba(224,242,254,0.9));
    color: #0f172a;
    border-color: rgba(15,23,42,0.10);
  }
  /* Lịch Sổ sách — chuyển chữ/ngày sang tối để đọc được trên nền sáng */
  html[data-theme="light"] .sosach-cal,
  html[data-theme="light"] .sosach-detail {
    background: linear-gradient(165deg, rgba(247,250,255,0.95), rgba(237,242,252,0.9));
    border-color: rgba(91,33,182,0.16);
    box-shadow: 0 14px 40px -20px rgba(49,46,129,0.25);
  }
  html[data-theme="light"] .sosach-nav-btn { color: #4338ca; background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.28); }
  html[data-theme="light"] .sosach-nav-btn:hover { background: rgba(99,102,241,0.18); }
  html[data-theme="light"] .sosach-month { color: #312e81; }
  html[data-theme="light"] .sosach-today { color: #4338ca; background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.32); }
  html[data-theme="light"] .sosach-today:hover { background: rgba(99,102,241,0.2); }
  html[data-theme="light"] .sosach-week span { color: #6b7280; }
  html[data-theme="light"] .sosach-week span:last-child { color: #be185d; }
  html[data-theme="light"] .sosach-day { background: rgba(255,255,255,0.55); border-color: rgba(107,114,128,0.18); }
  html[data-theme="light"] .sosach-day:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); }
  html[data-theme="light"] .sosach-day.out { opacity: .45; background: rgba(255,255,255,0.3); }
  html[data-theme="light"] .sosach-day-num { color: #1e293b; }
  html[data-theme="light"] .sosach-day.out .sosach-day-num { color: #94a3b8; }
  html[data-theme="light"] .sosach-day.today .sosach-day-num { color: #b45309; }
  html[data-theme="light"] .sosach-day-hol { color: #be185d; }
  html[data-theme="light"] .sosach-detail-date { color: #312e81; }
  html[data-theme="light"] .sosach-detail-holiday { color: #be185d; }
  html[data-theme="light"] .ss-leg { color: #64748b; }
  html[data-theme="light"] .sosach-legend { border-top-color: rgba(93,88,150,0.16); }
  html[data-theme="light"] .sosach-detail-head { border-bottom-color: rgba(93,88,150,0.16); }
  html[data-theme="light"] .sosach-form ::placeholder { color: rgba(71,85,105,0.5); }
  /* Danh sách chi tiết Sổ sách — chữ tối trên nền sáng */
  html[data-theme="light"] .sosach-empty-list { color: #64748b; }
  html[data-theme="light"] .sosach-item { background: rgba(255,255,255,0.55); border-color: rgba(107,114,128,0.18); }
  html[data-theme="light"] .sosach-item:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); }
  html[data-theme="light"] .sosach-item-title { color: #1e293b; }
  html[data-theme="light"] .sosach-item-time { color: #b45309; }
  html[data-theme="light"] .sosach-item-note { color: #475569; }
  html[data-theme="light"] .sosach-item-tag.note { color: #0284c7; background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); }
  html[data-theme="light"] .sosach-item-tag.event { color: #7c3aed; background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.3); }
  html[data-theme="light"] .sosach-item-tag.reminder { color: #b45309; background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.35); }
  html[data-theme="light"] .sosach-item-check { border-color: rgba(100,116,139,0.5); }
  html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color-scheme: light; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.3); border-color: #f4f7fb; }
  /* Chart tooltip dùng biến theme */
  html[data-theme="light"] .ct-toolbar select { color-scheme: light; }
  /* Light: bỏ hiệu ứng kính (glass) + ép màu chữ tối để dễ đọc */
  html[data-theme="light"] *, html[data-theme="light"] *::before, html[data-theme="light"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="light"] .dm-lock-title,
  html[data-theme="light"] .dm-title,
  html[data-theme="light"] .dm-device-name,
  html[data-theme="light"] td.sp { color: #0f172a; }
  html[data-theme="light"] .dm-refresh { color: #334155; }
  html[data-theme="light"] .dm-theme-toggle { color: #4338ca; }

/* ============ ÉP GIAO DIỆN MOBILE 414px (bỏ PC) ============ */
html[data-force-mobile] { background: #0b0e1a; }
html[data-force-mobile] body {
  width: 420px;               /* 414 nội dung + 2px padding mỗi bên */
  max-width: 100vw;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 0 75px rgba(0,0,0,0.6);
}
/* Các phần tử fixed bám theo cột mobile thay vì toàn màn hình */
html[data-force-mobile] .bottom-nav,
html[data-force-mobile] .global-lock {
  left: 50%; right: auto;
  width: 420px;
  max-width: 100vw;
  transform: translateX(-50%);
}
html[data-force-mobile] .toast-wrap {
  left: 50%; right: auto;
  transform: translateX(-50%);
  width: min(400px, 84vw);
}