/* =============================================================================
   assets/css/terminal.css — TERMINAL FOREX (Chặng 3)

   Chỉ đọc biến từ tokens.css. Toàn bộ terminal bọc trong `[data-theme="dark"]`
   nên mọi biến tự đổi sang bảng tối — không một mã màu nào viết ở đây.

   BỐ CỤC THEO ĐÚNG THỨ TỰ CÂU HỎI NGƯỜI GIAO DỊCH HỎI:
     1. Giá bao nhiêu?          → thanh dính đỉnh, không bao giờ phải cuộn tìm
     2. Đồ thị đang thế nào?    → chiếm phần lớn màn hình
     3. Nên làm gì?             → thẻ quyết định, luôn hiện
     4. Vì sao?                 → bằng chứng, GẬP SẴN

   Bước 4 gập sẵn là điểm khác biệt lớn nhất với bản cũ. Bản cũ đổ hết bằng
   chứng ra màn hình cùng lúc — đo được 11 lần lặp cùng một câu trên một màn.
   ========================================================================== */

/* =============================================================================
   BẢNG BIẾN TƯƠNG THÍCH — ĐỌC KỸ, ĐÂY LÀ CHỖ DỄ PHÁ NHẤT

   Mười stylesheet của module forex được viết dựa trên một bảng biến CSS mà bản
   cũ khai trong `<style>` inline của `index.html`:

     --navy --navy2 --blue --blue-soft --muted --green --green-soft
     --red --red-soft --amber --amber-soft --radius --shadow

   Khi thay `index.html` bằng shell mỏng, tôi xoá luôn bảng đó mà không nhận ra
   forex đang sống nhờ nó. Hậu quả không phải là "hơi khác": biến không tồn tại
   thì `color:var(--navy)` thành giá trị không hợp lệ, `background:var(--muted)`
   thành trong suốt, `border-radius:var(--radius)` thành 0, `box-shadow` thành
   none. Cả module mất màu, mất bo góc, mất đổ bóng — nhìn đúng như hỏng.

   Giá trị dưới đây chép NGUYÊN VĂN từ `index-cu.html` để module hiện lại đúng
   như bản đang chạy tốt. Vì thế terminal ở tông SÁNG, không phải tối như dự
   kiến ban đầu: CSS forex ghi cứng nền trắng ở nhiều chỗ (`.fx-scenario`,
   `.fx-metric`, `.fx-secondary`…), ép tối sẽ thành chữ sáng trên nền trắng —
   không đọc được. Muốn terminal tối thật thì phải viết lại tầng vẽ của màn
   phân tích, không phải đổi vài biến.

   ĐỪNG xoá khối này khi dọn dẹp. Không có nó, module forex hỏng ngay.
   ========================================================================== */
.fxt{
  --navy:#0b1f3a;
  --navy2:#16365f;
  --blue:#1769e0;
  --blue-soft:#eaf2ff;
  --muted:#697386;
  --green:#138a5b;
  --green-soft:#e7f6ef;
  --red:#c93b43;
  --red-soft:#fcebed;
  --amber:#b66a00;
  --amber-soft:#fff3dc;
  --radius:6px;
  --shadow:0 1px 2px rgba(15,31,53,.06),0 6px 18px rgba(15,31,53,.05);

  /* Bốn biến này trùng tên với token của app nên phải đặt lại cho khớp bảng
     màu sáng mà forex trông đợi — nếu không, chữ và nền lệch nhau. */
  --bg:#f2f5f9;
  --surface:#fff;
  --text:#172033;
  --line:#dfe5ec;

  /* Ba bậc chữ của hệ mới, chỉnh lại cho nền sáng. */
  --text-2:#4a5769;
  --text-3:#697386;
  --surface-2:#eef2f7;
  --surface-3:#e3e9f1;
  --line-strong:#c6d0dd;
}

.fxt{
  min-height:100vh;min-height:100dvh;
  background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;
  padding-bottom:calc(var(--tap) + var(--safe-b) + var(--s2));
}

/* -----------------------------------------------------------------------------
   1. THANH GIÁ DÍNH ĐỈNH
   -------------------------------------------------------------------------- */
