/* ══════════════════════════════════════════════════════════════════════════
   GEN UP · SMART AI TRADER — nền giao diện dùng chung
   ══════════════════════════════════════════════════════════════════════════

   KẾ THỪA GÌ TỪ GENUP
   Toàn bộ token màu lấy đúng giá trị của `genup.app/trang-chu.html` — cùng
   sắc nền, cùng thang chữ, cùng lục/lam/vàng. Nhìn là biết cùng một nhà.

   ĐỔI GÌ, VÀ VÌ SAO
   Màu dẫn của GENUP là ĐỎ. Ở màn hình giao dịch, đỏ **đã có nghĩa rồi**:
   lỗ, và nguy hiểm. Lấy đỏ làm màu thương hiệu thì mắt không tách được
   "nút của hãng" khỏi "cảnh báo mất tiền" — và đó không phải chuyện thẩm mỹ,
   đó là chuyện đọc nhầm màn hình lúc 2 giờ sáng.

   Nên ở đây:
       LAM  #4DA6FF  màu dẫn — thương hiệu, nút, liên kết
       LỤC  #3EE89A  lãi · đạt · bình thường
       ĐỎ   #DB1920  lỗ · hỏng · nguy hiểm   ← KHÔNG bao giờ dùng làm màu trang trí
       VÀNG #F0B23A  cần chú ý, chưa hỏng

   Đỏ vẫn còn nguyên trong logo GEN UP. Đó là chỗ đúng của nó: dấu hiệu nhận
   biết thương hiệu, không phải mã màu dữ liệu.

   LUẬT KHÔNG VIỀN
   Chủ dự án ghét viền. Chia khối bằng CHÊNH LỆCH SẮC ĐỘ và mảng màu, không
   bo khung. Ô nhập cũng vậy — nó là một mảng đậm/nhạt hơn khối chứa nó, chứ
   không phải một cái hộp có đường kẻ.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Nền — ba tầng sâu dần, đây là thứ thay cho đường viền */
  --den:#08090C; --den-2:#0F1216; --den-3:#151920; --side:#0B0D11;
  /* Chữ */
  --tx:#F2F6FA; --tx-2:#CFD8E1; --mut:#93A0AC;
  /* Ý nghĩa */
  --lam:#4DA6FF; --lam-d:#2E8AE6;
  --xanh:#3EE89A; --do:#DB1920; --do-2:#F0333A; --vang:#F0B23A;

  --r:14px; --r-nho:10px;
  --bong:0 18px 50px rgba(0,0,0,.30);
}

