/* ============================================================
   a1.css — bộ giao diện chép theo A1Radar, đo bằng F12 ngày 21/09/2026.
   Mọi con số dưới đây là GIÁ TRỊ ĐO ĐƯỢC từ trang thật, không phải phỏng đoán.

   Vì sao chép được: giao diện họ là Tailwind + theme mặc định của shadcn/ui,
   chữ Plus Jakarta Sans (Google Fonts). Tất cả đều miễn phí và mã nguồn mở.
   Ở đây viết lại bằng CSS thuần để không phải dựng Tailwind trên máy.

   KHÔNG đụng vào /assets/style.css — giao diện cũ của mình giữ nguyên.
   ============================================================ */

:root{
  /* --- bộ biến gốc, đo từ :root và .dark của họ --- */
  --nen:            oklch(0.145 0 0);
  --chu:            oklch(0.985 0 0);
  --chu-mo:         oklch(0.82 0.015 250);
  --chu-mo-2:       oklch(0.708 0 0);
  --vien:           oklch(1 0 0 / 0.1);
  --vien-the:       oklch(1 0 0 / 0.12);
  --vien-dong:      oklch(1 0 0 / 0.05);
  --the-nen:        rgba(2, 6, 12, 0.6);
  --the-goc:        14px;
  --goc:            0.625rem;          /* --radius của họ */
  --chinh:          oklch(0.6 0.2 252);
  --tang:           oklch(0.845 0.143 164.978);   /* emerald-400 */
  --giam:           oklch(0.81 0.117 11.638);     /* rose-400   */
  --luc:            oklch(0.765 0.177 163.223);
  --luc-nen:        oklch(0.696 0.17 163 / 0.2);
  --luc-vien:       oklch(0.696 0.17 163 / 0.3);
  --o-nhap-nen:     rgba(255, 255, 255, 0.045);
  --bong-the:       0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --f: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box}
html{background:var(--nen)}
body{
  margin:0; background:var(--nen); color:var(--chu);
  font-family:var(--f); font-size:16px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- thanh điều hướng ---------- */
.a1-nav{
  display:flex; align-items:center; gap:6px; height:52px; padding:0 16px;
  border-bottom:1px solid var(--vien); position:sticky; top:0; z-index:40;
  background:rgba(20,19,16,0.86); backdrop-filter:blur(10px);
}
.a1-logo{
  width:30px;height:30px;border-radius:9px;margin-right:10px;flex:none;
  display:grid;place-items:center;font-weight:900;font-size:13px;font-style:italic;
  background:linear-gradient(135deg,oklch(0.6 0.2 252),oklch(0.7 0.17 175));
  color:#0b0f14;
}
.a1-nav a.muc{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--chu-mo);white-space:nowrap;
}
.a1-nav a.muc:hover{background:rgba(255,255,255,.05);color:var(--chu)}
.a1-nav a.muc.on{background:var(--luc-nen);border:1px solid var(--luc-vien);color:var(--luc);font-weight:700}
.a1-nav .day{margin-left:auto;display:flex;align-items:center;gap:9px}
.a1-the-nho{
  font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:7px;
  background:rgba(255,255,255,.07);color:var(--chu-mo);
}

/* ---------- băng chữ chạy ---------- */
.a1-bang{border-bottom:1px solid var(--vien);overflow:hidden;background:rgba(255,255,255,.02)}
.a1-bang div{
  display:inline-block;white-space:nowrap;padding:7px 0;font-size:11px;font-weight:600;
  color:var(--chu-mo);animation:a1chay 46s linear infinite;
}
@keyframes a1chay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.a1-bang div{animation:none}}

/* ---------- khung trang ---------- */
.a1-trang{max-width:1400px;margin:0 auto;padding:18px 16px 60px}
.a1-quay{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--chu-mo);margin-bottom:10px}
.a1-quay:hover{color:var(--chu)}

/* ---------- tiêu đề lớn (đo: 36px / 900 / nghiêng / -0.8px / chữ cắt nền dải màu) ---------- */
.a1-dau{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:2px 0 6px}
.a1-tieude{
  font-size:36px; font-weight:900; font-style:italic; letter-spacing:-0.8px; line-height:1.1;
  background-image:linear-gradient(to right bottom,
      rgb(255,255,255) 0%, oklch(0.956 0.045 203.388) 50%, oklch(0.905 0.093 164.15) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 15px rgba(34,211,238,0.2));
  padding-right:8px; margin:0;
}
.a1-phude{font-size:18px;font-weight:500;color:var(--chu-mo);padding-bottom:4px}
.a1-ghichu{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--chu-mo);margin:8px 0 18px}
.a1-cham{width:7px;height:7px;border-radius:99px;background:var(--luc);flex:none;
  box-shadow:0 0 8px var(--luc)}

