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


   ĐỒNG NHẤT VỚI GENUP.APP
   Lấy đúng token màu, đúng bố cục (thanh bên trái + thanh trên + lưới thẻ),
   đúng cách đặt logo kèm dòng chữ định danh bên dưới. Nhìn là biết một nhà.

   MỘT LUẬT RIÊNG, VÀ NÓ QUAN TRỌNG
   Đỏ GEN UP giữ nguyên vai trò **màu thương hiệu**: thanh bên, nút chính,
   mục đang mở. Nhưng trong **VÙNG DỮ LIỆU** — bảng, phễu, nhãn trạng thái —
   đỏ chỉ được mang một nghĩa: **lỗ / hỏng / nguy hiểm**.

   Vì sao phải tách bạch: người vận hành mở màn hình lúc 2 giờ sáng không có
   thời gian phân biệt "đỏ vì đây là nút của hãng" với "đỏ vì đang mất tiền".
   Trộn hai nghĩa vào một màu là mời người ta đọc nhầm đúng lúc không nên nhầm.

       ĐỎ   #DB1920  thương hiệu (chrome) · VÀ lỗ/nguy hiểm (dữ liệu)
       LAM  #4DA6FF  màu dẫn của khu dữ liệu · liên kết · thanh phễu ·
                     VÀ lãi/đạt/đang chạy (chốt 25/08: hệ chỉ xanh dương–đỏ–đen–trắng, bỏ xanh lá)
       VÀNG #F0B23A  cần chú ý, chưa hỏng

   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 là một mảng đậm/nhạt hơn khối chứa nó, không phải cái hộp
   có đường kẻ.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ CHỮ ═════════════════════════════════════════════════════════════════
   CHỮ: Plus Jakarta Sans — lấy đúng bộ genup.app đang tự host.
   ───────────────────────────────────────────────────────────────────────
   Trước 16/08/2026 trang này KHÔNG khai font nào cả, tức chạy bằng font mặc
   định của trình duyệt — khác hẳn genup.app, và khác nhau giữa Windows với
   máy Mac của khách.

   🔴 TỰ HOST, không gọi Google Fonts. Ba lý do:
     · genup.app đã tự host, và trang con phải tải cùng một tệp thì hình chữ
       mới khớp tuyệt đối — không phụ thuộc phiên bản Google đang phục vụ;
     · bản chụp offline (`chup_trang_mau.py`) phải mở được khi không mạng;
     · gọi ra ngoài mà hỏng thì trang VẪN CHẠY, chỉ lặng lẽ rơi về font dự
       phòng — lỗi không báo, chỉ khác đi một chút, và không ai để ý.
   (Trang này hiện KHÔNG đặt CSP — kiểm 16/08, nginx chỉ có nosniff /
   X-Frame-Options / Referrer-Policy. Nếu sau này thêm CSP thì nhớ `font-src
   'self' data:`.)

   🔴 Bộ VIETNAMESE phải có. Thiếu nó thì dấu tiếng Việt rơi sang font dự
   phòng và cả trang có hai kiểu chữ lẫn lộn ngay giữa một câu.

   Ba tệp phục vụ MỌI độ đậm vì đây là font BIẾN THIÊN. genup.app đang để 12
   tệp cho 4 độ đậm × 3 bộ ký tự, nhưng băm MD5 của chúng trùng khít nhau
   từng nhóm — cùng một tệp tải lại bốn lần. Ở đây rút còn 3 tệp: 260 KB
   xuống 68 KB, hình chữ không đổi một pixel.
   ══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800;
  font-display:swap; src:url('/tinh/fonts/pjs-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,
    U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800;
  font-display:swap; src:url('/tinh/fonts/pjs-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800;
  font-display:swap; src:url('/tinh/fonts/pjs-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

/* ══ BẢNG MÀU — KHAI MỖI MÀU ĐÚNG MỘT LẦN ═════════════════════════════════

   `light-dark(giá-trị-sáng, giá-trị-tối)` cho phép khai cả hai chế độ trên
   CÙNG một dòng. Bản trước khai bảng màu hai lần (một lần `:root`, một lần
   trong `@media`), và thêm nút chuyển tay sẽ thành **ba lần** — ba nơi phải
   nhớ sửa cùng lúc, tức là sớm muộn có một nơi bị quên và một màu lệch chỉ ở
   một chế độ.

   Mỗi màu khai HAI dòng:
     · dòng đầu = giá trị dự phòng, cho trình duyệt chưa hiểu `light-dark()`
       (nó bỏ qua dòng sau và vẫn chạy được, chỉ là không đổi theo chế độ)
     · dòng sau = giá trị thật theo chế độ

   `color-scheme` là công tắc: `light dark` = nghe hệ điều hành,
   `only light` / `only dark` = người dùng đã tự chọn. Đặt nó cũng làm thanh
   cuộn và ô nhập mặc định của trình duyệt đổi màu theo — thứ mà đổi biến CSS
   không làm được.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* 🔴 MẶC ĐỊNH TỐI (chủ dự án chốt 24/08): nền đen là chính, nền trắng chỉ
     bật khi khách BẤM nút. `dark` (không phải `light dark`) nghĩa là KHÔNG
     nghe hệ điều hành nữa — máy khách để chế độ sáng thì trang vẫn tối cho tới
     khi khách tự chọn. `light-dark()` bên dưới vì thế trả giá trị TỐI mặc định.
     Khi bấm sáng: `[data-che-do="sang"]` đặt `color-scheme: only light` → mọi
     `light-dark()` lật sang giá trị sáng. */
  color-scheme: dark;

  /* Nền — ba tầng sâu dần, đây là thứ thay cho đường viền */
  --den:#08090C;   --den:light-dark(#F4F6F9, #08090C);
  --den-2:#0F1216; --den-2:light-dark(#FFFFFF, #0F1216);
  --den-3:#151920; --den-3:light-dark(#EDF1F6, #151920);
  --side:#0B0D11;  --side:light-dark(#FFFFFF, #0B0D11);

  /* Chữ.
     🔴 Chế độ SÁNG phải là chữ ĐEN rõ (chủ dự án chốt): giá trị đầu trong mỗi
     `light-dark()` là màu chữ trên nền trắng. Đậm hẳn — #0B1118 gần đen cho
     chữ chính, #263341 cho chữ phụ, #4A5765 cho chữ mờ — để không bị xám nhạt
     khó đọc trên nền trắng. */
  /* 🔴 Nền TỐI: chữ phải SÁNG, không xám khó đọc (chủ chốt 25/08). Chữ phụ
     (--tx-2) và chữ "mờ" (--mut) được kéo gần trắng ở chế độ tối. Chế độ sáng
     giữ nguyên (giá trị đầu trong light-dark). */
  --tx:#F2F6FA;    --tx:light-dark(#0B1118, #F2F6FA);
  --tx-2:#E8EEF4;  --tx-2:light-dark(#263341, #E8EEF4);
  --mut:#C4CDD8;   --mut:light-dark(#4A5765, #C4CDD8);

  /* Thương hiệu — đỏ GEN UP giữ nguyên ở cả hai chế độ */
  --do:#DB1920; --do-2:#F0333A; --do-d:#B0141A;

  /* Ý nghĩa trong vùng dữ liệu.
     Bản tối dùng màu tươi; trên nền trắng chúng quá chói và chữ khó đọc, nên
     bản sáng hạ độ sáng xuống. Cùng ý nghĩa, khác độ sáng. */
  --lam:#4DA6FF;   --lam:light-dark(#1F7ACF, #4DA6FF);
  --lam-d:#2E8AE6; --lam-d:light-dark(#155FA6, #2E8AE6);
  /* Hệ màu THỐNG NHẤT: xanh dương / đỏ / đen / trắng — KHÔNG xanh lá.
     "xanh" (trạng thái tốt / đang chạy) nay là xanh dương, cùng tông với --lam. */
  --xanh:#4DA6FF;  --xanh:light-dark(#1F7ACF, #4DA6FF);
  --vang:#F0B23A;  --vang:light-dark(#9A6109, #F0B23A);

  --r:16px; --r-nho:10px;      /* 16px = đúng bo góc thẻ của genup.app */
  --rong-side:248px;
  --bong:0 18px 50px rgba(0,0,0,.30);
  --bong:light-dark(0 14px 40px rgba(20,26,38,.10), 0 18px 50px rgba(0,0,0,.30));
}

/* ── Ảnh đổi theo chế độ ────────────────────────────────────────────────
   `light-dark()` chỉ làm được với MÀU, không làm được với `display`. Nên hai
   phiên bản logo phải ẩn/hiện bằng luật riêng.

   Khai ở ĐÂY một lần cho mọi nơi (thanh bên, trang đăng nhập). Trước đây mỗi
   nơi tự khai một `@media` — và `@media` không nghe nút chuyển tay, nên bật
   chế độ tối bằng nút thì logo vẫn là bản dành cho nền sáng: chữ đen trên nền
   đen, mất hẳn nửa logo. */
/* 🔴 MẶC ĐỊNH LOGO TỐI (nền tối là chính). Chỉ khi bấm sáng mới đổi logo
   sáng. Không còn @media prefers-color-scheme vì trang không nghe hệ điều
   hành nữa. */
.logo.sang{display:none}
.logo.toi {display:block}
:root[data-che-do="sang"] .logo.sang{display:block}
:root[data-che-do="sang"] .logo.toi {display:none}

/* Nút chuyển chế độ */
header.tren .nut.che-do{
  width:38px; padding:8px 0; text-align:center; font-size:15px; line-height:1;
}

/* Người dùng đã tự chọn thì KHÔNG nghe hệ điều hành nữa. */
:root[data-che-do="sang"]{ color-scheme: only light; }
:root[data-che-do="toi"] { color-scheme: only dark;  }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--den); color:var(--tx);
  /* Cùng bộ chữ và cùng thứ tự dự phòng với genup.app. */
  font:15px/1.6 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",
       system-ui,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}