.fxt__bar{
  position:sticky;top:0;z-index:30;
  padding:calc(var(--safe-t) + var(--s2)) var(--s3) var(--s2);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.fxt__hang{display:flex;align-items:center;gap:var(--s2)}
.fxt__ma{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.02em}
.fxt__khung{
  margin-left:auto;display:flex;gap:2px;
  background:var(--surface-2);border-radius:var(--r-sm);padding:2px;
}
.fxt__khung button{
  min-width:38px;min-height:28px;padding:0 var(--s2);
  border-radius:calc(var(--r-sm) - 1px);
  font-size:var(--fs-xs);color:var(--text-3);
}
.fxt__khung button[aria-pressed="true"]{background:var(--surface);color:var(--text);font-weight:var(--fw-bold)}

.fxt__gia{
  display:flex;align-items:baseline;gap:var(--s2);
  margin-top:var(--s1);
}
.fxt__gia b{
  font-size:var(--fs-price);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;line-height:1.1;
  letter-spacing:-.02em;
  transition:color var(--dur-fast) linear;
}
.fxt__gia .doi{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.fxt__meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
  margin-top:var(--s1);
  font-size:var(--fs-xs);color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.fxt__nguon{display:inline-flex;align-items:center;gap:5px}
.fxt__nguon i{width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.fxt__nguon.live i{background:var(--up);box-shadow:0 0 0 3px var(--up-soft)}
.fxt__nguon.demo i{background:var(--warn)}

/* -----------------------------------------------------------------------------
   2. BIỂU ĐỒ
   Chiều cao cố định theo vh chứ không theo tỉ lệ khung: trên điện thoại nằm
   ngang, tỉ lệ sẽ đẩy biểu đồ cao quá màn hình và che mất thẻ quyết định.
   -------------------------------------------------------------------------- */
.fxt__do{position:relative;height:38vh;min-height:220px;max-height:340px;background:var(--bg)}
.fxt__do-canvas{position:absolute;inset:0}
.fxt__do-trong{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--text-3);font-size:var(--fs-sm);text-align:center;padding:var(--s4);
  background:var(--bg);
  pointer-events:none;   /* đừng chặn thao tác kéo/thu phóng biểu đồ bên dưới */
}

/* Chú thích ba tầng sóng, ngay dưới biểu đồ. Không đặt chồng lên biểu đồ như
   bản cũ: trên điện thoại nó che mất chính vùng nến đang cần nhìn. */
.fxt__tang{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
  padding:var(--s2) var(--s3) 0;
  font-size:var(--fs-xs);color:var(--text-3);
}
.fxt__tang span{display:inline-flex;align-items:center;gap:5px}
.fxt__tang i{width:14px;height:3px;border-radius:2px}

.fxt__pha{
  margin-left:auto;
  font-size:var(--fs-xs);font-weight:var(--fw-normal);
  color:var(--text-3);
}

/* -----------------------------------------------------------------------------
   3. THẺ QUYẾT ĐỊNH — luôn hiện, không bao giờ gập
   -------------------------------------------------------------------------- */
.fxt__than{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}

.fxt__quy{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3);
}
.fxt__quy-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.fxt__quy-dau>div{display:flex;flex-direction:column;gap:2px}
.fxt__quy-dau b{font-size:var(--fs-sm)}
.fxt__quy-dau span,.fxt__quy-dau label{font-size:var(--fs-xs);color:var(--text-3)}
.fxt__quy-dau label{display:flex;align-items:center;gap:var(--s2);white-space:nowrap}
.fxt__quy-dau input{
  width:92px;min-height:36px;padding:0 var(--s2);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums;text-align:right;
}
.fxt__quy-so{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:var(--s3);background:var(--line)}
.fxt__quy-so>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--s2);background:var(--surface)}
.fxt__quy-so span,.fxt__quy-so small{font-size:var(--fs-xs);color:var(--text-3)}
.fxt__quy-so b{font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.fxt__quy .is-up{color:var(--up)}
.fxt__quy .is-down{color:var(--down)}
.fxt__quy-lenh{margin-top:var(--s3);border-top:1px solid var(--line)}
.fxt__quy-lenh summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);font-size:var(--fs-sm);cursor:pointer}
.fxt__quy-lenh summary span{margin-left:auto;color:var(--text-3);font-variant-numeric:tabular-nums}
.fxt__quy-lenh p{margin:0;padding:0 0 var(--s2);font-size:var(--fs-sm);color:var(--text-3)}
.fxt__quy-dong{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.fxt__quy-khoa{margin:var(--s2) 0 0;padding-top:var(--s2);border-top:1px solid var(--line);font-size:var(--fs-xs);line-height:1.45;color:var(--warn)}

@media(min-width:760px){
  .fxt__quy-so{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.fxt__plan{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--text-3);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--s3);
}
.fxt__plan.mua{border-left-color:var(--up)}
.fxt__plan.ban{border-left-color:var(--down)}
.fxt__plan.cho{border-left-color:var(--warn)}

.fxt__quyet{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1)}
.fxt__quyet b{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em}
.fxt__plan.mua .fxt__quyet{color:var(--up)}
.fxt__plan.ban .fxt__quyet{color:var(--down)}
.fxt__plan.cho .fxt__quyet{color:var(--warn)}
.fxt__vise{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--s3);line-height:1.45}

