/* ─────────────────────────────────────────────────────────────
   theme.css — Nền tảng thiết kế chung cho Phương Đọc Vị
   Font: TT Commons Pro (Trial) — dùng thống nhất cho toàn bộ chữ + số liệu
   Tông màu: đen · trắng · xanh lá (accent) — phong cách fintech dữ liệu
   Dùng chung cho index.html (landing) và dashboard.html (khu thành viên)
   ───────────────────────────────────────────────────────────── */

/* ── FONT ── chỉ nạp các weight thực sự dùng, không import cả họ font ── */
@font-face{
  font-family:'TT Commons Pro';
  src:url('/fonts/TT_Commons_Pro_Trial_Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Commons Pro';
  src:url('/fonts/TT_Commons_Pro_Trial_Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Commons Pro';
  src:url('/fonts/TT_Commons_Pro_Trial_DemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Commons Pro';
  src:url('/fonts/TT_Commons_Pro_Trial_Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Commons Pro';
  src:url('/fonts/TT_Commons_Pro_Trial_ExtraBold.ttf') format('truetype');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Commons Pro';
  src:url('/fonts/TT_Commons_Pro_Trial_Black.ttf') format('truetype');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  /* ── BẢNG MÀU ── */
  --color-black:#0A0A0A;        /* nền section tối, text chính, nút CTA đen */
  --color-white:#FFFFFF;        /* nền chính */
  --color-gray-bg:#F5F5F5;      /* nền phụ, section xen kẽ */
  --color-gray-text:#6B6B6B;    /* text mô tả, phụ đề */
  --color-border:#E5E5E5;       /* viền input, chia section */

  --color-green-primary:#22C55E; /* accent: nút tăng trưởng, badge "Nắm giữ", kim gauge phần tốt */
  --color-green-text:#15803D;    /* chữ xanh trên nền trắng — đủ tương phản AA */
  --color-green-bg:#DCFCE7;      /* nền highlight ô % lãi dương trong bảng */
  --color-green-border:#BBF7D0;

  --color-red-signal:#EF4444;    /* điểm giảm trên biểu đồ, cảnh báo */
  --color-red-text:#DC2626;      /* chữ đỏ trên nền trắng — đủ tương phản AA */
  --color-red-bg:#FEE2E2;

  --color-amber-text:#B45309;    /* trạng thái trung gian (đang dùng thử) — không phải tín hiệu tài chính */
  --color-amber-bg:#FEF3C7;

  /* trên nền tối */
  --color-on-dark:#FFFFFF;
  --color-on-dark-muted:#A1A1A1;
  --color-dark-border:rgba(255,255,255,.14);

  /* ── TYPOGRAPHY ── */
  --font-heading:'TT Commons Pro','Helvetica Neue',Arial,sans-serif; /* weight 700-900 */
  --font-body:'TT Commons Pro','Helvetica Neue',Arial,sans-serif;    /* weight 400-500 */
  --font-data:'TT Commons Pro','Helvetica Neue',Arial,sans-serif;    /* số liệu, giá, % — cùng font chính, vẫn canh số qua tabular-nums */

  /* ── HÌNH KHỐI ── */
  --radius-sm:6px;
  --radius:10px;
  --radius-pill:999px;
  --ease:.16s cubic-bezier(.3,.7,.4,1);
}

/* ── PHÂN CẤP TYPOGRAPHY (class dùng chung) ── */
.t-eyebrow{
  font-family:var(--font-body);
  font-size:12px;font-weight:600;line-height:1.3;
  text-transform:uppercase;letter-spacing:.09em;
}
.t-data{ font-family:var(--font-data);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em; }

/* Số liệu tài chính — dùng ở cả 2 trang */
.num,.mono{ font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.val-up{ color:var(--color-green-text); }
.val-down{ color:var(--color-red-text); }

/* Utility nền */
.bg-dark{ background:var(--color-black);color:var(--color-on-dark); }
.bg-soft{ background:var(--color-gray-bg); }

/* ── LIÊN HỆ NHANH — nút nổi "Gọi điện" + "Zalo", dùng chung mọi trang ── */
.contact-fab{
  position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:500;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.contact-fab__btn{
  position:relative;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform var(--ease);
}
.contact-fab__btn:hover{ transform:scale(1.06); }
.contact-fab__btn:active{ transform:scale(.96); }
.contact-fab__btn:focus-visible{ outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(10,10,10,.35); }
.contact-fab__btn svg{ position:relative;z-index:1;width:26px;height:26px; }
.contact-fab__btn--zalo{ background:#0068FF; }
.contact-fab__btn--call{ background:var(--color-red-signal); }
.contact-fab__ring{ position:absolute;inset:-6px;border-radius:50%;background:inherit;opacity:.35;animation:contactPing 2.2s ease-out infinite; }
.contact-fab__btn--call .contact-fab__ring{ animation-delay:.6s; }
@keyframes contactPing{ 0%{transform:scale(.85);opacity:.45;} 70%,100%{transform:scale(1.45);opacity:0;} }
@media (prefers-reduced-motion:reduce){ .contact-fab__ring{ animation:none;opacity:0; } }
.contact-fab__tip{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px);
  background:var(--color-black);color:#fff;font-family:var(--font-body);font-size:12px;font-weight:600;
  white-space:nowrap;padding:6px 10px;border-radius:var(--radius-sm);
  opacity:0;pointer-events:none;transition:opacity var(--ease),transform var(--ease);
}
.contact-fab__btn:hover .contact-fab__tip,
.contact-fab__btn:focus-visible .contact-fab__tip{ opacity:1;transform:translateY(-50%) translateX(0); }
@media (max-width:640px){
  .contact-fab{ right:14px;gap:10px; }
  .contact-fab__btn{ width:48px;height:48px; }
  .contact-fab__btn svg{ width:23px;height:23px; }
  .contact-fab__tip{ display:none; } /* không có hover trên di động */
}