/* ══ KHUNG ỨNG DỤNG ═══════════════════════════════════════════════════════ */
.app{display:flex; min-height:100vh}

/* ── Thanh bên trái ──────────────────────────────────────────────────────── */
aside{
  width:var(--rong-side); flex:0 0 var(--rong-side); background:var(--side);
  padding:20px 14px 16px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
aside .brand{display:block; padding:2px 8px 18px; margin-bottom:10px}
aside .brand img{width:150px; height:auto; display:block}
aside .brand .os{
  display:block; margin-top:7px; font-size:10.5px; letter-spacing:.22em;
  color:var(--mut); font-weight:700; text-transform:uppercase;
}

aside .nhom{
  margin:16px 8px 6px; font-size:10.5px; letter-spacing:.18em;
  color:var(--mut); font-weight:700; text-transform:uppercase;
}
aside .muc{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:var(--r-nho); color:var(--tx-2); font-size:14px;
}
aside .muc{transition:background .16s ease, color .16s ease}
aside .muc:hover{background:var(--den-3); color:var(--tx)}
aside .muc.dang{background:var(--den-3); color:var(--tx); font-weight:600}

/* Mục đang mở KHÔNG còn vạch đỏ ở mép trái.
   Dấu hiệu duy nhất là ICON đổi từ màu chữ sang ĐỎ — một tín hiệu là đủ, và
   nó nằm ngay trên thứ mắt đang nhìn. Thêm vạch nữa là nói cùng một điều hai
   lần bằng hai ngôn ngữ khác nhau. */
aside .muc .ic{
  width:18px; text-align:center; flex:0 0 18px;
  color:var(--tx-2); transition:color .16s ease, transform .16s ease;
}
aside .muc:hover .ic{color:var(--do-2); transform:translateX(1px)}
aside .muc.dang .ic{color:var(--do-2)}
aside .muc .phu{margin-left:auto; font-size:11.5px; color:var(--mut)}

aside .day-duoi{margin-top:auto; display:flex; flex-direction:column; gap:10px}
aside .nang-cap{
  display:block; background:var(--den-3); border-radius:var(--r-nho);
  padding:13px 14px;
}
aside .nang-cap b{display:block; font-size:13.5px}
aside .nang-cap em{display:block; font-style:normal; font-size:11.5px; color:var(--mut); margin-top:2px}
aside .the-tk{display:flex; align-items:center; gap:10px; padding:6px 4px}
aside .the-tk .av{
  width:32px; height:32px; border-radius:50%; background:var(--do);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px;
}
aside .the-tk b{display:block; font-size:13px}
aside .the-tk span{display:block; font-size:11.5px; color:var(--mut)}

/* ── Nội dung ───────────────────────────────────────────────────────────── */
main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}