/* ---------- thẻ số liệu (đo: nền rgba(2,6,12,.6) · góc 14px · đệm 12px · bóng 0 25px 50px -12px) ---------- */
.a1-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:16px}
.a1-the{
  background:var(--the-nen); border:1px solid var(--vien-the); border-radius:var(--the-goc);
  padding:12px 14px; box-shadow:var(--bong-the);
}
.a1-the .nhan{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.a1-the .nhan span{font-size:12px;font-weight:600;color:var(--chu-mo)}
.a1-the .than{display:flex;align-items:center;gap:10px}
.a1-the .bieutuong{
  width:32px;height:32px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);font-size:11px;font-weight:800;color:var(--chu-mo);
}
.a1-the .ma{font-size:14.5px;font-weight:800;line-height:1.2}
.a1-the .ten{font-size:11.5px;font-weight:500;color:var(--chu-mo);line-height:1.3}
.a1-the .to{font-size:23px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}

/* ---------- nhãn nhỏ (đo từ --tier-badge-* của họ) ---------- */
.a1-nhan{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  padding:3px 7px;border-radius:6px;white-space:nowrap;
}
.a1-nhan.t1{background:oklch(22% .09 182);color:oklch(92% .15 175);box-shadow:inset 0 0 0 1px oklch(65% .18 178/.7)}
.a1-nhan.t2{background:oklch(22% .1 262);color:oklch(88% .16 255);box-shadow:inset 0 0 0 1px oklch(58% .2 258/.65)}
.a1-nhan.t3{background:oklch(26% .1 65);color:oklch(97% .16 82);box-shadow:inset 0 0 0 1px oklch(72% .17 72/.7)}
.a1-nhan.t4{background:oklch(24% .1 15);color:oklch(90% .12 15);box-shadow:inset 0 0 0 1px oklch(62% .19 18/.6)}
.a1-nhan.luc{background:var(--luc-nen);color:var(--luc);box-shadow:inset 0 0 0 1px var(--luc-vien)}

/* ---------- khối bảng ---------- */
.a1-khoi{
  background:var(--the-nen); border:1px solid var(--vien-the); border-radius:var(--the-goc);
  box-shadow:var(--bong-the); overflow:hidden;
}
.a1-loc{display:flex;align-items:center;gap:8px;padding:13px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--vien-dong)}
.a1-loc .nhanloc{font-size:12px;font-weight:600;color:var(--chu-mo);margin-right:3px}

/* chip (đo: cao 32 · góc 10 · đệm 0 12 · 12px · chọn 700 / thường 600) */
.a1-chip{
  height:32px;padding:0 12px;border-radius:10px;font-family:var(--f);font-size:12px;font-weight:600;
  background:transparent;border:1px solid transparent;color:var(--chu-mo);cursor:pointer;
}
.a1-chip:hover{background:rgba(255,255,255,.05);color:var(--chu)}
.a1-chip.on{background:var(--luc-nen);border-color:var(--luc-vien);color:var(--luc);font-weight:700}

/* ô tìm (đo: cao 36 · góc 14 · nền trắng 4,5% · viền trắng 10%) */
.a1-tim{position:relative;margin-left:auto}
.a1-tim input{
  height:36px;border-radius:14px;background:var(--o-nhap-nen);
  border:1px solid rgba(255,255,255,.1);color:var(--chu);
  font-family:var(--f);font-size:14px;padding:4px 12px 4px 36px;width:250px;outline:none;
}
.a1-tim input::placeholder{color:var(--chu-mo-2)}
.a1-tim input:focus{border-color:var(--luc-vien)}
.a1-tim .kinh{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--chu-mo-2);font-size:13px;pointer-events:none}