@media (prefers-color-scheme: light){
  :root{
    --den:#F4F6F9; --den-2:#FFFFFF; --den-3:#EDF1F6; --side:#FFFFFF;
    --tx:#0F1720; --tx-2:#33414F; --mut:#63738A;
    /* Lục và vàng của bản tối quá chói trên nền trắng — hạ độ sáng để chữ
       trên nền nhạt vẫn đọc được. Cùng ý nghĩa, khác độ sáng. */
    --xanh:#0E7A4C; --vang:#9A6109; --lam:#1F7ACF; --lam-d:#155FA6;
    --bong:0 14px 40px rgba(20,26,38,.10);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--den); color:var(--tx);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Thanh đầu trang ───────────────────────────────────────────────────── */
.dau{
  background:var(--side); padding:14px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.dau .logo{height:30px; width:auto; display:block}
.dau .logo.toi{display:none}
@media (prefers-color-scheme: dark){
  .dau .logo.sang{display:none}
  .dau .logo.toi{display:block}
}
.dau .nhanh{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lam); padding-left:14px;
}
.dau .day{margin-left:auto; display:flex; align-items:center; gap:14px}
.dau .day form{margin:0}
.dau .thoat{
  background:var(--den-3); color:var(--tx-2); border:0; border-radius:999px;
  padding:7px 15px; font:inherit; font-size:12.5px; cursor:pointer;
}
.dau .thoat:hover{background:var(--den-2); color:var(--tx)}

/* ── Khối nội dung ─────────────────────────────────────────────────────── */
.khung{max-width:1080px; margin:0 auto; padding:24px 20px 70px}

h1{font-size:22px; margin:0 0 3px; letter-spacing:.2px}
.phu{color:var(--mut); font-size:13px; margin:0 0 22px}

.the{
  background:var(--den-2); border-radius:var(--r);
  padding:18px 20px; margin-bottom:16px;
}
.the h2{
  font-size:12.5px; letter-spacing:.4px; color:var(--tx-2);
  margin:0 0 14px; text-transform:uppercase; font-weight:700;
}

.cau{font-size:16px; line-height:1.55}
.canh{
  background:var(--den-3); padding:11px 14px; border-radius:var(--r-nho);
  margin-top:12px; font-size:13.5px; color:var(--vang);
  /* Một vạch màu bên trái, KHÔNG phải khung bao quanh. */
  box-shadow:inset 3px 0 0 var(--vang);
}

/* ── Phễu: thanh ngang ─────────────────────────────────────────────────── */
.tsan{margin-bottom:26px}
.tsan .dau-ts{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.tsan .ten{font-size:17px; font-weight:700}
.tsan .so{color:var(--mut); font-size:13px}

.tang{margin-bottom:11px}
.tang .hang{display:flex; align-items:baseline; gap:8px; font-size:13.5px}
.tang .pt{margin-left:auto; color:var(--mut); font-size:12.5px; white-space:nowrap}
.tang .thanh{height:7px; border-radius:4px; background:var(--den-3); overflow:hidden; margin-top:5px}
.tang .thanh i{display:block; height:100%; background:var(--lam)}
.tang.cuoi .thanh i{background:var(--vang)}
.tang .vi{color:var(--mut); font-size:12.5px; margin-top:4px; line-height:1.5}

/* ── Bảng — chỉ kẻ ngang mảnh để mắt lần theo hàng, không kẻ dọc ───────── */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; color:var(--tx-2); font-weight:600; font-size:11.5px;
  letter-spacing:.3px; padding:0 10px 9px 0; text-transform:uppercase;
}
td{padding:9px 10px 9px 0; box-shadow:inset 0 1px 0 var(--den-3)}
td.so{text-align:right; font-variant-numeric:tabular-nums}

.nhan{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700}
.nhan.ok{background:rgba(62,232,154,.14); color:var(--xanh)}
.nhan.canh{background:rgba(240,178,58,.14); color:var(--vang)}
.nhan.loi{background:rgba(219,25,32,.14); color:var(--do-2)}
.nhan.tat{background:var(--den-3); color:var(--mut)}

.ghi{color:var(--mut); font-size:12.5px; margin-top:10px; line-height:1.55}
.loi-tai{color:var(--do-2); font-size:13.5px}
.cho{color:var(--mut); font-size:13.5px}

/* ── Trang đăng nhập ───────────────────────────────────────────────────── */
body.dang-nhap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.hop{background:var(--den-2); border-radius:18px; padding:38px 34px 30px; width:100%; max-width:390px; box-shadow:var(--bong)}
.hop .logo{display:block; width:150px; height:auto; margin:0 auto 6px}
.hop .logo.toi{display:none}
@media (prefers-color-scheme: dark){
  .hop .logo.sang{display:none}
  .hop .logo.toi{display:block}
}
.hop .ten{text-align:center; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lam); font-weight:700; margin:0 0 26px}
.hop label{display:block; font-size:12.5px; color:var(--tx-2); margin:0 0 7px; font-weight:600}
.hop input[type=password]{
  width:100%; border:0; outline:0; background:var(--den-3); color:var(--tx);
  padding:13px 15px; border-radius:11px; font:inherit; font-size:15px;
}
.hop input[type=password]:focus{box-shadow:0 0 0 2px var(--lam)}
.hop button{
  width:100%; margin-top:16px; border:0; border-radius:11px;
  background:var(--lam); color:#04121f; font-weight:700; font-size:15px;
  padding:13px; cursor:pointer; font:inherit; font-weight:700;
}
.hop button:hover{background:var(--lam-d); color:#fff}
.hop .loi{margin:14px 0 0; padding:10px 13px; border-radius:9px; background:rgba(219,25,32,.12); color:var(--do-2); font-size:13.5px}
.hop .chan{margin:24px 0 0; text-align:center; color:var(--mut); font-size:11.5px; line-height:1.65}