/* ============================================================
   Chu Kỳ Vàng — style.css
   Phần :root bên dưới là bộ token dùng chung với dashboard quỹ.
   Muốn đổi toàn bộ tông màu thì chỉ sửa ở đây.

   BẢN SỬA FILE NÀY: #11 — 2026-08-07 — GĐ3-D: thêm biến màu --thay (xanh da trời) cho
     đường THẦY chồng lên nến tái tạo ở biểu đồ #2. Chỉ THÊM 1 biến ở :root + dark.
     Đi kèm index.html #36 + taifu.js #7.
   BẢN SỬA FILE NÀY: #10 — 2026-08-07 — GĐ2-b: CSS thanh nút A/B/C ở #3 (.tf-tab3) +
     bảng Top 100 cuộn ngang (.tf-b-top100) + coin loại trừ mờ/gạch + badge "loại" +
     nút Loại/Bỏ (.tf-loai-nut). Chỉ THÊM ở cuối file. Đi kèm index.html #35 + taifu.js #6.
   BẢN SỬA FILE NÀY: #9 — 2026-08-06 — B3b tinh chỉnh: thiết kế lại đầu khung chart
     Markup ở #4 (mk-head): bỏ ô #quote lớn, đưa markup% + tiêu đề sang trái, tỷ giá
     P2P/VCB sang phải ngay trên đầu chart. Giữ đủ ID chart.js ghi (nowVal/nowTime/
     qTime ẩn bằng .mk-hidden). Đi kèm index.html #34.
   BẢN SỬA FILE NÀY: #8 — 2026-08-06 — CHẶNG B3b: biểu đồ #2 lấp ĐẦY chiều rộng
     (margin:0, bỏ aspect-ratio — chiều cao 4:3 do taifu.js tính, cột giá sát lề).
     Style khối Markup (.quote/.chart-head/.stats...) + giải thích (.box/.formula)
     là GLOBAL nên tự áp khi dời vào #4/#5, không cần thêm. Đi kèm index.html #33.
   BẢN SỬA FILE NÀY: #7 — 2026-08-06 — CHẶNG B3a: biểu đồ #2 (#tfChart) cao gần
     VUÔNG thay vì bị bóp thấp (aspect-ratio 1/1 có min/max; mobile về cao cố định).
     Vẫn CHỈ thêm cuối file, scope #trTaifu. Đi kèm index.html #32.
   BẢN SỬA FILE NÀY: #6 — 2026-08-06 — CHẶNG B2b: THÊM style 4 nút chức năng
     (.tf-legend/.tf-leg) dưới biểu đồ + chế độ phóng to toàn màn hình (.tf-full).
     Vẫn CHỈ thêm cuối file, scope #trTaifu. Đi kèm index.html #30.
   BẢN SỬA FILE NÀY: #5 — 2026-08-06 — CHẶNG B2a: THÊM style cho thanh điều khiển
     biểu đồ #2 (nút nến↔đường .tf-nut, ô USD/VND .tf-tien-wrap) + cột STT #1
     (.tf-stt). Vẫn CHỈ thêm cuối file, scope #trTaifu. Đi kèm index.html #29.
   BẢN SỬA FILE NÀY: #4 — 2026-08-06 — CHẶNG B1 (tinh chỉnh sau test máy): (a)
     tràn viền rộng như tab Giao dịch (#trTaifu .wrap max-width:none); (b) chữ
     bảng nhỏ 12px + padding gọn để hiện nhiều cột theo hàng ngang; (c) bảng
     thành phần #3 cao ~15 coin rồi cuộn dọc, tiêu đề cột dính khi cuộn. Vẫn CHỈ
     thêm ở CUỐI file, scope #trTaifu. Đi kèm index.html #28.
   BẢN SỬA FILE NÀY: #3 — 2026-08-06 — CHẶNG B1 (gộp 3 tab): THÊM khối CSS lưới
     5 khu/3 tầng + nút thu gọn cho tab tổng hợp, ở CUỐI file, scope toàn bộ bằng
     #trTaifu (không rò sang tab khác). KHÔNG sửa 1 dòng CSS cũ nào phía trên.
     Đi kèm index.html #27. Xem KE_HOACH_GOP_3TAB.
   BẢN SỬA FILE NÀY: #2 — 2026-08-06 — BƯỚC 4 (tab TaiFu Index): THÊM khối CSS
     ở CUỐI file, scope toàn bộ bằng #trTaifu để không rò sang tab khác. KHÔNG
     sửa 1 dòng CSS cũ nào phía trên.
   BẢN SỬA TRƯỚC: #1 — 2026-08-04 — Tách từ index_V20.0.html thành file
     riêng để tải lên Cloudflare Workers (Upload static files) độc lập với
     index.html. Nội dung copy nguyên văn, KHÔNG đổi 1 dòng CSS nào. Lịch sử
     trước ngày tách nằm trong index_V20.0.html (Project Knowledge).
   ============================================================ */

:root{
  /* nền và khung */
  --ink:#F6F8FB;
  --panel:#FFFFFF;
  --line:#E4E9F0;
  --line-soft:#F1F4F9;

  /* chữ */
  --txt:#0F172A;
  --dim:#64748B;
  --dim2:#7C8A9C;

  /* tín hiệu */
  --up:#059669;
  --down:#EF4444;
  --gold:#D97706;
  --cool:#4F46E5;
  --cool-soft:#EEF0FE;

  --r:14px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --font:'Inter', system-ui, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* sidebar — light mode: nền trắng/xám nhạt */
  --side-bg:#FFFFFF;
  --side-txt:#334155;
  --side-border:#E4E9F0;
  --side-hover:#F1F4F9;
  --side-active:#EEF0FE;
  --side-dim:#94A3B8;
  --side-dim2:#94A3B8;
  --side-badge-border:#FFFFFF;

  /* màu đặc thù giao diện */
  --overlay:rgba(15,23,42,.45);
  --code-bg:#0F172A;
  --code-txt:#E2E8F0;
  --tooltip-bg:#1F2937;
  --nhac-bg:#FFFBEB;
  --nhac-border:#FDE68A;
  --nhac-txt:#92400E;
  --the-mua-bg:#ECFDF5;
  --the-ban-bg:#FEF2F2;
  --tag-hi-bg:#FEF2F2;
  --tag-lo-bg:#ECFDF5;
  --loi-bg:#FEF2F2;
  --thieu-gia-bg:#FFFBEB;
  --thieu-gia-hover:#FEF3C7;

  /* đường "Tổng" chồng lên biểu đồ nến (chặng 4.2b): navy sáng light / xanh nhạt dark */
  --bd-tong:#3B5BDB;
  --thay:#1E88E5;          /* GĐ3-D: đường THẦY (line xanh da trời) chồng lên nến tái tạo */
}