/* bảng (đo: TH 11px/700 hoa ls .55 · TD 12px/500 · đệm 12/16 · dòng cao 62 · vạch trắng 5%) */
.a1-cuon{overflow-x:auto}
table.a1{width:100%;border-collapse:collapse;min-width:900px}
table.a1 th{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;
  color:var(--chu-mo);padding:12px 16px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--vien-dong);background:rgba(255,255,255,.015);
}
table.a1 th:nth-child(1),table.a1 th:nth-child(2){text-align:left}
table.a1 td{
  font-size:12px;font-weight:500;padding:12px 16px;height:62px;text-align:right;
  border-bottom:1px solid var(--vien-dong);font-variant-numeric:tabular-nums;white-space:nowrap;
}
table.a1 td:nth-child(1),table.a1 td:nth-child(2){text-align:left}
table.a1 tbody tr:hover{background:rgba(255,255,255,.03)}
table.a1 .hang{color:var(--chu-mo-2);font-weight:600}
.a1-token{display:flex;align-items:center;gap:10px}
.a1-token .tron{
  width:28px;height:28px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);font-size:10px;font-weight:800;color:var(--chu-mo);
}
.a1-token b{font-size:13px;font-weight:800;display:block;line-height:1.25}
.a1-token span{font-size:11px;font-weight:500;color:var(--chu-mo);display:block;line-height:1.25}
.tang{color:var(--tang)}
.giam{color:var(--giam)}
.to-ngay{font-size:15px;font-weight:800;color:var(--luc)}
.mo{color:var(--chu-mo)}

.a1-chan{padding:13px 16px;font-size:11.5px;color:var(--chu-mo-2);
  border-top:1px solid var(--vien-dong);display:flex;gap:14px;flex-wrap:wrap}

/* ---------- hộp minh bạch: KHÔNG có ở A1Radar, mình thêm ---------- */
.a1-that{
  margin:16px 0 0;border:1px dashed var(--luc-vien);background:var(--luc-nen);
  border-radius:var(--the-goc);padding:12px 15px;font-size:12.5px;line-height:1.65;color:var(--chu);
}
.a1-that b{color:var(--luc)}

@media(max-width:760px){
  .a1-tieude{font-size:28px}
  .a1-phude{font-size:15px}
  .a1-trang{padding:14px 12px 44px}
  .a1-tim{margin-left:0;width:100%}
  .a1-tim input{width:100%}
  .a1-nav{overflow-x:auto}
}

/* ============================================================
   Phần thêm cho trang có biểu đồ và thang vùng giá — vẫn bộ màu đo từ A1Radar.
   ============================================================ */

/* ---------- bộ chọn token ---------- */
.a1-chon{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.a1-chon .ghim{position:relative}
.a1-chon .ghim:after{content:"";position:absolute;right:-4px;top:-3px;width:5px;height:5px;
  border-radius:99px;background:var(--tang);box-shadow:0 0 6px var(--tang)}
.a1-chon select{
  height:32px;border-radius:10px;background:var(--o-nhap-nen);border:1px solid rgba(255,255,255,.1);
  color:var(--chu);font-family:var(--f);font-size:12px;font-weight:600;padding:0 10px;cursor:pointer;
}
.a1-chon select:focus{outline:none;border-color:var(--luc-vien)}

/* ---------- biểu đồ ---------- */
.a1-chart{width:100%;height:360px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.015);border:1px solid var(--vien-dong)}
.a1-chart.sm{height:240px}
.a1-chú, .a1-chu-thich{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:11.5px;font-weight:600;color:var(--chu-mo);margin:10px 0}
.a1-chu-thich i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---------- thang vùng giá ---------- */
.a1-thang{padding:4px 2px}
.a1-bac{display:grid;grid-template-columns:118px 1fr 120px;gap:12px;align-items:center;padding:3px 0}
.a1-bac .dai{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:var(--chu-mo);
  font-variant-numeric:tabular-nums}