.fxt__muc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.fxt__muc div{
  background:var(--surface-2);border-radius:var(--r-sm);
  padding:var(--s2);min-width:0;
}
.fxt__muc span{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.fxt__muc b{
  display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fxt__muc .vao b{color:var(--accent)}
.fxt__muc .dung b{color:var(--down)}
.fxt__muc .dich b{color:var(--up)}

.fxt__so{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);
}
.fxt__so b{color:var(--text);font-variant-numeric:tabular-nums}

/* -----------------------------------------------------------------------------
   4. BẰNG CHỨNG — gập sẵn

   <details> gốc, không tự dựng bằng JS: mở/đóng chạy được cả khi JS lỗi, và
   trình đọc màn hình hiểu ngay mà không cần aria.
   -------------------------------------------------------------------------- */
.fxt__gap{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.fxt__gap+.fxt__gap{margin-top:var(--s2)}
.fxt__gap>summary{
  display:flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s3);
  font-size:var(--fs-sm);color:var(--text-2);
  cursor:pointer;list-style:none;
}
.fxt__gap>summary::-webkit-details-marker{display:none}
.fxt__gap>summary .ic{transition:transform var(--dur-base) var(--ease)}
.fxt__gap[open]>summary .ic{transform:rotate(90deg)}
.fxt__gap>summary .dem{margin-left:auto;color:var(--text-3);font-variant-numeric:tabular-nums}
.fxt__gap>summary .dem.chan{color:var(--warn);font-weight:var(--fw-bold)}
.fxt__noi{padding:0 var(--s3) var(--s3)}
.fxt__dong{
  display:flex;gap:var(--s2);
  padding:var(--s2) 0;
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);
}
.fxt__dong span:first-child{color:var(--text-3);flex:1;min-width:0}
.fxt__dong span:last-child{font-variant-numeric:tabular-nums;text-align:right;flex:0 0 auto}

/* -----------------------------------------------------------------------------
   THANH ĐÁY RIÊNG CỦA TERMINAL — 4 mục
   -------------------------------------------------------------------------- */
.fxt__tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
.fxt__tabs button{
  min-height:var(--tap);padding:var(--s2) var(--s1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text-3);font-size:var(--fs-xs);
}
.fxt__tabs button[aria-current="page"]{color:var(--accent);font-weight:var(--fw-bold)}

/* -----------------------------------------------------------------------------
   TAB LỆNH & HỌC
   -------------------------------------------------------------------------- */