[data-theme="dark"]{
  /* nền và khung */
  --ink:#0D1117;
  --panel:#161B22;
  --line:#30363D;
  --line-soft:#21262D;

  /* chữ */
  --txt:#E6EDF3;
  --dim:#8B949E;
  --dim2:#6E7681;

  /* tín hiệu — giữ nguyên sắc nét */
  --up:#3FB950;
  --down:#F85149;
  --gold:#D29922;
  --cool:#7B91F5;
  --cool-soft:#1C2045;

  --shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);

  /* sidebar — dark mode */
  --side-bg:#111A2E;
  --side-txt:#C7D2E4;
  --side-border:rgba(255,255,255,.07);
  --side-hover:rgba(255,255,255,.06);
  --side-active:#2A3550;
  --side-dim:#5C6B84;
  --side-dim2:#7F8FA8;
  --side-badge-border:#111A2E;

  /* màu đặc thù */
  --overlay:rgba(0,0,0,.65);
  --code-bg:#010409;
  --code-txt:#C9D1D9;
  --tooltip-bg:#30363D;
  --nhac-bg:#2D2000;
  --nhac-border:#5A3E00;
  --nhac-txt:#D29922;
  --the-mua-bg:#0D2818;
  --the-ban-bg:#2A0C0C;
  --tag-hi-bg:#2A0C0C;
  --tag-lo-bg:#0D2818;
  --loi-bg:#2A0C0C;
  --thieu-gia-bg:#2D2000;
  --thieu-gia-hover:#3D2C00;

  --bd-tong:#93A9FF;
  --thay:#4FC3F7;          /* GĐ3-D: đường THẦY (line xanh da trời) — sáng hơn cho nền tối */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--font); line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
/* Trang Giao dịch: bỏ giới hạn bề ngang để bảng chiếm hết vùng nội dung.
   Vùng nội dung là flex:1 nên tự giãn khi ẩn menu -> các cột mở rộng hết,
   khỏi phải kéo thanh trượt ngang. */
#trGiaodich .wrap{max-width:none}
.num{font-variant-numeric:tabular-nums}

/* ---------------- mở đầu ---------------- */
.hero{padding:52px 0 26px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:11.5px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cool); background:var(--cool-soft); padding:6px 12px; border-radius:99px}
h1{margin:18px 0 0; font-size:clamp(28px,4.6vw,44px); line-height:1.15;
  letter-spacing:-.025em; font-weight:700; max-width:19ch}
.lede{margin:18px 0 0; font-size:17px; color:var(--dim); max-width:62ch}
.lede b{color:var(--txt); font-weight:600}

/* ---------------- thẻ biểu đồ ---------------- */
.card{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow)}

.chart-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 22px;
  padding:20px 22px 16px; border-bottom:1px solid var(--line)}
.chart-head .title{font-size:15px; font-weight:600}
.chart-head .title span{display:block; font-size:12.5px; font-weight:400;
  color:var(--dim2); margin-top:3px}
.now{margin-left:auto; text-align:right}
.now .v{font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em}
.now .t{font-size:11.5px; color:var(--dim2); margin-top:6px}

/* thước phân vị — phần đặc trưng của trang */
.ruler{padding:18px 22px 4px}
.ruler-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim2); margin-bottom:9px}
.ruler-bar{position:relative; height:34px; border-radius:8px;
  overflow:hidden; background:var(--line-soft)}
.ruler-bar canvas{display:block; width:100%; height:100%}
.ruler-mark{position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--gold); border-radius:2px}
.ruler-scale{display:flex; justify-content:space-between; margin-top:7px;
  font-size:11px; color:var(--dim2)}

.bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px 22px 12px}
.tf{display:flex; gap:2px; background:var(--line-soft); padding:3px;
  border-radius:10px; border:1px solid var(--line)}
.tf button{all:unset; cursor:pointer; padding:7px 15px; border-radius:7px;
  font-size:12.5px; font-weight:600; color:var(--dim); transition:.15s}
.tf button:hover{color:var(--txt)}
.tf button:focus-visible{outline:2px solid var(--cool); outline-offset:2px}
.tf button[aria-pressed="true"]{background:var(--cool); color:#fff}
/* Nút bật/tắt dấu trên biểu đồ (độc lập, không phải radio) */
.tgl{display:flex; gap:6px}
.tgl button{all:unset; cursor:pointer; padding:6px 13px; border-radius:8px; font-size:13px;
  border:1px solid var(--line); color:var(--dim2)}
.tgl button:hover{color:var(--txt)}
.tgl button[aria-pressed="true"]{background:var(--cool); color:#fff; border-color:transparent}
.ohlc{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--dim)}
.ohlc b{font-weight:600; color:var(--txt)}
.hint{width:100%; font-size:11.5px; color:var(--gold); margin-top:-2px}

.chart{height:440px; margin:0 10px}
.chart iframe{display:block; width:100%; height:100%; border:0}
.state{padding:26px 22px; font-size:13.5px; color:var(--dim)}
.state b{color:var(--down)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border-top:1px solid var(--line)}
.stat{background:var(--panel); padding:14px 18px}
.stat .k{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim2)}
.stat .v{font-size:19px; font-weight:600; margin-top:6px; letter-spacing:-.01em}