.a1-bac .thanh{position:relative;height:17px;background:rgba(255,255,255,.035);border-radius:4px;overflow:hidden}
.a1-bac .thanh:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.14)}
.a1-bac .thanh i{position:absolute;top:2px;bottom:2px;border-radius:2px}
.a1-bac .thanh i.mua{background:var(--tang);left:50%}
.a1-bac .thanh i.ban{background:var(--giam);right:50%}
.a1-bac .rong{text-align:right;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.a1-bac.day .thanh{box-shadow:0 0 0 1px var(--luc),0 0 12px -2px var(--luc)}
.a1-bac.day .dai{color:var(--luc);font-weight:700}

.a1-rong{display:flex;align-items:baseline;gap:8px}
.a1-rong .to{font-size:26px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.a1-rong .nho{font-size:11.5px;color:var(--chu-mo);font-weight:600}
.a1-tron-nho{width:26px;height:26px}

.a1-trong{padding:26px;text-align:center;font-size:12.5px;color:var(--chu-mo-2)}

@media(max-width:700px){
  .a1-bac{grid-template-columns:96px 1fr 92px;gap:8px}
  .a1-bac .dai{font-size:10px}
  .a1-bac .rong{font-size:10.5px}
  .a1-chart{height:290px}
}

/* ============================================================
   BỘ MÀU HEX RIÊNG CHO BIỂU ĐỒ — đừng xoá, đừng thay bằng biến oklch ở trên.

   Lý do: Lightweight Charts v4.2.3 tự phân tích chuỗi màu và CHỈ hiểu hex/rgb/rgba/hsl.
   Truyền oklch() vào là nó ném "Cannot parse color: oklch(...)" rồi chết cả biểu đồ.
   Đã dính thật ngày 21/09/2026. Dưới đây là đúng các màu oklch ở trên quy sang hex:
     oklch(0.845 0.143 164.978) = emerald-400 = #34d399
     oklch(0.81  0.117  11.638) = rose-400    = #fb7185
     oklch(0.769 0.188  70.08 ) = amber-400   = #fbbf24
     oklch(0.708 0     0      ) = neutral-400 = #a1a1a1
   ============================================================ */
:root{
  --c-tang:  #34d399;
  --c-giam:  #fb7185;
  --c-vang:  #fbbf24;
  --c-chu:   #a1a1a1;
  --c-chinh: #3b82f6;
  --c-luoi:  rgba(255,255,255,.04);
  --c-vien:  rgba(255,255,255,.08);
}

/* ============================================================
   Khung 2 cột kiểu Token Insights của A1Radar: cột trái là menu tầng T1/T2/T3.
   Số đo lấy từ ảnh chụp trang thật.
   ============================================================ */
.a1-doi{display:grid;grid-template-columns:232px 1fr;gap:0;align-items:start}
.a1-ben{position:sticky;top:52px;align-self:start;padding:16px 12px;
  border-right:1px solid var(--vien-dong);min-height:calc(100vh - 52px)}
.a1-ben .dau{display:flex;gap:6px;margin-bottom:14px}
.a1-ben .dau a{font-size:13px;font-weight:600;color:var(--chu-mo);padding:6px 12px;border-radius:10px}
.a1-ben .dau a.on{background:rgba(255,255,255,.08);color:var(--chu);font-weight:700}
.a1-ben h4{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--chu-mo-2);
  text-transform:uppercase;margin:0 0 10px 4px}
.a1-nhom{border:1px solid var(--vien-dong);border-radius:12px;padding:6px;margin-bottom:10px}
.a1-muc{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--chu);line-height:1.25}
.a1-muc:hover{background:rgba(255,255,255,.05)}
.a1-muc.on{background:rgba(59,130,246,.12);color:oklch(0.72 0.14 252);font-weight:700}
.a1-muc.con{padding-left:26px;font-size:12.5px}
.a1-tang{flex:none;width:21px;height:18px;border-radius:6px;display:grid;place-items:center;
  font-size:9px;font-weight:800;letter-spacing:.02em}
.a1-tang.t1{background:oklch(22% .09 165);color:oklch(0.82 0.16 163);box-shadow:inset 0 0 0 1px oklch(0.6 .15 163/.5)}
.a1-tang.t2{background:oklch(22% .1 262);color:oklch(0.78 0.14 255);box-shadow:inset 0 0 0 1px oklch(0.58 .2 258/.5)}
.a1-tang.t3{background:oklch(26% .1 65);color:oklch(0.85 0.15 78);box-shadow:inset 0 0 0 1px oklch(0.72 .17 72/.5)}
.a1-moi{margin-left:auto;font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:5px;
  background:oklch(0.78 0.14 200/.2);color:oklch(0.82 0.13 200)}
.a1-moi.up{background:var(--luc-nen);color:var(--luc)}
.a1-phai{padding:16px 18px 60px;min-width:0}

/* ---------- đầu trang token ---------- */
.a1-thanh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.a1-thanh select{height:36px;border-radius:12px;background:var(--o-nhap-nen);
  border:1px solid rgba(255,255,255,.1);color:var(--chu);font-family:var(--f);
  font-size:13.5px;font-weight:700;padding:0 12px;cursor:pointer;min-width:190px}
