:root{
    --bg:#0d0c0b;
    --panel:#171513;
    --panel-2:#1e1b17;
    --border:#302c27;
    --text:#f7f0e8;
    --muted:#b8ada2;
    --muted-2:#83766c;
    --gold:#ff8a3d;
    --gold-2:#ff3d5a;
    --green:#3ee6a8;
    --red:#ff6b6b;
    --lime:#c4f542;
    --trend-line:#ff8a3d;
    --accent-grad: linear-gradient(120deg, #ffb347 0%, #ff6a3d 50%, #e0203d 100%);
    --ease: cubic-bezier(.4,0,.2,1);
    --sidebar-bg:#100f0d;
    --hover-bg:#221f1c;
    --pill-bg:#221f1c;
    --menu-hover:#201d1a;
    --overlay:rgba(10,5,2,0.75);
    --tour-overlay:rgba(20,14,9,0.45);
    --scheme-panel-base:#120904;
    --scheme-panel-hero:#1c0f06;
    --scheme-panel-dim:#0c0705;
    --scheme-sidebar-base:#0c0704;
    --scheme-body-base:linear-gradient(135deg, #16130f 0%, #100e0b 35%, #0a0908 65%, #050403 100%);

    /* ===== HỆ THỐNG SIZE CHỮ TIÊU ĐỀ (đồng bộ toàn app) ===== */
    --fs-title-page:18px;
    --fs-title-lg:15px;
    --fs-title-md:13px;
    --fs-title-sm:11.5px;

    /* ===== HỆ THỐNG SHADOW (đồng bộ toàn app) ===== */
    --shadow-xs:0 1px 4px rgba(0,0,0,0.18);        /* tab/segment active state */
    --shadow-card:0 4px 16px rgba(0,0,0,0.25);     /* card, stat-card, pro-card, support-card, topbar */
    --shadow-popover:0 10px 30px rgba(0,0,0,0.35); /* tooltip, mini dropdown, search expanded */
    --shadow-modal:0 20px 50px rgba(0,0,0,0.5);    /* modal, context menu, big dropdown, tour card */

    /* ===== HỆ THỐNG KHOẢNG CÁCH (đồng bộ toàn app) ===== */
    --space-title-page-gap:16px;  /* tiêu đề trang -> nội dung bên dưới (.section-head) */
    --space-title-sub-gap:10px;   /* tiêu đề phụ -> nội dung (.section-title--sub) */
    --space-title-label-gap:6px;  /* nhãn nhỏ -> nội dung (.section-title--label) */
    --space-card-gap:18px;        /* khoảng cách dọc giữa card với card */
    --chart-grid-line: var(--border); /* màu đường kẻ lưới ngang trong chart (SVG) */
  }
  /* Tablet / iPad */
  @media (min-width:641px) and (max-width:1024px){
    :root{
      --fs-title-page:16px;
      --fs-title-lg:14px;
      --fs-title-md:12.5px;
      --fs-title-sm:11px;
    }
  }
  /* Mobile */
  @media (max-width:640px){
    :root{
      --fs-title-page:15px;
      --fs-title-lg:13px;
      --fs-title-md:12px;
      --fs-title-sm:10.5px;
    }
  }
  html[data-theme="light"]{
    --bg:#ffffff;
    --panel:#ffffff;
    --panel-2:#f0f0f6;
    --border:#e2e2ec;
    --text:#16161f;
    --muted:#5b5b70;
    --muted-2:#8b8b9e;
    --gold:#e8710b;
    --gold-2:#c8580a;
    --green:#12a876;
    --red:#e0335f;
    --lime:#7ea90c;
    --trend-line:#e0a800;
    --sidebar-bg:#f5f5f7;
    --hover-bg:#efeff6;
    --pill-bg:#eeeef5;
    --menu-hover:#f1f1f8;
    --overlay:rgba(30,30,45,0.45);
    --scheme-panel-base:#ffffff;
    --scheme-panel-hero:#fff6ec;
    --scheme-panel-dim:#f7f6f3;
    --scheme-sidebar-base:#ffffff;
    --scheme-body-base:var(--bg);
    --chart-grid-line:#ffffff;
  }
  html[data-theme="light"]{ background:var(--bg); }
  html[data-theme="light"] body{
    background: var(--bg);
  }
  html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#d6d6e4;}
  html[data-theme="light"] ::selection{background:var(--gold); color:#fff;}
  html[data-theme="light"] .brand-mark,
  html[data-theme="light"] .avatar,
  html[data-theme="light"] .avatar-big,
  html[data-theme="light"] .btn-primary,
  html[data-theme="light"] .filter-btn.active,
  html[data-theme="light"] .pro-badge,
  html[data-theme="light"] .calc-tab.active,
  html[data-theme="light"] .pro-card.featured .pro-btn{color:#ffffff;}
  html[data-theme="light"] .copy-btn{color:#ffffff;}

  /* ===== BẢNG MÀU GIAO DIỆN (chọn ở trang Cài đặt, dùng cho cả Free & Pro) ===== */
  /* Cam Đỏ Gradient: dùng luôn giá trị mặc định ở :root, không cần override */

  /* Tím - Đỏ (Gốc ban đầu) */
  html[data-color-scheme="violet"]{
    --gold:#a78bfa; --gold-2:#7c5cf0;
    --accent-grad: linear-gradient(135deg,#a78bfa 0%, #ff2f6e 100%);
    --trend-line:#c9a8ff;
  }
  html[data-theme="light"][data-color-scheme="violet"]{ --gold:#7c5cf0; --gold-2:#6a45e6; }
  html:not([data-theme="light"])[data-color-scheme="violet"]{
    --bg:#0a0a0a; --panel:#151515; --panel-2:#1b1b1b; --border:#2a2a2a;
    --muted:#a3a3a3; --muted-2:#6b6b6b; --sidebar-bg:#0c0c0c; --hover-bg:#1c1c1c;
    --pill-bg:#202020; --menu-hover:#1e1e1e;
  }

  /* Xanh Lá Đậm Dần Gradient */
  html[data-color-scheme="green"]{
    --gold:#4ade80; --gold-2:#0f7a3c;
    --accent-grad: linear-gradient(120deg, #86efac 0%, #22c55e 50%, #065f34 100%);
    --trend-line:#4ade80;
  }
  html[data-theme="light"][data-color-scheme="green"]{ --gold:#16a34a; --gold-2:#0f7a3c; }
  html:not([data-theme="light"])[data-color-scheme="green"]{
    --bg:#0a0b0a; --panel:#131513; --panel-2:#191c1a; --border:#2a2e2b;
    --muted:#a8afac; --muted-2:#737a76; --sidebar-bg:#0c0d0c; --hover-bg:#1a1c1a;
    --pill-bg:#1a1c1a; --menu-hover:#181b19;
  }

  /* ===== Base heading scale ===== */
  h1{font-family:'Manrope',sans-serif; font-size:var(--fs-title-page); font-weight:700; color:var(--text); line-height:1.3;}
  h2{font-family:'Manrope',sans-serif; font-size:var(--fs-title-lg); font-weight:700; color:var(--text); line-height:1.3;}
  h3{font-family:'Manrope',sans-serif; font-size:var(--fs-title-md); font-weight:700; color:var(--text); line-height:1.3;}
  h4{font-family:'Manrope',sans-serif; font-size:var(--fs-title-sm); font-weight:700; color:var(--text); line-height:1.3;}

  .theme-toggle{
    width:38px; height:38px; border-radius:10px; background:var(--panel);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    color:var(--muted); cursor:pointer; position:relative; flex-shrink:0;
    transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .theme-toggle svg{width:17px; height:17px;}
  .theme-toggle .icon-sun{display:none;}
  html[data-theme="light"] .theme-toggle .icon-moon{display:none;}
  html[data-theme="light"] .theme-toggle .icon-sun{display:block;}
  .theme-toggle:hover{
    background:var(--panel-2);
    border-color:color-mix(in srgb, var(--gold) 40%, var(--border));
    color:var(--gold);
    transform:translateY(-1px);
  }

  /* Nút "Nâng cấp" trên topbar (chỉ hiện với người dùng gói Free) */
  .topbar-upgrade-btn{
    display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:11px; border:none;
    background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff; font-size:13.5px; font-weight:700;
    cursor:pointer; white-space:nowrap; box-shadow:0 4px 14px color-mix(in srgb, var(--gold) 35%, transparent); transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .topbar-upgrade-btn svg{width:15px; height:15px; flex-shrink:0;}
  .topbar-upgrade-btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 45%, transparent);}
  @media(max-width:640px){
    .topbar-upgrade-btn .tub-label{display:none;}
    .topbar-upgrade-btn{padding:9px 11px;}
  }

  /* Đồng bộ màu 2 nút nâng cấp ("Nâng cấp" trên topbar + "Nâng cấp ngay" ở
     trang Pro): nền xanh lá, tự sáng dần lặp lại (hiệu ứng "thở"/shimmer)
     để thu hút sự chú ý mà vẫn nhẹ nhàng, không chớp giật. */
  .btn-upgrade-green{
    background:linear-gradient(120deg, #0e9e57 0%, #22c55e 45%, #6bf0a8 100%);
    background-size:220% 220%;
    color:#ffffff;
    border:none;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(34,197,94,0.32);
    animation:upgradeGreenGlow 3s ease-in-out infinite;
  }
  .btn-upgrade-green svg{color:#ffffff;}
  .btn-upgrade-green:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 16px rgba(34,197,94,0.4);
  }
  @keyframes upgradeGreenGlow{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  @media (prefers-reduced-motion: reduce){
    .btn-upgrade-green{animation:none;}
  }

  /* Nút "Nâng cấp" trên topbar: màu tự đổi theo bảng màu chủ đề đang chọn
     (dùng var(--gold)/var(--gold-2)), vẫn giữ hiệu ứng sáng dần lặp lại. */
  .btn-upgrade-theme{
    background:linear-gradient(120deg, var(--gold-2) 0%, var(--gold) 45%, var(--gold-2) 100%);
    background-size:220% 220%;
    color:#ffffff;
    border:none;
    overflow:hidden;
    box-shadow:0 4px 14px color-mix(in srgb, var(--gold) 35%, transparent);
    animation:upgradeGreenGlow 3s ease-in-out infinite;
  }
  .btn-upgrade-theme svg{color:#ffffff;}
  .btn-upgrade-theme:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 16px color-mix(in srgb, var(--gold) 45%, transparent);
  }
  @media (prefers-reduced-motion: reduce){
    .btn-upgrade-theme{animation:none;}
  }

  /* ===== KHOÁ TÍNH NĂNG CÀI ĐẶT CHO TÀI KHOẢN FREE (chỉ Pro mới dùng được) ===== */
  .settings-lock-wrap{ position:relative; }
  .settings-lock-overlay{ display:none; }
  .settings-lock-wrap.is-locked > *:not(.settings-lock-overlay){ filter:blur(4px); pointer-events:none; user-select:none; }
  /* Miễn trừ card "Mã khoá ứng dụng" khỏi lớp khoá mờ khi tài khoản đang có
     PIN cũ cần đổi/tắt, dù không còn là Pro (xem updatePinStatusUI). */
  .settings-lock-wrap.is-locked > .pin-lock-exempt{ filter:none; pointer-events:auto; user-select:auto; position:relative; z-index:1; }
  .settings-lock-wrap.is-locked .settings-lock-overlay{
    display:flex; align-items:center; justify-content:center;
    position:absolute; inset:0; z-index:60;
    padding:20px 14px;
    pointer-events:none;
    animation:settingsLockFadeIn .18s ease-out;
  }
  .settings-lock-wrap.is-locked .settings-lock-overlay .settings-lock-card{
    pointer-events:auto;
  }
  @keyframes settingsLockFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  .settings-lock-card{
    max-width:420px; width:100%; background:var(--panel); border:1px solid var(--border);
    border-radius:18px; padding:26px 22px; text-align:center;
    box-shadow:var(--shadow-popover);
    max-height:calc(100vh - 40px); overflow-y:auto;
  }
  .settings-lock-icon{
    width:52px; height:52px; border-radius:50%; margin:0 auto 14px;
    background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .settings-lock-icon svg{ width:24px; height:24px; }
  .settings-lock-title{ font-size:var(--fs-title-md); font-weight:800; color:var(--text); margin-bottom:8px; }
  .settings-lock-desc{ font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:18px; }
  .settings-lock-card .btn-primary{ display:inline-flex; align-items:center; gap:7px; margin:0 auto; }
  .settings-lock-card .btn-primary svg{ width:15px; height:15px; }

  /* ===== KHOÁ TOÀN BỘ TRANG KHI CẦN NHẬP PIN (xem script data-pin-locked ở <head>) =====
     Áp dụng ngay từ lần vẽ đầu tiên của trình duyệt (không chờ script chạy xong ở
     cuối trang), nên không còn hiện tượng "chớp" dashboard trước khi nhập đúng PIN. */
  html[data-pin-locked="1"] body > *:not(#appLockOverlay){ display:none !important; }
  html[data-pin-locked="1"] #appLockOverlay{ display:flex !important; }

  /* ===== MÀN HÌNH CHỜ CHUNG (lần đầu mở trên thiết bị, chưa biết PIN có bật hay không) ===== */
  html[data-app-booting="1"] body > *:not(#appBootOverlay){ display:none !important; }
  html[data-app-booting="1"] #appBootOverlay{ display:flex !important; }
  #appBootOverlay{
    display:none; position:fixed; inset:0; z-index:100000; background:var(--bg,#0a0a0f);
    align-items:center; justify-content:center; flex-direction:column;
  }
  #appBootOverlay .boot-icon-wrap{
    position:relative; width:88px; height:88px;
    display:flex; align-items:center; justify-content:center;
  }
  #appBootOverlay .boot-ring{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 0deg, var(--gold,#ff9a4c), #ff2f7e, #8b2fd9, var(--gold,#ff9a4c));
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation:appBootRingSpin 1.4s linear infinite;
  }
  #appBootOverlay .boot-logo{
    width:52px; height:auto; position:relative; z-index:1;
    filter:drop-shadow(0 4px 14px rgba(214,32,124,.35));
    animation:appBootPulse 1.6s ease-in-out infinite;
  }
  #appBootOverlay .boot-text{
    margin-top:16px; font-size:12.5px; font-weight:700; letter-spacing:.02em;
    color:var(--muted,#8b93a1);
  }
  #appBootOverlay .boot-text .dots span{ display:inline-block; animation:appBootDots 1.4s infinite; opacity:0; }
  #appBootOverlay .boot-text .dots span:nth-child(2){ animation-delay:.2s; }
  #appBootOverlay .boot-text .dots span:nth-child(3){ animation-delay:.4s; }
  @keyframes appBootRingSpin{ to{ transform:rotate(360deg); } }
  @keyframes appBootPulse{ 0%,100%{ transform:scale(0.94); } 50%{ transform:scale(1.05); } }
  @keyframes appBootDots{ 0%,80%,100%{ opacity:0; } 40%{ opacity:1; } }
  @media (prefers-reduced-motion: reduce){
    #appBootOverlay .boot-ring, #appBootOverlay .boot-logo, #appBootOverlay .boot-text .dots span{ animation:none; }
  }

  /* ===== APP LOCK (PIN) ===== */
  .pin-input-wrap{ position:relative; }
  .pin-input-wrap input{ width:100%; padding-right:38px !important; box-sizing:border-box; }
  .pin-eye-toggle{ position:absolute; right:11px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--muted-2); display:flex; align-items:center; }
  .pin-eye-toggle svg{ width:17px; height:17px; }
  .pin-eye-toggle:hover{ color:var(--text); }
  #appLockOverlay .pin-dot{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border,#2a323d); background:transparent; transition:.15s; }
  #appLockOverlay .pin-dot.filled{ background:var(--accent,#3ee6a8); border-color:var(--accent,#3ee6a8); }
  #appLockOverlay .pin-dot.shake-err{ background:#ff6b8b; border-color:#ff6b8b; }
  #appLockOverlay .pin-key{ height:56px; border-radius:16px; background:var(--panel-2,#161c24); border:1px solid var(--border,#2a323d); color:var(--text,#fff); font-size:19px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; user-select:none; }
  #appLockOverlay .pin-key:active{ background:var(--panel-3,#1e2530); }
  #appLockOverlay .pin-key.pin-key-empty{ background:transparent; border:none; cursor:default; }
  #appLockOverlay .pin-key.pin-key-wide{ grid-column:span 2; }
  @keyframes pinShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} }
  #appLockDots.shake{ animation:pinShake .4s; }

  /* ===== AI CHATBOT BUBBLE (Groq) ===== */
  #aiChatBubble{
    position:fixed; right:26px; bottom:26px;
    z-index:900; display:flex; flex-direction:column; align-items:flex-end;
    font-family:'Manrope',sans-serif;
  }
  #aiChatToggleBtn{
    width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
    background:var(--accent-grad); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px color-mix(in srgb, var(--gold) 45%, transparent); position:relative;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .35s var(--ease);
  }
  #aiChatToggleBtn:hover{transform:scale(1.07); box-shadow:0 10px 30px color-mix(in srgb, var(--gold) 60%, transparent);}
  #aiChatToggleBtn:active{transform:scale(.95);}
  #aiChatToggleBtn svg{width:20px; height:20px;}
  /* ===== TỰ ĐỘNG LÀM MỜ ICON CHAT AI KHI KHÔNG DÙNG TỚI =====
     Class .idle được JS gắn vào #aiChatBubble sau 1 khoảng thời gian không
     thao tác (không hover/click vào icon, không mở chat). Chỉ làm mờ chính
     icon tròn (#aiChatToggleBtn), không đụng tới khung chat/badge. Rê chuột
     vào lại hoặc mở chat lên là hiện rõ ngay (xem JS gỡ class .idle). */
  #aiChatBubble.idle #aiChatToggleBtn{ opacity:.4; }
  #aiChatBubble.idle #aiChatToggleBtn:hover{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    #aiChatToggleBtn{ transition:none; }
  }
  /* Bỏ hiệu ứng pulse ở icon chat AI (chuyển hiệu ứng này sang nút "Thêm
     nhanh" #quickAddBtn thay vào đó) — giữ nguyên phần tử .ai-pulse trong
     HTML để không phải sửa HTML, nhưng tắt hẳn animation + ẩn đi. */
  #aiChatToggleBtn .ai-pulse{
    display:none;
    position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--gold);
    opacity:0; animation:none;
  }
  @keyframes aiPulse{
    0%{opacity:.55; transform:scale(.9);}
    100%{opacity:0; transform:scale(1.35);}
  }
  #aiChatBadge{
    position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%;
    background:var(--green); border:2px solid var(--bg);
  }
  #aiChatWindow{
    position:absolute; right:0; bottom:calc(100% + 14px); width:370px; max-width:calc(100vw - 40px);
    height:520px; max-height:70vh; background:var(--panel); border:1px solid var(--border);
    border-radius:18px; box-shadow:var(--shadow-modal); display:flex; flex-direction:column;
    overflow:hidden; opacity:0; pointer-events:none; transform:translateY(12px) scale(.97);
    transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  #aiChatWindow.open{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
  .ai-chat-header{
    display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border);
    background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent), color-mix(in srgb, var(--gold) 6%, transparent)); flex-shrink:0;
  }
  .ai-chat-avatar{
    width:34px; height:34px; border-radius:10px; background:var(--accent-grad);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;
  }
  .ai-chat-avatar svg{width:18px; height:18px;}
  .ai-chat-title{font-weight:700; font-size:var(--fs-title-sm); color:var(--text); font-family:'Manrope',sans-serif;}
  .ai-chat-sub{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px;}
  .ai-chat-sub .dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0;}
  .ai-chat-header-actions{margin-left:auto; display:flex; align-items:center; gap:6px;}
  .ai-chat-icon-btn{
    width:28px; height:28px; border-radius:8px; border:none; background:transparent; color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .ai-chat-icon-btn:hover{background:var(--hover-bg); color:var(--text);}

  .ai-chat-icon-btn svg{width:16px; height:16px;}
  .ai-chat-body{flex:1; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:10px; min-height:0;}
  .ai-msg{max-width:86%; font-size:13.3px; line-height:1.5; padding:10px 13px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word;}
  .ai-msg.bot{align-self:flex-start; background:var(--panel-2); color:var(--text); border-bottom-left-radius:4px;}
  .ai-msg.user{align-self:flex-end; background:var(--accent-grad); color:#fff; border-bottom-right-radius:4px;}
  .ai-msg.typing{display:flex; gap:4px; align-items:center; padding:12px 14px;}
  .ai-msg.typing span{width:6px; height:6px; border-radius:50%; background:var(--muted); display:inline-block; animation:aiTyping 1.1s infinite ease-in-out;}
  .ai-msg.typing span:nth-child(2){animation-delay:.15s;}
  .ai-msg.typing span:nth-child(3){animation-delay:.3s;}
  @keyframes aiTyping{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}
  .ai-suggest-row{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px;}
  .ai-suggest-chip{
    font-size:11.5px; padding:6px 11px; border-radius:20px; background:var(--pill-bg); color:var(--muted);
    border:1px solid var(--border); cursor:pointer; white-space:nowrap;
  }
  .ai-suggest-chip:hover{border-color:var(--gold); color:var(--text);}
  .ai-chat-footer{display:flex; align-items:flex-end; gap:8px; padding:12px 12px; border-top:1px solid var(--border); flex-shrink:0;}
  #aiChatInput{
    flex:1; resize:none; border:1px solid var(--border); background:var(--panel-2); color:var(--text);
    border-radius:12px; padding:9px 12px; font-size:13.3px; font-family:'Manrope',sans-serif; max-height:90px;
    outline:none; line-height:1.4;
  }
  #aiChatInput:focus{border-color:var(--gold);}
  #aiChatSendBtn{
    width:36px; height:36px; border-radius:10px; border:none; background:var(--accent-grad); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  #aiChatSendBtn:disabled{opacity:.5; cursor:not-allowed;}
  #aiChatSendBtn svg{width:16px; height:16px;}
  @media (max-width:640px){
    #aiChatBubble{right:14px;}
    #aiChatWindow{width:calc(100vw - 28px); right:-6px;}
  }

  /* ===== POLICY PAGE ===== */
  .policy-wrap{max-width:880px;}
  /* Tab "Chính sách & Bảo mật" / "Điều khoản dịch vụ" trong trang Hỗ trợ */
  .legal-tabs{display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
  .legal-tab-btn{padding:10px 4px; margin-bottom:-1px; font-size:13.5px; font-weight:700; color:var(--muted-2); cursor:pointer; border-bottom:2px solid transparent;}
  .legal-tab-btn:hover{color:var(--text);}
  .legal-tab-btn.active{color:var(--gold); border-bottom-color:var(--gold);}
  .legal-tab-panel{display:none;}
  .legal-tab-panel.active{display:block;}
  .policy-updated{font-size:10.5px; color:var(--muted); opacity:.65; margin-bottom:22px;}
  .policy-toc{
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;
  }
  .policy-toc a{
    font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:20px;
    background:var(--pill-bg); border:1px solid var(--border); color:var(--muted);
  }
  .policy-toc a:hover{border-color:var(--gold); color:var(--text);}
  .policy-section{margin-bottom:22px;}
  .policy-section h3{
    font-family:'Manrope',sans-serif; font-size:16px; font-weight:700; margin-bottom:10px;
    display:flex; align-items:center; gap:10px; color:var(--text);
  }
  .policy-section h3 .policy-num{
    width:26px; height:26px; border-radius:8px; background:var(--accent-grad); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0;
  }
  /* Nội dung văn bản chính sách/điều khoản: giảm 2px size chữ + giảm độ sáng/đậm
     màu đáng kể (opacity thấp) so với mặc định, để không nổi bật quá mức so với
     phần còn lại của app. Dùng opacity thay vì đổi thẳng mã màu để tự thích ứng
     đúng theo cả theme sáng lẫn tối. */
  .policy-section p, .policy-section li{font-size:13.5px; line-height:1.75; color:var(--muted); opacity:.65;}
  .policy-section ul{padding-left:20px; margin-top:6px; display:flex; flex-direction:column; gap:5px;}
  .policy-section strong{color:var(--text); opacity:.75;}
  .policy-contact-card{
    display:flex; flex-wrap:wrap; gap:18px; margin-top:6px;
  }
  .policy-contact-item{font-size:11px; color:var(--muted); opacity:.65; display:flex; align-items:center; gap:8px;}
  .policy-contact-item svg{width:15px; height:15px; color:var(--gold); flex-shrink:0; opacity:.65;}

  /* Nội dung do admin nhập (bảng app_settings) được chèn thẳng bằng innerHTML,
     có thể không mang class .policy-section như trên (admin gõ HTML tự do,
     có/không tự thêm class). Vì vậy áp thẳng lên khung chứa #policyCustomContent /
     #termsCustomContent bằng !important để chắc chắn override, không phụ thuộc
     admin có gắn class gì hay không: giảm 2px cỡ chữ + màu tối/mờ hơn hẳn so với
     mặc định (mặc định kế thừa từ body: ~16px, color:var(--text) sáng). */
  #policyCustomContent, #termsCustomContent,
  #policyCustomContent p, #policyCustomContent li, #policyCustomContent div, #policyCustomContent span, #policyCustomContent a,
  #termsCustomContent p, #termsCustomContent li, #termsCustomContent div, #termsCustomContent span, #termsCustomContent a{
    font-size:13.5px !important; line-height:1.75 !important; color:var(--muted) !important; opacity:.65 !important;
  }
  #policyCustomContent h3, #policyCustomContent h4,
  #termsCustomContent h3, #termsCustomContent h4{
    font-size:14px !important; color:var(--text) !important; opacity:.85 !important; font-weight:700 !important;
  }
  #policyCustomContent strong, #policyCustomContent b,
  #termsCustomContent strong, #termsCustomContent b{
    color:var(--text) !important; opacity:.75 !important;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  html{background:#000000; overflow-x:hidden;}
  body{
    background:#000000;
    color:var(--text);
    font-family:'Manrope',sans-serif;
    font-synthesis: none;
    display:flex;
    min-height:100vh;
    /* Không set overflow-x/overflow-y riêng ở đây nữa: nếu chỉ set overflow-x
       mà bỏ trống overflow-y, trình duyệt sẽ tự đổi overflow-y thành "auto",
       khiến <body> vô tình trở thành 1 scroll container. Khi đó position:fixed
       của .bottom-nav (là con trực tiếp của body) không còn neo ổn định theo
       viewport trên mobile Safari/Chrome nữa (lệch vị trí lúc cuộn nhanh, lúc
       mở bàn phím, lúc thanh địa chỉ ẩn/hiện). overflow-x đã được chuyển lên
       html ở trên để vẫn chặn scroll ngang mà không gây tác dụng phụ này. */
  }
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:#2a2a3d; border-radius:4px;}
  ::selection{background:var(--gold); color:#0a0a0f;}

  a{color:inherit; text-decoration:none;}

  button, .nav-item, .card, .filter-btn, .ghost-btn, .pro-btn, .support-card, .icon-btn, .user-chip, .stat-tile, .stat-tile-colored, input, select, .modal-box, .progress-fill {
    transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
  }
  button{cursor:pointer;}
  button:active, .nav-item:active, .filter-btn:active{ transform: scale(.96); }

  /* SIDEBAR */
  .sidebar{
    width:244px;
    flex-shrink:0;
    background:var(--sidebar-bg);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    padding:28px 20px;
    position:fixed;
    top:0;
    left:0;
    height:100vh;
  }
  .brand{
    display:flex; align-items:center; gap:2px;
    margin-bottom:36px;
    padding:0;
  }
  .brand-mark{
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora',sans-serif; font-weight:700; font-size:18px; color:#0b0d10;
    overflow:hidden; flex-shrink:0;
  }
  .brand-name{font-family:'Sora',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.2px;}
  .brand-sub{font-size:8.5px; color:var(--muted-2); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px;}

  .nav-group{margin-bottom:0;}
  .nav-label{font-size:14.5px; letter-spacing:normal; text-transform:none; color:var(--muted); padding:10px 14px; margin-bottom:6px; font-weight:600;}
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius:14px;
    color:var(--muted); font-size:14.5px; font-weight:600;
    cursor:pointer;
    margin-bottom:6px;
  }
  .nav-item svg{width:18px; height:18px; flex-shrink:0; opacity:0.85;}
  .nav-item:hover{background:var(--hover-bg); color:var(--text);}
  .nav-item.active{
    background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gold) 2%, transparent));
    color:var(--text);
    box-shadow:inset 3px 0 0 var(--gold);
  }
  .nav-item.active svg{opacity:1; color:var(--gold);}
  .nav-item-sm{font-size:14.5px;}
  .nav-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
  .nav-label-toggle:hover{color:var(--text);}
  .nav-label-toggle.open [id$="Chevron"]{transform:rotate(180deg);}

  .sidebar-nav-scroll{flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; scrollbar-width:thin;}
  .sidebar-nav-scroll::-webkit-scrollbar{width:5px;}
  .sidebar-nav-scroll::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
  .sidebar-nav-scroll::-webkit-scrollbar-track{background:transparent;}
  .sidebar-footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--border); flex-shrink:0;}
  .logout{display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; border-radius:10px;}
  .logout:hover{color:var(--red); background:var(--hover-bg);}
  .logout svg{width:18px; height:18px;}

  /* Nút thu nhỏ / mở rộng thanh sidebar */
  .sidebar-collapse-btn{display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; border-radius:10px;}
  .sidebar-collapse-btn:hover{color:var(--text); background:var(--hover-bg);}
  .sidebar-collapse-btn svg{width:18px; height:18px; flex-shrink:0; transition:transform .2s var(--ease);}
  .sidebar-collapse-label{white-space:nowrap; overflow:hidden;}

  .nav-label-inner{display:flex; align-items:center; gap:12px;}
  .nav-label-icon{width:18px; height:18px; flex-shrink:0; opacity:0.85;}
  .nav-label-dash{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:16px; line-height:1; font-weight:700; color:var(--muted-2); flex-shrink:0;}
  .nav-label-flex{display:flex; align-items:center; justify-content:space-between; cursor:pointer;}

  /* Thanh sidebar ở trạng thái thu gọn: chỉ hiện icon, ẩn chữ.
     NGUYÊN TẮC: giữ NGUYÊN padding/gap/justify-content của nav-item, nav-label,
     nút thu gọn, logo... ở CẢ 2 trạng thái (không đổi bất kỳ giá trị layout nào
     bằng !important theo kiểu bật/tắt tức thời) — nhờ vậy vị trí icon (căn theo
     padding-left cố định) không bao giờ nhảy/lệch, và khi mở rộng lại, mọi thứ
     chỉ đơn giản "mọc dần" ra đúng vị trí cũ, không bị vỡ layout hay lộn xộn.
     Phần CHỮ (brand-name/sub, nhãn nav-item, nav-label, label nút thu gọn...)
     được bọc trong 1 span/div riêng, ẩn đi bằng cách co max-width về 0 + opacity
     về 0 + transition cùng thời lượng/easing với việc đổi width của .sidebar,
     nên chữ co lại / hiện ra mượt mà, đồng bộ nhịp với hiệu ứng thu/mở của
     toàn thanh sidebar, thay vì "bật tắt" ngay lập tức. */
  .sidebar{transition:width .2s var(--ease);}
  body.sidebar-collapsed .sidebar{width:84px; padding-left:14px; padding-right:14px;}
  body.sidebar-collapsed .main{margin-left:84px;}
  body.sidebar-collapsed .sticky-top-wrap{left:84px;}

  /* Các khối chữ có thể co giãn mượt: cùng 1 kiểu transition, cùng thời lượng
     với .sidebar để luôn đồng bộ nhịp. overflow:hidden + max-width đảm bảo
     chữ không bao giờ tràn ra ngoài trong lúc đang thu/mở. */
  .brand-text,
  .nav-item-label,
  .nav-label-inner span:not(.nav-label-icon),
  .sidebar-collapse-label,
  .sidebar [id$="Chevron"]{
    display:inline-block; max-width:220px; opacity:1; overflow:hidden;
    white-space:nowrap;
    transition:max-width .2s var(--ease), opacity .15s var(--ease) .05s, margin .2s var(--ease);
  }


  body.sidebar-collapsed .sidebar .brand-text,
  body.sidebar-collapsed .sidebar .nav-item-label,
  body.sidebar-collapsed .sidebar .nav-label-inner span:not(.nav-label-icon),
  body.sidebar-collapsed .sidebar-collapse-label,
  body.sidebar-collapsed .sidebar [id$="Chevron"]{
    max-width:0; opacity:0; margin-left:0;
    transition:max-width .2s var(--ease), opacity .1s var(--ease), margin .2s var(--ease);
  }

  body.sidebar-collapsed .sidebar .brand > div{gap:0;}
  body.sidebar-collapsed .sidebar .sidebar-collapse-btn svg{transform:rotate(180deg);}
  body.sidebar-collapsed .sidebar [id$="CollapseBody"]{display:none !important;}

  /* Popup nổi cạnh icon khi bấm vào nhãn (Đầu tư / Mở tài khoản) lúc sidebar thu gọn */
  .sidebar-flyout{
    position:fixed; z-index:1200; display:none;
    min-width:190px; background:var(--panel, #fff); border:1px solid var(--border);
    border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,0.18);
    padding:8px; opacity:0; transform:translateY(4px);
    transition:opacity .15s var(--ease), transform .15s var(--ease);
  }
  .sidebar-flyout.open{display:block;}
  .sidebar-flyout.show{opacity:1; transform:translateY(0);}
  .sidebar-flyout .nav-item-sm{display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:9px 12px; border-radius:10px; white-space:nowrap; font-size:14px; color:var(--text);}

  /* MAIN */
  .main{flex:1; min-width:0; padding:12px 34px 60px; margin-left:244px; transition:margin-left .2s var(--ease);}
  /* Bọc topbar (chứa thanh tìm kiếm) + thanh chạy thông báo trong 1 khối
     "dính" (sticky) ở đầu trang, để khi cuộn nội dung xuống thì 2 thanh
     này vẫn đứng yên trên cùng, không bị trôi theo. */
  .sticky-top-wrap{
    position:fixed; top:0; left:244px; right:0; z-index:60;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    padding:12px 34px 0;
    transition:left .2s var(--ease);
  }
  /* Chừa đúng khoảng trống bằng chiều cao thật của sticky-top-wrap (đo bằng
     JS, xem hàm syncStickyTopSpacer()) để nội dung không bị 2 thanh fixed
     này đè lên, đồng thời tự thích ứng khi topbar xuống dòng ở màn hẹp,
     panel thông báo/tên dài... thay đổi chiều cao. */
  .main{ padding-top:calc(var(--sticky-top-h, 130px) + 16px); }
  .topbar{display:flex; align-items:center; justify-content:flex-end; margin-bottom:12px; flex-wrap:wrap; gap:16px; position:relative; z-index:2;}
  .top-actions{display:flex; align-items:center; gap:14px;}
  .icon-btn{
    width:38px; height:38px; border-radius:10px; background:var(--panel);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    color:var(--muted); cursor:pointer;
    transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .icon-btn:hover{
    background:var(--panel-2);
    border-color:color-mix(in srgb, var(--gold) 40%, var(--border));
    color:var(--gold);
    transform:translateY(-1px);
  }
  .icon-btn svg{width:17px; height:17px;}
  .user-chip{display:flex; align-items:center; gap:7px; height:38px; padding:3px 10px 3px 4px; background:var(--panel); border:1px solid var(--border); border-radius:30px; cursor:pointer; position:relative; box-sizing:border-box; transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;}
  .user-chip:hover{
    background:var(--panel-2);
    border-color:color-mix(in srgb, var(--gold) 40%, var(--border));
    transform:translateY(-1px);
  }
  .avatar{width:22px; height:22px; border-radius:50%; background:var(--accent-grad); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10px; color:#0b0d10; flex-shrink:0;}
  .user-chip .avatar + div{display:flex; flex-direction:column; gap:3px;}
  .user-chip .name{font-size:11.5px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px;}
  .user-chip .plan{font-size:10px; color:#ff1a3d; font-weight:700; line-height:1; white-space:nowrap;}
  .user-chip .plan.plan-pro{
    display:inline-block;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.4px;
    white-space:nowrap;
    padding:1px 6px;
    margin-top:0;
    border-radius:20px;
    background:var(--accent-grad);
    color:#fff;
    -webkit-background-clip:border-box;
    background-clip:border-box;
  }
  .avatar:empty{background:var(--border);}
  .user-chip .name:empty, .user-chip .plan:empty{
    display:inline-block; min-width:60px; height:0.9em; border-radius:4px;
    background:var(--border); opacity:0.6;
  }
  .user-chip .plan:empty{min-width:40px; height:0.75em;}

  .notif-bell-wrap{position:relative;}
  .notif-bell-wrap .icon-btn{position:relative;}
  /* Hiệu ứng chuông "lắc + sáng lên" (tada) khi có thông báo mới:
     mỗi vòng lặp dài 1s, lặp 3 vòng (~3s), rồi tự dừng lại ở trạng thái bình thường. */
  .notif-bell-wrap.has-unread .icon-btn{
    animation: bellTada 1s ease-in-out 3;
    transform-origin:50% 0%;
  }
  .notif-bell-wrap.has-unread .icon-btn svg{
    animation: bellGlow 1s ease-in-out 3;
  }
  @keyframes bellTada{
    0%{ transform:scale(1) rotate(0deg); }
    10%{ transform:scale(0.9) rotate(-3deg); }
    20%{ transform:scale(1.05) rotate(3deg); }
    30%{ transform:scale(1.05) rotate(-3deg); }
    40%{ transform:scale(1.05) rotate(3deg); }
    50%{ transform:scale(1.05) rotate(-3deg); }
    60%{ transform:scale(1.05) rotate(3deg); }
    70%{ transform:scale(1.05) rotate(-3deg); }
    80%{ transform:scale(1.05) rotate(3deg); }
    90%{ transform:scale(1) rotate(0deg); }
    100%{ transform:scale(1) rotate(0deg); }
  }
  @keyframes bellGlow{
    0%, 100%{
      stroke:var(--text);
      filter:none;
    }
    20%, 80%{
      stroke:var(--gold);
      filter:drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 12px rgba(255,193,7,0.6));
    }
  }
  .notif-badge{
    position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
    border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center; line-height:1; font-family:'Manrope',sans-serif;
    box-shadow:0 0 0 2px var(--panel);
  }
  .notif-bell-wrap.has-unread .notif-badge{
    animation: bellBadgePulse 1s ease-in-out 3;
  }
  @keyframes bellBadgePulse{
    0%, 100%{ box-shadow:0 0 0 2px var(--panel); }
    50%{ box-shadow:0 0 0 2px var(--panel), 0 0 8px 2px var(--red); }
  }
  .notif-panel{
    position:absolute; top:calc(100% + 8px); right:0; width:340px; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:0; box-shadow:var(--shadow-modal);
    opacity:0; pointer-events:none; transform:translateY(-6px); z-index:60;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .notif-panel.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .notif-panel-header{
    display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
    border-bottom:1px solid var(--border); font-size:13.5px; font-weight:800;
  }
  .notif-mark-all{font-size:11.5px; font-weight:700; color:var(--gold); cursor:pointer;}
  .notif-mark-all:hover{color:var(--gold-2);}
  .notif-panel-list{
    max-height:270px; overflow-y:auto; padding:6px;
  }
  .notif-item{
    display:flex; gap:10px; padding:11px 10px; border-radius:10px; cursor:pointer; position:relative;
  }
  .notif-item:hover{background:var(--hover-bg);}
  .notif-item .notif-dot{
    width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; margin-top:5px;
  }
  .notif-item.read .notif-dot{background:transparent;}
  .notif-item .notif-body{flex:1; min-width:0;}
  .notif-item .notif-msg{font-size:13px; font-weight:600; color:var(--text); line-height:1.4; word-break:break-word;}
  .notif-item.read .notif-msg{color:var(--muted); font-weight:500;}
  .notif-item .notif-time{font-size:11px; color:var(--muted-2); margin-top:3px; font-weight:600;}
  .notif-empty{padding:30px 16px; text-align:center; color:var(--muted-2); font-size:13px; font-weight:600;}

  .user-menu{
    position:absolute; top:calc(100% + 8px); right:0; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:8px; min-width:180px; box-shadow:var(--shadow-modal);
    opacity:0; pointer-events:none; transform:translateY(-6px); z-index:50;
  }
  .user-menu.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .user-menu-item{padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:10px;}
  .user-menu-item:hover{background:var(--menu-hover); color:var(--text);}
  .user-menu-item.danger:hover{color:var(--red);}
  .user-menu svg{width:16px; height:16px;}

  /* Ticker */
  .ticker{
    display:flex; gap:0; overflow-x:auto; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:14px 8px; margin-bottom:26px;
  }
  .up{color:var(--green); background:rgba(62,207,142,0.1);}
  .down{color:var(--red); background:rgba(232,97,92,0.1);}

  /* Search box */
  .search-wrap{position:relative; display:flex; align-items:center;}
  .search-wrap svg{position:absolute; left:13px; width:16px; height:16px; color:var(--muted-2); pointer-events:none;}
  .search-wrap input{
    width:230px; background:var(--panel); border:1px solid var(--border); border-radius:12px;
    padding:9px 14px 9px 36px; color:var(--text); font-size:13.5px; font-family:inherit; outline:none;
  }
  .search-wrap input:focus{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);}
  @media (max-width:760px){
    /* iOS tự động zoom cả trang khi input có font-size < 16px lúc focus, nên trên mobile ép về 16px để tránh zoom */
    .search-wrap input{font-size:16px;}
  }
  .search-results{
    position:absolute; top:calc(100% + 8px); left:0; width:340px; max-height:360px; overflow-y:auto;
    background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:8px;
    box-shadow:var(--shadow-modal); z-index:60; display:none;
  }
  .search-results.open{display:block;}
  .search-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--muted-2); font-weight:700; padding:8px 10px 4px;}
  .search-result-item{padding:9px 10px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:10px; font-size:13.5px;}
  .search-result-item:hover{background:var(--menu-hover);}
  .search-result-item .srt-icon{width:26px; height:26px; border-radius:8px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; color:var(--gold);}
  .search-result-item mark{background:color-mix(in srgb, var(--gold) 35%, transparent); color:var(--text); border-radius:3px; padding:0 1px;}
  .search-empty{padding:16px 10px; text-align:center; color:var(--muted-2); font-size:13px;}

  /* Dòng chạy thông báo (thay cho ticker giá TradingView cũ) */
  .ticker-marquee-wrap{
    background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:0; margin-bottom:12px; overflow:hidden;
    position:relative; z-index:1; height:39px; display:flex; align-items:center; box-shadow:var(--shadow-card);
  }
  .ticker-marquee-wrap::before,
  .ticker-marquee-wrap::after{
    content:''; position:absolute; top:0; bottom:0; width:36px; z-index:2; pointer-events:none;
  }
  .ticker-marquee-wrap::before{ left:0; background:linear-gradient(90deg, var(--panel), transparent); }
  .ticker-marquee-wrap::after{ right:0; background:linear-gradient(270deg, var(--panel), transparent); }
  .ticker-marquee-track{
    display:flex; align-items:center; gap:0; white-space:nowrap; will-change:transform;
    animation:tickerMarqueeScroll 90s linear infinite;
    transform:translateZ(0); -webkit-transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  /* Chỉ tạm dừng dòng chạy khi rê chuột thật (desktop). Trên mobile, chạm vào màn
     hình khiến trình duyệt "kẹt" ở trạng thái :hover (không có sự kiện mouseleave
     để gỡ), khiến dòng chữ bị dừng dù không hề bấm giữ — nên chỉ bật hiệu ứng này
     với thiết bị có con trỏ chuột thật (hover:hover và pointer:fine). */
  @media (hover:hover) and (pointer:fine){
    .ticker-marquee-wrap:hover .ticker-marquee-track{ animation-play-state:paused; }
  }
  .ticker-marquee-item{
    display:inline-flex; align-items:center; gap:8px; padding:0 28px; font-size:13.5px; font-weight:600;
    border-right:1px solid var(--border); cursor:default; color:var(--text);
  }
  .ticker-marquee-item .tmk-name{color:var(--gold); font-weight:800;}
  @keyframes tickerMarqueeScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media(max-width:640px){
    .ticker-marquee-item{ font-size:12.5px; padding:0 18px; }
  }

  /* ===== Highlight cho các thông báo "đến hạn" trên dòng chạy ===== */
  .ticker-marquee-item.tmk-urgent{
    background:linear-gradient(90deg, rgba(255,107,139,0.18), rgba(255,107,139,0.05));
    color:var(--red); font-weight:800; border-radius:8px; margin:6px 4px; padding:6px 20px;
    animation:tickerUrgentPulse 1.6s ease-in-out infinite;
  }
  .ticker-marquee-item.tmk-urgent .tmk-name{color:var(--red);}
  .ticker-marquee-item.tmk-warning{
    background:linear-gradient(90deg, rgba(196,245,66,0.18), rgba(196,245,66,0.05));
    color:#8a7d00; font-weight:800; border-radius:8px; margin:6px 4px; padding:6px 20px;
  }
  html[data-theme="dark"] .ticker-marquee-item.tmk-warning{ color:var(--lime); }
  .ticker-marquee-item.tmk-warning .tmk-name{color:inherit;}
  @keyframes tickerUrgentPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,107,139,0.35); }
    50%{ box-shadow:0 0 0 6px rgba(255,107,139,0); }
  }
  @media(max-width:640px){
    .ticker-marquee-item.tmk-urgent, .ticker-marquee-item.tmk-warning{ padding:6px 14px; }
  }

  /* ===== Tin chúc mừng (đăng ký, mốc tài sản, nhập liệu...) trên dòng chạy: nền xanh ===== */
  .ticker-marquee-item.tmk-celebrate{
    background:linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 65%, transparent));
    color:#fff; font-weight:800; border-radius:8px; margin:6px 4px; padding:6px 20px;
    border-right:none; animation:tickerCelebratePulse 1.8s ease-in-out infinite;
  }
  .ticker-marquee-item.tmk-celebrate .tmk-name{color:#fff; text-decoration:underline;}
  @keyframes tickerCelebratePulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(62,207,142,0.45); }
    50%{ box-shadow:0 0 0 7px rgba(62,207,142,0); }
  }
  @media(max-width:640px){
    .ticker-marquee-item.tmk-celebrate{ padding:6px 14px; }
  }

  /* ===== Cảnh báo rủi ro (nợ vay quá cao, ngân sách sắp/đã vượt) trên dòng chạy: nền đỏ ===== */
  .ticker-marquee-item.tmk-danger{
    background:linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 65%, transparent));
    color:#fff; font-weight:800; border-radius:8px; margin:6px 4px; padding:6px 20px;
    border-right:none; animation:tickerDangerPulse 1.6s ease-in-out infinite;
  }
  .ticker-marquee-item.tmk-danger .tmk-name{color:#fff; text-decoration:underline;}
  @keyframes tickerDangerPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,107,139,0.45); }
    50%{ box-shadow:0 0 0 7px rgba(255,107,139,0); }
  }
  @media(max-width:640px){
    .ticker-marquee-item.tmk-danger{ padding:6px 14px; }
  }

  @media(max-width:640px){
    .search-wrap input{width:150px;}
  }

  /* Ô tìm kiếm trên tablet (iPad...): thu về icon giống mobile, chạm vào để mở rộng.
     Áp dụng riêng cho vùng 761px-1024px. Sidebar cũng được thu hẹp lại ở breakpoint
     này (thay vì giữ nguyên 264px như desktop) vì màn hình iPad (~768-820px ngang)
     không còn nhiều chỗ cho phần nội dung chính nếu sidebar quá rộng. */
  @media (min-width:761px) and (max-width:1024px){
    .search-wrap{
      flex:0 0 auto; width:38px; height:38px; border-radius:10px;
      background:var(--panel); border:1px solid var(--border);
      overflow:hidden; transition:width .22s var(--ease);
    }
    .search-wrap svg{left:50%; top:50%; transform:translate(-50%,-50%);}
    .search-wrap input{
      width:0; padding:0; border:none; background:transparent; opacity:0; transition:opacity .15s var(--ease);
    }
    .search-wrap.mobile-expanded{
      width:min(78vw, 320px); position:fixed; top:12px; right:16px; z-index:1001;
      box-shadow:var(--shadow-popover);
      overflow:visible;
    }
    .search-wrap.mobile-expanded svg{left:13px; top:50%; transform:translateY(-50%);}
    .search-wrap.mobile-expanded input{width:100%; padding:9px 14px 9px 36px; opacity:1; font-size:16px;}

    .sidebar{width:185px; padding:22px 14px;}
    .main{margin-left:185px;}
    .sticky-top-wrap{left:185px;}
    .brand{margin-bottom:26px;}
    .brand-mark{width:38px; height:38px; font-size:14px;}
    .nav-item{padding:9px 10px; gap:10px; font-size:13.5px;}
    .nav-item svg{width:17px; height:17px;}
  }


  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-title-page-gap); flex-wrap:wrap; gap:12px;}
  .section-head .eyebrow{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted-2); margin-bottom:6px;}
  .section-title{font-family:'Manrope',sans-serif; font-size:var(--fs-title-page); font-weight:700;}
  .section-title.section-title--sub{font-size:var(--fs-title-lg); margin-bottom:var(--space-title-sub-gap);}
  .section-title.section-title--label{font-size:var(--fs-title-md); margin-bottom:var(--space-title-label-gap);}

  .filters{display:flex; gap:10px;}
  .filter-btn{padding:9px 18px; border-radius:100px; border:1px solid var(--border); background:var(--panel); color:var(--muted); font-size:13px; font-weight:700; cursor:pointer;}
  .filter-btn:hover{border-color:var(--gold); color:var(--text);}
  .filter-btn.active{background:var(--accent-grad); color:#fff; border-color:transparent; box-shadow:0 4px 14px color-mix(in srgb, var(--gold) 35%, transparent);}

  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:30px;}
  .cf-card-title{font-size:var(--fs-title-lg); font-weight:700; color:var(--text);}
  .cf-card-title-row{display:flex; align-items:center; justify-content:space-between;}
  .cf-view-more{font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--muted-2); cursor:pointer;}
  .cf-view-more:hover{color:var(--text);}
  .cf-card-range{font-size:13px; color:var(--muted-2); margin-top:10px;}
  .card:has(.cf-card-amount){ container-type:inline-size; }
  .cf-card-amount{font-size:clamp(12px, 4.5cqi, 16px); font-weight:800; margin-top:6px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; word-break:normal; min-width:0;}
  .cf-card-amount.cf-amount-green{color:var(--green);}
  .cf-card-amount.cf-amount-red{color:var(--red);}
  .cf-card-badge-row{margin:10px 0 18px;}
  .cf-badge{display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:12.5px; padding:4px 10px; border-radius:20px;}
  .cf-badge.up{color:var(--green); background:rgba(62,207,142,0.14);}
  .cf-badge.down{color:var(--red); background:rgba(232,97,92,0.14);}
  .cf-badge-note{color:var(--muted-2); font-weight:500; margin-left:6px;}
  .content-row{display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start;}
  /* Chặn "grid blowout": mặc định grid item có min-width:auto (không tự co
     nhỏ hơn nội dung bên trong), nên bất kỳ khối con nào cần cuộn ngang nội
     bộ (vd #txListContainer + .tx-list-inner min-width:620px) sẽ "bục" ngược
     lên tận .content-row, kéo giãn cả cột ra to hơn màn hình -> bị
     html{overflow-x:hidden} cắt cụt -> #txListContainer không bao giờ thật
     sự chật để cần cuộn, ĐỒNG THỜI kéo lệch/cắt luôn các widget khác nằm
     cùng cột bên dưới. min-width:0 ở đây buộc grid item co đúng theo track
     đã định (1fr / 360px), để phần overflow-x:auto của các khối con tự xử lý
     việc cuộn nội bộ, không lan ra ngoài. */
  .content-row > div{min-width:0;}

  /* Overview: bố cục 2 cột giống hệt trang Mục tiêu (goals-page-layout) — cột
     trái co giãn linh hoạt chiếm phần còn lại, cột phải rộng cố định 450px và
     dính (sticky) khi cuộn, thay vì chia đều 1fr/1fr như trước. Cột trái vẫn
     là nơi chứa 3 widget kéo-thả được (data-col="left"); cột phải giờ là nội
     dung tĩnh (bản sao "Nấc thang tài sản") nên không cần chia bằng track lưới. */
  .overview-grid{display:flex; align-items:flex-start; gap:22px; min-width:0;}
  .overview-col{display:flex; flex-direction:column; gap:22px; min-height:60px; min-width:0;}
  .overview-col[data-col="left"]{flex:1; min-width:0;}
  .overview-col[data-col="right"]{width:450px; flex-shrink:0;}
  .overview-col.drag-over{outline:2px dashed var(--gold); outline-offset:4px; border-radius:16px;}
  .overview-widget{position:relative;}
  .widget-title-link{cursor:pointer; transition:color .15s var(--ease), opacity .15s var(--ease); border-radius:6px;}
  .widget-title-link:hover{opacity:.9;}
  .widget-title-link:hover,
  .widget-title-link:hover *{color:#2ecc71;}
  #overviewGrid.customize-mode .widget-title-link{pointer-events:none; cursor:grab;}
  /* pointer-events:none ở trên bị kế thừa xuống mọi phần tử con, vô tình vô hiệu
     hoá luôn tay cầm kéo-thả (widget-drag-handle) nằm bên trong .widget-title-link
     -> pointerdown không bao giờ bắn ra, kéo-thả không hoạt động. Trả lại pointer-events
     cho riêng tay cầm để nó vẫn nhận được sự kiện chuột/cảm ứng khi đang tuỳ chỉnh. */
  #overviewGrid.customize-mode .widget-title-link .widget-drag-handle{pointer-events:auto;}
  .overview-widget[data-widget-id="assetMini"]{height:320px; min-height:320px; max-height:320px; display:flex; flex-direction:column; gap:10px; overflow-y:auto;}
  .overview-widget[data-widget-id="goals"]{height:auto; min-height:368px; max-height:580px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;}
  /* wg "Thu nhập" / "Chi tiêu": bỏ ép chiều cao cố định — cho widget cao tự do
     theo nội dung (không giới hạn max-height) để SVG biểu đồ đường co giãn
     đúng tỉ lệ viewBox, tránh bị bóp méo chữ số/nhãn trục khi khung quá thấp.
     KHÔNG đổi sang display:flex để không phá vỡ tính toán vị trí của tay cầm
     kéo thả (widget-drag-handle) dùng cho tính năng tuỳ chỉnh bố cục. */
  .overview-widget[data-widget-id="spending"],
  .overview-widget[data-widget-id="income"]{
    height:auto; min-height:320px; max-height:none;
  }
  #spendingChart, #incomeChart{ width:100%; height:auto; max-height:none; display:block; }
  /* wg "Thu nhập / Chi tiêu" (trước là "Phân bổ tài sản"): đồng bộ chiều cao CỐ
     ĐỊNH với wg "Tài sản theo danh mục" (assetMini, 320px) để 2 khung cao bằng
     nhau trên trang tổng quan — không còn resize:vertical/scroll tự do như thiết
     kế donut chart cũ, vì nội dung giờ là 1 biểu đồ đường co giãn theo khung. */
  .overview-widget[data-widget-id="allocation"]{height:320px; min-height:320px; max-height:320px; display:flex; flex-direction:column; overflow:hidden;}
  .overview-widget[data-widget-id="goals"] > *:last-child{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start;}
  .overview-widget[data-widget-id="allocation"] > *:last-child{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center;}
  /* #goalsList tự cuộn riêng bên trong, căn từ trên xuống, không bị khung ngoài
     (justify-content:center cũ) cắt mất phần đầu danh sách. */
  .overview-widget[data-widget-id="goals"] #goalsList{
    max-height:none !important; height:auto; flex:1; min-height:0; overflow:visible;
  }
  #dashIncomeExpenseChart{width:100%;}
  /* Tăng cỡ chữ (nhãn trục, nhãn lưới) của biểu đồ trong wg "Thu nhập / Chi tiêu"
     ở trang Tổng quan cho dễ đọc hơn, không ảnh hưởng tới biểu đồ dùng chung hàm
     groupedBarChartHTML() ở trang Báo cáo (chỉ override text bên trong svg của
     riêng widget này). */
  #dashIncomeExpenseChart svg text{font-size:13px;}
  .asset-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:10px; flex:1; min-height:0;}
  .asset-mini-cell{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:0; cursor:pointer; border-radius:12px; padding:4px; transition:background .15s var(--ease), transform .15s var(--ease);}
  .asset-mini-cell .asset-mini-label{font-size:11px; color:var(--muted-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; transition:color .15s var(--ease);}
  .asset-mini-cell svg{width:100%; flex:1; min-height:0; transition:filter .15s var(--ease), transform .15s var(--ease);}
  /* Số tiền của danh mục: mặc định ẩn, hiện đè lên giữa biểu đồ khi rê chuột lên ô mini
     tương ứng, để người dùng thấy ngay giá trị cụ thể chứ không chỉ có hiệu ứng nền/scale
     như trước đây. */
  .asset-mini-cell .asset-mini-amount{
    position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) scale(.92);
    font-size:11px; font-weight:800; color:var(--text); white-space:nowrap;
    background:color-mix(in srgb, var(--panel) 88%, transparent);
    border:1px solid var(--border); border-radius:8px; padding:3px 8px;
    opacity:0; pointer-events:none; z-index:2;
    box-shadow:0 4px 10px rgba(0,0,0,.18);
    transition:opacity .15s var(--ease), transform .15s var(--ease);
  }
  /* ===== Hiệu ứng rê chuột: tô đậm biểu đồ mini đang hover trong wg "Tài sản
     theo danh mục" (assetMini), đồng bộ với hiệu ứng hover đã có ở wg "Phân bổ
     tài sản" (donutChart). ===== */
  .asset-mini-cell:hover{ background:color-mix(in srgb, var(--gold) 10%, transparent); transform:translateY(-2px); }
  .asset-mini-cell:hover svg{
    transform:scale(1.06);
    filter:brightness(.85);
  }
  .asset-mini-cell:hover .asset-mini-label{ color:var(--text); font-weight:700; }
  .asset-mini-cell:hover .asset-mini-amount{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .overview-widget .widget-drag-handle{
    display:none; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px;
    background:var(--panel-2); border:1px solid var(--border); color:var(--muted-2); cursor:grab; font-size:14px; flex-shrink:0;
    touch-action:none; /* để iPad/điện thoại không cuộn trang khi đang rê tay trên tay cầm kéo thả */
  }
  #overviewGrid.customize-mode .overview-widget{cursor:grab; outline:1px dashed var(--border); outline-offset:3px; border-radius:20px;}
  #overviewGrid.customize-mode .overview-widget .widget-drag-handle{display:flex;}
  #overviewGrid.customize-mode .overview-widget.dragging{opacity:0.4;}
  /* Khi đang kéo bằng cảm ứng, khoá cuộn trang để thao tác kéo mượt hơn trên iPad */
  body.widget-touch-dragging{overflow:hidden; touch-action:none;}
  @media(max-width:1100px){
    .overview-grid{flex-direction:column; align-items:stretch;}
    .overview-col[data-col="right"]{width:100%; position:static; margin-top:14px;}
  }
  @media(max-width:720px){
    .overview-widget .widget-drag-handle{width:34px; height:34px; font-size:16px;}
  }

  .card{
    background:var(--panel);
    border:1px solid var(--border); border-radius:20px; padding:22px; min-width:0;
    box-shadow:var(--shadow-card);
  }
  .overview-widget[data-widget-id="assetMini"],
  .overview-widget[data-widget-id="spending"],
  .overview-widget[data-widget-id="income"],
  .overview-widget[data-widget-id="goals"],
  .overview-widget[data-widget-id="allocation"],
  .overview-widget[data-widget-id="networth"]{
    background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    animation:none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    position:relative; overflow:hidden;
  }
  .overview-widget[data-widget-id="assetMini"]::before,
  .overview-widget[data-widget-id="spending"]::before,
  .overview-widget[data-widget-id="income"]::before,
  .overview-widget[data-widget-id="goals"]::before,
  .overview-widget[data-widget-id="allocation"]::before,
  .overview-widget[data-widget-id="networth"]::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
  }
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"],
  html[data-theme="light"] .overview-widget[data-widget-id="spending"],
  html[data-theme="light"] .overview-widget[data-widget-id="income"],
  html[data-theme="light"] .overview-widget[data-widget-id="goals"],
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"],
  html[data-theme="light"] .overview-widget[data-widget-id="networth"]{
    background: rgba(255,255,255,0.35);
    border:1px solid rgba(255,255,255,0.55);
    box-shadow: 0 8px 28px rgba(20,20,40,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .overview-widget[data-widget-id="assetMini"] .asset-mini-label{
    color:var(--text); opacity:1; text-shadow:0 1px 2px rgba(0,0,0,0.15);
  }
  .overview-widget[data-widget-id="assetMini"] .section-title,
  .overview-widget[data-widget-id="spending"] .section-title,
  .overview-widget[data-widget-id="income"] .section-title,
  .overview-widget[data-widget-id="goals"] .section-title,
  .overview-widget[data-widget-id="allocation"] .section-title,
  .overview-widget[data-widget-id="networth"] .section-title{
    text-shadow:0 1px 2px rgba(0,0,0,0.15);
  }
  /* ===== "Tài sản theo danh mục" (assetMini widget) — kiểu iOS folder mở: trong suốt + blur mạnh + hiệu ứng lồi (convex glass) ===== */
  .overview-widget[data-widget-id="assetMini"],
  .overview-widget[data-widget-id="spending"],
  .overview-widget[data-widget-id="income"],
  .overview-widget[data-widget-id="goals"],
  .overview-widget[data-widget-id="allocation"],
  .overview-widget[data-widget-id="networth"]{
    background:
      radial-gradient(120% 140% at 18% -10%, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.01) 70%),
      rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:26px;
    /* Đã bỏ hẳn backdrop-filter/blur trên cả 6 widget: đây là nguyên nhân
       chính gây giật/lag khi cuộn trang (chi phí blur tăng theo bình phương
       bán kính, nhân với 6 khối cùng lúc). Nền dùng gradient bán trong suốt
       thay cho hiệu ứng kính mờ, vẫn giữ được vẻ "kính" nhưng nhẹ hơn nhiều. */
    box-shadow:
      0 20px 45px rgba(0,0,0,0.35),
      0 2px 8px rgba(0,0,0,0.18),
      inset 0 1.5px 0 rgba(255,255,255,0.55),
      inset 0 -14px 22px -14px rgba(0,0,0,0.30),
      inset 0 0 0 1px rgba(255,255,255,0.05);
    position:relative; overflow:hidden; isolation:isolate;
    /* Vẫn giữ containment để khoanh vùng repaint/reflow trong chính widget,
       tránh trình duyệt tính lại toàn trang khi cuộn. */
    transform: translateZ(0);
    contain: layout paint style;
  }
  /* Rìa sáng viền trên (rim light) mô phỏng ánh sáng bo tròn của kính iOS.
     5 wg dưới đây dùng dải sáng mỏng hơn ở viền trên cùng (12%→5%). */
  .overview-widget[data-widget-id="assetMini"]::before,
  .overview-widget[data-widget-id="spending"]::before,
  .overview-widget[data-widget-id="income"]::before,
  .overview-widget[data-widget-id="goals"]::before,
  .overview-widget[data-widget-id="allocation"]::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:1;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.015) 5%, rgba(255,255,255,0) 14%),
      linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 35%);
    mix-blend-mode:overlay;
    animation:none;
  }
  .overview-widget[data-widget-id="networth"]::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:1;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.015) 12%, rgba(255,255,255,0) 30%),
      linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 35%);
    mix-blend-mode:overlay;
    animation:none; /* lý do giống hệt block phía trên */
  }
  .overview-widget[data-widget-id="assetMini"] > *,
  .overview-widget[data-widget-id="spending"] > *,
  .overview-widget[data-widget-id="income"] > *,
  .overview-widget[data-widget-id="goals"] > *,
  .overview-widget[data-widget-id="allocation"] > *,
  .overview-widget[data-widget-id="networth"] > *{ position:relative; z-index:2; }
  .overview-widget[data-widget-id="assetMini"] .section-title,
  .overview-widget[data-widget-id="assetMini"] .section-title *,
  .overview-widget[data-widget-id="spending"] .section-title,
  .overview-widget[data-widget-id="spending"] .section-title *,
  .overview-widget[data-widget-id="income"] .section-title,
  .overview-widget[data-widget-id="income"] .section-title *,
  .overview-widget[data-widget-id="goals"] .section-title,
  .overview-widget[data-widget-id="goals"] .section-title *,
  .overview-widget[data-widget-id="allocation"] .section-title,
  .overview-widget[data-widget-id="allocation"] .section-title *,
  .overview-widget[data-widget-id="networth"] .section-title,
  .overview-widget[data-widget-id="networth"] .section-title *{
    color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.35);
  }
  .overview-widget[data-widget-id="assetMini"] .asset-mini-label{
    color:#fff; opacity:1; text-shadow:0 1px 2px rgba(0,0,0,0.3);
  }
  .overview-widget[data-widget-id="assetMini"] .asset-mini-cell:hover .asset-mini-label{
    opacity:1; text-shadow:0 1px 3px rgba(0,0,0,0.5);
  }
  .overview-widget[data-widget-id="assetMini"] .widget-drag-handle,
  .overview-widget[data-widget-id="spending"] .widget-drag-handle,
  .overview-widget[data-widget-id="income"] .widget-drag-handle,
  .overview-widget[data-widget-id="goals"] .widget-drag-handle,
  .overview-widget[data-widget-id="allocation"] .widget-drag-handle,
  .overview-widget[data-widget-id="networth"] .widget-drag-handle{
    background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); color:#fff;
  }
  /* ===== Rê chuột vào tiêu đề của 6 wg trang Tổng quan: đổi màu chữ sang đúng
     màu chủ đạo của từng chủ đề (không gạch chân), thay cho hiệu ứng gạch chân
     dùng chung trước đây. Đặt sau khối color:#fff !important ở trên để thắng
     về thứ tự cascade khi cùng có !important. ===== */
  .overview-widget[data-widget-id="assetMini"] .widget-title-link:hover,
  .overview-widget[data-widget-id="assetMini"] .widget-title-link:hover *{ color:#2ecc71; }
  .overview-widget[data-widget-id="spending"] .widget-title-link:hover,
  .overview-widget[data-widget-id="spending"] .widget-title-link:hover *{ color:#2ecc71; }
  .overview-widget[data-widget-id="income"] .widget-title-link:hover,
  .overview-widget[data-widget-id="income"] .widget-title-link:hover *{ color:#2ecc71; }
  .overview-widget[data-widget-id="networth"] .widget-title-link:hover,
  .overview-widget[data-widget-id="networth"] .widget-title-link:hover *{ color:#2ecc71; }
  .overview-widget[data-widget-id="goals"] .widget-title-link:hover,
  .overview-widget[data-widget-id="goals"] .widget-title-link:hover *{ color:#2ecc71; }
  .overview-widget[data-widget-id="allocation"] .widget-title-link:hover,
  .overview-widget[data-widget-id="allocation"] .widget-title-link:hover *{ color:#2ecc71; }
  #overviewGrid.customize-mode .widget-title-link:hover,
  #overviewGrid.customize-mode .widget-title-link:hover *{ color:#fff; }
  /* ===== Light mode: đồng bộ thiết kế "kính mờ" kiểu iOS Control Center của
     widget "Tài sản theo danh mục" (assetMini) cho cả 6 widget trang Tổng
     quan — không dùng backdrop-filter/blur nữa, chỉ dùng lớp gradient bán
     trong suốt để giả lập độ trong của kính. ===== */
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"],
  html[data-theme="light"] .overview-widget[data-widget-id="spending"],
  html[data-theme="light"] .overview-widget[data-widget-id="income"],
  html[data-theme="light"] .overview-widget[data-widget-id="goals"],
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"],
  html[data-theme="light"] .overview-widget[data-widget-id="networth"]{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.20) 60%),
      rgba(190,192,200,0.50);
    border:1px solid rgba(255,255,255,0.75);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.12),
      0 4px 14px rgba(0,0,0,0.08),
      inset 0 1.5px 0 rgba(255,255,255,0.85),
      inset 0 -12px 20px -14px rgba(0,0,0,0.10);
  }
  /* Viền trắng sáng chói, KHÔNG chạy/không animation — sáng không đều: đậm hơn ở
     góc trên-trái và cạnh trên, mờ dần xuống dưới/phải, giống ánh sáng hắt vào
     kính iOS Control Center. Áp dụng cho cả 6 widget trang Tổng quan.
     TRƯỚC ĐÂY rule này chỉ có ở html[data-theme="light"], khiến theme sáng và
     theme tối trông KHÔNG ĐỒNG BỘ (theme tối thiếu hẳn viền sáng lấp lánh này).
     Bỏ giới hạn theme để cả 2 chế độ dùng chung 1 hiệu ứng, đồng bộ với nhau. */
  .overview-widget[data-widget-id="assetMini"]::after,
  .overview-widget[data-widget-id="spending"]::after,
  .overview-widget[data-widget-id="income"]::after,
  .overview-widget[data-widget-id="goals"]::after,
  .overview-widget[data-widget-id="allocation"]::after,
  .overview-widget[data-widget-id="networth"]::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:3;
    padding:1.5px;
    background:conic-gradient(from 200deg at 30% 20%,
      rgba(255,255,255,0.05) 0deg,
      rgba(255,255,255,1) 40deg,
      rgba(255,255,255,0.9) 80deg,
      rgba(255,255,255,0.25) 140deg,
      rgba(255,255,255,0.08) 200deg,
      rgba(255,255,255,0.15) 260deg,
      rgba(255,255,255,0.55) 320deg,
      rgba(255,255,255,0.05) 360deg
    );
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:none; /* tường minh: rule này không được phép quay, dù .card::before phía dưới có animation */
  }
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"]::before,
  html[data-theme="light"] .overview-widget[data-widget-id="spending"]::before,
  html[data-theme="light"] .overview-widget[data-widget-id="income"]::before,
  html[data-theme="light"] .overview-widget[data-widget-id="goals"]::before,
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"]::before,
  html[data-theme="light"] .overview-widget[data-widget-id="networth"]::before{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 8%, rgba(255,255,255,0) 20%),
      linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 40%);
    mix-blend-mode:normal;
  }
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .section-title,
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .section-title *,
  html[data-theme="light"] .overview-widget[data-widget-id="spending"] .section-title,
  html[data-theme="light"] .overview-widget[data-widget-id="spending"] .section-title *,
  html[data-theme="light"] .overview-widget[data-widget-id="income"] .section-title,
  html[data-theme="light"] .overview-widget[data-widget-id="income"] .section-title *,
  html[data-theme="light"] .overview-widget[data-widget-id="goals"] .section-title,
  html[data-theme="light"] .overview-widget[data-widget-id="goals"] .section-title *,
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"] .section-title,
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"] .section-title *,
  html[data-theme="light"] .overview-widget[data-widget-id="networth"] .section-title,
  html[data-theme="light"] .overview-widget[data-widget-id="networth"] .section-title *{
    color:#1a1a24; text-shadow:0 1px 1px rgba(255,255,255,0.6);
  }
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .asset-mini-label{
    color:#2a2a35; opacity:1; font-weight:700;
    text-shadow:0 1px 1px rgba(255,255,255,0.6);
  }
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .asset-mini-cell svg,
  html[data-theme="light"] .overview-widget[data-widget-id="spending"] svg,
  html[data-theme="light"] .overview-widget[data-widget-id="income"] svg,
  html[data-theme="light"] .overview-widget[data-widget-id="goals"] svg,
  html[data-theme="light"] .overview-widget[data-widget-id="networth"] svg{
    filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18)) saturate(1.15) contrast(1.08);
  }
  /* wg "Thu nhập / Chi tiêu" (allocation): KHÔNG áp filter contrast()/saturate()
     trực tiếp lên <svg> như các widget khác, vì svg này bị JS ghi đè thuộc tính
     (opacity/x1/x2/cx/cy...) liên tục mỗi lần rê chuột (xem attachMultiHover) —
     kết hợp filter (buộc trình duyệt raster lại toàn bộ svg mỗi frame) với việc
     mutate DOM liên tục gây ra lỗi vẽ: các sọc thẳng đứng màu đen chạy dọc theo
     đường gióng khi rê chuột (chỉ xảy ra ở light mode vì rule filter này vốn chỉ
     định nghĩa riêng cho light theme). Chuyển filter (nhẹ hơn, bỏ contrast/saturate)
     sang bọc ngoài #dashIncomeExpenseChart thay vì đặt lên chính svg đang bị mutate. */
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"] #dashIncomeExpenseChart{
    filter:drop-shadow(0 1px 3px rgba(0,0,0,0.18));
  }
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .asset-mini-cell:hover svg{
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.22)) saturate(1.3) contrast(1.12) brightness(1.08);
  }
  /* Hiệu ứng đổi màu tiêu đề khi hover cũng cần thắng ở giao diện sáng (light theme) */
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .widget-title-link:hover,
  html[data-theme="light"] .overview-widget[data-widget-id="assetMini"] .widget-title-link:hover *{ color:#2ecc71; }
  html[data-theme="light"] .overview-widget[data-widget-id="spending"] .widget-title-link:hover,
  html[data-theme="light"] .overview-widget[data-widget-id="spending"] .widget-title-link:hover *{ color:#2ecc71; }
  html[data-theme="light"] .overview-widget[data-widget-id="income"] .widget-title-link:hover,
  html[data-theme="light"] .overview-widget[data-widget-id="income"] .widget-title-link:hover *{ color:#2ecc71; }
  html[data-theme="light"] .overview-widget[data-widget-id="networth"] .widget-title-link:hover,
  html[data-theme="light"] .overview-widget[data-widget-id="networth"] .widget-title-link:hover *{ color:#2ecc71; }
  html[data-theme="light"] .overview-widget[data-widget-id="goals"] .widget-title-link:hover,
  html[data-theme="light"] .overview-widget[data-widget-id="goals"] .widget-title-link:hover *{ color:#2ecc71; }
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"] .widget-title-link:hover,
  html[data-theme="light"] .overview-widget[data-widget-id="allocation"] .widget-title-link:hover *{ color:#2ecc71; }
  html[data-theme="light"] #overviewGrid.customize-mode .widget-title-link:hover,
  html[data-theme="light"] #overviewGrid.customize-mode .widget-title-link:hover *{ color:var(--text); }
  @media (max-width:640px){
    .overview-widget[data-widget-id="assetMini"],
    .overview-widget[data-widget-id="networth"]{ border-radius:22px; }
  }

  .overview-widget[data-widget-id="networth"]{
    /* Trước đây dùng overflow-y:auto — nội dung (bar-chart-scroll co giãn vừa
       khít 320px bằng flex) không bao giờ thực sự tràn, nên overflow-y:auto chỉ
       gây ra tác dụng phụ: khi mở tooltip info-tip (position:fixed, bị đổi
       containing block do widget có backdrop-filter), trình duyệt tính phần
       bong bóng tooltip là "nội dung tràn" của widget và tự hiện thanh cuộn dọc.
       Đổi sang overflow:hidden (giống các widget kính mờ khác) để không bao giờ
       phát sinh thanh cuộn không mong muốn này nữa. */
    height:320px; min-height:320px; max-height:320px; display:flex; flex-direction:column; overflow:hidden;
  }
  /* Widget hẹp lại (2 cột trên tablet, cửa sổ hẹp, hoặc xoay ngang/dọc) khiến
     .section-head (tiêu đề + phụ đề "Theo tháng, tính từ dữ liệu tài sản đã
     nhập") bị flex-wrap xuống 2 dòng thay vì 1 dòng như desktop rộng -> phần
     header cao hơn hẳn, đè lên chart bên dưới.
     ĐÃ THỬ cho khung tự giãn chiều cao (height:auto) để tránh đè, nhưng cách đó
     lại phá vỡ việc các widget xếp thành 2 cột luôn thẳng hàng nhau theo hàng
     ngang (widget bên cột trái/phải không còn cùng chiều cao -> nhìn rối mắt).
     -> Đổi hướng xử lý: GIỮ NGUYÊN chiều cao cố định 320px cho mọi widget (đồng
     bộ, thẳng hàng như cũ), và chặn triệt để nguyên nhân gốc là phần phụ đề bị
     wrap: ép phụ đề luôn nằm gọn 1 dòng, cắt bớt bằng "..." (ellipsis) nếu
     không đủ chỗ, thay vì để nó xuống dòng chiếm thêm chiều cao. Nhờ vậy chiều
     cao phần header luôn ổn định ở MỌI kích thước/hướng màn hình, không cần
     đụng tới chiều cao tổng của widget nữa. */
  .overview-widget[data-widget-id="networth"] .section-head{
    flex-wrap:nowrap;
  }
  .overview-widget[data-widget-id="networth"] .section-head > .widget-title-link{
    min-width:0; flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .overview-widget[data-widget-id="networth"] .section-head > .widget-title-link *{
    white-space:nowrap;
  }
  .overview-widget[data-widget-id="networth"] .section-head > div:last-child{
    flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Đã gỡ bỏ hoàn toàn viền chạy/viền xoay (running/rotating border) riêng
     cho widget "Tổng tài sản ròng" theo yêu cầu. Widget này giờ chỉ dùng
     viền tĩnh chung như mọi widget khác, không còn ::after xoay nào nữa. */
  .color-scheme-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  @media(max-width:600px){ .color-scheme-grid{grid-template-columns:1fr;} }
  .color-scheme-opt{
    position:relative; border:1.5px solid var(--border); border-radius:14px; padding:14px; cursor:pointer;
    background:var(--panel-2); transition:border-color .15s var(--ease), transform .15s var(--ease);
  }
  .color-scheme-opt:hover{transform:translateY(-2px);}
  .color-scheme-swatch{width:100%; height:44px; border-radius:10px; margin-bottom:10px;}
  .color-scheme-name{font-size:13px; font-weight:700; color:var(--text);}
  .color-scheme-check{
    position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%;
    background:var(--gold); color:#0a0a0f; font-size:12px; font-weight:800; display:none;
    align-items:center; justify-content:center;
  }
  .color-scheme-opt.active{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);}
  .color-scheme-opt.active .color-scheme-check{display:flex;}
  .card:hover{border-color:color-mix(in srgb, var(--gold) 24%, var(--border));}
  .coin-name{font-size:15px; font-weight:700;}
  .dots{color:var(--muted-2); cursor:pointer; font-size:18px;}

  table{width:100%; border-collapse:collapse;}
  th{text-align:left; font-size:12px; color:var(--muted-2); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:0.5px;}
  td{padding:16px 12px; border-bottom:1px solid var(--border); font-size:14px;}
  tr:last-child td{border-bottom:none;}
  .pct{font-weight:700; padding:3px 9px; border-radius:20px; font-size:12.5px;}

  /* Exchange panel */
  .panel-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
  .panel-title h3{font-size:var(--fs-title-lg); font-weight:700; display:flex; align-items:center; gap:8px;}
  .report-range{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .report-range select{
    background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:9px;
    padding:6px 10px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Manrope',sans-serif;
  }
  .report-range .rr-custom{display:none; align-items:center; gap:6px;}
  .report-range .rr-sep{color:var(--muted-2); font-size:12px;}
  .report-range input[type="date"]{
    background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:9px;
    padding:5px 8px; font-size:12.5px; font-weight:600; font-family:'Manrope',sans-serif; color-scheme: dark;
  }
  html[data-theme="light"] .report-range input[type="date"]{color-scheme: light;}
  .report-range .rr-apply{
    background:var(--accent-grad); color:#fff; border:none; border-radius:9px; padding:6px 12px;
    font-size:12.5px; font-weight:700; cursor:pointer;
  }
  .report-range .rr-apply:hover{opacity:0.9;}
  .report-range-note{font-size:11.5px; color:var(--muted-2); font-weight:600; margin:-12px 0 14px;}

  .export-btn{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
  .export-btn svg{width:14px; height:14px;}

  .hstat-row{display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px;}
  .hstat-row::-webkit-scrollbar{height:6px;}
  .hstat-card{
    min-width:172px; flex:0 0 auto; background:var(--panel-2); border:1px solid var(--border);
    border-radius:14px; padding:16px;
  }
  .hstat-card.hstat-total{
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
    border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  }
  .hstat-icon{font-size:20px; margin-bottom:10px;}
  .hstat-label{font-size:12.5px; color:var(--muted-2); font-weight:700; margin-bottom:6px; white-space:nowrap;}
  .hstat-value{font-family:'Sora',sans-serif; font-size:16px; font-weight:800; margin-bottom:4px; white-space:nowrap;}
  .hstat-sub{font-size:11.5px; color:var(--muted-2); font-weight:600; white-space:nowrap;}
  .mono-ic{width:18px; height:18px; flex-shrink:0; color:var(--muted); opacity:0.9;}
  .btn-primary{width:100%; padding:11px; border:none; border-radius:100px; background:var(--accent-grad); color:#0a0a0f; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 8px 22px color-mix(in srgb, var(--gold) 32%, transparent);}
  .btn-green-primary{background:linear-gradient(120deg, #4ade80 0%, #16a34a 50%, #064e2e 100%); color:#ffffff; box-shadow:0 8px 22px rgba(34,197,94,0.32);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in srgb, var(--gold) 42%, transparent);}
  .btn-primary:active{transform:translateY(0) scale(.98);}

  .stat-card{margin-top:20px;}
  #dashStats .stat-card, #assetsStatGrid .stat-card{margin-top:0;}

  /* generic content panels for other pages */
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
  .stat-tile{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; container-type:inline-size;}
  .stat-tile .label{font-size:15px; color:var(--muted-2); font-weight:600; margin-bottom:10px; white-space:normal; overflow-wrap:break-word;}
  .stat-tile .value{font-family:'Sora',sans-serif; font-size:clamp(12px, 9cqi, 15px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; word-break:normal;}

  /* Tổng quan thu nhập / chi tiêu (Giao dịch): số tiền lớn (18px inline) tự co để luôn nằm 1 dòng */
  .card:has(#ovIncomeTotal), .card:has(#ovExpenseTotal){ container-type:inline-size; }
  #ovIncomeTotal, #ovExpenseTotal{ font-size:clamp(14px, 6.5cqi, 18px) !important; white-space:nowrap; overflow:hidden; text-overflow:clip; }
  .stat-tile .delta{font-size:12px; font-weight:700; margin-top:8px;}

  .page{display:none;}
  /* Chừa 1 khoảng nhỏ 50px giữa mục cuối cùng và chân trang, áp dụng cho MỌI
     trang trong app (không riêng 1 trang nào), để nội dung không dính sát
     mép dưới khi cuộn hết trang. */
  .page.active{padding-bottom:50px;}
  .page.active{display:block; animation:fadeInUp .3s var(--ease) 0s 1 both;}
  @keyframes fadeInUp{
    from{opacity:0;}
    to{opacity:1;}
  }
  @media (prefers-reduced-motion: reduce){
    .page.active{animation:none;}
    *{transition:none !important;}
  }
  .asset-icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;}
  .asset-name{font-weight:700; font-size:14.5px;}
  .asset-sub{font-size:12.5px; color:var(--muted-2); margin-top:2px;}

  /* ===== Bảng "Danh mục tài sản" (dạng bảng nhập liệu trực tiếp, giống trang Ngân sách) ===== */
  .asset-table-wrap{overflow-x:auto;}
  .asset-table-inner{min-width:1005px;}
  .asset-table-head{display:grid; grid-template-columns:0.6fr 0.5fr 175px 185px 190px 60px; align-items:center; padding:10px 14px; background:var(--panel-2); font-weight:700; font-size:12.5px; color:var(--text); gap:8px; min-height:52px; box-sizing:border-box; position:sticky; top:0; z-index:2;}
  .asset-table-head .asset-col-lbl{color:#fff; font-size:12px; letter-spacing:.02em; text-align:left;}
  .asset-table-head .asset-col-sortable{cursor:pointer; user-select:none; transition:color .15s ease; display:block;}
  .asset-table-head .asset-col-sortable:hover{color:var(--brand, #3ecf8e);}
  .asset-table-head .asset-col-sortable .asset-sort-icon{font-size:11px; opacity:.55; line-height:1; margin-left:4px; transition:opacity .15s ease, color .15s ease;}
  .asset-table-head .asset-col-sortable.active .asset-sort-icon{opacity:1; color:var(--brand, #3ecf8e);}
  .asset-table-head .asset-col-sortable.active{color:var(--brand, #3ecf8e);}
  html[data-theme="light"] .asset-table-head .asset-col-sortable:hover,
  html[data-theme="light"] .asset-table-head .asset-col-sortable.active{color:var(--brand, #1f9d63);}
  html[data-theme="light"] .asset-table-head .asset-col-lbl,
  html[data-theme="light"] .asset-table-head > span:first-child{color:#1a1a1a;}
  .asset-table-head > span:first-child{text-align:left;}
  /* #assetList (danh sách dòng) giờ CHỈ là 1 khối nội dung bình thường,
     KHÔNG tự cuộn nữa — vùng cuộn dọc THẬT SỰ đã chuyển ra #assetScroll
     (bọc chung cả head/list/foot, xem giải thích trong index.html) để 3
     phần này luôn dùng chung đúng 1 bề rộng, không lệch cột. */
  #assetScroll{height:390px; overflow-y:auto; overflow-x:hidden;}
  #assetList{overflow:visible;}
  .asset-row{display:grid; grid-template-columns:0.6fr 0.5fr 175px 185px 190px 60px; align-items:start; padding:10px 14px; border-top:1px solid var(--border); gap:8px; min-height:52px; box-sizing:border-box;}
  .asset-row > *{min-width:0;}
  .asset-row:first-child{border-top:none;}
  .asset-row.is-blank{opacity:0.72;}
  .asset-row.is-blank:focus-within{opacity:1;}
  .asset-row-name{display:flex; align-items:flex-start; gap:8px; min-width:0;}
  .asset-row-name .asset-icon{width:28px; height:28px; border-radius:8px; font-size:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .asset-row-name-stack{display:flex; flex-direction:column; min-width:0; flex:1; gap:2px; padding-top:2px;}
  .asset-row-cat-stack{display:flex; flex-direction:column; min-width:0; gap:2px; padding-top:2px;}
  .asset-cell-cost-stack{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding-top:2px;}
  .asset-cell-text{display:block; width:100%; color:var(--text); font-size:13.5px; font-family:inherit; padding:3px 2px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .asset-cell-text.money-input,
  .asset-cell-cost .asset-cell-text,
  .asset-cell-value .asset-cell-text{text-align:left;}
  .asset-cell-text.asset-cell-date-sub{font-size:11px; color:var(--muted-2); padding-top:0;}
  .asset-cell-text.asset-cell-required{font-weight:600;}
  .asset-cell-text.asset-cell-note{font-size:11px; color:var(--muted-2); padding-top:0;}
  .asset-cell-cost .asset-cell-text,
  .asset-cell-value .asset-cell-text{font-weight:400;}
  .asset-cell-text.asset-cell-liab-sub{color:var(--red); font-size:11px; font-weight:400; padding-top:0;}
  .asset-cell-pl{font-size:13.5px; font-weight:700; text-align:left; white-space:nowrap; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box; display:block;}
  .asset-cell-pl-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:4px; justify-self:start; width:100%; min-width:0; max-width:100%; overflow:hidden;}
  .asset-cell-pl-pct{font-size:11px; font-weight:600; color:var(--muted-2); line-height:1.3; text-align:left; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; display:block;}
  .asset-cell-pl-pct.pos{color:var(--green);}
  .asset-cell-pl-pct.neg{color:var(--red);}
  .asset-cell-pl.pos{color:var(--green);}
  .asset-cell-pl.neg{color:var(--red);}
  .asset-cell-pl.neutral{color:var(--muted-2);}
  .asset-row-actions{display:flex; align-items:flex-start; justify-content:center; gap:4px; padding-top:3px;}
  .asset-row-edit,
  .asset-row-del,
  .tx-edit,
  .tx-del,
  .goal-edit,
  .goal-del{cursor:pointer; font-size:14px; line-height:1; padding:4px; border-radius:6px; opacity:0.6; transition:opacity .15s var(--ease), background .15s var(--ease);}
  .asset-row-edit,
  .tx-edit,
  .goal-edit{color:var(--gold);}
  .asset-row-edit:hover,
  .tx-edit:hover,
  .goal-edit:hover{opacity:1; background:color-mix(in srgb, var(--gold) 14%, transparent);}
  .asset-row-del,
  .tx-del,
  .goal-del{color:var(--red);}
  .asset-row-del:hover,
  .tx-del:hover,
  .goal-del:hover{opacity:1; background:color-mix(in srgb, var(--red) 12%, transparent);}
  .tx-edit, .tx-del{flex-shrink:0;}
  #page-assets.numbers-hidden .asset-cell-cost .asset-cell-text,
  #page-assets.numbers-hidden .asset-cell-value .asset-cell-text,
  #page-assets.numbers-hidden .asset-cell-pl,
  #page-assets.numbers-hidden .asset-cell-pl-pct,
  #page-assets.numbers-hidden .asset-table-foot .asset-col-lbl,
  #page-assets.numbers-hidden .asset-table-foot .asset-cell-pl{
    filter:blur(6px); user-select:none; transition:filter .15s var(--ease);
  }
  .asset-table-foot{display:grid; grid-template-columns:0.6fr 0.5fr 175px 185px 190px 60px; align-items:center; padding:10px 14px; border-top:2px solid var(--border); background:var(--panel-2); gap:8px; min-height:52px; box-sizing:border-box; position:sticky; bottom:0; z-index:2;}
  /* ĐÃ BỎ cơ chế bù padding-right (30px cố định rồi tới đo bằng JS
     --asset-scroll-comp) vì không còn cần thiết: head/list/foot giờ nằm
     CHUNG trong #assetScroll nên luôn cùng bề rộng nội dung, tự thẳng
     hàng mà không cần bù trừ gì cả — xem chi tiết trong index.html. */
  .asset-table-foot > *{min-width:0;}
  .asset-foot-lbl{font-weight:700; font-size:12.5px; color:var(--text); text-align:left;}
  .asset-table-foot .asset-col-lbl{font-weight:700; font-size:13.5px; color:var(--text); text-align:left;}

  .pro-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .pro-card{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:28px 24px; position:relative; box-shadow:var(--shadow-card);}
  .pro-card.featured{
    position:relative;
    border:1px solid var(--gold);
    border-radius:18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, var(--panel)), var(--panel));
  }
  .pro-badge{position:absolute; top:-12px; right:24px; background:var(--accent-grad); color:#140d05; font-size:11px; font-weight:800; padding:5px 12px; border-radius:20px;}
  .pro-name{font-size:14px; color:#ff1a3d; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;}
  .pro-card.featured .pro-name{
    display:inline-block;
    font-size:12px;
    padding:3px 12px;
    border-radius:20px;
    background:var(--accent-grad);
    color:#fff;
    -webkit-background-clip:border-box;
    background-clip:border-box;
  }
  .pro-price-original{font-size:14px; color:var(--muted-2); font-weight:600; text-decoration:line-through; margin-bottom:2px;}
  .pro-price{font-family:'Sora',sans-serif; font-size:26px; font-weight:700; margin-bottom:4px;}
  .pro-price span{font-size:14px; color:var(--muted-2); font-weight:500;}
  .pro-list{margin:22px 0; display:flex; flex-direction:column; gap:12px;}
  .pro-list li{list-style:none; display:flex; gap:10px; font-size:13.5px; color:var(--muted);}
  .pro-list li svg{width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:2px;}
  .pro-list li.pro-list-placeholder{color:var(--muted-2); font-style:italic;}
  .pro-btn{width:100%; padding:12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); font-weight:700; cursor:pointer;}
  .pro-card.featured .pro-btn{background:var(--accent-grad); border:none; color:#140d05;}

  .invite-box{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:34px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; box-shadow:var(--shadow-card);}
  .copy-btn{padding:8px 14px; border-radius:8px; background:linear-gradient(120deg, #0e9e57 0%, #22c55e 45%, #6bf0a8 100%); color:#ffffff; border:none; font-weight:800; font-size:12.5px; cursor:pointer;}

  .support-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:28px;}
  .support-card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:24px; cursor:pointer; transition:box-shadow .15s, transform .15s; box-shadow:var(--shadow-card);}
  .support-card:hover{border-color:var(--gold);}
  .support-icon{width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--gold) 12%, transparent); color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .support-icon svg{width:22px; height:22px;}
  .faq-item{padding:18px 4px; border-bottom:1px solid var(--border);}
  .faq-item:last-child{border-bottom:none;}
  .faq-q{font-weight:700; font-size:14.5px; margin-bottom:6px;}
  .faq-a{font-size:13.5px; color:var(--muted); line-height:1.6;}

  .ghost-btn{padding:10px 18px; border-radius:100px; border:1px solid var(--border); background:var(--panel); color:var(--green); font-weight:700; font-size:13px; cursor:pointer;}
  .ghost-btn:hover{border-color:var(--green); color:var(--green); transform:translateY(-1px);}
  .ghost-btn:active{transform:translateY(0) scale(.96);}

  /* ===== Kiểu nút "+ Thêm..." / hành động chính "liquid glass" (kính trong
     suốt, viền sáng, dải cầu vồng mờ ở đáy) dùng chung cho MỌI nút
     .add-btn-glow ở tất cả các trang: + Thêm tài sản, + Thêm thu nhập/chi
     tiêu, + Thêm giao dịch, + Thêm mục tiêu mới, + Đặt ngân sách, Tuỳ chỉnh
     bố cục. Mỗi trang chỉ cần set biến --btn-glow-accent để đổi màu viền/chữ
     khi hover theo đúng màu chủ đề của trang đó (xem các rule set biến bên
     dưới); nếu không set thì mặc định viền sáng trắng trung tính. ===== */
  .add-btn-glow{
    --btn-glow-accent: var(--green);
    position:relative;
    overflow:hidden;
    isolation:isolate;
    border:1px solid rgba(255,255,255,0.55);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.10) 100%);
    backdrop-filter:blur(8px) saturate(1.3);
    -webkit-backdrop-filter:blur(8px) saturate(1.3);
    color:var(--green);
    box-shadow:
      0 8px 24px rgba(0,0,0,0.38),
      inset 0 1.5px 0 rgba(255,255,255,0.75),
      inset 0 -10px 14px -8px rgba(0,0,0,0.20);
    animation:none;
    transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  }
  /* Dải ánh sáng cầu vồng mờ nằm dưới đáy nút, mô phỏng hiệu ứng khúc xạ ánh
     sáng của mẫu ảnh (cam/vàng - xanh lá - tím/xanh dương). */
  .add-btn-glow::before{
    content:"";
    position:absolute;
    left:8%; right:8%; bottom:-55%;
    height:70%;
    border-radius:50%;
    background:linear-gradient(90deg,
      rgba(255,166,64,0.55) 0%,
      rgba(120,230,150,0.50) 35%,
      rgba(140,150,255,0.55) 65%,
      rgba(200,120,255,0.45) 100%);
    filter:blur(10px);
    opacity:0.7;
    pointer-events:none;
    z-index:0;
    transition:opacity .15s var(--ease), transform .15s var(--ease);
  }
  /* Viền sáng mảnh chạy dọc mép trên, mô phỏng rìa kính lồi (rim light). */
  .add-btn-glow::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%);
    mix-blend-mode:overlay;
  }
  .add-btn-glow > *{ position:relative; z-index:2; }
  html[data-theme="light"] .add-btn-glow{
    border-color:rgba(255,255,255,0.85);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 55%, rgba(255,255,255,0.35) 100%);
    box-shadow:
      0 8px 22px rgba(20,20,40,0.22),
      0 2px 8px rgba(100,100,110,0.30),
      inset 0 1.5px 0 rgba(255,255,255,0.9),
      inset 0 -8px 12px -8px rgba(0,0,0,0.10);
    color:var(--green);
  }
  .add-btn-glow:hover{
    border-color:var(--btn-glow-accent);
    color:var(--btn-glow-accent);
    transform:translateY(-1px);
    box-shadow:
      0 12px 30px rgba(0,0,0,0.42),
      inset 0 1.5px 0 rgba(255,255,255,0.85),
      inset 0 -10px 14px -8px rgba(0,0,0,0.22);
  }
  .add-btn-glow:hover::before{ opacity:1; }
  html[data-theme="light"] .add-btn-glow:hover{
    box-shadow:
      0 12px 28px rgba(20,20,40,0.28),
      0 4px 12px rgba(100,100,110,0.34),
      inset 0 1.5px 0 rgba(255,255,255,0.85),
      inset 0 -8px 12px -8px rgba(0,0,0,0.10);
  }

  /* ===== Màu viền/chữ khi hover riêng theo từng trang (đồng bộ với màu chủ
     đề: Tài sản = xanh lá, Thu nhập/Chi tiêu & Giao dịch = vàng cam, Mục
     tiêu = xanh chanh, Ngân sách = xanh lá). Nút "Tuỳ chỉnh bố cục" giữ viền
     sáng trung tính (mặc định ở trên) vì không thuộc nhóm "+ Thêm...". ===== */
  #page-assets .add-btn-glow,
  button.add-btn-glow[onclick*="goToPage('assets')"]{ --btn-glow-accent: var(--green); }
  #page-transactions .add-btn-glow,
  button.add-btn-glow[onclick*="goToPage('transactions')"]{ --btn-glow-accent: var(--green); }
  #page-goals .add-btn-glow{ --btn-glow-accent: var(--green); }
  #page-budget .add-btn-glow{ --btn-glow-accent: var(--green); }

  .stat-tile-colored{border-radius:16px; padding:16px 18px; position:relative; overflow:hidden; border:1px solid var(--border); min-width:0; box-shadow:var(--shadow-card); container-type:inline-size;}
  /* ===== Trang "Lập ngân sách" ===== */
  .budget-page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
  .budget-page-head-left{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .budget-page-head-left .section-title--sub{margin-bottom:0;}
  .budget-month-nav{display:flex; align-items:center; gap:8px;}
  .budget-month-arrow{width:32px; height:32px; border-radius:9px; background:var(--panel); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .budget-month-arrow:hover{background:var(--hover-bg);}
  .budget-month-arrow:disabled{opacity:0.35; cursor:not-allowed; background:var(--panel);}
  .budget-month-arrow:disabled:hover{background:var(--panel);}
  .budget-month-title{font-size:var(--fs-title-md); font-weight:700; color:var(--text); min-width:120px; text-align:center;}
  .budget-left-amount.negative{color:var(--red);}

  .budget-table-card{padding:0; overflow:hidden; width:100%;}
  .budget-page-layout{display:flex; align-items:flex-start; gap:20px;}
  .budget-main-col{flex:1; min-width:0;}
  .budget-side-col{width:320px; flex-shrink:0; position:sticky; top:20px;}
  @media (max-width:1080px){
    .budget-page-layout{flex-direction:column; align-items:stretch;}
    .budget-side-col{width:100%; position:static;}
  }

  /* ===== Widget "Còn lại để lập ngân sách" (cột phải trang Lập ngân sách) ===== */
  .budget-side-widget{padding:20px;}
  .budget-side-hero{
    background:color-mix(in srgb, var(--green) 14%, var(--panel));
    border:1px solid color-mix(in srgb, var(--green) 30%, var(--border));
    border-radius:14px; padding:24px 18px; text-align:center; margin-bottom:18px;
  }
  .budget-side-hero-amount{font-size:18px; font-weight:800; color:var(--green); line-height:1.15;}
  .budget-side-hero-amount.negative{color:var(--red);}
  .budget-side-hero-label{
    font-size:13px; color:var(--green); font-weight:700; margin-top:6px;
    display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .budget-side-hero-amount.negative ~ .budget-side-hero-label{color:var(--red);}
  .budget-side-tabs{
    display:flex; gap:4px; background:var(--pill-bg); border-radius:999px; padding:4px; margin-bottom:20px;
  }
  .budget-side-tab{
    flex:1; border:none; background:transparent; padding:7px 5px; border-radius:999px;
    font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .budget-side-tab:hover{color:var(--text);}
  .budget-side-tab.active{background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs);}
  /* Nút "Thu nhập" / "Chi tiêu" trong phần Lập ngân sách: dùng đúng màu xanh/đỏ
     thống nhất với toàn app (giống các nơi khác như dòng tiền, thu chi...) thay
     vì màu trung tính, để nhận diện nhanh loại ngân sách đang xem. */
  .budget-side-tab[data-tab="income"]:hover{color:var(--green);}
  .budget-side-tab[data-tab="income"].active{background:color-mix(in srgb, var(--green) 16%, var(--panel)); color:var(--green);}
  .budget-side-tab[data-tab="expense"]:hover{color:var(--red);}
  .budget-side-tab[data-tab="expense"].active{background:color-mix(in srgb, var(--red) 16%, var(--panel)); color:var(--red);}
  .tx-tab-card .budget-side-tabs{margin-bottom:16px;}
  .tx-tab-pane{animation:txTabFadeIn .15s var(--ease);}
  @keyframes txTabFadeIn{from{opacity:0;} to{opacity:1;}}
  .budget-side-group{padding:12px 0; border-top:1px solid var(--border);}
  .budget-side-group:first-child{border-top:none; padding-top:0;}
  .budget-side-group-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; gap:8px;}
  .budget-side-group-name{font-size:12px; font-weight:700; color:var(--text); display:inline-flex; align-items:center; gap:6px;}
  .budget-side-group-budget{font-size:10.5px; color:var(--muted-2); font-weight:600; white-space:nowrap;}
  .budget-side-track{height:6px; border-radius:4px; background:var(--border); overflow:hidden; margin-bottom:7px;}
  .budget-side-fill{height:100%; border-radius:4px; background:var(--green); transition:width .3s var(--ease);}
  .budget-side-fill.over{background:var(--red);}
  .budget-side-foot{display:flex; justify-content:space-between; align-items:baseline; font-size:11px; gap:8px;}
  .budget-side-spent{color:var(--text); font-weight:700;}
  .budget-side-remaining{font-weight:700; white-space:nowrap;}
  .budget-side-remaining.pos{color:var(--green);}
  .budget-side-remaining.neg{color:var(--red);}
  .budget-side-remaining.neutral{color:var(--muted);}
  .budget-side-empty{color:var(--muted); font-size:11.5px; text-align:center; padding:20px 4px;}
  .budget-table-section-head{padding:12px 18px; background:var(--panel-2); font-weight:800; font-size:14.5px; color:var(--text);}
  /* Dòng nhóm dạng "card" có thể đóng/mở, giống danh sách tài khoản (icon mũi tên,
     tiêu đề + trạng thái còn lại/vượt ngân sách bên trái, số tiền ngân sách bên phải). */
  .budget-group-card{border-top:1px solid var(--border);}
  .budget-group-header{display:flex; align-items:flex-start; gap:10px; padding:13px 18px; cursor:pointer; transition:background .15s;}
  .budget-group-header:hover{background:var(--panel-2);}
  .budget-group-chevron{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); color:var(--muted); flex-shrink:0; transition:transform .18s var(--ease), background .15s;}
  .budget-group-chevron svg{transition:transform .18s var(--ease);}
  .budget-group-chevron.open{transform:none;}
  .budget-group-chevron.open svg{transform:rotate(90deg);}
  .budget-group-headtext{flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:2px; overflow:hidden;}
  /* overflow:hidden + text-overflow:ellipsis: ten danh muc qua dai (vd nguoi
     dung tu dat ten dai) se bi cat gon voi dau "..." thay vi TRAN sang vung
     cua cac cot so lien ke — day la 1 trong 2 nguyen nhan chinh gay "chu de
     len nhau" o bang ngan sach (tieu de dai + icon tooltip "i" xo lan sang
     vung so tien ben canh khi headtext bi ep flex-shrink:0 o cac media query
     mobile ben duoi ma khong co gioi han overflow). */
  .budget-group-title{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .budget-group-title .ic{width:24px; height:24px; border-radius:7px; background:var(--pill-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold);}
  .budget-group-title .ic svg{display:block;}
  .budget-group-sub{display:inline-flex; align-items:center; gap:3px; font-size:12.5px; font-weight:700; white-space:nowrap;}
  .budget-group-sub.pos{color:var(--green);}
  .budget-group-sub.neg{color:var(--red);}
  .budget-group-sub.neutral{color:var(--muted);}
  .budget-group-right{display:flex; align-items:flex-start; gap:10px; flex-shrink:0;}
  /* Số tiền lớn (hàng trăm tỷ) không được phép tự xuống dòng trong cột nữa —
     trước đây dùng overflow-wrap:anywhere để né tràn ngang, nhưng số bị bẻ
     xuống 2 dòng làm mất chữ "đ", méo bảng và đường kẻ phân cách trông như
     bị "lệch". Giải pháp đúng: giữ NGUYÊN 1 dòng (white-space:nowrap), các
     cột số tiền được nới rộng đủ dùng ở mọi breakpoint bên dưới, và khi
     tổng bề ngang bảng vượt màn hình thì đã có .budget-table-scroll lo phần
     cuộn ngang (xem --budget-row-min) — không cần bẻ dòng số nữa. */
  .budget-group-amount{font-size:14px; font-weight:400; color:var(--text); text-align:left; white-space:nowrap;}
  .budget-group-amount .muted{color:var(--muted-2); font-weight:600; font-size:13.5px;}
  .budget-group-actual{font-size:14px; font-weight:400; color:var(--text); text-align:left; white-space:nowrap;}
  .budget-group-edit{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:none; background:transparent; color:var(--muted-2); cursor:pointer; flex-shrink:0; transition:background .15s, color .15s;}
  .budget-group-edit:hover{background:var(--pill-bg); color:var(--text);}
  /* 3 cột thẳng hàng: "Ngân sách" - "Thực tế" - "Còn lại" theo đúng thứ tự.
     Dùng min-width (thay vì width cố định) để mỗi cột tự giãn theo đúng độ dài
     con số thực tế -> số tiền lớn (hàng tỷ, chục tỷ) không bao giờ bị đè/chồng
     lên cột bên cạnh. Khoảng cách (gap) giữa 3 cột giảm dần theo tỷ lệ màn hình
     (desktop -> tablet -> mobile) ở các @media bên dưới. */
  /* Biến dùng chung cho 3 cột số liệu + nút sửa + khoảng cách, để nhãn cột,
     dòng cha, dòng con (item) và dòng tổng LUÔN đồng bộ ở mọi kích thước màn
     hình — chỉ cần đổi giá trị 1 chỗ trong mỗi @media, không phải rải số ở
     nhiều selector khác nhau (nguồn gốc lỗi lệch cột trước đây). */
  :root{
    --budget-c-amount:150px;
    --budget-c-actual:140px;
    --budget-c-remaining:140px;
    --budget-c-edit:30px;
    --budget-c-gap:24px;
    --budget-item-gap:12px;
  }
  .budget-col{flex-shrink:0; display:flex; align-items:flex-start; justify-content:flex-start;}
  /* QUAN TRỌNG: dùng cả width (không chỉ min-width) để mỗi cột có độ rộng
     CỐ ĐỊNH tuyệt đối — đúng kỹ thuật đã dùng ở bảng "Danh mục tài sản"
     (.asset-row dùng cột px cố định trong grid-template-columns). Nếu chỉ
     có min-width, cột vẫn có thể co giãn khác nhau giữa các dòng tuỳ độ dài
     nội dung riêng của dòng đó (vd dòng "Chưa đặt" ngắn hơn 1 số tiền dài),
     khiến 3 cột Ngân sách/Thực tế/Còn lại KHÔNG thẳng hàng tuyệt đối giữa
     các dòng, nhất là trên mobile khi bề ngang bị bóp hẹp — đây chính là lỗi
     "chưa căn lề trái toàn bộ" so với dòng nhãn cột phía trên. Cố định width
     đảm bảo mọi dòng (nhãn cột, dòng nhóm cha, dòng danh mục con, dòng tổng)
     luôn có đúng 1 độ rộng cột như nhau ở mọi kích thước màn hình. */
  .budget-col-amount{min-width:var(--budget-c-amount); width:var(--budget-c-amount); max-width:var(--budget-c-amount);}
  .budget-col-actual{min-width:var(--budget-c-actual); width:var(--budget-c-actual); max-width:var(--budget-c-actual);}
  .budget-col-remaining{min-width:var(--budget-c-remaining); width:var(--budget-c-remaining); max-width:var(--budget-c-remaining);}
  .budget-col .budget-group-sub{white-space:nowrap; text-align:left; justify-content:flex-start; font-size:14px; font-weight:400;}
  .budget-col .budget-group-sub svg{width:14px; height:14px; flex-shrink:0;}
  .budget-col-edit-spacer{display:inline-block; width:var(--budget-c-edit); flex-shrink:0;}
  .budget-group-right{gap:var(--budget-c-gap);}
  .budget-table-col-labels{display:flex; align-items:center; gap:var(--budget-c-gap); padding:0 18px; margin-top:8px;}
  .budget-col-label{font-size:11px; font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:.02em; justify-content:flex-start;}
  /* Vùng cuộn ngang riêng cho phần 3 cột số liệu (nhãn cột + các dòng + dòng tổng).
     QUAN TRỌNG: cả 3 loại dòng (nhãn cột, dòng danh mục, dòng tổng) phải dùng
     CHUNG một giá trị min-width (biến --budget-row-min) thay vì để mỗi dòng tự
     tính theo nội dung riêng của nó (max-content) — nếu để riêng, dòng nhãn cột
     (không có icon/tiêu đề) sẽ có bề rộng khác dòng danh mục (có icon+tiêu đề),
     khiến 3 cột số liệu không còn thẳng hàng với nhau nữa. Dùng chung 1 giá trị
     đảm bảo mọi dòng rộng bằng nhau -> cột luôn thẳng hàng, kể cả khi phải cuộn. */
  .budget-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; --budget-row-min:760px;}
  .budget-table-scroll .budget-group-header,
  .budget-table-scroll .budget-table-total-row,
  .budget-table-scroll .budget-group-items,
  .budget-table-scroll .budget-group-card,
  .budget-table-scroll .budget-table-col-labels{min-width:var(--budget-row-min); box-sizing:border-box;}
  .budget-table-scroll::-webkit-scrollbar{height:6px;}
  .budget-table-scroll::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
  /* Danh sách danh mục chi tiết khi mở rộng — mỗi dòng có icon tròn màu, tên +
     phụ đề, và số tiền thực tế bên phải, giống danh sách tài khoản trong ảnh mẫu.
     Số tiền được gióng thẳng đúng dưới cột "Thực tế" của dòng cha: dùng
     .budget-item-align-spacer để bù đúng phần chiều rộng cột "Thực tế" + cột
     "Còn lại" + nút sửa nằm bên phải, sao cho số tiền dòng con bắt đầu (căn
     trái) đúng ngay mép trái của cột "Thực tế" ở dòng cha (xem budget-col-actual). */
  .budget-group-items{background:var(--panel-2); border-top:1px dashed var(--border); padding:2px 18px 4px 54px;}
  .budget-item-row{display:flex; align-items:flex-start; gap:var(--budget-item-gap); padding:10px 0; border-bottom:1px solid var(--border);}
  .budget-item-row:last-child{border-bottom:none;}
  .budget-item-icon{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
  .budget-item-info{flex:1; min-width:0;}
  .budget-item-name{font-size:13px; font-weight:400; color:var(--text); overflow-wrap:anywhere; word-break:break-word;}
  .budget-item-sub{font-size:11.5px; color:var(--muted-2); margin-top:1px;}
  .budget-item-amount{font-size:13px; font-weight:400; color:var(--text); white-space:nowrap; text-align:left; width:var(--budget-c-actual); flex-shrink:0;}
  /* spacer = cột "Còn lại" + cột nút sửa + 2 khoảng cách xen giữa (Thực tế→Còn
     lại và Còn lại→Sửa) — tính tự động theo biến dùng chung, không cần sửa tay
     mỗi khi đổi breakpoint. */
  .budget-item-align-spacer{display:inline-block; width:calc(var(--budget-c-remaining) + var(--budget-c-edit) + (2 * var(--budget-c-gap)) - var(--budget-item-gap)); flex-shrink:0;}
  .budget-detail-empty{padding:10px 0; font-size:12.5px; color:var(--muted-2);}
  .budget-set-tabs{display:flex; gap:4px; background:var(--pill-bg); border-radius:999px; padding:4px; margin-bottom:14px;}
  .budget-set-tab{flex:1; border:none; background:transparent; padding:8px 10px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit; transition:background .15s var(--ease), color .15s var(--ease);}
  .budget-set-tab:hover{color:var(--text);}
  .budget-set-tab.active{background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs);}
  /* Đồng bộ với .budget-side-tab: tab "Thu nhập"/"Chi tiêu" trong modal Đặt
     ngân sách cũng dùng đúng màu xanh/đỏ thống nhất của app. */
  .budget-set-tab[data-tab="income"]:hover{color:var(--green);}
  .budget-set-tab[data-tab="income"].active{background:color-mix(in srgb, var(--green) 16%, var(--panel)); color:var(--green);}
  .budget-set-tab[data-tab="expense"]:hover{color:var(--red);}
  .budget-set-tab[data-tab="expense"].active{background:color-mix(in srgb, var(--red) 16%, var(--panel)); color:var(--red);}
  /* Nút chọn "Loại giao dịch" trong modal +Thêm giao dịch: dùng cùng kiểu pill
     nhóm (nền pill-bg bo tròn, tab active nổi lên) như modal Đặt ngân sách,
     thay vì 3 nút rời rạc có viền riêng như trước, cho đồng bộ toàn app. */
  .tx-type-tabs{display:flex; gap:4px; background:var(--pill-bg); border-radius:999px; padding:4px;}
  .tx-type-tab{flex:1; border:none; background:transparent; padding:8px 6px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .15s var(--ease), color .15s var(--ease);}
  .tx-type-tab:hover{color:var(--text);}
  .tx-type-tab.active{background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs);}
  .tx-type-tab[data-tab="expense"]:hover{color:var(--red);}
  .tx-type-tab[data-tab="expense"].active{background:color-mix(in srgb, var(--red) 16%, var(--panel)); color:var(--red);}
  .tx-type-tab[data-tab="income"]:hover{color:var(--green);}
  .tx-type-tab[data-tab="income"].active{background:color-mix(in srgb, var(--green) 16%, var(--panel)); color:var(--green);}
  .tx-type-tab[data-tab="loan"]:hover{color:var(--gold);}
  .tx-type-tab[data-tab="loan"].active{background:color-mix(in srgb, var(--gold) 16%, var(--panel)); color:var(--gold);}
  .budget-set-body .form-row{margin-bottom:12px;}
  .budget-table-total-row{display:flex; align-items:flex-start; gap:10px; padding:13px 18px; border-top:2px solid var(--border); background:var(--panel-2);}
  .budget-table-total-row .budget-group-title{flex:1; min-width:0;}
  .budget-table-total-row .budget-group-title{font-size:15px; font-weight:700;}
  .budget-table-total-row .budget-group-amount,
  .budget-table-total-row .budget-group-actual,
  .budget-table-total-row .budget-col .budget-group-sub{font-weight:800;}
  .budget-table-total-row .budget-group-right{gap:var(--budget-c-gap);}
  @media (max-width:1100px){
    .budget-table-card{max-width:100%;}
  }
  @media (max-width:1080px){
    .budget-page-head{margin-bottom:12px;}
    .budget-table-section-head{padding:9px 14px; font-size:13.5px;}
    .budget-group-header{padding:11px 14px; gap:16px; align-items:flex-start;}
    .budget-group-chevron{width:22px; height:22px;}
    .budget-group-headtext{flex-wrap:nowrap; flex-shrink:0; align-items:baseline; min-width:170px;}
    .budget-group-title{font-size:12.5px;}
    .budget-group-amount{font-size:12px;}
    .budget-group-items{padding:2px 14px 4px 52px;}
    .budget-table-total-row{padding:10px 14px;}
    :root{
      --budget-c-amount:130px;
      --budget-c-actual:118px;
      --budget-c-remaining:130px;
      --budget-c-gap:30px;
    }
    .budget-table-scroll{--budget-row-min:760px;}
    .budget-col .budget-group-sub{font-size:12px; font-weight:400;}
    .budget-group-actual{font-size:12px;}
    .budget-table-col-labels{padding:0 14px;}
    .budget-col-label{font-size:10px;}
    .budget-side-col{margin-top:14px;}
    .budget-side-widget{padding:14px;}
    .budget-side-hero{padding:16px 14px; margin-bottom:12px;}
    .budget-side-hero-amount{font-size:15px;}
    .budget-side-tabs{margin-bottom:12px;}
    .budget-side-group{padding:11px 0;}
  }
  /* ===== Mobile (≤640px): 3 cột "Ngân sách/Thực tế/Còn lại" giữ nguyên cùng một
     hàng (không xuống dòng riêng nữa) để luôn thẳng cột với tiêu đề. Nếu tên danh
     mục dài + số tiền lớn (hàng tỷ/chục tỷ) khiến cả dòng vượt quá bề ngang màn
     hình, khu vực bảng (.budget-table-scroll) sẽ tự hiện thanh trượt ngang thay vì
     để số bị bóp nhỏ hoặc đè lên nhau. */
  @media (max-width:640px){
    .budget-group-header{gap:14px;}
    .budget-group-headtext{flex-shrink:0; min-width:150px;}
    :root{
      --budget-c-amount:126px;
      --budget-c-actual:114px;
      --budget-c-remaining:126px;
      --budget-c-gap:26px;
      --budget-item-gap:8px;
    }
    .budget-table-scroll{--budget-row-min:720px;}
    /* Vẫn giữ số tiền chi tiết thẳng đúng dưới cột "Thực tế" của dòng cha —
       width của .budget-item-amount và .budget-item-align-spacer giờ tự tính
       theo biến dùng chung ở trên, chỉ giảm cỡ chữ/icon để mọi thứ vừa gọn
       trong 1 dòng, không bị vỡ xuống dòng. */
    .budget-group-items{padding:2px 14px 4px 50px;}
    .budget-item-icon{width:26px; height:26px; font-size:12.5px;}
    .budget-item-name{font-size:12px;}
    .budget-item-sub{font-size:10px;}
    .budget-item-amount{font-size:12px;}
  }
  @media (max-width:480px){
    .budget-group-header{gap:12px;}
    .budget-group-headtext{flex-shrink:0; min-width:130px;}
    :root{
      --budget-c-amount:118px;
      --budget-c-actual:108px;
      --budget-c-remaining:118px;
      --budget-c-edit:28px;
      --budget-c-gap:22px;
      --budget-item-gap:7px;
    }
    .budget-table-scroll{--budget-row-min:680px;}
    .budget-group-edit{width:28px; height:28px;}
    /* Vẫn thẳng cột với dòng cha, chỉ thu nhỏ icon/chữ — width của
       item-amount/align-spacer tự tính lại theo biến dùng chung ở trên. */
    .budget-group-items{padding:2px 14px 4px 48px;}
    .budget-item-icon{width:22px; height:22px; font-size:11px;}
    .budget-item-name{font-size:11px;}
    .budget-item-sub{font-size:9.5px;}
    .budget-item-amount{font-size:11.5px;}
  }
  .stat-grid-mini{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .stat-grid-mini-row{grid-template-columns:repeat(5, 1fr); margin-bottom:22px;}
  @media (max-width: 900px){
    .stat-grid-mini-row{grid-template-columns:repeat(2, 1fr);}
  }
  .stat-tile-mini{border-radius:12px; padding:10px 12px; border:1px solid var(--border); min-width:0; container-type:inline-size; transition:border-color .15s, transform .15s, box-shadow .15s;}
  .stat-tile-mini:hover{border-color:var(--gold); transform:translateY(-2px);}
  .stat-tile-mini-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
  .ic-mini{width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;}
  .lbl-mini{font-size:11.5px; color:var(--muted-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .val-mini{font-family:'Sora',sans-serif; font-size:clamp(10px, 11cqi, 16px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; word-break:normal; min-width:0;}
  /* Riêng phần tổng quan (5 ô: Tổng thu/Tổng chi/Chênh lệch/Số dư vay/Số giao
     dịch) ở trang Thu nhập/Chi tiêu: số hiển thị đang hơi to so với các trang
     khác -> giảm mốc trần (16px -> 13px) để gọn gàng hơn, không đụng tới
     .val-mini ở các trang/khu vực khác (vẫn giữ nguyên clamp co theo cqi). */
  #page-transactions .val-mini{font-size:clamp(9px, 9cqi, 13px);}
  .stat-tile-colored .ic{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:10px; flex-shrink:0;}
  .stat-tile-colored .val{font-family:'Sora',sans-serif; font-size:clamp(11px, 12cqi, 17px); font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; word-break:normal; line-height:1.25;}
  .stat-tile-colored .lbl{font-size:13px; color:var(--muted-2); font-weight:600; white-space:normal; overflow-wrap:break-word;}

  /* ---- Unified asset stat cards (redesigned) ---- */
  .stat-group{margin-bottom:22px;}
  .stat-group-label{font-size:12.5px; font-weight:700; letter-spacing:0.4px; color:var(--muted-2); text-transform:none; margin-bottom:4px; padding-left:2px;}
  .stat-grid-v2{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  @media (max-width:900px){ .stat-grid-v2{grid-template-columns:repeat(2,1fr) !important;} }
  .stat-card{border-radius:14px; padding:14px 16px; border:1px solid var(--border); background:var(--panel); position:relative; min-width:0; transition:border-color .15s, transform .15s, box-shadow .15s; box-shadow:var(--shadow-card); container-type:inline-size;}
  .stat-card:hover{border-color:var(--gold); transform:translateY(-2px);}
  .stat-card .head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
  .stat-card .ic{width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); color:var(--text); flex-shrink:0;}
  .stat-card .ic svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .stat-card .val{font-family:'Sora',sans-serif; font-size:clamp(11px, 13cqi, 18px); font-weight:700; margin-bottom:0; line-height:1.25; letter-spacing:-0.2px; white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; word-break:normal;}
  /* 4 wg "Số lượng tài sản / Tổng tài sản / Tài sản ròng / Đã tăng thêm..." (trang Tài sản):
     giảm 3px so với cỡ mặc định ở trên. */
  #dashStats .stat-card .val{font-size:clamp(8px, 13cqi, 15px);}
  .stat-card .lbl{font-size:12.5px; color:var(--muted-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;}
  .stat-card .sub{font-size:11px; color:var(--muted-2); opacity:0.75; margin-top:6px; font-weight:500;}
  #assetsStatGrid{grid-template-columns:repeat(6,1fr); gap:10px;}
  #assetsStatGrid .stat-card{padding:10px 8px;}
  #assetsStatGrid .stat-card .head{gap:5px; margin-bottom:5px;}
  #assetsStatGrid .stat-card .ic{width:18px; height:18px; border-radius:6px;}
  #assetsStatGrid .stat-card .ic svg{width:10px; height:10px;}
  #assetsStatGrid .stat-card .lbl{font-size:10.5px;}
  #assetsStatGrid .stat-card .val{font-size:clamp(9.5px, 11cqi, 13.5px); white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; word-break:normal;}
  #assetsStatGrid .stat-card .sub{font-size:9.5px; margin-top:4px;}
  @media (max-width:1200px){ #assetsStatGrid{grid-template-columns:repeat(4,1fr) !important;} }
  @media (max-width:900px){ #assetsStatGrid{grid-template-columns:repeat(3,1fr) !important;} }
  @media (max-width:600px){ #assetsStatGrid{grid-template-columns:repeat(2,1fr) !important;} }
  @media (max-width:380px){ #assetsStatGrid{grid-template-columns:1fr !important;} }
  .stat-card.is-primary{background:linear-gradient(135deg, #d7f5e6, #eafaf1); border-color:transparent;}
  .stat-card.is-primary .ic{background:rgba(62,207,142,0.18); color:#12a876;}
  .stat-card.is-primary .val{color:#0f6b4d; font-size:19px;}
  .stat-card.is-primary .lbl{color:rgba(15,107,77,0.75);}
  .stat-card.is-primary .sub{color:rgba(15,107,77,0.65);}
  .stat-card.is-budget-highlight{background:var(--panel); border-color:color-mix(in srgb, var(--gold) 28%, var(--border));}
  .stat-card.is-budget-highlight .ic{background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--gold);}
  .stat-card.is-budget-highlight .val{color:var(--gold); font-size:19px;}
  .stat-card.is-budget-highlight .lbl{color:color-mix(in srgb, var(--gold) 80%, var(--muted));}
  .stat-card.is-budget-highlight .sub{color:color-mix(in srgb, var(--gold) 70%, var(--muted-2));}
  .stat-card .bar-track{height:4px; border-radius:3px; background:var(--panel-2); margin-top:10px; overflow:hidden;}
  .stat-card .bar-fill{height:100%; border-radius:3px; background:linear-gradient(90deg, #0f6b4d, #3ee6a8); opacity:1;}

  .modal-overlay{display:flex; opacity:0; pointer-events:none; position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(6px); z-index:100; align-items:center; justify-content:center; transition:opacity .18s var(--ease);}
  .modal-overlay.open{opacity:1; pointer-events:auto;}
  .modal-overlay .modal-box{transform:scale(.94) translateY(10px); transition:transform .2s var(--ease);}
  .modal-overlay.open .modal-box{transform:scale(1) translateY(0);}
  .modal-box{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px; width:380px; max-width:90vw; box-shadow:var(--shadow-modal);}

  /* ===== PAYMENT PAGE ===== */
  .payment-layout{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
  .payment-row{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--muted); padding:7px 0;}
  .payment-row b{color:var(--text); font-weight:700;}
  .payment-note{margin-top:14px; display:flex; gap:8px; font-size:12px; color:var(--muted); background:var(--panel-2); border:1px dashed var(--border); border-radius:12px; padding:10px 12px; line-height:1.6;}
  .payment-qr-wrap{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:14px; padding:12px; min-height:160px;}
  .payment-qr-wrap img{width:100%; max-width:180px; border-radius:6px;}
  /* ===== Hiệu ứng tia laser xanh quét dọc qua mã QR khi đang chờ thanh toán ===== */
  .qr-laser{
    position:absolute; left:8px; right:8px; height:3px; top:0;
    background:linear-gradient(90deg, transparent 0%, rgba(37,99,235,0) 4%, #2563eb 50%, rgba(37,99,235,0) 96%, transparent 100%);
    box-shadow:0 0 8px 2px rgba(37,99,235,0.75), 0 0 18px 4px rgba(37,99,235,0.45);
    border-radius:2px;
    opacity:0;
    pointer-events:none;
    animation:qrLaserSweep 2.2s cubic-bezier(.45,0,.55,1) infinite;
    z-index:2;
  }
  .qr-laser::after{
    content:'';
    position:absolute; left:0; right:0; top:-14px; height:14px;
    background:linear-gradient(to bottom, rgba(37,99,235,0), rgba(37,99,235,0.16));
  }
  .payment-qr-wrap.qr-scanning .qr-laser{display:block;}
  .payment-qr-wrap:not(.qr-scanning) .qr-laser{display:none;}
  @keyframes qrLaserSweep{
    0%{ top:2%; opacity:0; }
    8%{ opacity:1; }
    50%{ top:96%; opacity:1; }
    92%{ opacity:1; }
    100%{ top:2%; opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .qr-laser{animation:none; opacity:0;}
  }
  .qr-scan-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:var(--fs-title-page); text-align:center; color:var(--text); margin-bottom:8px;}
  .qr-scan-sub{font-size:13px; color:var(--muted); text-align:center; line-height:1.6; max-width:340px; margin:0 auto 22px;}
  .payment-qr-frame{position:relative; width:fit-content; margin:0 auto 14px; padding:14px;}
  .qr-download-btn{
    display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto 20px;
    padding:9px 18px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2);
    color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, transform .15s;
  }
  .qr-download-btn svg{width:15px; height:15px; flex-shrink:0;}
  .qr-download-btn:hover{border-color:#2563eb; color:#2563eb;}
  .qr-download-btn:active{transform:scale(.97);}
  .qr-corner{position:absolute; width:26px; height:26px; border:3px solid #2563eb; z-index:1;}
  .qr-corner-tl{top:0; left:0; border-right:none; border-bottom:none; border-top-left-radius:6px;}
  .qr-corner-tr{top:0; right:0; border-left:none; border-bottom:none; border-top-right-radius:6px;}
  .qr-corner-bl{bottom:0; left:0; border-right:none; border-top:none; border-bottom-left-radius:6px;}
  .qr-corner-br{bottom:0; right:0; border-left:none; border-top:none; border-bottom-right-radius:6px;}
  .qr-scan-badges{display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:22px; flex-wrap:wrap;}
  .qr-scan-badge{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text);}
  .qr-scan-badge svg{width:17px; height:17px; color:#2563eb; flex-shrink:0;}
  .payment-bank-info{margin-top:14px; display:flex; flex-direction:column; gap:6px;}
  .payment-bank-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); gap:10px;}
  .payment-bank-row b{color:var(--text); text-align:right;}
  .payment-status{margin-top:16px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); background:var(--panel-2); border-radius:10px; padding:9px 12px;}
  .payment-status.success{color:var(--green);}
  .payment-status-dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; animation:paymentPulse 1.4s infinite ease-in-out;}
  .payment-status.success .payment-status-dot{background:var(--green); animation:none;}
  @keyframes paymentPulse{0%,100%{opacity:.4;} 50%{opacity:1;}}
  @media (max-width:820px){ .payment-layout{grid-template-columns:1fr;} }
  .modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .modal-head h3{font-size:var(--fs-title-lg); font-weight:700;}
  .modal-close{cursor:pointer; color:var(--muted-2); font-size:16px;}
  .form-row{margin-bottom:10px; display:flex; flex-direction:column; gap:4px;}
  .form-row label{font-size:12.5px; color:var(--muted-2); font-weight:600;}
  .form-row input, .form-row select{
    background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:8px 12px;
    color:var(--text); font-size:13.5px; font-family:inherit;
  }
  .form-row input:focus, .form-row select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);}

  /* Ô "Ghi chú" (textarea) trong các modal thêm/sửa: đồng bộ kích thước với
     input/select cùng modal (cùng padding, font-size, border-radius), chỉ
     thu gọn chiều cao (rows=1) thay vì để to hơn hẳn các ô còn lại. Vẫn cho
     kéo giãn theo chiều dọc (resize:vertical) nếu người dùng cần gõ dài hơn. */
  .form-note-sm{
    width:100%; resize:vertical; min-height:0;
    background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
    padding:8px 12px; color:var(--text); font-size:13.5px; font-family:inherit;
    line-height:1.4; outline:none;
  }
  .form-note-sm:focus{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }

  .bar-chart-wrap{display:flex; align-items:stretch; gap:14px; height:200px; padding-top:10px;}
  .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0;}
  .bar-col .bar-track{flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; min-height:0;}
  .bar-col .bar{width:60%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#7CFFC4,#0FBE83); min-height:2px; transition:filter .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); transform-origin:bottom center;}
  .bar-col .bar-label{font-size:11px; color:var(--muted-2); margin-top:8px; flex-shrink:0; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; transition:color .15s var(--ease);}
  .bar-col .bar-value{font-size:10px; color:var(--muted); margin-bottom:4px; flex-shrink:0; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; transition:color .15s var(--ease);}
  /* ===== Hiệu ứng rê chuột: tô đậm cột đang hover trong biểu đồ cột (bar chart) =====
     Áp dụng cho mọi nơi dùng .bar-chart-wrap / .bar-col (Tổng quan thu nhập-chi tiêu,
     biểu đồ dòng tiền theo cột...), đồng bộ kiểu tô đậm với hiệu ứng đã có sẵn ở
     wg "Phân bổ tài sản" (.chart-bar-rect:hover{opacity:.75}). */
  .bar-col{cursor:pointer;}
  .bar-col:hover .bar{
    filter:brightness(1.18) saturate(1.15);
    transform:scaleX(1.08);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 14px color-mix(in srgb, var(--gold) 45%, transparent);
  }
  .bar-col:hover .bar-label{color:var(--text); font-weight:700;}
  .bar-col:hover .bar-value{color:var(--gold); font-weight:700;}

  /* Net worth chart: horizontal scroll + wrapping value labels so large numbers never overflow */
  .bar-chart-scroll{overflow-x:auto; overflow-y:hidden; padding-bottom:6px;}
  .overview-widget[data-widget-id="networth"] .bar-chart-scroll{flex:1; min-height:0; display:flex;}
  .overview-widget[data-widget-id="networth"] .bar-chart-scroll > *{flex:1; min-width:100%;}
  .networth-chart{min-width:100%; padding-top:30px; height:230px; gap:6px;}
  .overview-widget[data-widget-id="networth"] .networth-chart{height:auto; flex:1; min-height:0;}
  .networth-chart .bar-col{min-width:0; flex:1 1 0;}
  /* Số tiền của "Tổng tài sản ròng" giờ được vẽ bằng SVG <text class="bar-trend-label">
     ngay trong lớp overlay đường nối (xem renderBarTrendOverlay trong app-ui.js), đặt
     ngay phía trên đỉnh mỗi cột/điểm thực tế -> mỗi số tiền bám đúng chiều cao cột của
     chính nó, không còn nằm chung 1 hàng ngang cố định phía trên toàn biểu đồ như div
     .bar-value cũ nữa. */
  .networth-chart .bar-trend-label{
    font-size:10.5px; fill:var(--muted); font-weight:600;
    paint-order:stroke; stroke:var(--panel); stroke-width:3px; stroke-linejoin:round;
  }
  html[data-theme="light"] .networth-chart .bar-trend-label{ fill:#2c2c3d; font-weight:700; }

  /* Tooltip tự vẽ cho .bar-col (xem attachBarColHover trong app-ui.js), thay cho
     title="" gốc trình duyệt vốn không hiện ổn định do bị vẽ lại overlay đường nối
     ngay giữa lúc hover. */
  .bar-col-tooltip{
    position:absolute; z-index:5; pointer-events:none;
    background:var(--panel); border:1px solid var(--gold); border-radius:8px;
    padding:5px 10px; font-size:11.5px; font-weight:700; color:var(--text);
    white-space:nowrap; opacity:0; transition:opacity .12s ease;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
  }
  .empty-note{color:var(--muted-2); font-size:13.5px; text-align:center; padding:30px 10px;}

  /* Transactions (Thu nhập / Chi tiêu) */
  /* ===== BẢNG GIAO DỊCH DẠNG GRID =====
     #txListContainer là khung cuộn ngang khi không đủ chỗ (xem rule cho
     #txListContainer bên dưới); .tx-row dùng CSS grid với các cột cố định
     (tên | thẻ số lượng | danh mục | số tiền | sửa/xoá) để mọi dòng thẳng
     hàng với nhau như 1 bảng thật, và MỌI cột đều căn lề TRÁI (kể cả số tiền,
     trước đây bị right-align) theo đúng yêu cầu thiết kế lại bảng. */
  .tx-date-label{font-size:var(--fs-title-sm); color:var(--muted-2); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:14px 4px 8px;}
  /* ===== DÒNG TIÊU ĐỀ CỘT: "Tên | Danh mục | Số tiền" =====
     ĐỔI SANG TĨNH (không dùng position:sticky) — đồng bộ đúng kỹ thuật đã
     dùng ở bảng "Danh mục tài sản" (.asset-table-head): header nằm NGOÀI
     vùng cuộn dọc, chỉ .tx-list-body (bọc riêng các .tx-date-label/.tx-row)
     mới overflow-y:auto. Lý do đổi: trước đây header + rows cùng nằm chung 1
     vùng vừa cuộn ngang (#txListContainer overflow-x:auto) vừa cuộn dọc
     (-webkit-overflow-scrolling:touch), và position:sticky KHÔNG hoạt động
     ổn định khi kết hợp với -webkit-overflow-scrolling:touch trên Safari
     iOS (lỗi đã biết) -> header dính sai/giật khi cuộn. Tách vùng cuộn dọc
     ra khỏi header giải quyết triệt để, không còn phụ thuộc sticky nữa.
     Vẫn nằm trong .tx-list-inner để dùng CHUNG grid-template-columns với
     .tx-row, đảm bảo cột luôn thẳng hàng khi cuộn ngang. */
  .tx-table-head{
    display:grid;
    grid-template-columns: minmax(160px,1.6fr) minmax(200px,1.5fr) minmax(120px,0.9fr) auto auto;
    align-items:center; column-gap:16px; padding:8px 4px;
    background:var(--panel-2); border-bottom:1px solid var(--border);
  }
  .tx-table-head span{
    font-size:var(--fs-title-sm); font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:.03em;
  }
  /* Vùng cuộn DỌC riêng (trước đây max-height/overflow-y nằm trực tiếp trên
     #txListContainer bằng inline style — nay chuyển vào đây để tách khỏi
     header, giống hệt #assetList tách riêng khỏi .asset-table-head). */
  .tx-list-body{height:500px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
  /* CONTAINMENT CỨNG cho #txListContainer — không đặt trong media query để
     luôn có hiệu lực ở MỌI kích thước màn hình, tránh lặp lại lỗi "lệch
     breakpoint" (rule cuộn ngang trước đây chỉ bật ở <=640px trong khi toàn
     bộ layout mobile khác bật ở <=760px, khiến các máy 641-760px lọt lưới,
     bảng tràn ra khỏi .card/.page/.main và bị html{overflow-x:hidden} cắt
     cụt mà KHÔNG có thanh cuộn nào — đây chính là lỗi "tràn toàn trang,
     không cuộn được" đã gặp). Set sẵn width/box-sizing/overflow-x:auto +
     overflow-y:hidden (chặn trình duyệt tự suy ra overflow-y:auto ngoài ý
     muốn khi chỉ khai overflow-x) ngay tại đây để #txListContainer LUÔN LÀ
     khung cuộn ngang tự thân, độc lập với mọi breakpoint. */
  #txListContainer{
    display:block; width:100%; max-width:100%; box-sizing:border-box;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .tx-row{
    display:grid;
    grid-template-columns: minmax(160px,1.6fr) minmax(200px,1.5fr) minmax(120px,0.9fr) auto auto;
    align-items:center; column-gap:16px; padding:14px 4px; border-bottom:1px solid var(--border);
  }
  .tx-row:last-child{border-bottom:none;}
  .tx-main{min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; justify-content:flex-start; text-align:left;}
  /* overflow-wrap:anywhere + word-break: luoi an toan o tang CSS, phong khi ten
     giao dich la 1 chuoi rat dai KHONG co khoang trang (vd dan link, spam ky
     tu) ma vi ly do nao do lot qua duoc sanitizeFreeText() phia JS (vd du lieu
     cu tu truoc khi co sanitizer, hoac nhap qua paste nhanh chua kip xu ly) —
     dam bao text luon tu vo dong, KHONG BAO GIO tran ngang de len phan tu ben
     canh (badge/so tien/nut sua-xoa). Tren mobile, rule rieng ben duoi se
     chuyen sang che do khong-xuong-dong + cuon ngang. */
  .tx-name{font-weight:700; font-size:14.5px; overflow-wrap:anywhere; word-break:break-word; min-width:0; text-align:left;}
  /* .tx-badges là 1 cột riêng trong grid (chứa tag-count-pill + nhãn loại
     trừ (nếu có) + cat-badge), căn trái để cột "danh mục" của mọi dòng
     thẳng hàng theo chiều dọc thay vì bị đẩy theo độ dài tên giao dịch. */
  .tx-badges{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-start; text-align:left; min-width:0;}
  .tag-count-pill{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); flex-shrink:0; white-space:nowrap;}
  .tag-count-pill .dot{width:7px; height:7px; border-radius:50%;}
  .cat-badge{display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; letter-spacing:0.3px; padding:5px 12px; border-radius:20px; white-space:nowrap; flex-shrink:0;}
  /* Số tiền: đổi từ text-align:right sang LEFT để đồng bộ với các cột khác
     trong bảng. BO white-space:nowrap: so qua lon (hang tram ty) van tu
     xuong dong trong pham vi cot cua no thay vi tran ngang de len cac phan
     tu khac — day chinh la nguyen nhan goc gay loi "che chu" khi nhap so
     lon truoc day. */
  .tx-amount{font-weight:700; font-size:14.5px; max-width:100%; text-align:left; overflow-wrap:anywhere; word-break:break-word; flex-shrink:0; min-width:0;}
  .tx-amount.income{color:var(--green);}
  .tx-amount.expense{color:var(--text);}

  .goals-page-layout{display:flex; align-items:flex-start; gap:20px;}
  .goals-main-col{flex:1; min-width:0;}
  .goals-side-col{width:450px; flex-shrink:0; position:sticky; top:20px;}
  @media(max-width:1100px){
    .goals-page-layout{flex-direction:column; align-items:stretch;}
    .goals-side-col{width:100%; position:static; margin-top:14px;}
  }

  .wealth-ladder-card{padding-bottom:10px;}
  .wealth-ladder-sub{font-size:12.5px; color:var(--muted-2); margin:-4px 0 14px; line-height:1.5;}
  .wealth-ladder{position:relative; padding-left:26px; padding-right:4px;}
  .wealth-ladder-track{position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--border); border-radius:2px;}
  .wealth-ladder-track-fill{position:absolute; left:9px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--gold),var(--green)); border-radius:2px; transition:height .4s var(--ease);}
  .wealth-rung{position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px 0;}
  .wealth-rung:not(:last-child){border-bottom:1px dashed var(--border);}
  .wealth-rung-dot{position:absolute; left:-26px; top:14px; width:20px; height:20px; border-radius:50%; background:var(--panel-2); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; z-index:1; flex-shrink:0;}
  .wealth-rung.is-reached .wealth-rung-dot{background:var(--green); border-color:var(--green);}
  .wealth-rung.is-current .wealth-rung-dot{background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);}
  .wealth-rung-dot svg{width:11px; height:11px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
  .wealth-rung-body{flex:1; min-width:0;}
  .wealth-rung-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .wealth-rung-amount{font-weight:800; font-size:14.5px; color:var(--text);}
  .wealth-rung.is-reached .wealth-rung-amount{color:var(--green);}
  .wealth-rung.is-current .wealth-rung-amount{color:var(--gold);}
  .wealth-rung-badge{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:20px; white-space:nowrap; letter-spacing:.2px;}
  .wealth-rung.is-reached .wealth-rung-badge{background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green);}
  .wealth-rung.is-current .wealth-rung-badge{background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold);}
  .wealth-rung-reward{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4;}
  .wealth-rung.is-reached .wealth-rung-reward{color:var(--muted);}
  .wealth-rung-gap{font-size:11.5px; color:var(--muted-2); margin-top:3px;}
  /* Ô "Năm hoàn thành" có thể sửa (chỉ dùng ở khối Nấc thang tài sản trang
     Mục tiêu, không ảnh hưởng bản ở trang Tổng quan). Hiện cho MỌI mốc (đã
     đạt lẫn chưa đạt) để người dùng điền năm dự kiến/đã đạt; màu đổi theo
     trạng thái mốc (đã đạt=xanh, mục tiêu tiếp theo=vàng, chưa tới=xám). */
  .wealth-rung-badge--year{padding:0; background:transparent !important;}
  .wealth-rung-year-input{
    width:56px; font-size:10.5px; font-weight:800; letter-spacing:.2px;
    text-align:center; padding:2px 6px; border-radius:20px; border:1px solid transparent;
    font-family:inherit;
    background:var(--panel-2); color:var(--muted);
  }
  .wealth-rung-year-input::placeholder{color:var(--muted-2); font-weight:700;}
  .wealth-rung-year-input:hover{border-color:var(--border);}
  .wealth-rung-year-input:focus{outline:none; border-color:var(--muted); background:var(--panel);}
  .wealth-rung.is-reached .wealth-rung-year-input{
    background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green);
  }
  .wealth-rung.is-reached .wealth-rung-year-input::placeholder{color:color-mix(in srgb, var(--green) 55%, transparent);}
  .wealth-rung.is-reached .wealth-rung-year-input:hover{border-color:color-mix(in srgb, var(--green) 40%, transparent);}
  .wealth-rung.is-reached .wealth-rung-year-input:focus{border-color:var(--green);}
  .wealth-rung.is-current .wealth-rung-year-input{
    background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold);
  }
  .wealth-rung.is-current .wealth-rung-year-input::placeholder{color:color-mix(in srgb, var(--gold) 55%, transparent);}
  .wealth-rung.is-current .wealth-rung-year-input:hover{border-color:color-mix(in srgb, var(--gold) 40%, transparent);}
  .wealth-rung.is-current .wealth-rung-year-input:focus{border-color:var(--gold);}

  .goal-item{padding:16px 4px; border-bottom:1px solid var(--border);}
  .goal-item:last-child{border-bottom:none;}
  .goal-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
  .goal-icon-name{display:flex; gap:12px; align-items:center;}
  .goal-icon{width:38px; height:38px; border-radius:10px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--muted);}
  .goal-name{font-weight:700; font-size:14.5px;}
  .goal-sub{font-size:12px; color:var(--muted-2); margin-top:2px;}
  .goal-nums{text-align:right; font-size:13px;}
  .goal-nums .lbl{color:var(--muted-2); font-size:11px;}
  .goal-suggest-wrap{display:flex; flex-wrap:wrap; gap:10px;}
  .goal-suggest-chip{padding:9px 16px; border-radius:20px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s ease;}
  .goal-suggest-chip:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-1px);}
  .goal-suggest-chip:active{transform:scale(.96);}
  .ov-cat-row{font-size:13px;}
  .ov-cat-row b{font-size:13px; font-weight:700;}
  .progress-track{width:100%; height:7px; background:var(--panel-2); border-radius:20px; overflow:hidden; margin-top:8px; display:flex; align-items:center; gap:8px;}
  .progress-fill{height:100%; background:linear-gradient(90deg,var(--lime),var(--green)); border-radius:20px; transition:width .4s var(--ease);}
  .progress-pct{font-size:12px; font-weight:700; color:var(--muted); min-width:34px; text-align:right;}

  @media(max-width:1100px){
    .content-row{grid-template-columns:1fr;}
    .analytics-grid-2{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:1fr 1fr;}
    .stat-grid{grid-template-columns:1fr 1fr;}
    .pro-grid{grid-template-columns:1fr;}
  }
  /* iPad (768-1024px): sau khi trừ chiều rộng sidebar thu gọn, phần nội dung
     còn lại không đủ chỗ cho .grid-3 xếp 2 cột như trên (dễ vỡ/lộn xộn giống
     hệt vấn đề từng gặp ở trang "Lập ngân sách") => xếp hẳn 1 cột, mỗi widget
     1 hàng cho thoáng và cân đối. */
  @media(max-width:1024px){
    .grid-3{grid-template-columns:1fr;}
    .asset-mini-cell .asset-mini-amount{font-size:8px;}
  }
  /* MOBILE NAV: hamburger + drawer sidebar + bottom quick-access bar */
  .mobile-topbar{display:none;}
  .mobile-overlay{display:none;}
  .bottom-nav{display:none;}

  @media(max-width:760px){
    .grid-3{grid-template-columns:1fr;}
    .stat-grid{grid-template-columns:1fr;}
    /* Trên mobile: topbar + thanh tìm kiếm + ticker không còn "dính" (fixed)
       nữa, mà cuộn theo nội dung như bình thường. Chỉ còn .mobile-topbar
       (hamburger + logo) là vẫn cố định trên cùng. */
    .main{padding:16px 16px 140px; padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px)); margin-left:0; padding-top:calc(58px + 16px);}
    /* Tăng khoảng trống cuối trang trên mobile (50px desktop -> 80px mobile) để
       nội dung cuối cùng không bị thanh bottom-nav / bong bóng chat AI che mất. */
    .page.active{padding-bottom:80px;}
    .sticky-top-wrap{
      position:static;
      left:auto; right:auto; top:auto;
      background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
      padding:0 0 16px;
    }

    .top-actions{flex:0 0 auto; justify-content:flex-end; flex-wrap:wrap; row-gap:10px;}
    /* FIX: ô tìm kiếm mở rộng (.search-wrap.mobile-expanded, position:fixed z-index:1001)
       bị .mobile-topbar (position:fixed z-index:800) đè lên dù có z-index cao hơn.
       Nguyên nhân: .topbar có position:relative + z-index:2 -> tạo 1 stacking context
       riêng, khiến z-index:1001 của .search-wrap chỉ có hiệu lực SO SÁNH BÊN TRONG
       .topbar, còn khi so với các phần tử fixed khác nằm ngoài .topbar (như
       .mobile-topbar) thì thứ hạng thực tế của cả nhánh .topbar chỉ là z-index:2
       của chính nó. Nâng z-index của .topbar lên cao hơn .mobile-topbar (800) và
       .mobile-overlay (999) để con .search-wrap.mobile-expanded thoát khỏi bị che.
       LƯU Ý (sửa lỗi cuộn trang): .topbar giờ chỉ ở trong luồng tài liệu bình
       thường (không fixed) và cuộn theo trang, trôi qua bên dưới .mobile-topbar
       (fixed, z-index:800). Nếu để z-index:1002 CỐ ĐỊNH quanh năm, ngay khi vừa
       kéo cuộn, .topbar sẽ bị vẽ ĐÈ LÊN TRÊN .mobile-topbar (dù đã cuộn qua khỏi
       vị trí đó về mặt bố cục) vì z-index của nó luôn cao hơn. Do đó chỉ nâng
       z-index lên 1002 ĐÚNG LÚC ô tìm kiếm đang mở rộng (dùng :has()), còn lại
       giữ z-index thấp như mặc định để không che thanh mobile-topbar cố định. */
    .topbar{position:relative; z-index:2;}
    .topbar:has(.search-wrap.mobile-expanded){z-index:1002;}
    .user-chip .name{max-width:100px;}

    /* Nút thu gọn sidebar chỉ dành cho desktop, ẩn trên mobile vì sidebar mobile
       là drawer riêng — bấm vào sẽ gây lỗi hiển thị */
    .sidebar-footer{display:none;}

    /* Thu nhỏ thanh tìm kiếm về kích thước bằng nút chuông (38x38), chỉ trên mobile.
       Chạm vào để mở rộng ra gõ tìm kiếm, chạm ra ngoài sẽ tự thu lại. */
    .search-wrap{
      flex:0 0 auto; width:38px; height:38px; border-radius:10px;
      background:var(--panel); border:1px solid var(--border);
      overflow:hidden; transition:width .22s var(--ease);
    }
    .search-wrap svg{left:50%; top:50%; transform:translate(-50%,-50%);}
    .search-wrap input{
      width:0; padding:0; border:none; background:transparent; opacity:0; transition:opacity .15s var(--ease);
    }
    .search-wrap.mobile-expanded{
      width:min(60vw, 250px); position:fixed; top:12px; right:16px; z-index:1001;
      box-shadow:var(--shadow-popover);
      overflow:visible;
    }
    .search-wrap.mobile-expanded svg{left:13px; top:50%; transform:translateY(-50%);}
    .search-wrap.mobile-expanded input{width:100%; padding:9px 14px 9px 36px; opacity:1;}

    /* Nút "Nâng cấp" trên mobile: thu về icon tròn 38x38 bằng đúng kích thước
       nút chuông, đặt ngay sát bên cạnh để luôn hiển thị rõ ràng, không bị
       tràn dòng hay che khuất bởi các phần tử khác trong top-actions. */
    .topbar-upgrade-btn{
      width:38px; height:38px; padding:0 !important; border-radius:10px;
      justify-content:center; flex-shrink:0;
    }

    /* Sidebar becomes an off-canvas drawer (bỏ qua trạng thái thu gọn trên mobile) */
    .sidebar, body.sidebar-collapsed .sidebar{
      display:flex;
      z-index:1000;
      width:245px;
      max-width:78vw;
      transform:translateX(-100%);
      transition:transform .28s var(--ease);
    }
    body.sidebar-collapsed .main{margin-left:0;}
    body.sidebar-collapsed .sticky-top-wrap{left:0;}
    body.sidebar-collapsed .sidebar .brand-name, body.sidebar-collapsed .sidebar .brand-sub,
    body.sidebar-collapsed .sidebar-collapse-label{display:block;}
    body.sidebar-collapsed .sidebar .nav-label{display:flex; justify-content:space-between; padding:10px 14px; margin-bottom:6px;}
    body.sidebar-collapsed .sidebar .nav-label-inner{gap:12px;}
    body.sidebar-collapsed .sidebar .nav-label-inner span:not(.nav-label-icon){display:inline;}
    body.sidebar-collapsed .sidebar [id$="Chevron"]{display:inline-block;}
    body.sidebar-collapsed .sidebar .nav-item{justify-content:flex-start; font-size:13.5px;}
    body.sidebar-collapsed .sidebar [id$="CollapseBody"]{display:none;}
    .sidebar.mobile-open{
      transform:translateX(0);
      box-shadow:20px 0 50px rgba(0,0,0,0.35);
    }
    #mobileSidebarCloseBtn{display:flex;}

    /* FIX: khi mở drawer sidebar trên mobile, .topbar (z-index:1002) vẫn đè
       lên trên .sidebar.mobile-open (z-index:1000) vì z-index:1002 được set
       cố định cho mọi trạng thái. Khi sidebar đang mở, hạ z-index của .topbar
       xuống dưới cả .mobile-overlay (999) và .sidebar (1000) để drawer + lớp
       phủ tối hiển thị đúng lên trên topbar. Lúc sidebar đóng, .topbar quay
       lại z-index:1002 như cũ để ô tìm kiếm mở rộng
       (.search-wrap.mobile-expanded) không bị .mobile-topbar che mất. */
    body:has(.sidebar.mobile-open) .topbar{z-index:900;}

    /* Dark overlay behind the drawer */
    .mobile-overlay{
      display:block;
      position:fixed; inset:0; z-index:999;
      background:var(--overlay);
      opacity:0; pointer-events:none;
      transition:opacity .25s var(--ease);
    }
    .mobile-overlay.show{opacity:1; pointer-events:auto;}

    /* Sticky top bar with hamburger + brand, visible only on mobile */
    .mobile-topbar{
      display:flex; align-items:center; gap:12px;
      position:fixed; top:0; left:0; right:0; z-index:800;
      height:58px; padding:0 16px;
      background:var(--panel); border-bottom:1px solid var(--border);
    }
    .mobile-hamburger{
      width:38px; height:38px; border-radius:10px; background:var(--panel-2);
      border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
      color:var(--text); cursor:pointer; flex-shrink:0;
    }
    .mobile-hamburger svg{width:20px; height:20px;}
    .mobile-topbar-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:var(--fs-title-md); color:var(--text);}

    /* Bottom quick-access nav bar */
    .bottom-nav{
      display:flex; justify-content:space-around; align-items:center;
      position:fixed; left:0; right:0; bottom:0; z-index:850;
      background:var(--panel); border-top:1px solid var(--border);
      padding:4px 4px 4px;
      padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
    }
    .bottom-nav-item{
      display:flex; flex-direction:column; align-items:center; gap:2px;
      color:var(--muted); font-size:10px; font-weight:600;
      flex:1; padding:4px 2px; cursor:pointer; border-radius:10px;
    }
    .bottom-nav-item svg{width:18px; height:18px;}
    .bottom-nav-item.active{color:var(--gold);}
    .bottom-nav-item.active svg{color:var(--gold);}

    /* Keep the floating AI bubble above the bottom nav, and make it smaller on mobile */
    #aiChatBubble{right:14px; bottom:84px;}
    #aiChatToggleBtn{width:34px; height:34px;}
    #aiChatToggleBtn svg{width:17px; height:17px;}
    #aiChatBadge{width:11px; height:11px;}

    /* Thu nhỏ khung chat AI trên mobile web để không chiếm quá nhiều màn hình */
    #aiChatWindow{
      width:calc(100vw - 24px); max-width:320px; right:-8px;
      height:420px; max-height:min(58vh, 420px);
      border-radius:16px;
    }
    .ai-chat-header{padding:11px 13px;}
    .ai-chat-avatar{width:28px; height:28px; border-radius:8px;}
    .ai-chat-avatar svg{width:15px; height:15px;}
    .ai-chat-title{font-size:var(--fs-title-sm);}
    .ai-chat-sub{font-size:10px;}
    .ai-chat-body{padding:10px 11px 4px; gap:8px;}
    .ai-msg{font-size:12.3px; padding:8px 11px;}
    .ai-suggest-row{padding:0 11px 8px; gap:5px;}
    .ai-suggest-chip{font-size:10.5px; padding:5px 9px;}
    .ai-chat-footer{padding:9px 9px;}
    #aiChatInput{font-size:16px; padding:7px 10px;}
    #aiChatSendBtn{width:32px; height:32px;}
    #aiChatSendBtn svg{width:14px; height:14px;}

    /* Bảng thông báo (chuông): thu nhỏ để không tràn ra ngoài màn hình */
    .notif-panel{
      position:fixed;
      top:64px;
      right:10px;
      left:10px;
      width:auto;
      max-width:none;
      z-index:900;
    }
    .notif-panel-list{max-height:min(60vh, 340px);}
    .notif-panel-header{padding:12px 14px; font-size:13px;}
    .notif-item{padding:9px 8px;}
    .notif-item .notif-msg{font-size:12.3px;}
    .notif-item .notif-time{font-size:10.5px;}
  }

  /* Analytics charts */
  .analytics-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; align-items:stretch;}
  .analytics-grid-2 .card, #analyticsPieRow .card{display:flex; flex-direction:column;}
  .chart-legend{display:flex; gap:18px; justify-content:center; margin-top:14px; font-size:12.5px; color:var(--muted); font-weight:600;}
  .legend-item{display:flex; align-items:center; gap:6px;}
  @media(max-width:640px){
    #cfSpendLegend.chart-legend{gap:6px 10px; font-size:7px;}
    #cfSpendLegend .legend-item{gap:3px;}
  }
  .legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
  .chart-bar-rect{transition:opacity .15s var(--ease), filter .15s var(--ease);}
  .chart-bar-rect:hover{opacity:0.75; filter:brightness(1.12); cursor:pointer;}
  /* Đồng bộ hiệu ứng tô đậm khi rê chuột cho các lát biểu đồ tròn (pie/donut)
     trong wg Phân tích (thu nhập/chi tiêu theo danh mục) — dùng chung class
     .chart-bar-rect cho path/slice, nên rule trên đã áp dụng tự động. Thêm
     riêng cho .pie-wrap để chắc chắn con trỏ + hiệu ứng luôn nhất quán dù
     phần tử không mang class .chart-bar-rect. */
  .pie-wrap svg path{ transition:opacity .15s var(--ease), filter .15s var(--ease); cursor:pointer; }
  .pie-wrap svg path:hover{ opacity:0.8; filter:brightness(1.12) drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 40%, transparent)); }

  .date-input-white-icon::-webkit-calendar-picker-indicator{
    filter: invert(1) brightness(2);
    cursor:pointer;
  }
  html[data-theme="light"] .date-input-white-icon::-webkit-calendar-picker-indicator{
    filter: none;
  }

  /* Gợi ý tự động thêm số 0 khi nhập tiền (triệu / tỷ) */
  .money-suggest-box{
    position:absolute;
    display:none;
    flex-direction:column;
    background:var(--panel);
    border:1px solid var(--border, rgba(255,255,255,0.12));
    border-radius:12px;
    box-shadow:var(--shadow-popover);
    overflow-y:auto;
    max-height:220px;
    z-index:1000;
  }
  .money-suggest-box.open{ display:flex; }
  .money-suggest-item{
    padding:9px 12px;
    font-size:13px;
    font-weight:600;
    color:var(--text, #fff);
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }
  .money-suggest-item span{
    font-weight:500;
    font-size:12px;
    color:var(--muted-2, #8a8fa3);
  }
  .money-suggest-item:hover{ background:var(--hover-bg, rgba(255,255,255,0.06)); }
  .money-suggest-item + .money-suggest-item{ border-top:1px solid var(--border, rgba(255,255,255,0.08)); }

  /* Info tooltip icon (vd: giải thích "ngân sách" trong Tổng quan) */
  .info-tip{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--muted-2, #8a8fa3);
    color:#fff;
    font-size:8px;
    font-weight:700;
    font-style:italic;
    font-family:Georgia, 'Times New Roman', serif;
    cursor:pointer;
    flex-shrink:0;
    user-select:none;
    opacity:0.85;
    transition:opacity .15s, background .15s;
  }
  .info-tip:hover, .info-tip.active{
    opacity:1;
    background:var(--gold);
  }
  .info-tip .info-tip-bubble{
    position:fixed;
    top:0;
    left:0;
    width:200px;
    white-space:normal;
    background:var(--panel);
    color:var(--text, #fff);
    border:1px solid var(--border, rgba(255,255,255,0.12));
    border-radius:10px;
    padding:8px 10px;
    font-size:11px;
    font-weight:500;
    font-style:normal;
    line-height:1.45;
    box-shadow:var(--shadow-popover);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:99999;
    pointer-events:none;
  }
  .info-tip:hover .info-tip-bubble,
  .info-tip.active .info-tip-bubble{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
  @media (max-width:480px){
    .info-tip .info-tip-bubble{ width:170px; }
  }
  /* ===== FIX: tooltip (.info-tip-bubble) bị lệch vị trí / bị đè / không hiện =====
     Nguyên nhân: .info-tip-bubble dùng position:fixed để thoát khỏi vùng bị cắt
     (overflow:hidden) của các card/widget cha, nhưng những phần tử cha đó lại có
     backdrop-filter và/hoặc transform (card:hover, widget kính mờ...) — theo spec
     CSS, backdrop-filter/transform/filter/perspective trên phần tử cha sẽ tự tạo
     ra một "containing block" mới cho con position:fixed, khiến toạ độ fixed bị
     tính lại theo phần tử cha đó thay vì theo viewport => tooltip hiển thị sai vị
     trí. Đồng thời overflow:hidden của card/widget cha cắt mất phần bong bóng
     tooltip khi nó tràn ra ngoài khung. Khi tooltip đang mở, tạm thời: (1) tắt
     overflow:hidden của card/widget chứa nó, và (2) tắt backdrop-filter/transform
     của các phần tử cha có khả năng tạo containing block, để position:fixed tính
     đúng theo viewport và không bị cắt. */
  .card:has(.info-tip:hover),
  .card:has(.info-tip.active),
  .stat-card:has(.info-tip:hover),
  .stat-card:has(.info-tip.active),
  .overview-widget:has(.info-tip:hover),
  .overview-widget:has(.info-tip.active){
    overflow:visible !important;
    transform:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    /* isolation:isolate ở widget kính mờ tạo 1 "khối chồng" (stacking context)
       riêng, khiến tooltip position:fixed bên trong vẫn bị coi là nằm trong lớp
       kính mờ đó khi vẽ layer -> phối màu/độ mờ bị ảnh hưởng theo. Tắt hẳn khi
       tooltip đang mở để tooltip vẽ độc lập, không bị pha trộn với nền kính. */
    isolation:auto !important;
  }
  /* ===== Đồng bộ nền tooltip (.info-tip-bubble) với nền tooltip chung của toàn
     app (dùng đúng var(--panel) đục màu + var(--shadow-popover), giống tooltip
     ở mọi nơi khác) — ép !important để không bị nền kính mờ / mix-blend của
     widget cha (assetMini, networth...) làm tooltip bị trong suốt, khó đọc chữ. */
  .info-tip .info-tip-bubble{
    z-index:2147483647;
    background:var(--panel) !important;
    color:var(--text) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow-popover) !important;
    mix-blend-mode:normal !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    text-shadow:none !important;
  }
  .pie-wrap{display:flex; flex-direction:column; align-items:center; flex:1;}
  /* ===== wg "Phân bổ tài sản" (trang Phân tích, #pieAssetsWrap) =====
     Danh sách chú thích (.pieHoverLegend) bên dưới biểu đồ tròn được JS chèn
     động (xem renderHoverAllocationPie) và không có giới hạn chiều cao, nên khi
     có nhiều danh mục tài sản, card sẽ bị kéo giãn rất dài. Giới hạn chiều cao
     tối đa + thêm thanh cuộn riêng cho danh sách này. */
  .pieHoverLegend[data-for="pieAssetsWrap"]{
    max-height:220px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:4px;
  }
  .pieHoverLegend[data-for="pieAssetsWrap"]::-webkit-scrollbar{width:6px;}
  .pieHoverLegend[data-for="pieAssetsWrap"]::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
  .pie-legend-left span.lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .chart-empty{display:flex; align-items:center; justify-content:center; height:220px; color:var(--muted-2); font-size:13px; font-family:'Manrope',sans-serif;}
  /* SVG <text> không tự kế thừa font-family từ CSS ngoài như div — nếu JS vẽ
     biểu đồ chỉ set fill/font-size mà quên font-family, trình duyệt sẽ rơi về
     font mặc định (serif), gây ra hiện tượng "sai font" ở dòng chữ trạng thái
     rỗng bên trong SVG (VD: "Chưa có dữ liệu thu nhập/chi tiêu"). Ép cứng ở
     đây để luôn đồng bộ font với toàn app, không phụ thuộc JS có khai báo hay
     không. */
  svg text{font-family:'Manrope',sans-serif;}

  /* ===== Hiệu ứng rê chuột cho biểu đồ đường luỹ kế (wg "Chi tiêu" / "Thu nhập") =====
     Phần vẽ đường gióng + chấm tròn + tooltip được tạo động bằng JS (xem hàm
     attachLineHover trong app-ui.js); ở đây chỉ bổ sung con trỏ dạng "crosshair"
     và filter nổi bật cho chấm tròn để dễ nhận biết vị trí đang rê. */
  #spendingChart, #incomeChart{ cursor:crosshair; }
  .lineHoverDot{ filter:drop-shadow(0 0 5px rgba(0,0,0,0.35)); }
  .lineHoverTooltipBg{ filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
  /* Net worth chart: hiện con trỏ pointer trên từng cột để gợi ý có thể rê chuột
     xem tooltip (title gốc của trình duyệt, gắn ở app-ui.js). */
  .networth-chart .bar-col{ cursor:pointer; }

  /* Profile page */
  .profile-layout{display:grid; grid-template-columns:280px 1fr; gap:22px; align-items:start;}
  .profile-avatar-card{text-align:center;}
  .avatar-big-wrap{position:relative; width:120px; height:120px; margin:0 auto 18px;}
  /* Badge trạng thái tài khoản (FREE / VIP) phía trên avatar, hồ sơ cá nhân */
  .profile-plan-badge{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    margin:0 auto 12px; padding:5px 14px; border-radius:20px;
    font-family:'Sora',sans-serif; font-weight:800; font-size:12px; letter-spacing:0.5px;
    color:#0a0a0f; background:linear-gradient(90deg,#f5d372,#ffe9a8,#f0c04a,#ffe9a8,#f5d372);
    background-size:250% 100%; animation:profilePlanBadgeShine 2.6s linear infinite;
    box-shadow:0 4px 14px rgba(240,192,74,0.35); width:fit-content;
  }
  .profile-plan-badge.is-free{
    background:linear-gradient(90deg,#e7e9f0,#ffffff,#d8dbe6,#ffffff,#e7e9f0);
    background-size:250% 100%; box-shadow:0 4px 14px rgba(255,255,255,0.12);
  }
  @keyframes profilePlanBadgeShine{
    0%{background-position:0% 50%;}
    100%{background-position:250% 50%;}
  }
  .avatar-big{
    width:120px; height:120px; border-radius:50%; background:var(--accent-grad);
    display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif;
    font-weight:700; font-size:38px; color:#0a0a0f; overflow:hidden;
  }
  .avatar-big img{width:100%; height:100%; object-fit:cover;}
  .avatar-edit-btn{
    position:absolute; bottom:2px; right:2px; width:36px; height:36px; border-radius:50%;
    background:var(--panel-2); border:3px solid var(--panel); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text);
  }
  .avatar-edit-btn:hover{background:var(--gold); color:#0a0a0f;}
  .avatar-edit-btn svg{width:15px; height:15px;}
  .profile-display-name{font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; margin-bottom:2px;}
  .profile-display-sub{font-size:12.5px; color:var(--muted-2); margin-bottom:18px;}
  .profile-remove-avatar{font-size:12.5px; color:var(--red); font-weight:700; cursor:pointer;}

  .form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .form-field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
  .form-field label{font-size:12.5px; color:var(--muted-2); font-weight:600;}
  .form-field input, .form-field select, .form-field textarea{
    background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
    color:var(--text); font-size:14px; font-family:inherit; outline:none; resize:vertical;
  }
  .form-field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:38px;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);}
  .form-field select option{background:var(--panel-2); color:var(--text);}
  .form-field .char-count{font-size:11px; color:var(--muted-2); text-align:right;}
  .profile-save-row{display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; align-items:center;}
  .profile-save-row .btn-primary{width:auto; padding:13px 32px;}
  .profile-toast{
    display:none; align-items:center; gap:8px; background:rgba(62,230,168,0.1); border:1px solid rgba(62,230,168,0.35);
    color:var(--green); font-size:13px; font-weight:600; padding:10px 16px; border-radius:10px; margin-bottom:18px;
  }
  .profile-toast.show{display:flex;}
  .profile-toast svg{width:16px; height:16px;}
  /* Dòng thông báo "Đã lưu..." của trang Cài đặt: không phải hộp nổi, mà là
     1 dòng chữ nằm ngay cuối dòng chứa nút vừa bấm (JS sẽ gắn nó vào cuối
     .profile-save-row tương ứng, xem showSettingsToast()). */
  .settings-inline-msg{
    display:none; align-items:center; gap:6px; color:var(--green,#3ee6a8);
    font-size:12.5px; font-weight:600; white-space:nowrap; opacity:0;
    transition:opacity .2s ease;
  }
  .settings-inline-msg.show{display:flex; opacity:1;}
  .settings-inline-msg svg{width:14px; height:14px; flex-shrink:0;}

  /* Mobile: ẩn tính năng "Tuỳ chỉnh bố cục" ở trang tổng quan (chỉ áp dụng mobile, không đổi desktop) */
  @media(max-width:640px){
    #customizeBtn{display:none;}
    #customizeHint{display:none;}
  }
  @media(max-width:820px){
    .profile-layout{grid-template-columns:1fr;}
    .form-grid-2{grid-template-columns:1fr;}
  }

  /* ===== Đồng bộ & giảm size chữ/số trên mobile ===== */
  @media(max-width:640px){
    /* Tiêu đề trang & khối */
    /* Đã đồng bộ qua biến --fs-title-* ở :root */
    .modal-box h3{font-size:var(--fs-title-md);}
    .pro-price{font-size:20px;}
    /* cf-card-amount: kích thước giờ tự co theo container-query (cqi), không cần override cứng ở đây nữa */
    .hstat-icon{font-size:16px;}
    /* ovIncomeTotal/ovExpenseTotal: chuyển sang container-query auto-shrink, xem quy tắc chung bên dưới */

    /* Thẻ thống kê mini (stat-tile-mini) */
    /* val-mini: kích thước giờ tự co theo container-query (cqi), không cần override cứng ở đây nữa */
    .lbl-mini{font-size:10.5px;}
    .ic-mini{font-size:11px; width:22px; height:22px;}
    .stat-tile-mini{padding:9px 10px;}

    /* Chữ nội dung & nhãn phổ biến: đồng bộ về 1 vài mốc chuẩn thay vì rải rác 12/12.5/13/13.3/13.5/14/14.5 */
    .card, .page{font-size:13px;}
    .info-tip-bubble{font-size:11.5px;}
    .filter-btn{font-size:12px; padding:7px 12px;}
    .lbl-mini, .val-mini, .ic-mini{line-height:1.3;}

    /* Chống tràn ngang: bộ lọc, nút thêm, card, danh sách giao dịch */
    .card{padding:16px;}
    .filters{flex-wrap:wrap; gap:8px; width:100%;}
    .filter-btn{white-space:nowrap;}
    /* Thanh lọc "Tất cả / Thu nhập / Chi tiêu / Vay-Cho vay" ở trang Thu chi:
       trước đây dùng flex-wrap:wrap (thừa hưởng từ .filters chung), khiến các
       nút lọc tự xuống dòng khi không đủ chỗ ngang -> đẩy lệch/vỡ bố cục phần
       nội dung bên dưới trên màn hình hẹp. Đổi sang KHÔNG xuống dòng + CUỘN
       NGANG (giống kỹ thuật đã dùng cho bảng giao dịch #txListContainer),
       giữ mỗi nút lọc nguyên vẹn 1 hàng, không bao giờ vỡ layout trang nữa. */
    #txFilterBar{
      flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain; padding-bottom:2px;
    }
    #txFilterBar .filter-btn{flex-shrink:0;}
    #page-transactions .section-head{flex-direction:column; align-items:stretch;}
    /* Nút "+ Thêm giao dịch" trên mobile: trước đây kéo full-width (width:100%)
       làm nút to bất thường, không đồng bộ với các nút "+ Thêm..." khác trong
       app (đều là pill nhỏ gọn theo nội dung chữ). Bỏ width:100%, thu nhỏ
       padding/cỡ chữ và để nút tự co theo nội dung, căn PHẢI trong khu vực
       section-head theo yêu cầu thiết kế lại. */
    #page-transactions .add-btn-glow{
      width:auto; align-self:flex-end; justify-content:center;
      padding:8px 16px; font-size:12.5px; margin-top:2px;
    }
    #page-transactions .stat-grid-mini-row{gap:8px;}
    /* Bỏ overflow-x:hidden ở đây vì nó cắt mất box-shadow của widget tràn ra
       phần padding 16px quanh trang. Dùng max-width + word-break/box-sizing
       trên các phần tử con cụ thể (đã xử lý riêng ở .tx-row, .filters...)
       để chống tràn ngang mà không chặn shadow. */
    .page, .content-row{max-width:100%;}

    /* Mỗi dòng giao dịch trên mobile: giữ nguyên 1 hàng ngang (không xuống
       dòng). QUAN TRỌNG: dùng width CỐ ĐỊNH (px) cho từng cột thay vì
       "max-content" — giống hệt kỹ thuật của bảng "Danh mục tài sản"
       (.asset-row/.asset-table-head dùng chung 1 bộ px cột cho mọi dòng).
       Lý do: mỗi .tx-row là 1 grid container RIÊNG BIỆT, nếu để width cột
       tự co theo nội dung (max-content) thì mỗi dòng sẽ có độ rộng cột
       KHÁC NHAU tuỳ tên/danh mục dài ngắn -> các cột không thẳng hàng, dòng
       nọ tràn dòng kia (đây chính là lỗi vỡ giao diện trước đó). Cố định
       cứng theo px thì mọi dòng luôn có đúng 1 độ rộng, cột thẳng hàng tăm
       tắp, và cả bảng tự nhiên rộng hơn khung chứa -> #txListContainer sẽ
       cuộn ngang (đã bật overflow-x:auto ở trên) thay vì bẻ dòng/tràn. */
  }

  /* Bảng giao dịch trên mobile (Thu nhập/Chi tiêu): thay vì để tên/badge
     xuống dòng (dễ vỡ, khó đọc theo cột), cho phép CUỘN NGANG cả bảng, giữ
     mỗi dòng trên 1 hàng ngang duy nhất, các cột thẳng hàng như bảng thật.
     QUAN TRỌNG: dùng cùng breakpoint 760px với toàn bộ layout mobile khác
     (topbar/bottom-nav ở dòng ~2223) — trước đây rule này nằm riêng trong
     block @media(max-width:640px) trong khi phần còn lại của mobile layout
     bật ở 760px, tạo ra một dải 641-760px "lọt lưới": app hiển thị giao
     diện mobile (topbar/bottom-nav) nhưng bảng giao dịch vẫn dùng cột co
     giãn kiểu desktop -> tràn ngang ra khỏi .card/.page/.main, và vì html
     có overflow-x:hidden nên bị cắt cụt toàn trang mà KHÔNG có thanh cuộn
     nào để xem tiếp. Gộp về chung 1 breakpoint để không bao giờ lệch nữa. */
  @media(max-width:760px){
    /* Wrapper bọc nội dung bên trong #txListContainer (tx-date-label + toàn
       bộ .tx-row) — CẦN THÊM TRONG HTML/JS render bảng giao dịch, bọc ngay
       bên trong #txListContainer. min-width tường minh ở đây mới là thứ đảm
       bảo THẬT SỰ tràn ngang và sinh thanh cuộn, thay vì trông chờ vào việc
       grid tự "vỡ" theo cột px cố định (.tx-row) như trước — cách cũ không
       đáng tin cậy vì tuỳ ngữ cảnh lồng nhau trình duyệt có thể tự co cột
       lại thay vì tràn ra, gây lỗi "không cuộn được". Đây là kỹ thuật ĐÃ
       DÙNG và đang chạy đúng ở bảng "Danh mục tài sản" (.asset-table-inner
       {min-width:930px}) — đồng bộ hoá theo đúng pattern đó. */
    .tx-list-inner{min-width:620px;}
    /* Đổi cột px cứng sang tỉ lệ fr (giữ tối thiểu bằng px) — cùng pattern
       fr+px như .asset-row (0.6fr 0.6fr 150px 160px 165px 60px), và cùng tỉ
       lệ fr đã dùng ở bản desktop của .tx-row (1.6fr / 1.5fr / 0.9fr) thay
       vì con số px tuỳ tiện không khớp thiết kế các bảng khác trong app. */
    .tx-row{
      grid-template-columns: 1.6fr 1.5fr 110px 26px 26px;
      column-gap:16px;
    }
    .tx-table-head{
      grid-template-columns: 1.6fr 1.5fr 110px 26px 26px;
      column-gap:16px;
    }
    .tx-main, .tx-badges{flex-wrap:nowrap;}
    .tx-name{font-size:13px; white-space:nowrap; overflow-wrap:normal; word-break:normal;}
    .tag-count-pill, .cat-badge{white-space:nowrap;}
    .cat-badge{font-size:10.5px; padding:3px 8px;}
    /* Giảm cỡ số tiền trên mobile để không chiếm quá nhiều bề ngang */
    .tx-amount{font-size:13px; white-space:nowrap; overflow-wrap:normal; word-break:normal;}
  }
/* ============ ONBOARDING TOUR (hướng dẫn dùng cho người lần đầu truy cập) ============ */
#tourOverlay{
  position:fixed; inset:0; z-index:100000; display:none;
}
#tourOverlay.active{ display:block; }
#tourDim{
  position:fixed; inset:0;
  background:var(--tour-overlay, var(--overlay));
  box-shadow: inset 0 0 0 9999px transparent;
  transition:opacity .25s var(--ease);
}
#tourSpotlight{
  position:fixed; border-radius:14px;
  box-shadow: 0 0 0 6000px var(--tour-overlay, var(--overlay));
  border:2px solid var(--gold);
  transition:top .35s var(--ease), left .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
  pointer-events:none;
  z-index:100001;
}
#tourCard{
  position:fixed; z-index:100002; width:320px; max-width:88vw;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:20px; box-shadow:var(--shadow-modal);
  transition:top .35s var(--ease), left .35s var(--ease);
}
#tourCard .tour-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, transparent); padding:4px 10px; border-radius:20px; margin-bottom:10px;
}
#tourCard .tour-title{ font-family:'Manrope',sans-serif; font-size:var(--fs-title-lg); font-weight:700; color:var(--text); margin-bottom:8px; }
#tourCard .tour-desc{ font-size:13.5px; color:var(--muted); line-height:1.55; margin-bottom:16px; }
#tourCard .tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#tourCard .tour-skip{ font-size:12.5px; color:var(--muted-2); cursor:pointer; background:none; border:none; padding:6px 2px; }
#tourCard .tour-skip:hover{ color:var(--text); }
#tourCard .tour-btns{ display:flex; gap:8px; }
#tourCard .tour-btn{
  padding:8px 16px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; border:none;
  background:var(--panel-2); color:var(--text); border:1px solid var(--border);
}
#tourCard .tour-btn.primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff; border:none;
}
#tourCard .tour-dots{ display:flex; gap:5px; margin-bottom:12px; }
#tourCard .tour-dot{ width:6px; height:6px; border-radius:50%; background:var(--border); }
#tourCard .tour-dot.active{ background:var(--gold); width:16px; border-radius:4px; transition:width .2s; }
@media(max-width:640px){
  #tourCard{ width:88vw; }
}/* Tính năng hướng dẫn sử dụng (onboarding tour) đã tắt trên web mobile -> ẩn luôn nút bóng đèn */
@media(max-width:760px){
  #helpTourBtn{ display:none; }
}

/* ===== Viền tĩnh (không xoay/không chạy) cho mọi card/stat-card =====
   Đã gỡ bỏ toàn bộ hiệu ứng viền quay/viền chạy (animated running border,
   runBorderSpin, --run-angle) theo yêu cầu. Card/stat-card giờ chỉ dùng
   viền tĩnh đơn giản, không còn animation nào tác động lên viền. */
.card, .stat-card{
  position:relative;
  border:1px solid var(--border);
  background:var(--panel);
}
#assetsStatGrid .stat-card{
  border:1px solid var(--border);
  background:var(--panel);
}

/* ===== QUICK ADD FAB: nút "+" cố định bên phải giữa trang, thêm nhanh tài sản/giao dịch ===== */
#quickAddFab{
  position:fixed; right:26px; top:50%;
  /* --fab-offset-y: độ lệch người dùng tự kéo lên/xuống so với vị trí gốc
     (giữa màn hình), giới hạn -100px..100px, lưu lại ở localStorage. */
  --fab-offset-y:0px;
  transform:translateY(calc(-50% + var(--fab-offset-y)));
  z-index:950; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  font-family:'Manrope',sans-serif;
  pointer-events:none;
}
#quickAddFab #quickAddBtn{ pointer-events:auto; }
#quickAddBtn{
  width:38px; height:38px; border-radius:50%; border:none; cursor:grab; touch-action:none;
  background:var(--accent-grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px color-mix(in srgb, var(--gold) 55%, transparent), 0 4px 10px rgba(0,0,0,.35);
  opacity:.55; position:relative;
  transition:transform .25s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
/* Hiệu ứng pulse (chuyển từ icon chat AI sang đây): vòng tròn lan toả liên
   tục quanh nút, dùng lại keyframe aiPulse đã có sẵn. Tắt khi đang kéo
   (dragging) hoặc đang mở menu (open) để tránh rối mắt lúc thao tác. */
#quickAddBtn::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--gold);
  opacity:0; animation:aiPulse 2.4s ease-out infinite; pointer-events:none;
}
#quickAddFab.dragging #quickAddBtn::after,
#quickAddFab.open #quickAddBtn::after{ display:none; }
#quickAddFab.dragging #quickAddBtn{ cursor:grabbing; transition:none; opacity:1; }
#quickAddFab.dragging{ transition:none; }
#quickAddBtn svg{ width:20px; height:20px; }
#quickAddBtn:hover{ opacity:1; box-shadow:0 10px 26px color-mix(in srgb, var(--gold) 65%, transparent), 0 5px 12px rgba(0,0,0,.4); }
#quickAddBtn:active{ transform:scale(.94); }
#quickAddFab.open #quickAddBtn{ transform:rotate(45deg); opacity:1; }
#quickAddMenu{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
#quickAddFab.open{ pointer-events:auto; }
#quickAddFab.open #quickAddMenu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.quick-add-option{
  display:flex; align-items:center; gap:8px; padding:9px 14px 9px 12px;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:30px; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s var(--ease), background .15s var(--ease);
}
.quick-add-option:hover{ transform:translateX(-2px); background:var(--panel-2); }
.quick-add-option-icon{
  width:26px; height:26px; border-radius:50%; background:var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

@media (max-width:760px){
  #quickAddFab{ right:14px; }
  #quickAddBtn{ width:34px; height:34px; }
  #quickAddBtn svg{ width:17px; height:17px; }
  .quick-add-option{ font-size:12px; padding:8px 12px 8px 10px; }
  .quick-add-option-icon{ width:22px; height:22px; }
}

/* ===== EYE TOGGLE: ẩn/hiện số liệu trang Tài sản ===== */
.eye-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  color:var(--muted); background:var(--panel-2); border:1px solid var(--border);
  flex-shrink:0; transition:color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.eye-toggle-btn:hover{ color:var(--text); background:var(--panel); }
.eye-toggle-btn:active{ transform:scale(.92); }

#page-assets.numbers-hidden .val,
#page-assets.numbers-hidden .asset-value,
#page-assets.numbers-hidden .asset-liab{
  filter:blur(7px);
  user-select:none;
  transition:filter .15s var(--ease);
}
/* ===================== CÔNG CỤ TÍNH TOÁN (Calculator page) ===================== */
.calc-tabbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.calc-tab{display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px; border:1px solid var(--border); background:var(--panel); color:var(--muted); font-size:13.5px; font-weight:700; cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .1s;}
.calc-tab svg{width:16px; height:16px; flex-shrink:0;}
.calc-tab:hover{border-color:var(--gold); color:var(--text);}
.calc-tab:active{transform:scale(.97);}
.calc-tab.active{background:var(--accent-grad); color:var(--text); border-color:transparent; box-shadow:0 4px 14px color-mix(in srgb, var(--gold) 35%, transparent);}
.calc-panel{display:none;}
.calc-panel.active{display:block;}
.calc-tool-card{padding:22px;}
.calc-tool-select{margin-bottom:18px;}
.calc-tool-select select{
  width:100%; max-width:420px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; color:var(--text); font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;
}
.calc-tool-select select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
@media (max-width:760px){ .calc-grid{grid-template-columns:1fr;} }
.calc-form .form-row{margin-bottom:14px;}
.calc-form-note{font-size:12px; color:var(--muted-2); margin-top:-6px; margin-bottom:14px; line-height:1.5;}
.calc-radio-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.calc-radio-row label{
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:100px; border:1px solid var(--border);
  background:var(--panel-2); font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer;
}
.calc-radio-row input{accent-color:var(--gold);}
.calc-radio-row input:checked + span, .calc-radio-row label:has(input:checked){color:var(--text); border-color:var(--gold);}
.calc-result{background:var(--panel-2); border:1px solid var(--border); border-radius:16px; padding:18px 20px;}
.calc-result-title{font-size:13px; font-weight:700; color:var(--muted-2); margin-bottom:14px; text-transform:uppercase; letter-spacing:.02em;}
.calc-result-main{font-family:'Sora',sans-serif; font-size:26px; font-weight:800; color:var(--gold); margin-bottom:4px; word-break:break-word;}
.calc-result-sub{font-size:12.5px; color:var(--muted-2); margin-bottom:16px;}
.calc-result-rows{display:flex; flex-direction:column; gap:10px;}
.calc-result-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px dashed var(--border);}
.calc-result-row:first-child{padding-top:0; border-top:none;}
.calc-result-row .lbl{font-size:13px; color:var(--muted-2); font-weight:600;}
.calc-result-row .val{font-size:13.5px; font-weight:700; color:var(--text); text-align:right;}
.calc-result-row .val.pos{color:#2ecc71;}
.calc-result-row .val.neg{color:#ff6b6b;}
.calc-table-wrap{margin-top:20px; overflow-x:auto; border:1px solid var(--border); border-radius:14px;}
.calc-table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:560px;}
.calc-table th{background:var(--panel-2); color:var(--muted-2); font-weight:700; text-align:right; padding:10px 12px; white-space:nowrap; position:sticky; top:0;}
.calc-table th:first-child, .calc-table td:first-child{text-align:left;}
.calc-table td{padding:9px 12px; text-align:right; border-top:1px solid var(--border); white-space:nowrap; color:var(--text);}
.calc-table tbody tr:hover{background:var(--panel-2);}
.calc-table-scroll{max-height:420px; overflow-y:auto;}

/* ============ CHONG VO GIAO DIEN / TRAN TRANG do du lieu nguoi dung nhap ============
   Dung chung cho toan bo trang: bat ky vung nao hien thi lai text tu do do
   user nhap (ten tai san, ghi chu, ten giao dich...) deu nen co 1 trong 2 class
   duoi day de dam bao khong bao gio pha vo layout, ke ca khi rule o JS
   (sanitizeFreeText) vi ly do nao do chua kip chan het truong hop bien. */

/* Dung cho khoi noi dung nhieu dong, cho phep xuong dong nhung khong tran ngang:
   vd o ghi chu tai san/muc tieu, mo ta, bio... */
.content, .text-wrap-safe{
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
  min-width:0;
  max-width:100%;
}

/* Dung cho hien thi 1 dong (ten hang, label, tieu de trong danh sach/the):
   cat gon bang dau ... thay vi day vo layout. */
.single-line, .text-ellipsis-safe{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  min-width:0;
  max-width:100%;
}

/* An toan chung cho input/textarea nhap text tu do: du JS da chan ky tu lap/
   tu qua dai, van giu overflow-wrap o CSS de phong truong hop paste nhanh
   truoc khi listener kip chay. */
input[type="text"]:not(.money-input), textarea{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* ============ HE THONG THONG BAO LOI CHUNG (API / Database / Mat mang) ============
   Dung cho moi truong hop dong bo nen bi loi (Supabase update/select that bai,
   mat internet giua chung...) de user luon biet chuyen gi dang xay ra, thay vi
   loi bi "nuot" am tham chi console.error nhu truoc.
   LUU Y: truoc day co 1 banner co dinh rieng (#offlineBanner) tach biet voi
   toast, kem theo padding-top day noi dung xuong khi mat mang (html[data-offline]).
   Da GOP het ve chung 1 co che toast (.global-toast, xem "sticky" ben duoi)
   de tranh 2 UI song song gay loi/nham lan -> khong con can #offlineBanner
   va padding-top rieng nua. */

/* Ngan xep toast goc tren, dung chung cho loi dong bo / thong bao trang thai
   / va ca trang thai mat mang-co mang lai (toast "sticky" khong tu bien mat) */
#globalToastStack{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:100001;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  max-width:92vw; pointer-events:none;
}
.global-toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:8px;
  padding:11px 14px; border-radius:12px; font-size:12.8px; font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,.28); opacity:0; transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease; max-width:420px; line-height:1.4;
  backdrop-filter:blur(6px);
}
.global-toast.show{opacity:1; transform:translateY(0);}
.global-toast svg{width:16px; height:16px; flex-shrink:0; margin-top:1px;}
.global-toast .gt-msg{flex:1; min-width:0; overflow-wrap:break-word;}
.global-toast .gt-close{cursor:pointer; opacity:.6; flex-shrink:0; padding:2px;}
.global-toast .gt-close:hover{opacity:1;}
.global-toast.type-error{background:rgba(255,107,107,.13); border:1px solid rgba(255,107,107,.4); color:#ff6b6b;}
.global-toast.type-warning{background:rgba(255,193,7,.13); border:1px solid rgba(255,193,7,.4); color:#e0a800;}
.global-toast.type-success{background:rgba(62,230,168,.13); border:1px solid rgba(62,230,168,.4); color:var(--green,#3ee6a8);}
.global-toast.type-info{background:rgba(139,147,161,.13); border:1px solid rgba(139,147,161,.4); color:var(--muted,#8b93a1);}
/* Toast "dinh" (mat mang...): vien dam hon 1 chut de phan biet voi toast
   thoang qua thong thuong, khong co hieu ung/timer rieng nao khac. */
.global-toast.sticky{border-width:1.5px;}

@media(max-width:640px){
  #globalToastStack{top:10px; max-width:94vw;}
  .global-toast{font-size:12px; padding:10px 12px;}
}

/* ============ NÚT GÓP Ý (cạnh ô tìm kiếm) ============ */
.feedback-btn{
  display:flex; align-items:center; gap:7px;
  height:38px; padding:0 15px 0 12px; border-radius:10px;
  background:var(--panel); border:1px solid var(--border);
  color:var(--gold); cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:800; white-space:nowrap;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.feedback-btn svg{width:18px; height:18px; flex-shrink:0; color:var(--gold);}
.feedback-btn:hover{
  background:var(--panel-2);
  border-color:color-mix(in srgb, var(--gold) 40%, var(--border));
  transform:translateY(-1px);
}
.feedback-btn:active{transform:translateY(0) scale(.97);}
@media (max-width:900px){
  .feedback-btn .feedback-btn-label{display:none;}
  .feedback-btn{width:38px; padding:0; justify-content:center;}
}
@media (max-width:640px){
  .feedback-btn{display:none;} /* mobile dùng bottom-nav / menu khác, tránh chật topbar */
}

/* ============ MODAL GÓP Ý — 3 BƯỚC (theo mẫu thiết kế) ============ */
.fb-modal-box{max-width:460px;}
.fb-modal-box .modal-head{align-items:flex-start;}
.fb-modal-title{font-size:17px; font-weight:800; line-height:1.4; padding-right:14px;}
.fb-step-label{font-size:12px; font-weight:700; color:var(--muted-2); margin-bottom:14px;}

.fb-section-title{font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:14px;}

.fb-reaction-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.fb-reaction-btn{
  width:52px; height:52px; border-radius:50%; font-size:26px; line-height:1;
  background:var(--panel-2); border:2px solid var(--border); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.fb-reaction-btn:hover{transform:translateY(-2px) scale(1.06);}
.fb-reaction-btn.active{
  border-color:var(--gold); background:color-mix(in srgb, var(--gold) 16%, var(--panel-2));
  transform:scale(1.08);
}

.fb-step textarea{
  width:100%; resize:vertical; min-height:120px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; color:var(--text); font-size:13.5px; font-family:inherit; outline:none;
  box-sizing:border-box; line-height:1.6;
}
.fb-step textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);}
.fb-char-count{font-size:10.5px; font-weight:600; color:var(--muted-2);}
.fb-char-count.fb-limit-near{color:var(--gold);}

.fb-suggest-label{font-size:11px; font-weight:700; color:var(--muted-2); margin:14px 0 8px;}
.fb-tag-grid{display:flex; flex-wrap:wrap; gap:9px;}
.fb-tag-btn{
  padding:9px 14px; border-radius:100px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--muted); font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:all .15s ease;
}
.fb-tag-btn:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-1px);}
.fb-tag-btn:active{transform:translateY(0) scale(.96);}

.fb-note{font-size:11px; color:var(--muted-2); line-height:1.5; margin-top:10px;}

.fb-modal-actions{display:flex; gap:10px; margin-top:22px;}
.fb-modal-actions .ghost-btn{flex:0 0 auto;}
.fb-submit-btn{
  flex:1; padding:13px; border:none; border-radius:12px;
  background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#fff;
  font-weight:800; font-size:14px; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 22px color-mix(in srgb, var(--gold) 35%, transparent);
  transition:transform .15s ease, box-shadow .15s ease;
}
.fb-submit-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in srgb, var(--gold) 45%, transparent);}
.fb-submit-btn:active{transform:translateY(0) scale(.98);}
.fb-submit-btn:disabled{opacity:.6; cursor:default; transform:none;}