.src{padding:13px 20px; border-top:1px solid var(--line);
  background:var(--line-soft); font-size:12px; color:var(--dim2);
  border-radius:0 0 var(--r) var(--r)}

/* ---------------- các mục nội dung ---------------- */
section{padding:52px 0}
h2{margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em}
.sub{margin:9px 0 0; color:var(--dim); max-width:64ch}
.grid{display:grid; gap:16px; margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow)}
.box h3{margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px}
.box p{margin:11px 0 0; font-size:14.5px; color:var(--dim)}
.tag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px}
.tag.hi{background:var(--tag-hi-bg); color:var(--down)}
.tag.mid{background:var(--line-soft); color:var(--dim)}
.tag.lo{background:var(--tag-lo-bg); color:var(--up)}

.method{margin-top:26px; padding:26px}
.formula{margin:0 0 22px; padding:15px 18px; border-radius:10px; overflow-x:auto;
  background:var(--code-bg); color:var(--code-txt); font-family:var(--mono); font-size:14px}
.formula .a{color:#7DD3FC}
.formula .b{color:#FCD34D}
dl{margin:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
dt{font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim2)}
dd{margin:7px 0 0; font-size:14.5px; color:var(--dim)}
dd b{color:var(--txt); font-weight:600}

/* ---------------- chân trang ---------------- */
footer{border-top:1px solid var(--line); padding:34px 0 46px; margin-top:20px}
footer .who{font-size:13.5px; font-weight:600; color:var(--dim)}
footer p{margin:6px 0 0; font-size:12.5px; color:var(--dim2); max-width:60ch; line-height:1.75}
.disclaimer{margin-top:18px; padding:15px 17px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel);
  font-size:12.5px; color:var(--dim2); line-height:1.75}

@media (max-width:760px){
  .hero{padding:36px 0 20px}
  section{padding:38px 0}
  .chart{height:340px}
  .now{margin-left:0; text-align:left; width:100%}
  .now .v{font-size:27px}
  .logo small{display:none}
  nav a{padding:8px 10px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---------------- khối chỉ số hiện tại ---------------- */
.hero{display:grid; gap:34px; align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr)}
.hero-text h1{margin-top:18px}

.quote{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px 22px 16px}
.q-main{text-align:center; padding-bottom:16px; border-bottom:1px solid var(--line)}
.q-val{font-size:40px; font-weight:700; line-height:1; letter-spacing:-.025em}
.q-lab{margin-top:9px; font-size:14px; font-weight:600; color:var(--txt)}
.q-row{display:flex; align-items:baseline; gap:10px; padding:13px 0;
  border-bottom:1px solid var(--line-soft)}
.q-name{flex:1 1 auto; font-size:13px; color:var(--dim2); min-width:0}
.q-name b{color:var(--txt); font-weight:600; font-size:13.5px}
.q-price{font-size:14.5px; font-weight:600; white-space:nowrap}
.q-chg{font-size:12.5px; font-weight:600; white-space:nowrap; min-width:76px; text-align:right}
.q-time{padding-top:12px; font-size:11px; color:var(--dim2); text-align:center}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; gap:26px}
  .q-val{font-size:34px}
}


/* ============================================================
   BỐ CỤC CÓ MENU BÊN TRÁI
   ============================================================ */
body.app{display:flex; min-height:100vh}

.side{position:sticky; top:0; align-self:flex-start; height:100vh; flex:none;
  width:246px; background:var(--side-bg); color:var(--side-txt); display:flex; flex-direction:column;
  overflow-x:hidden; transition:width .18s ease; border-right:1px solid var(--side-border)}
.side.hep{width:66px}
.side .dau{display:flex; align-items:center; gap:11px; padding:18px 16px;
  border-bottom:1px solid var(--side-border)}
.side .dau img{width:34px; height:34px; border-radius:9px; flex:none; object-fit:cover}
.side .dau .ten{font-weight:700; color:var(--txt); font-size:14.5px; white-space:nowrap}
.side .dau .ten small{display:block; font-size:10.5px; font-weight:500; color:var(--side-dim2)}
.side.hep .dau .ten{display:none}
.side .thu{all:unset; cursor:pointer; width:28px; height:28px;
  border-radius:7px; display:grid; place-items:center; color:var(--side-dim2); flex:none}
.side .thu:hover{background:var(--side-hover); color:#fff}
.side .thu:focus-visible{outline:2px solid var(--cool); outline-offset:1px}

.side nav{display:flex; flex-direction:column; align-items:stretch;
  margin:0; gap:0; padding:14px 10px; overflow-y:auto; overflow-x:hidden; flex:1}
.side .nhom{font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--side-dim); padding:14px 10px 7px; white-space:nowrap}
.side.hep .nhom{opacity:0; height:14px; padding:0}
.side nav a{display:flex; align-items:center; gap:12px; padding:10px 11px;
  border-radius:9px; color:var(--side-txt); text-decoration:none; font-size:13.5px;
  font-weight:500; white-space:nowrap; margin-bottom:2px; position:relative}
.side nav a:hover{background:var(--side-hover); color:var(--txt)}
.side nav a[aria-current="page"]{background:var(--side-active); color:var(--cool); font-weight:600}
.side nav a:focus-visible{outline:2px solid var(--cool); outline-offset:-2px}
.side nav a svg{width:18px; height:18px; flex:none}
.side.hep nav a span:not(.badge-cham){display:none}
.badge-cham{position:absolute; top:2px; left:21px; min-width:20px; height:20px; padding:0 4px;
  border-radius:999px; background:var(--gold); color:var(--side-badge-border); font-size:13px; font-weight:800;
  line-height:20px; text-align:center; border:2px solid var(--side-badge-border); cursor:pointer;
  transition:transform .12s ease, background .15s ease; z-index:1}