.a1-thanh select:focus{outline:none;border-color:var(--luc-vien)}
.a1-tenmk{display:flex;align-items:center;gap:14px;margin:16px 0 18px}
.a1-tron-to{width:46px;height:46px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);font-size:14px;font-weight:800;color:var(--chu-mo)}
.a1-ma-to{font-size:33px;font-weight:800;letter-spacing:-1px;line-height:1}
.a1-mota{font-size:17px;font-weight:500;color:var(--chu-mo)}

/* ---------- ba thẻ KPI kiểu họ: nhãn màu, số rất to, biểu tượng vuông bo góc ---------- */
.a1-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-bottom:18px}
.a1-kpi{background:var(--the-nen);border:1px solid var(--vien-the);border-radius:16px;
  padding:18px 20px;box-shadow:var(--bong-the);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.a1-kpi .nhan{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:10px}
.a1-kpi .so{font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1;
  font-variant-numeric:tabular-nums}
.a1-kpi .dv{font-size:13px;font-weight:600;color:var(--chu-mo);margin-left:7px}
.a1-kpi .bt{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:19px}
.a1-kpi.luc  .nhan{color:oklch(0.78 0.14 163)} .a1-kpi.luc  .so{color:oklch(0.85 0.15 163)}
.a1-kpi.luc  .bt{background:oklch(0.7 0.15 163/.16);color:oklch(0.82 0.15 163)}
.a1-kpi.tim  .nhan{color:oklch(0.76 0.15 300)} .a1-kpi.tim  .so{color:oklch(0.82 0.16 300)}
.a1-kpi.tim  .bt{background:oklch(0.7 0.18 300/.16);color:oklch(0.82 0.16 300)}
.a1-kpi.vang .nhan{color:oklch(0.82 0.15 80)}  .a1-kpi.vang .so{color:oklch(0.88 0.16 85)}
.a1-kpi.vang .bt{background:oklch(0.8 0.16 80/.16);color:oklch(0.88 0.16 85)}
.a1-kpi .ghi{font-size:11px;color:var(--chu-mo-2);margin-top:7px;font-weight:500}

/* ---------- thẻ biểu đồ ---------- */
.a1-bd{background:var(--the-nen);border:1px solid var(--vien-the);border-radius:16px;
  box-shadow:var(--bong-the);padding:16px 18px 10px}
.a1-bd .dinh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.a1-bd .dinh b{font-size:15px;font-weight:700}
.a1-bd .chu{display:flex;gap:15px;flex-wrap:wrap;margin-left:auto;font-size:11.5px;
  font-weight:600;color:var(--chu-mo)}
.a1-bd .chu i{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:0}
.a1-bd .chart{width:100%;height:440px}
.a1-bd .chart.sm{height:210px}

@media(max-width:940px){
  .a1-doi{grid-template-columns:1fr}
  .a1-ben{position:static;min-height:0;border-right:none;
    border-bottom:1px solid var(--vien-dong)}
  .a1-ma-to{font-size:27px}
  .a1-kpi .so{font-size:31px}
  .a1-bd .chart{height:340px}
}

/* ============================================================================
   BỘ MÀU "KIM" — thay bộ màu chép của A1Radar. Đặt cuối tệp nên đè lên phần trên.
   Nguyên tắc: Kim = vàng kim, bạch kim, thép. Thổ sinh Kim nên nền lấy sắc đất nung
   sẫm chứ không phải đen xanh. Tránh đỏ lửa làm màu chủ đạo (Hoả khắc Kim) — sắc giảm
   dùng ĐỒNG ĐỎ đất, không dùng đỏ tươi.
   ============================================================================ */
:root{
  --nen:        #0B0A07;
  --chu:        #F4F0E6;            /* bạch kim */
  --chu-mo:     #BCB4A2;
  --chu-mo-2:   #8B8474;
  --vien:       rgba(214,182,112,.14);
  --vien-the:   rgba(214,182,112,.17);
  --vien-dong:  rgba(214,182,112,.075);
  --the-nen:    rgba(24,20,13,.72);
  --the-goc:    14px;
  --chinh:      #D6B670;
  --tang:       #4FC79B;            /* ngọc lục bảo dịu */
  --giam:       #D98878;            /* đồng đỏ đất, không phải đỏ lửa */
  --luc:        #D6B670;            /* "nhấn" nay là vàng kim */
  --luc-nen:    rgba(214,182,112,.15);
  --luc-vien:   rgba(214,182,112,.34);
  --o-nhap-nen: rgba(244,240,230,.045);
  --bong-the:   0 24px 48px -14px rgba(0,0,0,.55);

  /* màu hex riêng cho biểu đồ — thư viện không đọc được oklch */
  --c-gia:    #EFE3C2;   /* đường giá: BẠCH KIM, khác hẳn vàng của A1Radar */
  --c-thuong: rgba(96,142,150,.52);   /* xanh thép: có sắc nhưng trầm hơn hẳn chuỗi tăng */
  --c-tang:   #47C9A2;
  --c-dot:    #E9A93C;   /* đột biến: kim rực */
  --c-giam:   #D98878;
  --c-vang:   #D6B670;
  --c-chinh:  #D6B670;
  --c-chu:    #8B8474;
  --c-luoi:   rgba(239,227,194,.05);
  --c-vien:   rgba(239,227,194,.11);
}
html,body{background:var(--nen)}
.a1-nav{background:rgba(11,10,7,.9)}
.a1-logo{background:linear-gradient(135deg,#E8CE90,#B58E42);color:#1A1509}
.a1-nav a.muc.on{background:var(--luc-nen);border-color:var(--luc-vien);color:#EFDCA9}
.a1-bang{background:rgba(214,182,112,.035)}

/* tiêu đề lớn: dải bạch kim → vàng kim, quầng sáng vàng thay vì xanh lơ */
.a1-tieude{
  background-image:linear-gradient(to right bottom,#FFFBF0 0%,#F0DFB4 48%,#C79E4E 100%);
  filter:drop-shadow(0 0 16px rgba(214,182,112,.22));
}
.a1-cham{background:#D6B670;box-shadow:0 0 9px rgba(214,182,112,.8)}

/* nhãn bậc: chuyển sang thang kim loại */
.a1-nhan.t1{background:rgba(120,196,168,.14);color:#7FD6B4;box-shadow:inset 0 0 0 1px rgba(120,196,168,.34)}
.a1-nhan.t2{background:rgba(214,182,112,.13);color:#E3C685;box-shadow:inset 0 0 0 1px rgba(214,182,112,.32)}
.a1-nhan.t3{background:rgba(198,150,92,.14);color:#DDAE74;box-shadow:inset 0 0 0 1px rgba(198,150,92,.34)}
.a1-nhan.t4{background:rgba(217,136,120,.13);color:#E2A092;box-shadow:inset 0 0 0 1px rgba(217,136,120,.32)}
.a1-nhan.luc{background:var(--luc-nen);color:#E3C685;box-shadow:inset 0 0 0 1px var(--luc-vien)}

/* menu trái */
.a1-tang.t1{background:rgba(120,196,168,.15);color:#7FD6B4;box-shadow:inset 0 0 0 1px rgba(120,196,168,.35)}
.a1-tang.t2{background:rgba(214,182,112,.14);color:#E3C685;box-shadow:inset 0 0 0 1px rgba(214,182,112,.33)}
.a1-tang.t3{background:rgba(198,150,92,.15);color:#DDAE74;box-shadow:inset 0 0 0 1px rgba(198,150,92,.35)}
.a1-muc.on{background:rgba(214,182,112,.12);color:#EFDCA9;font-weight:700}
.a1-moi,.a1-moi.up{background:rgba(214,182,112,.18);color:#E3C685}

/* ba thẻ KPI: bạch kim · kim rực · vàng kim */
.a1-kpi.luc  .nhan{color:#8FD9BC} .a1-kpi.luc  .so{color:#5FD3A8}
.a1-kpi.luc  .bt{background:rgba(79,199,155,.13);color:#5FD3A8}
.a1-kpi.tim  .nhan{color:#E6B96A} .a1-kpi.tim  .so{color:#E9A93C}
.a1-kpi.tim  .bt{background:rgba(233,169,60,.14);color:#E9A93C}
.a1-kpi.vang .nhan{color:#D8CBAA} .a1-kpi.vang .so{color:#EFE3C2}
.a1-kpi.vang .bt{background:rgba(239,227,194,.11);color:#EFE3C2}

.a1-chip.on{background:var(--luc-nen);border-color:var(--luc-vien);color:#EFDCA9}
.tang,.a1-bac .rong.tang{color:#5FD3A8}
.giam,.a1-bac .rong.giam{color:#DF9384}
.a1-bac .thanh i.mua{background:#47C9A2}
.a1-bac .thanh i.ban{background:#D98878}
.lich .vach i.do{background:#D98878}
.a1-that{border-color:var(--luc-vien);background:rgba(214,182,112,.07)}
.a1-that b{color:#E3C685}

/* ============================================================
   Bộ chọn coin có tìm kiếm + icon · menu trái thu gọn được ·
   hộp chú giải nổi trên biểu đồ · cửa sổ giải nghĩa.
   ============================================================ */

/* ---------- bộ chọn coin ---------- */
.a1-picker{position:relative}
.a1-pick-nut{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;min-width:210px;
  border-radius:12px;background:var(--o-nhap-nen);border:1px solid var(--vien-the);
  color:var(--chu);font-family:var(--f);font-size:14px;font-weight:700;cursor:pointer}
.a1-pick-nut:hover{border-color:var(--luc-vien)}
.a1-pick-nut img{width:22px;height:22px;border-radius:99px;flex:none}
.a1-pick-nut .hang{font-size:11px;font-weight:600;color:var(--chu-mo-2);margin-left:auto}
.a1-pick-nut .mui{font-size:11px;color:var(--chu-mo-2)}
.a1-pick-hop{position:absolute;top:44px;left:0;width:310px;z-index:60;border-radius:14px;
  background:#12100B;border:1px solid var(--vien-the);box-shadow:0 30px 60px -18px rgba(0,0,0,.75);
  overflow:hidden}
.a1-pick-tim{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--vien-dong)}
.a1-pick-tim input{flex:1;background:transparent;border:none;outline:none;color:var(--chu);
  font-family:var(--f);font-size:14.5px}
.a1-pick-tim input::placeholder{color:var(--chu-mo-2)}
.a1-pick-ds{max-height:340px;overflow-y:auto;padding:5px}
.a1-pick-ds button{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;
  border:none;background:transparent;border-radius:9px;cursor:pointer;
  color:var(--chu);font-family:var(--f);font-size:14px;font-weight:600;text-align:left}
.a1-pick-ds button:hover{background:rgba(214,182,112,.10)}
.a1-pick-ds button.on{background:var(--luc-nen);color:#EFDCA9}
.a1-pick-ds img{width:22px;height:22px;border-radius:99px;flex:none}
.a1-pick-ds .ten{font-size:11.5px;font-weight:500;color:var(--chu-mo-2);margin-left:auto}
.a1-pick-trong{padding:18px;text-align:center;font-size:12.5px;color:var(--chu-mo-2)}

/* ---------- menu trái thu gọn ---------- */
.a1-thu{width:34px;height:34px;flex:none;border-radius:10px;cursor:pointer;
  background:var(--o-nhap-nen);border:1px solid var(--vien-the);color:var(--chu-mo);
  display:grid;place-items:center;font-size:14px}
.a1-thu:hover{border-color:var(--luc-vien);color:var(--chu)}
/* chỉ áp cho màn rộng — trên điện thoại menu ẩn/hiện bằng lớp .mo-ben (xem cuối tệp) */
@media(min-width:941px){
.a1-doi.gon{grid-template-columns:60px 1fr}
.a1-doi.gon .a1-ben{padding:16px 8px}
.a1-doi.gon .a1-ben .dau,
.a1-doi.gon .a1-ben h4,
.a1-doi.gon .a1-muc span,
.a1-doi.gon .a1-moi{display:none}
.a1-doi.gon .a1-muc{justify-content:center;padding:9px 0;font-size:0;gap:0}
.a1-doi.gon .a1-muc.con{padding-left:0}
.a1-doi.gon .a1-tang{font-size:9px}
.a1-doi.gon .a1-nhom{padding:4px}
}

/* ---------- hộp chú giải nổi trên biểu đồ ---------- */
.a1-chu-noi{position:absolute;z-index:30;pointer-events:none;display:none;
  min-width:210px;padding:11px 13px;border-radius:12px;
  background:rgba(16,14,9,.96);border:1px solid var(--vien-the);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7);font-size:12.5px}
.a1-chu-noi .ngay{font-weight:700;font-size:13px;padding-bottom:7px;margin-bottom:7px;
  border-bottom:1px solid var(--vien-dong)}
.a1-chu-noi .d{display:flex;justify-content:space-between;gap:18px;padding:2.5px 0}
.a1-chu-noi .d span:first-child{color:var(--chu-mo)}
.a1-chu-noi .d span:last-child{font-weight:700;font-variant-numeric:tabular-nums}
.a1-chu-noi .co{margin-top:8px;padding-top:7px;border-top:1px solid var(--vien-dong);
  display:flex;gap:7px;flex-wrap:wrap}
.a1-bd{position:relative}

/* ---------- nút sách + cửa sổ giải nghĩa ---------- */
.a1-sach{width:38px;height:38px;flex:none;border-radius:11px;cursor:pointer;
  background:var(--o-nhap-nen);border:1px solid var(--vien-the);color:var(--chu-mo);
  display:grid;place-items:center;font-size:16px;margin-left:auto}
.a1-sach:hover{border-color:var(--luc-vien);color:#E3C685}
.a1-man{position:fixed;inset:0;z-index:80;background:rgba(6,5,3,.72);
  backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:70px 16px 30px;
  overflow-y:auto}
.a1-man.mo{display:flex}
.a1-hop{max-width:720px;width:100%;background:#12100B;border:1px solid var(--vien-the);
  border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.8);padding:26px 30px 30px}
.a1-hop h3{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.3px}
.a1-hop .dan{font-size:13px;color:var(--chu-mo-2);margin-bottom:18px}
.a1-hop h5{margin:20px 0 8px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#E3C685}
.a1-hop p,.a1-hop li{font-size:13.5px;line-height:1.72;color:var(--chu-mo)}
.a1-hop p{margin:0 0 10px}
.a1-hop ul{margin:0 0 10px;padding-left:19px}
.a1-hop b{color:var(--chu)}
.a1-hop .dong{border:1px solid var(--vien-dong);border-radius:11px;padding:12px 14px;margin:10px 0}
.a1-hop .dong.canh{border-color:rgba(217,136,120,.35);background:rgba(217,136,120,.06)}
.a1-hop .dong.tot{border-color:var(--luc-vien);background:rgba(214,182,112,.06)}
.a1-dong-hop{position:absolute;top:22px;right:24px;width:34px;height:34px;border-radius:99px;
  background:rgba(244,240,230,.08);border:none;color:var(--chu);font-size:16px;cursor:pointer}
.a1-hop{position:relative}

/* ---- SỬA LỖI NGHĨA MÀU (22/09) ----
   Khi đổi `--luc` từ xanh sang vàng kim, nhãn ".a1-nhan.luc" kéo theo thành vàng.
   Hậu quả: "An toàn" hiện VÀNG còn "Rủi ro trung bình" hiện XANH — ngược nghĩa hoàn toàn.
   Vàng kim giữ cho TRẠNG THÁI GIAO DIỆN (chip đang chọn, menu đang mở);
   nhãn mang NGHĨA TỐT thì phải xanh. Hai việc khác nhau, không dùng chung biến. */
.a1-nhan.luc{
  background:rgba(79,199,155,.14);
  color:#6FDCB4;
  box-shadow:inset 0 0 0 1px rgba(79,199,155,.34);
}

/* ---------- khung.js (25/09) ----------
   Trang không có thanh công cụ riêng thì nút thu gọn + nút sách nằm ngay trong hàng tiêu đề,
   không chiếm một hàng trống phía trên. Hai tab đầu menu không được gãy chữ. */
.a1-dau>.a1-thu,.a1-dau>.a1-sach{align-self:center}
.a1-ben .dau a{white-space:nowrap;padding:6px 10px}

/* ---------- khổ điện thoại (25/09) ----------
   Menu trái dài ~580px — để nguyên thì chắn trên đầu nội dung. Ẩn mặc định, nút ◧ mở ra. */
@media(max-width:940px){
  .a1-doi .a1-ben{display:none}
  .a1-doi.mo-ben .a1-ben{display:block}
}
@media(max-width:560px){
  .a1-phai{padding:14px 12px 44px}
  .a1-thanh{flex-wrap:wrap}
  .a1-thanh>span{order:9;flex-basis:100%}
  .a1-nav .day{display:none}
}
/* bảng so sánh cuối trang VMD */
.a1-ss{display:grid;grid-template-columns:minmax(150px,230px) 110px 1fr;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--vien-dong);font-size:12.5px}
.a1-ss>:first-child{color:var(--chu-mo);font-weight:600}
.a1-ss>:nth-child(2){font-weight:800;font-variant-numeric:tabular-nums}
.a1-ss>:last-child{color:var(--chu-mo-2)}
@media(max-width:560px){.a1-ss{grid-template-columns:1fr auto;gap:2px 12px}.a1-ss>:last-child{grid-column:1/-1}}