.fxt__the{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s3);
}
.fxt__the+.fxt__the{margin-top:var(--s2)}
.fxt__the-dau{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1)}
.fxt__the-dau b{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.fxt__the-dau .r{margin-left:auto;font-size:var(--fs-sm);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.fxt__the-phu{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}

/* -----------------------------------------------------------------------------
   Ô LEGACY — nơi forex.js dựng màn phân tích (có canvas vẽ sóng Elliott) và
   xưởng bot.

   Nguyên tắc: KHÔNG có luật nào chạm vào bên trong ô này. CSS của forex tự lo
   phần ruột. Trộn hai hệ CSS là cách chắc chắn nhất để tái lập cuộc chiến độ ưu
   tiên mười tầng đã mất công gỡ.

   BA NGOẠI LỆ DUY NHẤT dưới đây, đều để gỡ ĐIỀU HƯỚNG TRÙNG chứ không phải để
   sửa dáng: màn legacy tự dựng một bộ tab trên đỉnh và một thanh điều hướng đáy
   của riêng nó. Để nguyên thì có hai thanh đáy chồng lên nhau (che nội dung, và
   người dùng không biết bấm cái nào), còn bộ tab trên đỉnh thì đánh nhau với 4
   tab của terminal — bấm vào là forex.js đổi tab rồi terminal lập tức kéo về.
   -------------------------------------------------------------------------- */
.fxt__legacy{min-height:50vh;padding-bottom:var(--s4)}
.fxt .fx-mobile-nav{display:none!important}
.fxt .fx-tabs{display:none!important}

/* -----------------------------------------------------------------------------
   GỠ MỘT LUẬT CỦA VỎ CŨ: body.fx-focus-mode{overflow:hidden}

   Lớp `fx-focus-mode` vẫn cần — nó chỉnh chiều cao khung biểu đồ và dồn lưới
   phân tích về một cột trên điện thoại. Nhưng nó cũng KHOÁ CUỘN toàn trang,
   vì trong vỏ cũ vùng cuộn là `.content` (một class khác, không phải id).

   Vỏ mới cuộn bằng chính trang, nên luật đó làm terminal đứng cứng: mọi thứ
   dưới màn hình đầu tiên không với tới được — nhìn y như module hỏng.

   `!important` ở đây là cần thiết chứ không phải lười: forex.css được chèn vào
   <head> SAU file này (nạp theo yêu cầu), nên nếu cùng độ ưu tiên thì luật của
   nó thắng. Đây là một trong số rất ít chỗ được phép dùng.
   -------------------------------------------------------------------------- */
body.fx-focus-mode{overflow:auto!important}

/* Nền body lúc ở trong terminal, để cuộn quá đà không lòi ra màu của phần gia
   đình. Cùng tông với `--bg` mà forex trông đợi (xem bảng biến ở đầu file). */
body.fx-focus-mode{background:#f2f5f9!important}

/* -----------------------------------------------------------------------------
   MỘT THANH DÍNH ĐỈNH, KHÔNG PHẢI BA

   Màn legacy mang theo hai thứ cũng dính đỉnh: `.ssi-ticker` (thanh giá của
   forex-trading-ui, z-index 52) và `.fx-pro-header`. Cộng với thanh của terminal
   là ba lớp cùng bám `top:0` — chúng chồng lên nhau, và lớp z-index cao nhất che
   mất NÚT QUAY LẠI. Đó không còn là lỗi thẩm mỹ mà là mất lối thoát.

   Xử lý: terminal giữ đúng MỘT thanh dính đỉnh của mình (giá, bid/ask, khung,
   nút quay lại). `.ssi-ticker` ẩn đi vì hiển thị đúng cùng dữ liệu; `.fx-pro-header`
   trả về dòng chảy bình thường thay vì dính.
   -------------------------------------------------------------------------- */
.fxt__bar{z-index:60}
.fxt .ssi-ticker{display:none!important}
.fxt .fx-pro-header{position:static!important}

.fxt__nap{padding:var(--s6) var(--s4);text-align:center;color:var(--text-2)}
.fxt__nap p{margin:0 0 var(--s2);font-size:var(--fs-md)}
.fxt__nap small{font-size:var(--fs-sm);color:var(--text-3)}
.fxt__loi{color:var(--down)}

/* Máy tính để bàn: hai cột — biểu đồ trái, quyết định phải. Đúng cách terminal
   thật dùng chỗ rộng: không kéo dài biểu đồ ra vô tận mà đặt thêm thông tin
   cạnh nó. */
@media (min-width:900px){
  .fxt__than{
    display:grid;grid-template-columns:minmax(0,1fr) 360px;
    align-items:start;gap:var(--s4);padding:var(--s4);
  }
  .fxt__quy{grid-column:1/-1}
  .fxt__do{height:52vh;max-height:none}
  .fxt__cot-phai{display:flex;flex-direction:column;gap:var(--s3)}
}