.badge-cham:hover{transform:scale(1.15)}
.badge-cham.dang-dong-bo{background:#8B95A8; cursor:progress; animation:cham-nhap 1s ease-in-out infinite}
.badge-cham.thanh-cong{background:var(--up); color:#fff; cursor:default; animation:none}
@keyframes cham-nhap{0%,100%{opacity:1} 50%{opacity:.35}}
.side.hep .badge-cham{left:18px; top:-2px}
.side .cuoi{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 16px; border-top:1px solid var(--side-border)}
.side.hep .cuoi{justify-content:center; padding:10px}
.side .chan{font-size:11px; color:var(--side-dim); white-space:nowrap}
.side.hep .chan{display:none}

/* Nút toggle theme — 1 nút, icon SVG đổi theo theme */
.bt-theme{all:unset; cursor:pointer; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; color:var(--side-dim2); flex:none;
  transition:background .15s, color .12s}
.bt-theme:hover{background:var(--side-hover); color:var(--side-txt)}
.bt-theme:focus-visible{outline:2px solid var(--cool); outline-offset:1px}
.bt-theme svg{width:18px; height:18px}
/* icon mặt trăng ẩn ở chế độ sáng, hiện ở chế độ tối */
.bt-theme .ic-moon{display:none}
.bt-theme .ic-sun{display:block}
[data-theme="dark"] .bt-theme .ic-moon{display:block}
[data-theme="dark"] .bt-theme .ic-sun{display:none}
.side .cuoi-row{display:flex; align-items:center; gap:6px}

.man{display:none}
.noidung{flex:1; min-width:0}
.trang{display:none}
.trang.hien{display:block}

.mo-menu{display:none}

@media (max-width:860px){
  .side{position:fixed; z-index:40; transform:translateX(-100%); width:246px;
    transition:transform .2s ease}
  .side.mo{transform:translateX(0)}
  .side.hep{width:246px}
  .side.hep .dau .ten, .side.hep nav a span, .side.hep .nhom, .side.hep .chan{display:block; opacity:1}
  .side.hep .cuoi{justify-content:space-between; padding:10px 16px}
  .mo-menu{display:inline-grid; place-items:center; all:unset; cursor:pointer;
    width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
    background:var(--panel); color:var(--dim)}
  .man{position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:39; display:none}
  .man.hien{display:block}
}

/* ============================================================
   TRANG GIAO DỊCH
   ============================================================ */
.tomtat{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:22px}
.o{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 19px; box-shadow:var(--shadow); position:relative}
.o .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2);
  padding-right:22px}
.o .v{font-size:24px; font-weight:700; margin-top:7px; letter-spacing:-.02em}
.o .p{font-size:12.5px; color:var(--dim2); margin-top:4px}

/* Nút "?" góc trên-phải mỗi ô số tổng — mở cửa sổ giải thích chỉ số. */
.o-hoi{all:unset; position:absolute; top:10px; right:10px; width:19px; height:19px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--dim2); background:var(--line-soft);
  cursor:pointer; line-height:1}
.o-hoi:hover{background:var(--cool); color:#fff}
.o-hoi:focus-visible{outline:2px solid var(--cool); outline-offset:2px}

/* Nhãn phân tách cụm ô theo Cách B, cùng phong cách với .dongtien .nhan */
.tomtat-nhan{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim2); font-weight:600; margin-top:22px; margin-bottom:-6px}

/* Cửa sổ giải thích chỉ số — dùng lại khung .hop/.phu-nen, chỉ đổi nội dung */
.tt-hop .than{line-height:1.6; font-size:13.5px}
.tt-hop .than p{margin:0 0 12px}
.tt-hop .than p:last-child{margin-bottom:0}
.tt-hop .than b{color:var(--txt)}

/* Hero 2 cột: tiêu đề trái, biểu đồ tròn tỷ lệ phải */
.hero-gd{display:flex; gap:28px; align-items:flex-start; justify-content:space-between}
.hero-text{flex:1; min-width:0}
.donut-hop{flex:none; width:508px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:16px 20px}
.donut-hop:empty{display:none}
.donut-tieu{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); margin-bottom:8px}
.donut-body{display:flex; gap:10px; align-items:center}
.donut-ve{position:relative; flex:none}
.donut-svg{width:330px; height:242px; display:block}
.donut-svg path{transition:transform .14s ease; cursor:pointer}
.donut-svg path:hover{transform:translate(var(--dx),var(--dy))}
.dn-nh{font-size:10px; fill:var(--dim); font-weight:600}
.donut-tip{position:absolute; left:0; top:0; pointer-events:none; background:var(--tooltip-bg); color:#fff;
  font-size:12px; padding:5px 9px; border-radius:7px; white-space:nowrap; z-index:5;
  transform:translate(-50%,-150%); opacity:0; transition:opacity .1s;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.donut-tip.hien{opacity:1}
.donut-leg{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; font-size:12.5px}
.dl{display:flex; align-items:center; gap:8px}
.dl-c{width:11px; height:11px; border-radius:3px; flex:none}
.dl-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--dim); font-variant-numeric:tabular-nums}
.dl-t b{color:var(--txt); font-weight:600}
.donut-cap{margin-top:10px; font-size:14px; font-weight:600; color:var(--txt); text-align:center}
@media (max-width:1100px){ .hero-gd{flex-direction:column} .donut-hop{width:100%; max-width:560px} }
@media (max-width:560px){ .donut-body{flex-direction:column} .donut-hop{width:100%} }

/* ---- Legend + fullscreen + help cho biểu đồ nến (chặng 4.2b) ---- */
/* TradingView-style header */
.bd-head{display:flex; align-items:center; gap:8px; padding:10px 16px 0; flex-wrap:wrap}
.bd-head-r{display:flex; align-items:center; gap:6px; margin-left:auto}
.bd-sel{all:unset; cursor:pointer; font-size:13px; font-weight:600; color:var(--txt);
  background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:5px 12px;
  appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:26px}