header.tren{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:14px 22px; background:var(--den);
}
header.tren .hmuc{
  display:inline-flex; align-items:center; gap:7px; background:var(--den-2);
  padding:8px 13px; border-radius:9px; font-size:13px; color:var(--tx-2);
}
header.tren .hmuc:hover{background:var(--den-3); color:var(--tx)}
/* Icon nhỏ đổi màu theo nút khi rê chuột — mỗi nút một màu để phân biệt */
header.tren .hic{transition:color .15s ease}
header.tren .hmuc:hover .hic1{color:var(--lam)}      /* Giám sát — xanh dương */
header.tren .hmuc:hover .hic2{color:#12C2E9}          /* Tín hiệu — cyan */
header.tren .hmuc:hover .hic3{color:var(--vang)}      /* Bảng giá — vàng */
header.tren .hmuc:hover .hic4{color:var(--do-2)}      /* Chia sẻ & kiếm tiền — đỏ */
header.tren .day{margin-left:auto; display:flex; align-items:center; gap:9px}
header.tren .nut{
  background:var(--den-2); padding:8px 15px; border-radius:9px;
  font-size:13px; color:var(--tx-2); border:0; font:inherit; font-size:13px; cursor:pointer;
}
header.tren .nut:hover{background:var(--den-3); color:var(--tx)}
header.tren .nut.chinh{background:var(--do); color:#fff; font-weight:700}
header.tren .nut.chinh:hover{background:var(--do-d)}

.khung{max-width:1160px; width:100%; margin:0 auto; padding:8px 22px 70px}

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

/* ── Dải nút ngang (như hàng 6 ứng dụng của genup.app) ───────────────────
   `flex:1 1 0` để MỌI nút rộng bằng nhau và lấp hết bề ngang. Đừng ghim
   `width` hay `calc()`: chủ dự án đã phải mô tả nhiều lần vì người làm cứ
   thu nhỏ nút trong khi màn hình còn thừa nửa bề ngang. */
.day-nut{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 22px}
.day-nut a{
  flex:1 1 0; min-width:150px; text-align:center; background:var(--den-2);
  padding:13px 12px; border-radius:var(--r-nho); font-size:13.5px;
  font-weight:600; color:var(--tx-2);
}
.day-nut a:hover{background:var(--den-3); color:var(--tx)}
.day-nut a.dang{background:var(--lam); color:#04121f}

/* ══ VÙNG DỮ LIỆU — từ đây trở xuống ĐỎ CHỈ CÓ NGHĨA LỖ/HỎNG ═════════════ */
.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);
  box-shadow:inset 3px 0 0 var(--vang);   /* một vạch, KHÔNG phải khung bao */
}

/* Phễu */
.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(77,166,255,.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}

/* ── Lưới thẻ chọn (cặp tiền, gói cước) ─────────────────────────────────── */
.luoi{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.chon{
  background:var(--den-2); border-radius:var(--r); padding:20px;
  cursor:pointer; position:relative; display:block;
}
.chon:hover{background:var(--den-3)}
.chon.dang{background:var(--den-3); box-shadow:inset 0 0 0 2px var(--lam)}
.chon .ma{font-size:19px; font-weight:800; letter-spacing:.02em}
.chon .mo-ta{color:var(--mut); font-size:12.5px; margin-top:5px; line-height:1.55}
.chon .tich{
  position:absolute; top:16px; right:16px; width:20px; height:20px;
  border-radius:50%; background:var(--den); display:grid; place-items:center;
  color:transparent; font-size:12px; font-weight:800;
}
.chon.dang .tich{background:var(--lam); color:#04121f}
.chon.tat{opacity:.5; cursor:not-allowed}

/* ── Bảng giá ───────────────────────────────────────────────────────────── */
.goi{background:var(--den-2); border-radius:var(--r); padding:24px 22px; display:flex; flex-direction:column}
.goi.noi{background:var(--den-3)}
.goi .ten{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2); font-weight:700}
.goi .gia{font-size:34px; font-weight:800; margin:12px 0 2px; letter-spacing:-.02em}
.goi .gia small{font-size:14px; font-weight:600; color:var(--mut); letter-spacing:0}
.goi .cu{color:var(--mut); font-size:13px; text-decoration:line-through}
.goi .tiet{
  /* `align-self` chứ không chỉ `inline-block`: thẻ cha là flex column, mà
     mặc định của nó là `align-items:stretch` — nên nhãn bị kéo giãn hết bề
     ngang và trông như một thanh, không còn ra dáng một cái nhãn. */
  display:inline-block; align-self:flex-start;
  margin-top:8px; padding:3px 10px; border-radius:999px;
  background:rgba(77,166,255,.14); color:var(--xanh); font-size:12px; font-weight:700;
}
.goi ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.goi li{font-size:13.5px; color:var(--tx-2); display:flex; gap:9px}
.goi li::before{content:"✓"; color:var(--xanh); font-weight:800}
.goi li.khong{color:var(--mut)}
.goi li.khong::before{content:"—"; color:var(--mut)}
.goi .mua{
  margin-top:auto; padding-top:20px;
}
.goi .mua button{
  width:100%; border:0; border-radius:var(--r-nho); padding:13px;
  font:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  background:var(--den-3); color:var(--tx);
}
.goi.noi .mua button{background:var(--do); color:#fff}
.goi.noi .mua button:hover{background:var(--do-d)}

/* ── Ô nhập ─────────────────────────────────────────────────────────────── */
/* 🔴 `email` phải nằm CÙNG nhóm. Thiếu nó thì ô email rơi về kiểu mặc
   định của trình duyệt — hẹp, sai màu, lệch hẳn các ô bên cạnh. Lỗ này
   ẩn suốt vì trang đăng nhập cũ chỉ có đúng một ô mật khẩu. */
input[type=text],input[type=password],input[type=email]{
  width:100%; border:0; outline:0; background:var(--den-3); color:var(--tx);
  padding:12px 14px; border-radius:var(--r-nho); font:inherit; font-size:14.5px;
}
input:focus{box-shadow:0 0 0 2px var(--lam)}
label{display:block; font-size:12.5px; color:var(--tx-2); margin:0 0 7px; font-weight:600}

.nut-lam{
  border:0; border-radius:var(--r-nho); background:var(--lam); color:#04121f;
  padding:12px 20px; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
}
.nut-lam:hover{background:var(--lam-d); color:#fff}
.nut-lam:disabled{background:var(--den-3); color:var(--mut); cursor:not-allowed}

/* Nút NÂNG CẤP — CTA nổi bật màu đỏ thương hiệu (như "Mua gói" của genup.app).
   Tự khai đầy đủ (không dựa hệ --nen-khoi) để dùng ở mọi nơi: ô khóa, teaser. */
.nut-nang-cap{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--do); color:#fff !important; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:999px; text-decoration:none; border:0;
  letter-spacing:.01em; cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 20px rgba(219,25,32,.32);
  transition:background .16s ease, transform .13s ease, box-shadow .16s ease;
}
.nut-nang-cap:hover{background:var(--do-d); transform:translateY(-1px);
  box-shadow:0 9px 26px rgba(219,25,32,.44)}
.nut-nang-cap:active{transform:scale(.975)}

/* Chân trang dùng chung (kiểu genup.app) */
.chan-trang{display:flex; align-items:center; justify-content:center; gap:10px 22px;
  flex-wrap:wrap; padding:28px 20px 34px; margin-top:10px; color:var(--mut); font-size:12.5px;
  text-align:center}
.chan-trang nav{display:flex; gap:8px 20px; flex-wrap:wrap; justify-content:center}
.chan-trang a{color:var(--tx-2); text-decoration:none}
.chan-trang a:hover{color:var(--lam)}

/* Banner KIẾM TIỀN TRỌN ĐỜI (giới thiệu/hoa hồng) — dùng chung mọi trang.
   Ảnh nền bên phải, gradient tối bên trái cho chữ đọc rõ. */
.kt{position:relative; overflow:hidden; border-radius:var(--r); margin-bottom:16px;
  background:
    linear-gradient(90deg,#0B0D11 0%,rgba(11,13,17,.95) 30%,rgba(11,13,17,.55) 55%,rgba(11,13,17,.08) 100%),
    url('/tinh/kiem-tien.webp') right center / cover no-repeat, #0B0D11;
  padding:28px 30px; min-height:250px; display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.kt-noi{position:relative; z-index:1; flex:1 1 340px; min-width:0}
.kt-eng{font-size:12px; letter-spacing:.16em; color:var(--lam); font-weight:700; text-transform:uppercase}
.kt-tit{font-size:clamp(19px,2.5vw,28px); font-weight:800; margin:6px 0 8px; color:#fff; line-height:1.15}
.kt-tit .do{color:var(--do-2)}
.kt-mo{color:#C6D2E0; font-size:13.5px; max-width:460px; line-height:1.6}
.kt-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.kt-chip{font-size:11.5px; color:var(--tx-2); background:rgba(255,255,255,.06);
  padding:6px 12px; border-radius:999px}
.kt-dieu{font-size:11.5px; color:var(--mut); margin-top:12px; line-height:1.6}
.kt-dieu b{color:var(--tx-2)}
.kt-nut{margin-top:16px}
@media (max-width:760px){
  .kt{background:linear-gradient(180deg,rgba(11,13,17,.70),rgba(11,13,17,.93) 72%),
    url('/tinh/kiem-tien.webp') center/cover no-repeat, #0B0D11; min-height:auto}
}

/* ── Trang đăng nhập (không có khung ứng dụng) ───────────────────────────── */
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{width:150px; height:auto; margin:0 auto 6px}
.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 button{
  width:100%; margin-top:16px; border:0; border-radius:11px;
  background:var(--do); color:#fff; font:inherit; font-weight:700; font-size:15px;
  padding:13px; cursor:pointer;
}
.hop button:hover{background:var(--do-d)}
.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}

/* ── Màn hẹp: thanh bên xuống thành dải ngang ───────────────────────────── */
@media (max-width:900px){
  .app{flex-direction:column}
  aside{
    width:auto; flex:none; height:auto; position:static;
    flex-direction:row; align-items:center; gap:10px; overflow-x:auto;
    padding:12px 14px;
  }
  aside .brand{padding:0}
  aside .brand img{width:96px}
  aside .brand .os{display:none}
  aside .nhom, aside .day-duoi{display:none}
  aside .muc{white-space:nowrap; padding:8px 12px}
  header.tren .hmuc span{display:none}
}

/* ══ ẢNH BÌA ═════════════════════════════════════════════════════════════
   Ảnh minh hoạ chạy hết bề ngang, chữ nằm đè lên nền tối dần.

   ⚠️ LUẬT VỀ ẢNH: không dùng ảnh có in SỐ HIỆU SUẤT ("win rate 78%",
   "accuracy 99.8%", "confidence 92%"). Đó là số bịa do máy vẽ ra, và dán lên
   một trang bán tín hiệu giao dịch là quảng cáo sai sự thật về hiệu suất đầu
   tư — rủi ro pháp lý, không phải chuyện thẩm mỹ.

   Ảnh chỉ để tạo không khí. Mọi con số trên trang phải đến từ phép đo thật. */
.bia{
  position:relative; border-radius:var(--r); overflow:hidden;
  margin:0 0 22px; background:var(--den-2);
}
/* Chiều cao lấy theo genup.app: khối banner ở đó cao 318px, bo 16px.
   Trước 16/08 chỗ này là clamp(180,26vw,300) — thấp hơn hẳn, làm dải ảnh
   nhìn thấy được hẹp hơn và bố cục lệch nhịp so với trang mẹ. */
.bia img{
  display:block; width:100%; height:clamp(210px, 27vw, 318px);
  object-fit:cover; object-position:center;
}
/* Nền tối dần từ trái: chữ luôn đọc được dù ảnh sáng chỗ nào.
   Không dùng một lớp phủ đều — phủ đều làm ảnh xỉn hết. */
.bia .phu-toi{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,6,10,.92) 0%, rgba(4,6,10,.75) 38%, rgba(4,6,10,.15) 72%, rgba(4,6,10,0) 100%);
}
/* Logo tròn trên ảnh bìa.
   ═══════════════════════════════════════════════════════════════════════
   🔴 CHỒNG LÊN KHUNG, KHÔNG NUNG VÀO TỆP ẢNH.

   `.bia img` dùng `object-fit:cover` với chiều cao `clamp(180px,26vw,300px)`
   trên ảnh 1920×1081 — tức trang chỉ hiện DẢI GIỮA của ảnh (khoảng 28%–72%
   chiều cao ở màn rộng). Logo nung vào góc trên của tệp ảnh sẽ bị cắt mất
   sạch, và sẽ **trông vẫn đúng khi mở tệp ảnh ra xem** — kiểu lỗi chỉ lộ ra
   trên trang thật.

   Chồng bằng CSS thì logo bám vào KHUNG chứ không bám vào ảnh, nên không bao
   giờ bị cắt, luôn nét, và đổi logo sau này không phải dựng lại sáu tấm ảnh.

   VÌ SAO GÓC PHẢI: chữ tiêu đề nằm bên TRÁI (`.bia .chu` max-width 640px) và
   `.phu-toi` phủ tối 92% từ mép trái. Đặt logo bên trái là chồng lên chính
   phần đang cố làm cho dễ đọc. Bên phải thì lớp phủ đã trong suốt và không
   có chữ nào. */
.bia .dau-hieu{
  position:absolute; top:clamp(10px, 1.6vw, 18px); right:clamp(12px, 1.8vw, 22px);
  width:clamp(34px, 4.4vw, 52px); height:auto;
  /* Nền logo là hình tròn ĐEN. Trên ảnh bìa tối nó gần như tan vào nền, nên
     cần một quầng sáng rất nhẹ để tách khối — không dùng viền (luật thiết kế
     của dự án: chia khối bằng sắc độ, không bo khung). */
  filter:drop-shadow(0 0 10px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(255,255,255,.28));
  opacity:.96; pointer-events:none;
}

/* Chữ nằm TRÊN CÙNG, không phải giữa — đúng cách genup.app dựng banner.
   Đo trên trang mẹ: khối `a.c2` padding 26px, tiêu đề `.c2t` bám mép trên. */
.bia .chu{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:clamp(18px, 2.4vw, 26px) clamp(20px, 4vw, 44px);
  max-width:560px;
}
/* Tiêu đề: chép đúng thang chữ của genup.app — CHỮ HOA, 26px, weight 400,
   giãn chữ 0,02em, dòng sát 1,0.
   ⚠️ weight 400 chứ không phải 700, và đó là cố ý: chữ hoa giãn nhẹ ở nét
   mảnh trông đắt tiền, còn chữ hoa in đậm trông như biển quảng cáo. Trang mẹ
   chọn vậy, và đây là trang con nên phải theo. */
.bia .chu h1{
  color:#fff; font-size:clamp(19px, 2.4vw, 26px); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.05;
  margin:0 0 9px;
}
.bia .chu p{color:#C6D2E0; font-size:clamp(12.5px, 1.5vw, 15px); margin:0; line-height:1.55; max-width:400px}
.bia .nhan-bia{
  display:inline-block; align-self:flex-start; margin-bottom:11px;
  padding:4px 12px; border-radius:999px; background:rgba(77,166,255,.18);
  color:#8FCBFF; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
}
/* Chỉ MỘT lớp phủ cho cả hai chế độ. Ảnh bìa vốn tối nên chữ giữ màu sáng ở
   cả hai — đổi sang chữ tối là không đọc được. Bản trước có thêm một biến thể
   cho chế độ sáng, nhưng chênh lệch nhỏ tới mức không ai thấy, mà lại là thêm
   một chỗ nữa phải nhớ sửa. */

/* ── Thẻ có ảnh (lưới lối vào, kiểu genup.app) ──────────────────────────── */
.the-anh{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--den-2); display:block; min-height:158px;
}
.the-anh img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.42; transition:opacity .18s, transform .18s;
}
.the-anh:hover img{opacity:.58; transform:scale(1.03)}
.the-anh .noi{position:relative; padding:18px 20px}
.the-anh .ten{font-size:16.5px; font-weight:800; color:#F2F6FA}
.the-anh .mo{color:#C6D2E0; font-size:12.5px; margin-top:5px; line-height:1.5}
.the-anh .cham{
  display:inline-block; margin-top:11px; padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,.10); color:#DCE6F2; font-size:11.5px;
}

/* Bảng rộng phải tự cuộn TRONG khung của nó, không đẩy cả trang trượt ngang.
   Trang trượt ngang thì thanh cuộn dưới cùng che mất nội dung và người dùng
   phải cuộn hai chiều để đọc một bảng — trên điện thoại là gần như không đọc
   được. Đã dính với bảng chế độ 7 cột ngày 17/08. */
.cuon-ngang{overflow-x:auto; -webkit-overflow-scrolling:touch}
.cuon-ngang table{min-width:640px}

/* ══════════════════════════════════════════════════════════════════════════
   TINH CHỈNH GIAO DIỆN — 17/08/2026, theo yêu cầu chủ dự án
   ══════════════════════════════════════════════════════════════════════════

   Bốn việc: chỉ ĐỎ + XANH DƯƠNG · đường viền MẢNH · nút có phản hồi khi bấm ·
   bỏ mọi màu cam/vàng.

   ⚠️ Chủ dự án ghét khung dày. Nên "viền" ở đây là ĐƯỜNG TÓC 1px với màu rất
   nhạt — nó chỉ đủ để mắt biết chỗ nào kết thúc, không đủ để thành cái khung.
   ══════════════════════════════════════════════════════════════════════════ */

/* Token `--toc` / `--toc-do` (đường tóc một màu) đã bị khối "VIỀN GRADIENT
   HAI MÀU" ở cuối tệp thay thế hoàn toàn, và đã gỡ khỏi đây. Để lại một token
   không ai dùng là mời người sau sửa nó rồi tưởng mình vừa đổi được giao
   diện. */

/* ── CHỈ ĐỎ VÀ XANH DƯƠNG ────────────────────────────────────────────────
   Nhãn trạng thái trước đây dùng xanh lá và vàng. Giờ ba mức phân biệt bằng
   ĐẬM/NHẠT của hai màu thương hiệu:

       ok    → xanh dương   (bình thường)
       cảnh  → đỏ nhạt      (đáng để mắt)
       lỗi   → đỏ đậm       (hỏng)

   Vẫn phân biệt được ba mức, và không thêm màu thứ ba vào bảng. */
.nhan.ok{background:rgba(77,166,255,.15); color:var(--lam)}
.nhan.canh{background:rgba(240,51,58,.12); color:var(--do-2)}
.nhan.loi{background:rgba(219,25,32,.20); color:var(--do-2)}

/* Thanh tiến trình ở bước cuối trước đây màu vàng */
.tang.cuoi .thanh i{background:var(--do-2)}

/* ── ĐƯỜNG TÓC THAY CHO KHUNG ──────────────────────────────────────────────
   🔴 Ba luật viền của khối `.the` / `.chon` đã CHUYỂN xuống khối "VIỀN
   GRADIENT HAI MÀU" ở cuối tệp. Không để lại ở đây, vì `.chon:hover` đặt
   `border-color` ĐẶC — mà nền được vẽ SAU lưng viền, nên một border-color đặc
   sẽ che mất đúng dải gradient vừa dựng. Viền vẫn hiện, chỉ là hiện màu đỏ
   trơn khi trỏ chuột vào: hỏng đúng lúc người dùng đang nhìn nó.
.cuon-ngang table{border-collapse:collapse}

/* ── NÚT: PHẢN HỒI KHI BẤM ───────────────────────────────────────────────
   Nút không nhúc nhích khi bấm làm người ta bấm lại lần nữa — và ở một hệ
   đụng tiền, bấm hai lần là chuyện phải tránh.

   🔴 SỬA 17/08/2026 — bản đầu bị chê "hơi lag và không chính xác", và cả hai
   lời chê đều đúng. Hai lỗi:

   ① MỘT THỜI LƯỢNG CHO CẢ HAI CHIỀU. Nhấn xuống và nhả ra là hai việc khác
      nhau. Nhấn xuống phải gần như TỨC THÌ (40ms) vì nó xác nhận rằng máy đã
      nhận lệnh; nhả ra thì được phép mượt (130ms) vì lúc đó việc đã xong.
      Dùng 110ms cho cả hai làm cú nhấn trễ 110ms — đó chính là cảm giác "lag".

   ② ĐƯỜNG CONG NẢY QUÁ ĐÀ. `cubic-bezier(.34,1.56,.64,1)` có hệ số 1.56 nên
      nút vọt QUÁ kích thước gốc rồi mới về. Với một hiệu ứng 2% thì cú vọt đó
      chỉ đủ để mắt thấy nút "rung", không đủ để thấy nó "nảy" — và đó là cảm
      giác "không chính xác".

   ③ Và keyframe `nay-nut` chạy ĐỒNG THỜI với `transition` trên cùng thuộc
      tính `transform`. Hai thứ tranh nhau một thuộc tính thì trình duyệt phải
      chọn, và kết quả giật. Đã bỏ hẳn keyframe.

   Giờ: đường cong giảm dần thuần (không vượt quá), nhấn 40ms, nhả 130ms.

   `prefers-reduced-motion` được tôn trọng — có người thấy chóng mặt vì
   chuyển động, và họ vẫn cần dùng được nút. */
.nut, .nut-lam, .chon, button{
  transition:transform .13s cubic-bezier(.22,.68,.3,1),
             background .16s ease, box-shadow .16s ease;
}
.nut:active, .nut-lam:active, button:active{
  transform:scale(.975);
  transition-duration:.04s;      /* nhấn xuống gần như tức thì */
}
.chon:active{transform:scale(.99); transition-duration:.04s}

/* Vòng focus bàn phím: mảnh, màu thương hiệu, và KHÔNG bị nuốt mất — người
   dùng bàn phím phải luôn thấy mình đang ở đâu. */
.nut:focus-visible, .nut-lam:focus-visible, .chon:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible{
  outline:2px solid var(--lam); outline-offset:2px; border-radius:var(--r-nho);
}

@media (prefers-reduced-motion: reduce){
  .nut, .nut-lam, .chon, button, aside .muc, aside .muc .ic{
    transition:none !important; animation:none !important;
  }
  .nut:active, .nut-lam:active, button:active, .chon:active{transform:none}
}

/* ── ẢNH BÌA SVG ─────────────────────────────────────────────────────────
   SVG không có "điểm ảnh" nên `object-fit:cover` vẫn đúng, nhưng nền của nó
   trong suốt ở rìa — đặt nền tối phía sau để không lộ màu trang bên dưới khi
   tỷ lệ khung hình lệch. */
.bia{background:#080A0E}
.bia img{object-fit:cover}

/* Ô nhập trong lưới hai cột (trang Ví & MT5) */
.luoi label{display:block; font-size:12.5px; color:var(--mut)}
.luoi .o{
  width:100%; margin-top:6px; border-radius:var(--r-nho);
  background:var(--den-3); color:var(--tx); padding:11px 12px; font:inherit;
  font-size:14px; outline:0; transition:border-color .16s ease;
}
.luoi .o:focus{border-color:var(--lam)}

/* ══════════════════════════════════════════════════════════════════════════
   VIỀN GRADIENT HAI MÀU — 23/08/2026, theo yêu cầu chủ dự án
   ══════════════════════════════════════════════════════════════════════════

   Yêu cầu: "các line viền trên các nút, khung banner làm gradient 2 màu và
   line mỏng lại."

   HAI MÀU LÀ HAI MÀU THƯƠNG HIỆU, không phải hai màu tuỳ ý: lam #4DA6FF →
   đỏ #DB1920. Thêm bất kỳ màu thứ ba nào vào đây là mở lại đúng cái cửa mà
   bảng màu của trang đã đóng.

   CÁCH DỰNG — hai lớp nền, không phải `border-image`:

       nền khối   → padding-box   (che kín phần ruột)
       gradient   → border-box    (chỉ lòi ra đúng vành 1px)
       border     → 1px solid transparent

   Vì sao không dùng `border-image`: nó KHÔNG theo `border-radius`. Thẻ bo góc
   12px mà viền gradient vẫn vuông — lỗi chỉ lộ ra ở bốn góc nên rất dễ trôi
   qua vòng soát.

   🔴 Vì `background` viết dạng rút gọn nên nó GHI ĐÈ luôn màu nền của khối.
   Mỗi nơi dùng phải khai `--nen-khoi` đúng bằng màu nền cũ của nó — quên là
   khối đó mất nền, và trên nền tối thì "mất nền" trông gần giống nền cũ nên
   không ai thấy ngay.

   MỎNG HƠN: gradient chìm xuống alpha .12 ở khoảng giữa, nên đường viền không
   đọc thành một cái khung khép kín mà thành hai nét sáng ở hai đầu đối nhau —
   mảnh hơn hẳn dù vẫn đúng 1px. Trên màn hình nét cao thì hạ tiếp còn 0,5px,
   tức MỘT điểm ảnh vật lý, mảnh nhất mà máy vẽ được.
   ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 MẶC ĐỊNH TỐI (chủ dự án chốt 24/08). Nền đen là chính, nên viền mặc định
   dùng bản cho nền tối (lam sáng #4DA6FF). Chỉ khi khách bấm sáng thì
   `[data-che-do="sang"]` mới đổi sang bản cho nền trắng (lam trầm #1F7ACF).
   Không còn @media prefers-color-scheme — trang không nghe hệ điều hành nữa. */
:root{
  --vien:linear-gradient(118deg,
    rgba(77,166,255,.52) 0%, rgba(77,166,255,.12) 34%,
    rgba(219,25,32,.12) 63%, rgba(219,25,32,.48) 100%);
  --vien-ro:linear-gradient(118deg,
    rgba(77,166,255,.85) 0%, rgba(77,166,255,.22) 34%,
    rgba(219,25,32,.24) 63%, rgba(219,25,32,.80) 100%);
}
:root[data-che-do="sang"]{
  --vien:linear-gradient(118deg,
    rgba(31,122,207,.40) 0%, rgba(31,122,207,.10) 34%,
    rgba(219,25,32,.10) 63%, rgba(219,25,32,.34) 100%);
  --vien-ro:linear-gradient(118deg,
    rgba(31,122,207,.70) 0%, rgba(31,122,207,.18) 34%,
    rgba(219,25,32,.20) 63%, rgba(219,25,32,.62) 100%);
}

.the, .chon, .bia, .goi, .luoi .o, header.tren .nut, .nut-lam, .hop button{
  border:1px solid transparent;
  background:linear-gradient(var(--nen-khoi), var(--nen-khoi)) padding-box,
             var(--vien) border-box;
  transition:background .18s ease, transform .13s cubic-bezier(.2,.7,.4,1);
}
.the,  .chon,  .goi          { --nen-khoi:var(--den-2) }
.bia                         { --nen-khoi:#080A0E }
.luoi .o, header.tren .nut   { --nen-khoi:var(--den-3) }
.nut-lam                     { --nen-khoi:var(--lam) }
.hop button                  { --nen-khoi:var(--do) }

/* Đậm lên khi trỏ vào hoặc khi đang chờ bấm — cùng một đường viền, chỉ khác
   độ rõ, nên không có chuyện "viền nhảy" sang một hình khác. */
.chon:hover, header.tren .nut:hover, .nut-lam:hover, .hop button:hover,
.the:hover, .luoi .o:focus{
  background:linear-gradient(var(--nen-khoi), var(--nen-khoi)) padding-box,
             var(--vien-ro) border-box;
}
.chon:hover, header.tren .nut:hover { --nen-khoi:var(--den-3) }
.nut-lam:hover                      { --nen-khoi:var(--lam-d) }
.hop button:hover                   { --nen-khoi:var(--do-d) }

/* Nút chính (nền đỏ đặc) đổi màu ruột chứ không đổi viền. */
header.tren .nut.chinh       { --nen-khoi:var(--do) }
header.tren .nut.chinh:hover { --nen-khoi:var(--do-d) }

/* Nút mờ (disabled) không được mang viền sáng: viền sáng đọc thành "bấm
   được". Ruột xám, viền tắt hẳn. */
.nut-lam:disabled{
  --nen-khoi:var(--den-3);
  background:var(--den-3); border-color:transparent;
}

/* Màn hình nét cao: 0,5px = đúng MỘT điểm ảnh vật lý. */
@media (min-resolution:1.5dppx){
  .the, .chon, .bia, .goi, .luoi .o, header.tren .nut, .nut-lam, .hop button{
    border-width:.5px;
  }
}

/* Ô nhập trong `.luoi` trước đây đổi `border-color` khi focus — nay viền là
   ảnh nền nên `border-color` không còn tác dụng gì. Gỡ hẳn để không ai sửa
   nhầm chỗ đó rồi tưởng mình đã đổi được gì. */
.luoi .o{transition:background .18s ease}
.luoi .o:focus{border-color:transparent}

/* 🔴 ĐỘ ƯU TIÊN, không phải thứ tự — xem chú thích cùng tên trong
   `admin/assets/admin.css`. `header.tren .nut.chinh` (0,3,1) thắng
   `header.tren .nut` (0,2,1) dù nằm trước, nên nút chính không nhận được
   viền gradient cho tới khi khai lại đúng mức ưu tiên ấy.

   Nút mua trong bảng giá cũng vậy: `.goi.noi .mua button` (0,3,1). */
header.tren .nut.chinh{
  background:linear-gradient(var(--do), var(--do)) padding-box,
             var(--vien) border-box;
}
header.tren .nut.chinh:hover{
  background:linear-gradient(var(--do-d), var(--do-d)) padding-box,
             var(--vien-ro) border-box;
}
.goi .mua button{
  border:1px solid transparent;
  background:linear-gradient(var(--den-3), var(--den-3)) padding-box,
             var(--vien) border-box;
}
.goi.noi .mua button{
  background:linear-gradient(var(--do), var(--do)) padding-box,
             var(--vien) border-box;
}
.goi.noi .mua button:hover{
  background:linear-gradient(var(--do-d), var(--do-d)) padding-box,
             var(--vien-ro) border-box;
}
@media (min-resolution:1.5dppx){ .goi .mua button{border-width:.5px} }

/* Ô nhập thường (`input[type=text|password]`) khai `border:0` từ đầu, nên
   chúng là chỗ DUY NHẤT trong họ biểu mẫu không có vành — đứng cạnh `.luoi .o`
   có vành thì nhìn ra ngay là quên, chứ không đọc thành chủ ý.

   Luật "ô nhập là một mảng đậm/nhạt, không phải cái hộp có đường kẻ" vẫn giữ:
   đường này là vành tóc chìm xuống alpha .11 ở giữa, nó tách khối chứ không
   quây khung. Nền vẫn là mảng đậm/nhạt như cũ. */
input[type=text], input[type=password], input[type=email]{
  --nen-khoi:var(--den-3);
  border:1px solid transparent;
  background:linear-gradient(var(--nen-khoi), var(--nen-khoi)) padding-box,
             var(--vien) border-box;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus{
  background:linear-gradient(var(--nen-khoi), var(--nen-khoi)) padding-box,
             var(--vien-ro) border-box;
}
@media (min-resolution:1.5dppx){
  input[type=text], input[type=password], input[type=email]{border-width:.5px}
}

/* ══════════════════════════════════════════════════════════════════════════
   ĐIỀU HƯỚNG 7 NHÓM (accordion) — 24/08/2026, tái tổ chức theo chủ dự án
   ══════════════════════════════════════════════════════════════════════════
   Nhóm gập/mở tại chỗ. Nhóm chứa trang đang mở tự bung; các nhóm khác gập để
   thanh bên gọn. Nhóm một-con hiện thẳng như một mục (dùng `.muc` cũ). */
aside nav.dieu-huong{display:flex; flex-direction:column; gap:3px; margin-top:10px}

.nh{display:flex; flex-direction:column}
.nh-dau{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; background:transparent; cursor:pointer;
  color:var(--tx-2); font:inherit; font-size:14px; border-radius:var(--r-nho);
  transition:background .16s ease, color .16s ease;
}
.nh-dau:hover{background:var(--den-3); color:var(--tx)}
.nh-dau .ic{width:18px; text-align:center; flex:0 0 18px; color:var(--tx-2)}
.nh-dau:hover .ic{color:var(--do-2)}
.nh-dau .mui{
  margin-left:auto; font-size:11px; color:var(--mut);
  transition:transform .18s ease;
}
.nh.mo .nh-dau .mui{transform:rotate(180deg)}
.nh.mo .nh-dau{color:var(--tx)}

/* Submenu: ẩn khi gập, xổ khi mở. max-height cho hiệu ứng mượt mà không cần
   đo chiều cao. */
.nh-con{
  overflow:hidden; max-height:0; transition:max-height .22s ease;
  display:flex; flex-direction:column;
}
.nh.mo .nh-con{max-height:420px}
.muc-con{
  display:flex; align-items:center; padding:8px 12px 8px 41px;
  border-radius:var(--r-nho); color:var(--mut); font-size:13.5px;
  transition:background .16s ease, color .16s ease;
}
.muc-con:hover{background:var(--den-3); color:var(--tx)}
.muc-con.dang{background:var(--den-3); color:var(--tx); font-weight:600}
.muc-con.dang::before{
  content:""; position:absolute; margin-left:-16px; width:5px; height:5px;
  border-radius:50%; background:var(--do-2);
}
/* "sắp có": mờ hơn + nhãn nhỏ, để khách biết đây là chỗ đang xây, không phải
   lỗi hay trang trắng. */
.muc-con.sap{color:var(--mut); opacity:.72}
.chip-sap{
  margin-left:auto; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; background:rgba(240,178,58,.16);
  color:var(--vang); font-weight:700;
}

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD GỌN — 24/08/2026
   ══════════════════════════════════════════════════════════════════════════ */
/* Hàng trạng thái: 5 ô ngang, mỗi ô một badge màu. */
.trang-thai-hang{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:16px;
}
.tt-o{
  background:var(--den-2); border-radius:var(--r-nho); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
  border:1px solid transparent; min-width:0;   /* cho ô co lại được → chữ không tràn lề */
  background:linear-gradient(var(--den-2), var(--den-2)) padding-box, var(--vien) border-box;
}
.tt-nhan{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:600;
  display:flex; align-items:center; gap:6px; min-width:0}
.tt-gia{font-size:15px; font-weight:600; letter-spacing:.02em;
  min-width:0; overflow-wrap:anywhere; word-break:break-word}
.tt-luc{color:var(--xanh)}
.tt-do {color:var(--do-2)}
.tt-lam{color:var(--lam)}
.tt-xam{color:var(--mut)}
.tt-badge{
  font-size:9px; padding:1px 6px; border-radius:999px; font-weight:800;
  letter-spacing:.06em; background:rgba(77,166,255,.16);
}
.tt-badge.tt-luc{background:rgba(77,166,255,.18); color:var(--xanh)}
.tt-badge.tt-lam{background:rgba(77,166,255,.18); color:var(--lam)}

/* Hàng số: 5 ô số lớn. */
.so-hang{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:16px;
}
.so-o{
  background:var(--den-2); border-radius:var(--r-nho); padding:16px 18px;
  display:flex; flex-direction:column; gap:6px;
  border:1px solid transparent; min-width:0;   /* cho ô co lại được → chữ không tràn lề */
  background:linear-gradient(var(--den-2), var(--den-2)) padding-box, var(--vien) border-box;
}
.so-nhan{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); font-weight:600}
.so-gia{font-size:clamp(17px, 1.7vw, 21px); font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; min-width:0; overflow-wrap:anywhere; word-break:break-word}

.luoi-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (min-resolution:1.5dppx){ .tt-o, .so-o{border-width:.5px} }

/* Bot đang làm gì */
.bot-tt{font-size:15px; margin-bottom:12px}
.bot-tt b{color:var(--lam)}
.symbol-hang{display:flex; gap:10px; flex-wrap:wrap}
.sym-o{
  background:var(--den-3); border-radius:var(--r-nho); padding:10px 14px;
  display:flex; flex-direction:column; gap:3px; min-width:96px;
}
.sym-o b{font-size:14px}

/* Accordion phân tích */
.accordion .pt-khoi{margin-top:16px}
.accordion .pt-khoi h3{margin:0 0 8px; font-size:14px}

@media (max-width:860px){
  .trang-thai-hang{grid-template-columns:repeat(2, 1fr)}
  .so-hang{grid-template-columns:repeat(2, 1fr)}
  .luoi-2{grid-template-columns:1fr}
}

/* ── Tabs (Hiệu suất, Mạng lưới) ──────────────────────────────────────────── */
.tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid transparent;
  background:linear-gradient(var(--den-2),var(--den-2)) padding-box,
    linear-gradient(90deg, rgba(77,166,255,.2), rgba(77,166,255,0)) border-box}
.tab{
  background:transparent; border:0; color:var(--mut); font:inherit; font-size:13.5px;
  padding:9px 14px; cursor:pointer; border-radius:var(--r-nho) var(--r-nho) 0 0;
  transition:background .15s ease, color .15s ease;
}
.tab:hover{background:var(--den-3); color:var(--tx)}
.tab.dang{color:var(--tx); font-weight:700; background:var(--den-3)}
.tab.dang::after{
  content:""; display:block; height:2px; margin:8px -14px -9px; background:var(--do-2);
}