/* Bot giao dịch Volume — giao diện kiểu dashboard tài chính (anh 04/11), 6 bảng màu chọn được (js/giao_dien.js gắn
   <html data-giao-dien="...">). Mọi màu là biến; bảng màu chỉ đổi biến. Không font ngoài, không ảnh ngoài (CSP). */

/* ================= bảng màu ================= */
/* mặc định = Đêm xanh (tối, xanh dương – xanh lá) */
:root, :root[data-giao-dien="dem"] {
  color-scheme: dark;
  --bg: #0b1a22; --bg-anh: radial-gradient(1100px 520px at 85% -12%, #134a5e66, transparent 70%), radial-gradient(900px 480px at -10% 110%, #0f4a3a55, transparent 70%);
  --card: #10232d; --card2: #15303d; --line: #1e3a48; --fg: #e3eef4; --mut: #87a1ae; --o-nen: #0b1c25;
  --side-bg: linear-gradient(180deg, #102733 0%, #0b1b24 100%); --side-fg: #d3e4ec; --side-mut: #7d98a6; --side-line: #1e3a48;
  --side-hover: #ffffff10; --side-on-bg: linear-gradient(90deg, #1b66d0, #0b7f55); --side-on-fg: #fff;
  --accent: #2f80ed; --accent2: #27c38a; --grad: linear-gradient(90deg, #2f80ed, #27c38a); --grad-nut: linear-gradient(90deg, #1b66d0, #0b7f55); --accent-fg: #fff;
  --hero-1: linear-gradient(135deg, #2f80ed, #1fb5c9); --hero-2: linear-gradient(135deg, #1fae7c, #27c38a);
  --hero-3: linear-gradient(135deg, #6d5bf0, #9b6bf7); --hero-4: linear-gradient(135deg, #f08a24, #f6b33d);
  --c-vol: #3ba7ff; --c-maker: #27c38a; --c-taker: #f6a93b; --c-cp: #ff6b6b; --grid: #1c3542; --truc: #7d98a6;
  --ic-1: #3ba7ff; --ic-2: #27c38a; --ic-3: #a78bfa; --ic-4: #f6a93b; --ic-5: #ff7b8a; --ic-6: #22c6d3;
  --g: #3fcf7f; --r: #ff6b6b; --y: #e3b341; --b: #5cb3ff; --p: #b79bff; --o: #f6a04d;
  --nen-do: #3b1418; --vien-do: #7a2d31; --chu-do: #ffb3ad;
  --nen-vang: #362a0d; --vien-vang: #6b5520; --chu-vang: #f0d38a;
  --nen-xanh: #0d2b20; --vien-xanh: #26694a; --chu-xanh: #9be3b8;
  --nut-nen: #183440; --nut-vien: #24495a; --bong: 0 10px 28px #0006; --bong-nhe: 0 4px 14px #0004;
  --chan-nen: #08161ef0; --phu-nen: #020a0ecc;
}
/* Than chì: tối kiểu cũ (GitHub) */
:root[data-giao-dien="than"] {
  color-scheme: dark;
  --bg: #0d1117; --bg-anh: none;
  --card: #161b22; --card2: #1c2330; --line: #2b3340; --fg: #e6edf3; --mut: #8b949e; --o-nen: #0d1117;
  --side-bg: #161b22; --side-fg: #e6edf3; --side-mut: #8b949e; --side-line: #2b3340;
  --side-hover: #21262d; --side-on-bg: #1f6feb; --side-on-fg: #fff;
  --accent: #1f6feb; --accent2: #388bfd; --grad: linear-gradient(90deg, #1f6feb, #388bfd); --grad-nut: linear-gradient(90deg, #1f6feb, #1758c6); --accent-fg: #fff;
  --hero-1: linear-gradient(135deg, #1f6feb, #388bfd); --hero-2: linear-gradient(135deg, #1a7f37, #2ea043);
  --hero-3: linear-gradient(135deg, #8250df, #a371f7); --hero-4: linear-gradient(135deg, #bd561d, #db6d28);
  --c-vol: #58a6ff; --c-maker: #3fb950; --c-taker: #d29922; --c-cp: #f85149; --grid: #2b3340; --truc: #8b949e;
  --ic-1: #58a6ff; --ic-2: #3fb950; --ic-3: #bc8cff; --ic-4: #d29922; --ic-5: #f85149; --ic-6: #39c5cf;
  --g: #3fb950; --r: #f85149; --y: #d29922; --b: #58a6ff; --p: #bc8cff; --o: #f0883e;
  --nen-do: #3d1214; --vien-do: #7a2d2a; --chu-do: #ffb3ad;
  --nen-vang: #3a2c0b; --vien-vang: #6b5520; --chu-vang: #f0d38a;
  --nen-xanh: #0f2a1a; --vien-xanh: #2a6b40; --chu-xanh: #9be3b0;
  --nut-nen: #21262d; --nut-vien: #30363d; --bong: 0 10px 30px #000a; --bong-nhe: none;
  --chan-nen: #0b0f14f2; --phu-nen: #010409cc;
}
/* Tím đêm: tối, tím – hồng */
:root[data-giao-dien="tim_dem"] {
  color-scheme: dark;
  --bg: #110e22; --bg-anh: radial-gradient(1000px 520px at 90% -10%, #4b2bb044, transparent 70%), radial-gradient(800px 460px at -5% 105%, #a0208a33, transparent 70%);
  --card: #1a1631; --card2: #221d3f; --line: #2e2850; --fg: #ece9fb; --mut: #9c95c4; --o-nen: #141127;
  --side-bg: linear-gradient(180deg, #3a1fa0 0%, #1d1550 100%); --side-fg: #ece7ff; --side-mut: #b3aae6; --side-line: #ffffff22;
  --side-hover: #ffffff14; --side-on-bg: #ffffff; --side-on-fg: #4a1fc7;
  --accent: #7c4dff; --accent2: #e040fb; --grad: linear-gradient(90deg, #7c4dff, #d63fe8); --grad-nut: linear-gradient(90deg, #6236e0, #a21caf); --accent-fg: #fff;
  --hero-1: linear-gradient(135deg, #6a3df0, #9a6bff); --hero-2: linear-gradient(135deg, #ff4d6d, #ff7a59);
  --hero-3: linear-gradient(135deg, #2f6bff, #19a8f0); --hero-4: linear-gradient(135deg, #f08c00, #ffb547);
  --c-vol: #9a7bff; --c-maker: #2fd5a8; --c-taker: #ffb547; --c-cp: #ff5c7a; --grid: #2b2550; --truc: #9c95c4;
  --ic-1: #9a7bff; --ic-2: #2fd5a8; --ic-3: #ff7ad9; --ic-4: #ffb547; --ic-5: #ff5c7a; --ic-6: #4cc3ff;
  --g: #34d399; --r: #ff6b81; --y: #fbbf24; --b: #7aa7ff; --p: #c4a6ff; --o: #ffa05c;
  --nen-do: #3a1325; --vien-do: #7a2a48; --chu-do: #ffb6c8;
  --nen-vang: #36290f; --vien-vang: #6b5520; --chu-vang: #f5d48a;
  --nen-xanh: #0f2b25; --vien-xanh: #25705a; --chu-xanh: #9eeacb;
  --nut-nen: #262046; --nut-vien: #382f66; --bong: 0 10px 30px #0008; --bong-nhe: 0 4px 16px #0005;
  --chan-nen: #0d0b1cf0; --phu-nen: #07051acc;
}
/* Tím: sáng, menu tím đậm */
:root[data-giao-dien="tim"] {
  color-scheme: light;
  --bg: #f3f1fb; --bg-anh: radial-gradient(900px 420px at 100% 0%, #e6dcff, transparent 70%);
  --card: #ffffff; --card2: #f7f5fe; --line: #e6e1f5; --fg: #1e1b3a; --mut: #6c6889; --o-nen: #ffffff;
  --side-bg: linear-gradient(180deg, #6a11f5 0%, #7b4dff 100%); --side-fg: #ffffff; --side-mut: #ffffffbb; --side-line: #ffffff33;
  --side-hover: #ffffff1f; --side-on-bg: #ffffff; --side-on-fg: #4a1fc7;
  --accent: #6d28d9; --accent2: #a855f7; --grad: linear-gradient(90deg, #6d28d9, #a855f7); --grad-nut: linear-gradient(90deg, #5b21b6, #7e22ce); --accent-fg: #fff;
  --hero-1: linear-gradient(135deg, #7b3fe4, #a66bff); --hero-2: linear-gradient(135deg, #ff3d5a, #ff6f86);
  --hero-3: linear-gradient(135deg, #2563eb, #3b8cf6); --hero-4: linear-gradient(135deg, #ff7a00, #ffa43d);
  --c-vol: #7c3aed; --c-maker: #10b981; --c-taker: #f59e0b; --c-cp: #ef4444; --grid: #ece8f7; --truc: #8a86a6;
  --ic-1: #7c3aed; --ic-2: #10b981; --ic-3: #ec4899; --ic-4: #f59e0b; --ic-5: #ef4444; --ic-6: #0ea5e9;
  --g: #15803d; --r: #dc2626; --y: #b45309; --b: #2563eb; --p: #7c3aed; --o: #ea580c;
  --nen-do: #fef2f2; --vien-do: #fecaca; --chu-do: #991b1b;
  --nen-vang: #fffbeb; --vien-vang: #fcd98a; --chu-vang: #92400e;
  --nen-xanh: #f0fdf4; --vien-xanh: #a7e8bf; --chu-xanh: #166534;
  --nut-nen: #f1eefb; --nut-vien: #dcd5f2; --bong: 0 14px 40px #3b2a8a26; --bong-nhe: 0 6px 20px #4c34a014;
  --chan-nen: #fffffff0; --phu-nen: #1e1b3a99;
}
/* Trắng: sáng, xanh dương */
:root[data-giao-dien="sang"] {
  color-scheme: light;
  --bg: #f2f4f8; --bg-anh: none;
  --card: #ffffff; --card2: #f6f8fb; --line: #e2e7ef; --fg: #1f2a37; --mut: #5a6676; --o-nen: #ffffff;
  --side-bg: #ffffff; --side-fg: #1f2a37; --side-mut: #6b7280; --side-line: #e5e7eb;
  --side-hover: #f1f5f9; --side-on-bg: #2563eb; --side-on-fg: #fff;
  --accent: #2563eb; --accent2: #0ea5e9; --grad: linear-gradient(90deg, #2563eb, #0ea5e9); --grad-nut: linear-gradient(90deg, #1d4ed8, #0369a1); --accent-fg: #fff;
  --hero-1: linear-gradient(135deg, #2563eb, #3b82f6); --hero-2: linear-gradient(135deg, #0f9f6e, #22c55e);
  --hero-3: linear-gradient(135deg, #4f46e5, #7c3aed); --hero-4: linear-gradient(135deg, #e8590c, #f59e0b);
  --c-vol: #2563eb; --c-maker: #16a34a; --c-taker: #f59e0b; --c-cp: #dc2626; --grid: #edf0f5; --truc: #7b8794;
  --ic-1: #2563eb; --ic-2: #16a34a; --ic-3: #7c3aed; --ic-4: #f59e0b; --ic-5: #dc2626; --ic-6: #0891b2;
  --g: #15803d; --r: #dc2626; --y: #b45309; --b: #2563eb; --p: #7c3aed; --o: #ea580c;
  --nen-do: #fef2f2; --vien-do: #fecaca; --chu-do: #991b1b;
  --nen-vang: #fffbeb; --vien-vang: #fcd98a; --chu-vang: #92400e;
  --nen-xanh: #f0fdf4; --vien-xanh: #a7e8bf; --chu-xanh: #166534;
  --nut-nen: #f1f4f9; --nut-vien: #d9e0ea; --bong: 0 14px 40px #1f2a3722; --bong-nhe: 0 4px 16px #1f2a370f;
  --chan-nen: #fffffff0; --phu-nen: #1f2a3799;
}
/* Hồng: sáng, hồng – cam */
:root[data-giao-dien="hong"] {
  color-scheme: light;
  --bg: #fbf0f4; --bg-anh: radial-gradient(900px 420px at 100% 0%, #ffdbe8, transparent 70%);
  --card: #ffffff; --card2: #fdf5f8; --line: #f2dbe5; --fg: #2b1d26; --mut: #7f6774; --o-nen: #ffffff;
  --side-bg: #ffffff; --side-fg: #3b2a33; --side-mut: #8c7480; --side-line: #f2dbe5;
  --side-hover: #fdeef4; --side-on-bg: linear-gradient(90deg, #c2185b, #c43c12); --side-on-fg: #fff;
  --accent: #e91e63; --accent2: #ff7043; --grad: linear-gradient(90deg, #e91e63, #ff7043); --grad-nut: linear-gradient(90deg, #c2185b, #c43c12); --accent-fg: #fff;
  --hero-1: linear-gradient(135deg, #e91e63, #f06292); --hero-2: linear-gradient(135deg, #8e24aa, #ba68c8);
  --hero-3: linear-gradient(135deg, #1e88e5, #42a5f5); --hero-4: linear-gradient(135deg, #f57c00, #ffa726);
  --c-vol: #e91e63; --c-maker: #26a69a; --c-taker: #fb8c00; --c-cp: #d32f2f; --grid: #f6e4eb; --truc: #9b8490;
  --ic-1: #e91e63; --ic-2: #26a69a; --ic-3: #8e24aa; --ic-4: #fb8c00; --ic-5: #d32f2f; --ic-6: #1e88e5;
  --g: #15803d; --r: #d32f2f; --y: #b45309; --b: #1e6fd9; --p: #8e24aa; --o: #e65100;
  --nen-do: #fef1f1; --vien-do: #f9c6c6; --chu-do: #8e1b1b;
  --nen-vang: #fffaeb; --vien-vang: #fbd98d; --chu-vang: #8a4209;
  --nen-xanh: #effcf4; --vien-xanh: #a9e5c0; --chu-xanh: #146234;
  --nut-nen: #fcf0f5; --nut-vien: #f0d3df; --bong: 0 14px 40px #8c2a5222; --bong-nhe: 0 6px 20px #8c2a5212;
  --chan-nen: #fffffff0; --phu-nen: #2b1d2699;
}

/* ================= nền tảng ================= */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 14px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 120px; background-image: var(--bg-anh); background-attachment: fixed; min-height: 100vh; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.2px; margin: 6px 0 14px; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }
.mt { margin-top: 14px; }
code { background: var(--card2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-family: Consolas, "Cascadia Mono", monospace; }
a { color: var(--b); }
.an { display: none !important; }
.an-han { position: fixed; left: -9999px; top: 0; opacity: 0; }
.mut { color: var(--mut); }
.nho { font-size: 12px; }
.g { color: var(--g); } .r { color: var(--r); } .y { color: var(--y); } .b { color: var(--b); } .o { color: var(--o); }
svg.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------------- thanh trên cùng (bản web đã bỏ; giữ kiểu cho mã cũ) ---------------- */
.thanh-tren { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 9px 16px;
  border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
.thanh-tren.tt-xam { border-top: 4px solid #484f58; }
.thanh-tren.tt-bong { border-top: 4px solid #1f6feb; }
.thanh-tren.tt-that { border-top: 4px solid #e8590c; }
.thanh-tren.tt-stop { border-top: 4px solid #da3633; }
.tt-trai { display: flex; align-items: center; gap: 8px; }
.logo { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.tt-giua { display: flex; gap: 18px; flex: 1; justify-content: center; flex-wrap: wrap; color: var(--mut); font-size: 13px; }
.tt-giua b { color: var(--fg); font-weight: 600; margin-left: 4px; }
.tt-phai { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut); }
.dong-ho { font-variant-numeric: tabular-nums; }
.den { width: 11px; height: 11px; border-radius: 50%; background: #6b7480; display: inline-block; box-shadow: 0 0 0 2px #0003; }
.den.xanh { background: var(--g); } .den.vang { background: var(--y); } .den.do { background: var(--r); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--nut-nen); color: var(--fg); }
.tt-nhan.xam { background: #6b7480; color: #fff; } .tt-nhan.bong { background: #1f6feb; color: #fff; } .tt-nhan.that { background: #c4500d; color: #fff; }
.tt-nhan.stop { background: #da3633; color: #fff; } .tt-nhan.tam { background: #9e6a03; color: #fff; }
.pill.mm { background: #8250df; color: #fff; } .pill.mt { background: #1a7f37; color: #fff; } .pill.tt { background: #bc4c00; color: #fff; }
.tt-chon { margin-top: 10px; }
.tuoi-cu { color: var(--r); font-weight: 700; }

/* ---------------- dải thông báo ---------------- */
.dai { margin: 0; padding: 9px 16px; font-weight: 600; border-bottom: 1px solid transparent; }
.dai.r { background: var(--nen-do); border-color: var(--vien-do); color: var(--chu-do); }
.dai.y { background: var(--nen-vang); border-color: var(--vien-vang); color: var(--chu-vang); }
.dai.x { background: var(--nen-xanh); border-color: var(--vien-xanh); color: var(--chu-xanh); }
.dai .nut { margin-left: 8px; }
.noi-dung .dai { border-radius: 10px; margin: 10px 0; border: 1px solid; }

/* ---------------- menu trái ---------------- */
.menu { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 30; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px; background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--side-line); overflow-y: auto; }
.menu-logo, .thuong-hieu { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.menu-logo { padding: 2px 6px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--side-line); }
.logo-dau { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); flex: none; }
.logo-dau svg.ic { width: 20px; height: 20px; stroke-width: 2.4; }
.logo-chu b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-giao-dien="tim"] .menu .logo-chu b { background: none; color: #ffe27a; }
:root[data-giao-dien="tim"] .menu .logo-dau { background: #ffffff26; box-shadow: none; }
.menu-nhan { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--side-mut); padding: 6px 10px 4px; }
.menu > button { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; color: var(--side-fg);
  border: 0; border-radius: 12px; padding: 11px 14px; cursor: pointer; font: inherit; font-weight: 550; text-align: left; transition: background .15s, color .15s; }
.menu > button svg.ic { opacity: .9; }
.menu > button:hover { background: var(--side-hover); }
.menu > button.on { background: var(--side-on-bg); color: var(--side-on-fg); box-shadow: var(--bong-nhe); }
.menu > button.on svg.ic { opacity: 1; }
.menu-cuoi { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--side-line); display: flex; flex-direction: column; gap: 10px; }
.menu-cuoi .tai-khoan { display: block; text-align: center; padding: 7px 10px; }
.chon-mau { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 8px; }
.cham-mau { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0; border: 2px solid #ffffff55; box-shadow: 0 1px 4px #0003; }
.cham-mau:hover { transform: scale(1.08); }
.cham-mau.on { border-color: var(--side-fg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--side-fg) 35%, transparent); }
/* mẫu màu cố định của từng bảng (không đổi theo bảng đang dùng) */
.gd-dem { background: linear-gradient(135deg, #0f2733 0 45%, #2f80ed 45% 72%, #27c38a 72%); }
.gd-than { background: linear-gradient(135deg, #0d1117 0 45%, #30363d 45% 72%, #1f6feb 72%); }
.gd-tim_dem { background: linear-gradient(135deg, #1a1631 0 45%, #7c4dff 45% 72%, #e040fb 72%); }
.gd-tim { background: linear-gradient(135deg, #f3f1fb 0 45%, #6a11f5 45% 72%, #ff3d5a 72%); }
.gd-sang { background: linear-gradient(135deg, #ffffff 0 45%, #2563eb 45% 72%, #22c55e 72%); }
.gd-hong { background: linear-gradient(135deg, #fbf0f4 0 45%, #e91e63 45% 72%, #ff9800 72%); }
/* có menu (đã đăng nhập) -> nội dung, các dải báo và thanh 4 nút lùi sang phải chừa chỗ cho menu */
body:has(#menu:not(.an)) { padding-left: 240px; }
body:has(#menu:not(.an)) .khu-giam { left: 240px; }

.noi-dung { max-width: 1440px; margin: 0 auto; padding: 14px 24px 30px; }
.man { animation: hien .18s ease-out; }
@keyframes hien { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.dau-man { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 16px; }
.dau-man h1 { margin: 0 0 4px; }
.phu-de { margin: 0; color: var(--mut); font-size: 13px; }

/* ---------------- khung, nút, ô nhập ---------------- */
.box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; min-width: 0; overflow-x: auto; box-shadow: var(--bong-nhe); }
.dau-box { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.dau-box h2 { margin: 0; }
.dau-box .chu-giai { margin-top: 0; }
.hop-giua { max-width: 560px; margin: 48px auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; box-shadow: var(--bong); }
.hop-giua.rong { max-width: 820px; }
.thuong-hieu { margin-bottom: 16px; font-size: 17px; }
.luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.luoi-db { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 1100px) { .luoi-2, .luoi-db { grid-template-columns: 1fr; } }
.luoi-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; }
.o-nhap { display: block; margin: 10px 0; font-size: 13px; color: var(--mut); }
.o-nhap b { color: var(--fg); }
.o-nhap input { display: block; width: 100%; margin-top: 5px; font: inherit; color: var(--fg); background: var(--o-nen); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.o-nhap .goi-y { display: block; margin-top: 4px; }
.o-nhap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.o-chon { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.o-chon input, .ds-tick input { accent-color: var(--accent); }
.goi-y { font-size: 12px; color: var(--mut); }
.bat-buoc { color: var(--y); font-size: 11px; font-weight: 600; }
.nut { font: inherit; font-weight: 600; border-radius: 10px; padding: 8px 16px; cursor: pointer; border: 1px solid var(--nut-vien); color: var(--fg); background: var(--nut-nen); transition: filter .15s, box-shadow .15s; }
.nut:hover:not(:disabled) { filter: brightness(1.08); }
.nut:disabled { opacity: .45; cursor: not-allowed; }
.nut.chinh { background: var(--grad-nut); border-color: transparent; color: var(--accent-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); }
.nut.phu { background: var(--nut-nen); }
.nut.nguy { background: #b4232a; border-color: #da3633; color: #fff; }
.nut.lon { padding: 12px 28px; font-size: 15px; }
.nut.nho-nut { padding: 2px 10px; font-size: 12px; font-weight: 600; border-radius: 8px; }
.hang-nut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.loi { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--nen-do); border: 1px solid var(--vien-do); color: var(--chu-do); font-weight: 600; white-space: pre-wrap; }
details.nang-cao summary { cursor: pointer; color: var(--b); margin: 6px 0; font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.kv > div:nth-child(odd) { color: var(--mut); }
.kv > div { word-break: break-all; }

/* ---------------- cảnh báo rủi ro ---------------- */
.ds-tick label { display: flex; gap: 10px; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); cursor: pointer; }
.ds-tick label:has(input:checked) { border-color: var(--g); }
.ds-tick input { margin-top: 4px; transform: scale(1.2); }

/* ---------------- khoá ---------------- */
.hop-do-co-dinh { position: sticky; top: 0; z-index: 5; background: #5a1215; border: 2px solid #da3633; color: #ffdcd7; padding: 10px 14px; border-radius: 10px; font-weight: 700; margin-bottom: 12px; font-size: 15px; }
ol.buoc { padding-left: 22px; margin: 0; }
ol.buoc li { margin: 8px 0; }
ol.buoc li::marker { color: var(--accent); font-weight: 700; }
.ip { font-size: 15px; color: var(--chu-vang); }
.chu-vang { color: var(--chu-vang); }
#khoa_ip_o #ip_o_ghi_chu { margin-top: 6px; }
.ds-kiem { list-style: none; padding: 0; margin: 8px 0; }
.ds-kiem li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ds-kiem .dau { font-weight: 800; font-size: 16px; text-align: center; }
.ds-kiem .dau.ok { color: var(--g); } .ds-kiem .dau.khong { color: var(--r); } .ds-kiem .dau.cho { color: var(--y); }
/* L1: ok = null -> "? chưa kiểm được" (vàng) */
.ds-kiem .dau.chua { color: var(--y); } .ds-kiem li.chua-kiem .td { color: var(--chu-vang); }
.ds-kiem .ten { font-weight: 600; }
.ds-kiem .td { grid-column: 2; color: var(--mut); font-size: 13px; }

/* ---------------- chiến lược ---------------- */
.the-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.the { text-align: left; font: inherit; color: var(--fg); background: var(--card2); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s; }
.the:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.the b { font-size: 16px; }
.the span { color: var(--mut); font-size: 13px; }
.the .so-do { color: var(--chu-vang); }
.the.chon { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card2)); }
.the[data-che-do=live].chon { border-color: #e8590c; background: color-mix(in srgb, #e8590c 14%, var(--card2)); }
.nut-nhom { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.nut-nhom button { font: inherit; background: var(--nut-nen); color: var(--fg); border: 1px solid var(--nut-vien); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.nut-nhom button.on { background: var(--grad-nut); border-color: transparent; color: var(--accent-fg); }
.tom-tat { margin-top: 8px; padding: 9px 12px; background: var(--card2); border-radius: 10px; border: 1px solid var(--line); }

/* ---------------- hộp xác nhận ---------------- */
/* A-4: lớp phủ nằm DƯỚI thanh 4 nút giảm rủi ro (z 50 < 80) và chừa chỗ đáy để hộp không bị thanh che */
.lop-phu { position: fixed; inset: 0; background: var(--phu-nen); z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 40px 12px 170px; backdrop-filter: blur(2px); }
.hop-thoai { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; width: 100%; max-width: 520px; box-shadow: var(--bong); }
.hop-thoai.rong { max-width: 860px; }
.hop-thoai h2 { font-size: 18px; }
.hop-loi { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--nen-do); border: 1px solid var(--vien-do); color: var(--chu-do); font-weight: 600; white-space: pre-wrap; }
.hop-nut { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
table.bang-xn td.l { color: var(--mut); width: 38%; }
table.bang-xn td { text-align: left; white-space: normal; }
tr.kep td { background: var(--nen-vang); color: var(--chu-vang); }
tr.kep td .kep-chu { display: block; font-size: 12px; }
.ds-canh-bao { margin: 10px 0; padding: 8px 12px 8px 30px; border-radius: 10px; background: var(--nen-vang); border: 1px solid var(--vien-vang); color: var(--chu-vang); }
.ds-canh-bao.do { background: var(--nen-do); border-color: var(--vien-do); color: var(--chu-do); }
.gio-ket-thuc { font-size: 16px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); }
.dem-nguoc { font-variant-numeric: tabular-nums; }

/* ---------------- 0.1.4: bắt buộc cập nhật ---------------- */
/* lớp phủ toàn màn: TRÊN thanh trên / hộp thoại (50), DƯỚI thông báo nổi (75: "Đã chép link"…) và thanh 4 nút giảm rủi ro
   (80, A-4); chừa đáy */
.lop-bat-buoc { position: fixed; inset: 0; z-index: 70; background: var(--phu-nen); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 60px 12px 170px; }
.hop-bat-buoc { width: 100%; max-width: 640px; background: var(--card); border: 2px solid var(--vien-xanh); border-radius: 16px; padding: 24px 26px; box-shadow: var(--bong); }
.hop-bat-buoc h1 { color: var(--chu-xanh); }
.bb-tien-do { font-size: 16px; font-weight: 600; color: var(--chu-vang); font-variant-numeric: tabular-nums; }
.bb-link { margin-top: 12px; }
.bb-link code { display: inline-block; margin-top: 4px; word-break: break-all; }
.chon-duoc { user-select: all; -webkit-user-select: all; cursor: text; }

/* ---------------- dashboard ---------------- */
.db-phien { margin: 0; font-size: 13px; }
.db-token { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 2px 0 6px; }
.db-token .nhan, .db-token .cap { font-size: 13px; color: var(--mut); }
.db-token b { font-size: 22px; font-weight: 700; color: var(--fg); }
/* anh 05/11: hàng phiên con trên Bảng điều khiển + màn STOP */
.db-khe { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 0 0 12px; }
.the-khe { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px 12px; text-align: left; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.the-khe:hover { background: var(--card2); }
.the-khe.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.the-khe .dong1 { font-weight: 700; }
.the-khe .dong1 small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--mut); }
.the-khe .dong2 { font-size: 12px; color: var(--mut); }
.db-khe .khe-phai { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.db-khe .them-phien { white-space: nowrap; }
.luoi-cau-hinh { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.luoi-cau-hinh > div { min-width: 0; padding: 9px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; }
.luoi-cau-hinh .k { display: block; margin-bottom: 2px; font-size: 12px; color: var(--mut); }
.luoi-cau-hinh b { font-weight: 600; overflow-wrap: anywhere; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 14px; }
.hang-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .hang-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hang-hero { grid-template-columns: 1fr; } }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; transition: opacity .2s; box-shadow: var(--bong-nhe); }
.card .k { color: var(--mut); font-size: 12.5px; font-weight: 600; padding-right: 44px; }
.card .v { font-size: 24px; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.card .v small { font-size: 13px; font-weight: 600; margin-left: 6px; }
.card .s { font-size: 12px; color: var(--mut); margin-top: 3px; }
.card .bieu-tuong { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  color: var(--mau, var(--accent)); background: color-mix(in srgb, var(--mau, var(--accent)) 16%, transparent); }
.card .bieu-tuong svg.ic { width: 19px; height: 19px; }
.card.m1 { --mau: var(--ic-1); } .card.m2 { --mau: var(--ic-2); } .card.m3 { --mau: var(--ic-3); }
.card.m4 { --mau: var(--ic-4); } .card.m5 { --mau: var(--ic-5); } .card.m6 { --mau: var(--ic-6); }
/* 4 thẻ lớn: nền chuyển màu, chữ trắng */
.card.hero { border: 0; color: #fff; padding: 16px 18px 15px; box-shadow: 0 10px 24px #0000002e; overflow: hidden; }
.card.hero::after { content: ""; position: absolute; right: -30px; bottom: -46px; width: 140px; height: 140px; border-radius: 50%; background: #ffffff14; pointer-events: none; }
.card.hero.h1 { background: var(--hero-1); } .card.hero.h2 { background: var(--hero-2); }
.card.hero.h3 { background: var(--hero-3); } .card.hero.h4 { background: var(--hero-4); }
.card.hero .k, .card.hero .s, .card.hero .mut { color: #ffffffd9; }
.card.hero .v { font-size: 27px; }
.card.hero b { color: #fff; }
.card.hero .bieu-tuong { color: #fff; background: #ffffff2e; }
.card.hero .meter { background: #ffffff3d; }
.card.hero .meter > div { background: #fff; }
.cu .card { opacity: .45; filter: grayscale(1); }
.meter { height: 7px; background: var(--card2); border-radius: 6px; overflow: hidden; margin-top: 9px; }
.meter > div { height: 100%; width: 0; background: var(--g); border-radius: 6px; }
.meter > div.vang { background: var(--y); } .meter > div.do { background: var(--r); }
.hop-tu-choi { margin: 10px 0; padding: 16px 18px; border-radius: 14px; background: #5a1215; border: 2px solid #da3633; color: #ffdcd7; }
.hop-tu-choi h2 { font-size: 20px; color: #fff; }
.hop-tu-choi .td { font-size: 17px; font-weight: 600; line-height: 1.55; }
.hop-trang-thai { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--card); }
.hop-trang-thai.vang { background: var(--nen-vang); border-color: var(--vien-vang); color: var(--chu-vang); }
.hop-trang-thai.do { background: var(--nen-do); border-color: var(--vien-do); color: var(--chu-do); }
.hop-trang-thai.xanh { background: var(--nen-xanh); border-color: var(--vien-xanh); color: var(--chu-xanh); }
/* biểu đồ */
svg.bd { display: block; width: 100%; height: auto; }
.bd-luoi { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 4; }
.bd-chu { fill: var(--truc); font-size: 11px; font-family: "Segoe UI", system-ui, sans-serif; }
.bd-duong { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.bd-cham { stroke-width: 2.4; fill: var(--card); }
.duong-vol { stroke: var(--c-vol); } .duong-vol-s0 { stop-color: var(--c-vol); stop-opacity: .38; } .duong-vol-s1 { stop-color: var(--c-vol); stop-opacity: 0; }
.duong-maker { stroke: var(--c-maker); } .duong-maker-s0 { stop-color: var(--c-maker); stop-opacity: .3; } .duong-maker-s1 { stop-color: var(--c-maker); stop-opacity: 0; }
.duong-cp { stroke: var(--c-cp); } .duong-cp-s0 { stop-color: var(--c-cp); stop-opacity: .32; } .duong-cp-s1 { stop-color: var(--c-cp); stop-opacity: 0; }
.bd-trong { color: var(--mut); padding: 40px 0; text-align: center; }
.chu-giai { display: flex; gap: 14px; font-size: 12px; color: var(--mut); margin-top: 4px; flex-wrap: wrap; }
.chu-giai i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cg-vol { background: var(--c-vol); } .cg-maker { background: var(--c-maker); } .cg-cp { background: var(--c-cp); } .cg-taker { background: var(--c-taker); }
/* vòng tròn cơ cấu volume */
.vanh { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 2px; }
svg.bd-vanh { width: 100%; max-width: 210px; height: auto; display: block; }
.vanh-nen { fill: none; stroke: var(--card2); stroke-width: 16; }
.vanh-phan { fill: none; stroke-width: 16; }
.vanh-phan.cg-maker { stroke: var(--c-maker); } .vanh-phan.cg-taker { stroke: var(--c-taker); }
.vanh-so { fill: var(--fg); font-size: 19px; font-weight: 700; font-family: "Segoe UI", system-ui, sans-serif; }
.vanh-chu { fill: var(--mut); font-size: 10.5px; font-family: "Segoe UI", system-ui, sans-serif; }
.vanh-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.vanh-ds > div { background: var(--card2); border-radius: 12px; padding: 8px 10px; text-align: center; min-width: 0; }
.vanh-ds .ti { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vanh-ds .ten { font-size: 12px; color: var(--mut); }
.vanh-ds .ten i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.vanh-ds .gt { display: block; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
/* bảng */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th { color: var(--mut); font-weight: 600; font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; position: sticky; top: 0; background: var(--card); }
tbody tr:hover td, tr:hover > td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
td.l, th.l { text-align: left; }
td.wrap { white-space: normal; }
tr.sk-canh_bao td { background: var(--nen-vang); }
tr.sk-loi td { background: var(--nen-do); }
tr.sk-tot td.cau { color: var(--chu-xanh); }
/* 0.1.3: mức 'nhe' (vàng nhạt) — thông tin cần biết nhưng KHÔNG phải lỗi, không cần làm gì (vd CANH_BAO_429: sàn giới hạn
   tốc độ, bot tự giãn nhịp) */
tr.sk-nhe td.cau { color: var(--chu-vang); }
.viec { color: var(--chu-vang); font-size: 12px; display: block; }
tr.sk-loi .viec { color: var(--chu-do); }
.cuon { max-height: 330px; overflow: auto; }
.cuon.cao { max-height: 640px; }
.trong-bang { color: var(--mut); text-align: center !important; padding: 18px; }

/* ---------------- STOP ---------------- */
.hop-stop { max-width: 820px; margin: 30px auto; padding: 22px 26px; border-radius: 16px; background: #3d0d10; border: 3px solid #da3633; color: #ffe9e6; }
.hop-stop h1 { color: #fff; }
.hop-stop .kv > div:nth-child(odd) { color: #ffb3ad; }
.stop-ly-do { font-size: 20px; font-weight: 700; color: #ffdcd7; }

/* ---------------- 4 nút giảm rủi ro (màu cố định ở mọi bảng màu) ---------------- */
/* A-4: luôn trên cùng (trên lớp phủ hộp thoại 50, bắt buộc cập nhật 70, thông báo nổi 75) -> 4 nút luôn bấm được */
.khu-giam { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--chan-nen); border-top: 1px solid var(--line); padding: 10px 16px; backdrop-filter: blur(6px); }
.hang-giam { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nut-giam { font: inherit; font-weight: 700; font-size: 15px; padding: 10px 22px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; color: #fff; min-width: 150px; }
.nut-giam.vang { background: #9e6a03; border-color: #d29922; }
.nut-giam.cam { background: #b5480d; border-color: #f0883e; }
.nut-giam.do { background: #a40e26; border-color: #f85149; }
.nut-giam.xanh { background: #1a7f37; border-color: #3fb950; }
.nut-giam:hover:not(:disabled) { filter: brightness(1.15); }
.nut-giam:disabled { opacity: .5; }
.tien-trinh { list-style: none; padding: 0; margin: 6px auto 0; max-width: 900px; font-size: 13px; }
.tien-trinh li { display: flex; gap: 10px; justify-content: center; padding: 2px 0; color: var(--mut); }
.tien-trinh .cho { color: var(--chu-vang); } .tien-trinh .xong { color: var(--g); } .tien-trinh .loi-tt { color: var(--r); }

/* ---------------- thông báo nổi ---------------- */
.toast { position: fixed; right: 16px; bottom: 110px; z-index: 75; display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.toast-muc { padding: 10px 14px; border-radius: 12px; background: var(--card); color: var(--fg); border: 1px solid var(--line); box-shadow: var(--bong); transition: opacity .4s; }
.toast-muc.loi { background: var(--nen-do); border-color: var(--vien-do); color: var(--chu-do); }
.toast-muc.tot { background: var(--nen-xanh); border-color: var(--vien-xanh); color: var(--chu-xanh); }
.toast-muc.tat { opacity: 0; }

/* ---------------- bản web ---------------- */
.tai-khoan { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--side-hover); color: var(--side-fg); border: 1px solid var(--side-line); cursor: pointer; }
.ds-ip { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ds-ip .o-ip { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.ds-ip .o-ip b { margin-right: 6px; color: var(--mut); font-weight: 600; }
.ds-ip .o-ip.dang-chay { border-color: var(--vien-xanh); }
.the.tat-san { opacity: .45; cursor: not-allowed; }
.the.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card2)); }
.o-phien { color: var(--chu-xanh); font-weight: 600; }
.cd-hien-tai { color: var(--g); font-weight: 700; font-size: 12px; }
/* Cài đặt -> Giao diện */
.luoi-mau { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.the-mau { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; font: inherit; color: var(--fg); background: var(--card2);
  border: 2px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
.the-mau:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.the-mau.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.the-mau.on b::after { content: " ✓"; color: var(--accent); }
.the-mau .xem { display: block; width: 100%; height: 54px; border-radius: 10px; margin-bottom: 6px; border: 1px solid #00000014; }

/* màn hẹp (điện thoại): menu về một hàng ngang trên cùng, cuộn ngang được */
@media (max-width: 700px) {
  .menu { position: sticky; bottom: auto; width: auto; flex-direction: row; align-items: center; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--side-line); overflow-x: auto; overflow-y: hidden; }
  .menu > button { width: auto; white-space: nowrap; padding: 7px 12px; gap: 8px; }
  .menu-logo, .menu-cuoi, .menu-nhan { display: none; }
  body:has(#menu:not(.an)) { padding-left: 0; }
  body:has(#menu:not(.an)) .khu-giam { left: 0; }
  .noi-dung { padding: 10px 16px 30px; }
  h1 { font-size: 21px; }
  .hop-giua { margin: 24px auto; padding: 22px 18px; }
}

/* chọn sàn (web) */
.o-nhap select { display: block; width: 100%; max-width: 420px; margin-top: 5px; font: inherit; color: var(--fg); background: var(--o-nen); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.o-nhap select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* chon token (anh 29/10): o chon co tim — dong: hien token dang chon; bam / go: danh sach xo xuong; chon xong: dong */
.box.box-tran { overflow: visible; }   /* .box cuon ngang (overflow-x) = cat ca chieu doc -> cat mat danh sach xo xuong */
.chon-token { position: relative; max-width: 420px; }
.chon-token::after { content: "▾"; position: absolute; right: 12px; top: 15px; color: var(--mut); pointer-events: none; }
.o-nhap .chon-token .tim-token { padding-right: 30px; cursor: pointer; }
.o-nhap .chon-token .tim-token:focus { cursor: text; }
.ds-token { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: var(--bong); }
.ds-token .muc-token { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--fg); background: none; border: 0; border-radius: 7px; padding: 7px 8px; cursor: pointer; }
.ds-token .muc-token.sang { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ds-token .muc-token.chon { font-weight: 700; }
.ds-token .muc-token.chon::after { content: " ✓"; color: var(--accent); }
.ds-token .muc-token:disabled { color: var(--mut); cursor: not-allowed; background: none; }
.ds-token .rong { padding: 7px 8px; color: var(--mut); font-size: 13px; }
.chon-san #san_flipper_tt { margin-top: 6px; }
/* 29/10: chon san o Bang dieu khien (moi san 1 phien rieng) */
.chon-san-db { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
.chon-san-db .o-nhap { margin: 0; min-width: 220px; }
.chon-san-db #db_san_tt { max-width: 300px; text-align: right; }
.chon-san-db #db_san_tt:empty { display: none; }

/* don bay phien: thanh truot ngang, mau theo bang mau dang chon */
.o-tu-dung input { max-width: 230px; }
.o-don-bay { margin: 6px 0 12px; }
.db-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--mut); }
.db-so { font-size: 22px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.o-don-bay input[type="range"] { display: block; width: 100%; height: 22px; margin: 6px 0 0; padding: 0; border: 0; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; }
.o-don-bay input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--db-pct, 0%), var(--line) var(--db-pct, 0%)); }
.o-don-bay input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.o-don-bay input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.o-don-bay input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--fg); }
.o-don-bay input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--fg); }
.o-don-bay input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.db-mut { display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.o-don-bay .goi-y { display: block; margin-top: 6px; }