.bd-sel:focus-visible{outline:2px solid var(--cool); outline-offset:2px}
.bd-icon-btn{all:unset; cursor:pointer; width:30px; height:30px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:6px; color:var(--dim2); font-size:16px}
.bd-icon-btn:hover{background:var(--line-soft); color:var(--txt)}
.bd-icon-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.bd-sep{width:1px; height:20px; background:var(--line); flex:none}
.bd-sel-tien{font-size:12px; padding:4px 24px 4px 10px; border-radius:6px}
.bd-legend{display:flex; flex-wrap:wrap; gap:4px 16px; padding:2px 20px 14px}
.bd-leg{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--dim); padding:3px 6px; border-radius:6px}
.bd-leg:hover{background:var(--line-soft); color:var(--txt)}
.bd-leg.tat{opacity:.35}
.bd-leg .cham{width:9px; height:9px; border-radius:50%; flex:none}
.bd-toolbar{display:flex; flex-wrap:wrap; align-items:center; padding:2px 20px 12px}
.bd-toolbar-l{display:flex; flex-wrap:wrap; gap:4px 4px; flex:1; min-width:0}
.bd-toolbar-r{display:flex; gap:4px; margin-left:auto; flex:none}
.bd-ohlc-row{padding:0 22px 4px; font-size:12px}
.bd-val-tip{position:absolute; z-index:6; pointer-events:none; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:8px 11px; font-size:12px; line-height:1.7; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.14)}
#bdCard.bd-full{position:fixed; inset:14px; z-index:60; display:flex; flex-direction:column;
  background:var(--panel); border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:auto}
#bdCard.bd-full .chart{flex:1; height:auto}
body.bd-noscroll{overflow:hidden}
.bd-help-nen{position:fixed; inset:0; z-index:70; background:var(--overlay);
  display:none; align-items:center; justify-content:center}
.bd-help-nen.hien{display:flex}
.bd-help-hop{background:var(--panel); border-radius:16px; max-width:520px; width:92%;
  padding:28px 26px; box-shadow:0 16px 48px rgba(0,0,0,.25); max-height:85vh; overflow-y:auto}
.bd-help-hop h3{margin:0 0 14px; font-size:16px}
.bd-help-hop p{margin:0 0 10px; font-size:13.5px; line-height:1.7; color:var(--dim)}
.bd-help-hop b{color:var(--txt)}


.thanhcong{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:26px 0 14px}
.nut{all:unset; cursor:pointer; padding:9px 16px; border-radius:9px; font-size:13px;
  font-weight:600; background:var(--cool); color:#fff}
.nut.phu{background:var(--panel); color:var(--dim); border:1px solid var(--line)}
.nut.phu:hover{color:var(--txt)}
.nut.nho{padding:5px 11px; font-size:12px}
.nut:focus-visible{outline:2px solid var(--txt); outline-offset:2px}
.nut[disabled]{opacity:.5; cursor:default}

.xuat-wrap{position:relative; display:inline-block}
.xuat-mui{font-size:10px; margin-left:2px}
.xuat-menu{position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:200px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:6px; display:none}
.xuat-menu.hien{display:block}
.xuat-menu button{all:unset; display:block; width:100%; box-sizing:border-box; cursor:pointer;
  padding:9px 11px; border-radius:7px; font-size:13px; color:var(--txt)}
.xuat-menu button:hover{background:var(--line-soft)}

.bang{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:900px}
thead th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim); font-weight:700; padding:13px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap}
.ico-hd{vertical-align:middle; display:inline-block}
th.p{text-align:center}
td.p{text-align:right}
tbody td{padding:13px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.trade{cursor:pointer}
tr.trade:hover{background:var(--line-soft)}
tr.trade td{font-weight:500}
tr.trade .mo{display:inline-block; width:16px; color:var(--dim2); transition:transform .15s}
tr.trade.mo-ra .mo{transform:rotate(90deg)}
.symbol{font-weight:600}
.symbol small{display:block; font-size:11.5px; font-weight:400; color:var(--dim2)}
.symbol .sym-in{display:flex; align-items:center; gap:9px}
.sym-txt{display:flex; flex-direction:column; line-height:1.25}
.coin-ico-wrap{position:relative; flex:0 0 22px; width:22px; height:22px}
.coin-ico-fb{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--line-soft); color:var(--dim2); font-size:10px; font-weight:700}
.coin-ico{position:absolute; inset:0; width:22px; height:22px; border-radius:50%;
  object-fit:cover; background:var(--panel)}
.len{color:var(--up)} .xuong{color:var(--down)}
.hep-td{padding:0 !important; border:0 !important}
.con{background:var(--line-soft); padding:4px 14px 14px}
.con table{min-width:820px; font-size:12.5px}
.con thead th{padding:10px 12px; border-bottom:1px solid var(--line)}
.con tbody td{padding:10px 12px; border-bottom:1px solid var(--line-soft)}
.hd{display:inline-flex; gap:6px}
.hd button{all:unset; cursor:pointer; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center; color:var(--dim2)}
.hd button:hover{background:var(--panel); color:var(--txt)}
.hd button:focus-visible{outline:2px solid var(--cool)}
.the{display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px}
.the.mua{background:var(--the-mua-bg); color:var(--up)}
.the.ban{background:var(--the-ban-bg); color:var(--down)}
.the.nap{background:var(--cool-soft); color:var(--cool)}
.the.doi{background:var(--line); color:var(--dim)}
.the.thieu-gia{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:2px 9px; border-radius:99px;
  background:var(--thieu-gia-bg); color:var(--gold)}
.the.thieu-gia:hover{background:var(--thieu-gia-hover)}
.the.thieu-gia:focus-visible{outline:2px solid var(--gold)}
.doi-info{background:var(--line-soft); border-radius:10px; padding:10px 12px; margin-bottom:14px;
  font-size:13px; color:var(--dim)}
.doi-info b{color:var(--txt)}
.doi-info .nguon-tay{color:var(--gold); font-weight:600}
.doi-info .nguon-1h{color:var(--up); font-weight:600}
.doi-info .nguon-thieu{color:var(--gold); font-weight:600}

/* Mục 2d — hàng tiêu đề bảng chính dính cố định khi cuộn.
   Bảng có vùng cuộn dọc riêng (max-height) để tiêu đề đứng yên, các dòng coin
   trôi lên dưới nó. Chiều cao này có thể chỉnh theo ý. */
/* Mục 2d/điểm 1 — từ "+ Thêm coin mới" trở xuống là một vùng cao gần bằng màn
   hình: thanh công cụ đứng yên trên cùng, bảng cuộn bên trong, hàng tiêu đề cột
   dính ngay dưới thanh công cụ. Kéo trang thì thẻ tổng + dòng tiền cuộn đi. */
.vung-bang{display:flex; flex-direction:column; max-height:calc(100vh - 12px);
  margin-top:14px}
.vung-bang .thanhcong{flex:none; margin-top:0}
.bang{flex:1 1 auto; min-height:0; overflow:auto}
.bang > table > thead > tr > th{position:sticky; top:0; z-index:5;
  background:var(--panel); box-shadow:inset 0 -1px 0 var(--line)}

/* Mục 2e — bảng con: chế độ gọn (hộp cuộn dọc, tiêu đề dính) + phân trang */
.con-scroll{max-height:430px; overflow:auto; border:1px solid var(--line);
  border-radius:10px; background:var(--panel)}
.con-scroll > table{min-width:1040px}
.con-scroll thead th{position:sticky; top:0; z-index:2; background:var(--ink);
  box-shadow:inset 0 -1px 0 var(--line)}
.con thead small{font-weight:600; color:var(--dim2); font-size:9.5px; letter-spacing:.03em}
.con .phi-ma{font-size:10px; color:var(--dim2); font-weight:700}
.con .thue-th, .con .thue-o{padding-right:30px}
.con .gc-th, .con .ghichu-o{min-width:90px; padding-left:12px; white-space:normal}
.con .ghichu-o{max-width:140px}
.con .sangd-o{min-width:70px; max-width:110px; padding-left:12px; white-space:normal}
.con .ngay-gio{white-space:nowrap}
.con-chan{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px}
.con-phantrang{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-top:10px; padding:2px}
.tr-nhan{font-size:12px; color:var(--dim); font-weight:600}
.tr-nut{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.tr-so,.tr-dh{all:unset; cursor:pointer; min-width:30px; height:30px; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:8px;
  font-size:12.5px; color:var(--dim); border:1px solid transparent}
.tr-so:hover,.tr-dh:hover{background:var(--line-soft); color:var(--txt)}
.tr-so.dang{background:var(--cool); color:#fff; font-weight:700}
.tr-dh{color:var(--cool); font-weight:600}
.tr-dh[disabled]{color:var(--line); cursor:default; background:transparent}
.tr-cham{padding:0 3px; color:var(--dim2)}

/* hộp thoại nhập */
.phu-nen{position:fixed; inset:0; background:var(--overlay); z-index:50;
  display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto}
.phu-nen.hien{display:flex}
.hop{background:var(--panel); border-radius:16px; width:100%; max-width:560px;
  box-shadow:0 20px 50px rgba(15,23,42,.2)}
.hop h3{margin:0; padding:20px 22px; font-size:17px; border-bottom:1px solid var(--line)}
.hop .than{padding:20px 22px}
.hang{display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-bottom:14px}
.o-nhap label{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim2); margin-bottom:6px}
.o-nhap input, .o-nhap select{width:100%; padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--ink); color:var(--txt);
  font-family:var(--font); font-size:14px}
.o-nhap input:focus, .o-nhap select:focus{outline:none; border-color:var(--cool)}
.goiy{font-size:12px; color:var(--dim2); margin-top:6px}
.goiy b{color:var(--cool); cursor:pointer; text-decoration:underline}
.o-nhap label small{text-transform:none; letter-spacing:0; font-weight:400; color:var(--dim2)}
.o-phi{display:flex; gap:8px}
.o-phi input{flex:1; min-width:0}
.o-phi select{flex:0 0 96px}
.hop .chan{padding:16px 22px; border-top:1px solid var(--line); display:flex;
  gap:10px; justify-content:flex-end}
.loi{margin:0 22px 14px; padding:11px 14px; border-radius:9px; background:var(--loi-bg);
  color:var(--down); font-size:13px; display:none}
.loi.hien{display:block}
@media (max-width:560px){ .hang{grid-template-columns:1fr} }

/* nhắc đồng bộ */
.nhac{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px;
  padding:13px 16px; border-radius:var(--r); background:var(--nhac-bg);
  border:1px solid var(--nhac-border); color:var(--nhac-txt); font-size:13px}
.nhac b{font-weight:700}
.nhac .nut{margin-left:auto; background:var(--gold)}
.tomtat.mo-di{opacity:.55}
.dv{font-size:11px; color:var(--dim2); margin-left:3px}
.dongtien{display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap;
  margin-top:14px; padding:14px 20px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.dongtien .nhan{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim2); font-weight:600; padding-right:6px; border-right:1px solid var(--line);
  display:inline-flex; align-items:center; gap:6px}
.nhan-hoi{all:unset; width:15px; height:15px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:9.5px; font-weight:700;
  color:var(--dim2); background:var(--line-soft); cursor:pointer; line-height:1}
.nhan-hoi:hover{background:var(--cool); color:#fff}
.nhan-hoi:focus-visible{outline:2px solid var(--cool); outline-offset:2px}
.dongtien span{display:flex; align-items:baseline; gap:8px}
.dongtien i{font-style:normal; font-size:12.5px; color:var(--dim)}
.dongtien b{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .dongtien{gap:10px 18px}
  .dongtien .nhan{width:100%; border-right:0; border-bottom:1px solid var(--line);
    padding:0 0 8px}
}

/* đầu cột bấm để sắp xếp — dùng chung cho bảng chính (th.xep) và bảng con (th.xepcon) */
th.xep, th.xepcon{cursor:pointer; user-select:none; white-space:nowrap}
th.xep:hover, th.xepcon:hover{color:var(--txt)}
th.xep .mui, th.xepcon .mui{display:inline-block; margin-left:5px; font-size:9px; color:var(--line);
  vertical-align:1px}
th.xep:hover .mui, th.xepcon:hover .mui{color:var(--dim2)}
th.xep.dang, th.xepcon.dang{color:var(--cool)}
th.xep.dang .mui, th.xepcon.dang .mui{color:var(--cool); font-size:8px}


/* ============================================================
   TAB TAIFU INDEX (Bước 4) — TẤT CẢ scope bằng #trTaifu để không rò tab khác
   ============================================================ */
#trTaifu .tf-sec{margin-top:26px}
#trTaifu .tf-sec-tt{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--txt);
  margin:0 0 10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
#trTaifu .tf-sec-tt small{font-size:11.5px; font-weight:500; color:var(--dim2); letter-spacing:0}

/* bảng chung cho #1 và #2 (dùng .bang/.card + table gốc, chỉ tinh chỉnh) */
#trTaifu .tf-bang table{min-width:720px; font-size:13px}
#trTaifu .tf-bang thead th{padding:11px 12px}
#trTaifu .tf-bang tbody td{padding:11px 12px}
#trTaifu .tf-bang td.p, #trTaifu .tf-bang th.p{text-align:right}
#trTaifu .tf-ten b{font-weight:600}
#trTaifu .tf-ten small{display:block; font-size:11px; color:var(--dim2); font-weight:400; letter-spacing:.02em}
#trTaifu .tf-sym b{font-weight:600}
#trTaifu .tf-sym small{display:block; font-size:11px; color:var(--dim2); font-weight:400}
#trTaifu .mo-nhat{color:var(--dim2)}

/* #1: dòng chỉ số bấm được + đang chọn */
#trTaifu tr.tf-chiso{cursor:pointer}
#trTaifu tr.tf-chiso:hover{background:var(--line-soft)}
#trTaifu tr.tf-chiso.chon{background:var(--cool-soft)}
#trTaifu tr.tf-chiso.chon td:first-child{box-shadow:inset 3px 0 0 var(--cool)}

/* #2: dòng USD (ammo) + dòng tổng */
#trTaifu tr.tf-usd td{color:var(--dim); background:var(--line-soft)}
#trTaifu tr.tf-tong td{border-top:2px solid var(--line); font-weight:600; background:var(--panel)}

/* #3: header + zoom + biểu đồ (tái dùng .bd-head/.bd-sel/.tf) */
#trTaifu .tf-chart-head{display:flex; align-items:center; gap:8px; padding:12px 16px 0; flex-wrap:wrap}
#trTaifu .tf-zoom{display:flex; gap:2px; background:var(--line-soft); padding:3px; border-radius:10px;
  border:1px solid var(--line); flex-wrap:wrap}
#trTaifu .tf-zoom button{all:unset; cursor:pointer; padding:6px 12px; border-radius:7px;
  font-size:12px; font-weight:600; color:var(--dim); transition:.15s}
#trTaifu .tf-zoom button:hover{color:var(--txt)}
#trTaifu .tf-zoom button[aria-pressed="true"]{background:var(--cool); color:#fff}
#trTaifu .tf-ohlc{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--dim);
  padding:8px 22px 0}
#trTaifu .tf-ohlc b{font-weight:600}
#trTaifu #tfChart{height:460px; margin:6px 10px 0}
@media (max-width:760px){ #trTaifu #tfChart{height:360px} #trTaifu .tf-bang table{min-width:640px} }


/* ==========================================================================
   B1 — TAB TỔNG HỢP: lưới 5 khu / 3 tầng + nút thu gọn (scope toàn bộ #trTaifu)
   ========================================================================== */
#trTaifu .th-tang{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  align-items:start; margin-top:26px;
}
#trTaifu .th-tang3{ grid-template-columns:1fr; }
#trTaifu .th-khu{ position:relative; min-width:0; }
#trTaifu .th-khu .tf-sec-tt{ margin:0 0 10px; }
/* bảng trong lưới: cho co theo cột (min-width:720px chỉ hợp khi xếp dọc); tràn thì .bang tự cuộn */
#trTaifu .th-khu .tf-bang table{ min-width:0; }

/* nút thu gọn (góc phải-trên khu trái) */
#trTaifu .th-thu{
  position:absolute; top:8px; right:8px; z-index:4;
  width:26px; height:26px; padding:0; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--panel);
  color:var(--dim); font-size:16px; line-height:1; transition:.15s;
}
#trTaifu .th-thu:hover{ color:var(--txt); border-color:var(--cool); }

/* trạng thái thu gọn: cột trái còn thanh mảnh, khu phải nở chiếm chỗ */
#trTaifu .th-tang.thu{ grid-template-columns:42px 1fr; }
#trTaifu .th-tang.thu > .th-khu:first-child{ min-height:130px; }
#trTaifu .th-tang.thu > .th-khu:first-child > :not(.th-thu){ display:none; }
#trTaifu .th-tang.thu > .th-khu:first-child .th-thu{ transform:rotate(180deg); right:7px; }

/* placeholder #4 / #5 (chờ B3) */
#trTaifu .th-cho{ padding:24px; min-height:120px; }
#trTaifu .th-cho-tt{ font-weight:600; font-size:14px; color:var(--txt); margin-bottom:6px; }
#trTaifu .th-cho-mo{ margin:0; font-size:13px; color:var(--dim); line-height:1.55; }

/* mobile: về 1 cột, ẩn nút thu gọn (mở lại nội dung bị ẩn khi thu) */
@media (max-width:900px){
  #trTaifu .th-tang, #trTaifu .th-tang.thu{ grid-template-columns:1fr; }
  #trTaifu .th-tang.thu > .th-khu:first-child > :not(.th-thu){ display:block; }
  #trTaifu .th-thu{ display:none; }
}


/* ==========================================================================
   B1 TINH CHỈNH (sau test máy): tràn viền + chữ nhỏ + #3 hiện ~15 coin
   ========================================================================== */
/* (a) tràn viền rộng như tab Giao dịch (bỏ giới hạn 1120px của .wrap) */
#trTaifu .wrap{ max-width:none; }

/* (b) chữ bảng nhỏ + padding gọn -> hiện nhiều cột hơn theo hàng ngang */
#trTaifu .th-khu .tf-bang table{ font-size:12px; }
#trTaifu .th-khu .tf-bang thead th{ padding:8px 9px; }
#trTaifu .th-khu .tf-bang tbody td{ padding:7px 9px; }

/* (c) #3 mặc định cao ~15 coin rồi cuộn dọc; tiêu đề cột dính khi cuộn xuống.
   (Số coin chính xác 15 + nút "xem thêm" sẽ làm gọn trong taifu.js ở B2.) */
#trTaifu .th-3 .bang{ max-height:640px; overflow:auto; }
#trTaifu .th-3 .tf-bang thead th{ position:sticky; top:0; background:var(--panel); z-index:2; }


/* ===== B2a: thanh điều khiển biểu đồ #2 (nút nến/đường, USD/VND) + cột STT #1 ===== */
#trTaifu .tf-nut{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:28px; padding:0 8px; border-radius:8px;
  border:1px solid var(--line); color:var(--dim); font-size:15px; transition:.15s;
}
#trTaifu .tf-nut:hover{ color:var(--txt); border-color:var(--cool); }
#trTaifu .tf-tien-wrap{ display:inline-flex; align-items:center; }
#trTaifu .tf-stt{ width:1%; white-space:nowrap; text-align:right; color:var(--dim2); }
#trTaifu tr.tf-dm td.tf-ten small{ color:var(--cool); }


/* ===== B2b: 4 nút chức năng dưới biểu đồ + phóng to toàn màn hình (#trTaifu) ===== */
#trTaifu .tf-legend{ display:flex; gap:6px; flex-wrap:wrap; padding:8px 16px 2px; }
#trTaifu .tf-leg{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:8px; border:1px solid var(--line);
  font-size:12px; color:var(--txt); transition:.15s;
}
#trTaifu .tf-leg:hover{ border-color:var(--cool); }
#trTaifu .tf-leg.tat{ opacity:.42; }
#trTaifu .tf-leg .cham{ width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }

/* Phóng to toàn màn hình cho card biểu đồ #2 */
#trTaifu #tfChartCard.tf-full{
  position:fixed; inset:16px; z-index:60; margin:0; max-width:none;
  box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:auto;
}
#trTaifu #tfChartCard.tf-full #tfChart{ height:calc(100vh - 210px); }


/* ===== B3b: biểu đồ #2 — lấp ĐẦY chiều rộng (cột giá sát lề); chiều cao 4:3 do taifu.js tính ===== */
#trTaifu #tfChart{ width:100%; margin:0; height:520px; aspect-ratio:auto; min-height:0; max-height:none; }


/* ===== B3b tinh chỉnh: đầu khung chart Markup (#4) — markup% trái, tỷ giá phải ===== */
#trTaifu .mk-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px 22px; flex-wrap:wrap; }
#trTaifu .mk-head-left{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
#trTaifu .mk-markup{ font-size:30px; font-weight:700; line-height:1; }
#trTaifu .mk-head-right{ display:grid; grid-template-columns:auto auto auto; gap:5px 14px; align-items:baseline; }
#trTaifu .mk-rate-lab{ color:var(--dim); font-size:13px; white-space:nowrap; }
#trTaifu .mk-rate-val{ font-weight:600; font-size:14px; text-align:right; white-space:nowrap; }
#trTaifu .mk-rate-chg{ font-size:13px; text-align:right; min-width:74px; white-space:nowrap; }
#trTaifu .mk-hidden{ display:none; }
@media (max-width:640px){
  #trTaifu .mk-head-right{ justify-self:start; }
  #trTaifu .mk-markup{ font-size:24px; }
}


/* ==========================================================================
   GIAI ĐOẠN 2 (#10 — 2026-08-07): thanh nút A/B/C ở #3 + bảng Top 100 / Loại trừ
   ========================================================================== */
/* Thanh nút A/B/C */
#trTaifu .tf-tab3{ display:flex; align-items:center; gap:6px; margin:2px 0 8px; flex-wrap:wrap; }
#trTaifu .tf-tab3-nut{ font:inherit; font-size:12px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--dim); cursor:pointer; transition:.15s; }
#trTaifu .tf-tab3-nut:hover{ background:var(--line-soft); }
#trTaifu .tf-tab3-nut.chon{ background:var(--cool-soft); border-color:var(--cool); color:var(--cool); font-weight:600; }
#trTaifu .tf-tab3-msg{ font-size:12px; color:var(--dim2); margin-left:4px; }
#trTaifu .tf-tab3-msg.loi{ color:var(--down); }

/* Bảng Top 100 rộng -> cho cuộn ngang thay vì bóp (ghi đè min-width:0 của .th-khu) */
#trTaifu .th-khu .tf-bang table.tf-b-top100{ min-width:560px; }

/* Coin bị loại trừ: chữ mờ + gạch symbol; badge + nút giữ rõ (dùng màu, KHÔNG dùng opacity) */
#trTaifu .tf-bang tr.tf-loai td{ color:var(--dim2); }
#trTaifu .tf-bang tr.tf-loai .tf-sym b{ text-decoration:line-through; color:var(--dim2); }
#trTaifu .tf-badge{ display:inline-block; font-size:10px; line-height:1; padding:2px 5px; margin-left:6px; border-radius:4px; background:var(--down); color:#fff; vertical-align:middle; }

/* Nút Loại / Bỏ trên từng dòng */
#trTaifu .tf-act{ text-align:right; white-space:nowrap; }
#trTaifu .tf-loai-nut{ font:inherit; font-size:11px; padding:3px 9px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--dim); cursor:pointer; white-space:nowrap; transition:.15s; }
#trTaifu .tf-loai-nut:hover{ border-color:var(--cool); color:var(--cool); }
#trTaifu .tf-loai-nut.bo{ color:var(--down); border-color:var(--down); }
#trTaifu .tf-loai-nut.bo:hover{ background:var(--down); color:#fff; }