/* ===== Design tokens =====
   Palette: nen tram toi kieu terminal giao dich
   - --bg: #0B0F14 (gan den, hoi xanh)
   - --panel: #121821
   - --panel-2: #1A2230
   - --line: #232D3D
   - --text: #E8EDF4
   - --muted: #8A97A8
   - --gold: #E3B341   (accent chinh - "hoa hong / loi nhuan")
   - --green: #35C48C  (tang / thanh cong)
   - --red: #E5566B    (giam / tu choi)
   Type: display = 'Space Grotesk' (ky thuat, ro net cho so lieu),
         body = 'Inter', mono = 'JetBrains Mono' cho so va ma code
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg:#0B0F14;
  --panel:#121821;
  --panel-2:#1A2230;
  --line:#232D3D;
  --text:#E8EDF4;
  --muted:#8A97A8;
  --gold:#E3B341;
  --gold-dim:#7A6427;
  --green:#35C48C;
  --red:#E5566B;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.01em;
  margin:0;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#0B0F14;}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:18px;}
.brand .mark{
  width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#a9791b);
  display:flex;align-items:center;justify-content:center;color:#0B0F14;font-weight:700;
}
.nav{display:flex;gap:22px;font-size:14px;color:var(--muted);align-items:center;}
.nav a:hover{color:var(--text);}
/* Giu cho san mot khoang toi thieu cho vung nut Dang nhap/Dashboard (navAuthArea) - vung nay
   luon rong luc dau (cho goi API /auth/me tra ve moi biet da dang nhap hay chua), roi moi
   "no ra" thanh 1-2 nut that. Neu khong giu cho, ca khoi menu se bi xo dich sang trai 1 cai
   giat rat de nhan ra ngay luc trang vua tai xong. Gia tri 88px la uoc luong gan dung (khong
   the biet chinh xac 100% vi noi dung cuoi cung khac nhau tuy trang thai), nhung giam dang ke
   do giat so voi khong co gi ca. */
#navAuthArea{display:inline-flex;min-width:88px;justify-content:flex-end;gap:8px;}

/* ---- Toi uu di dong: menu an/hien (hamburger) thay vi cuon ngang dai ---- */
.nav-toggle{display:none;}
@media(max-width:760px){
  .container{padding:0 14px;}
  .topbar{padding:12px 0;gap:10px;position:relative;flex-wrap:nowrap;}
  .brand{font-size:15px;gap:6px;flex-shrink:0;}
  .brand .mark{width:26px;height:26px;}

  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:8px;border:1px solid var(--line);
    background:transparent;color:var(--text);font-size:18px;cursor:pointer;flex-shrink:0;
  }
  .nav{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--bg);border:1px solid var(--line);border-radius:10px;
    padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.4);
    max-width:none;overflow:visible;
  }
  .nav.open{display:flex;}
  .nav a{padding:10px 12px;border-radius:8px;}
  .nav a:hover{background:rgba(255,255,255,.05);}
  .nav .btn{width:100%;justify-content:center;}
  .nav #navAuthArea{display:flex;flex-direction:column;gap:6px;width:100%;}
  .nav #langSwitcher{padding:6px 12px;}

  .card{padding:16px;}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  table thead, table tbody{display:table;width:100%;}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:8px;border:1px solid transparent;
  font-weight:600;font-size:14px;cursor:pointer;transition:.15s ease;
  font-family:'Inter';
}
.btn-primary{background:var(--gold);color:#0B0F14;}
.btn-primary:hover{background:#f0c250;}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--gold);}
.btn-danger{background:transparent;border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:rgba(229,86,107,.1);}
.btn-sm{padding:7px 14px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* Cards / Panels */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:box-shadow .2s ease,border-color .2s ease;
}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.25);}
.stat{transition:box-shadow .2s ease,border-color .2s ease;}
.stat:hover{box-shadow:0 6px 20px rgba(0,0,0,.25);border-color:var(--gold-dim);}
table tbody tr{transition:background-color .15s ease;}
table tbody tr:hover{background-color:rgba(255,255,255,.03);}

/* Button ripple (moi them) - hieu ung song lan toa khi bam nut, JS tao span ".ripple" trong
   api.js (dung chung moi trang), CSS o day chi lo animation. Khong anh huong logic click cua
   tung nut (ripple chi la 1 lop hinh anh phu, khong chan su kien). */
.btn{position:relative;overflow:hidden;}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rippleAnim .5s ease-out;pointer-events:none;}
@keyframes rippleAnim{to{transform:scale(3);opacity:0;}}
.grid{display:grid;gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:800px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;position:relative;overflow:hidden;
}
.stat .label{color:var(--muted);font-size:13px;margin-bottom:8px;}
.stat .value{font-family:'JetBrains Mono';font-size:28px;font-weight:600;}
.stat .value.gold{color:var(--gold);}
.stat .value.green{color:var(--green);}
.stat.accent::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);
}

/* Forms */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
input,select,textarea{
  width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:14px;font-family:'Inter';
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);}

/* Accessibility: focus ro rang khi dieu huong bang ban phim (Tab), khong hien khi bam chuot
   (dung :focus-visible thay vi :focus de tranh vien xau khi click thuong). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.tab:focus-visible,.filter-tab:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;
}
.form-box{max-width:420px;margin:60px auto;padding:32px;}
.form-box h2{margin-bottom:6px;}
.form-sub{color:var(--muted);font-size:14px;margin-bottom:24px;}
.error-msg{
  background:rgba(229,86,107,.12);border:1px solid var(--red);color:#ffb3c0;
  padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;display:none;
}
.success-msg{
  background:rgba(53,196,140,.12);border:1px solid var(--green);color:#a6f0d4;
  padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;display:none;
}

/* Table */
table{width:100%;border-collapse:collapse;font-size:14px;}
th{
  text-align:left;color:var(--muted);font-weight:500;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line);
}
td{padding:12px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
.badge{
  display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;
}
.badge-pending{background:rgba(227,179,65,.15);color:var(--gold);}
.badge-approved{background:rgba(53,196,140,.15);color:var(--green);}
.badge-paid{background:rgba(53,196,140,.25);color:var(--green);}
.badge-rejected{background:rgba(229,86,107,.15);color:var(--red);}
.badge-active{background:rgba(53,196,140,.15);color:var(--green);}
.install-fab{
  position:fixed;bottom:22px;right:154px;z-index:45;
  display:none;align-items:center;gap:8px;
  background:var(--gold);color:#0B0F14;font-weight:700;font-size:13px;
  padding:10px 16px;border-radius:999px;border:none;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.install-fab.show{display:inline-flex;}
@media(max-width:760px){.install-fab{right:16px;left:auto;bottom:144px;padding:9px 14px;font-size:12.5px;}}
.badge-locked{background:rgba(229,86,107,.15);color:var(--red);}
.settings-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:700px){.settings-grid-2{grid-template-columns:1fr;}}

/* Hero (landing) */
.hero{padding:90px 0 60px;position:relative;}
.hero-eyebrow{
  color:var(--gold);font-family:'JetBrains Mono';font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:16px;
}
.hero h1{font-size:52px;line-height:1.08;max-width:680px;}
.hero p.lead{color:var(--muted);font-size:18px;max-width:560px;margin-top:20px;line-height:1.6;}
.hero-cta{display:flex;gap:14px;margin-top:32px;}
@media(max-width:700px){.hero h1{font-size:34px;}}

.section{padding:60px 0;border-top:1px solid var(--line);}
.section-title{font-size:26px;margin-bottom:10px;}
.section-sub{color:var(--muted);margin-bottom:36px;max-width:560px;}

.feature{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);}
.feature .num{font-family:'JetBrains Mono';color:var(--gold-dim);font-size:13px;margin-bottom:10px;}
.feature h3{font-size:17px;margin-bottom:8px;}
.feature p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;}

.ib-link-box{
  display:flex;gap:10px;align-items:center;background:var(--panel-2);
  border:1px dashed var(--gold-dim);border-radius:8px;padding:12px 14px;margin-top:10px;
}
.ib-link-box code{font-family:'JetBrains Mono';color:var(--gold);font-size:13px;flex:1;overflow-x:auto;white-space:nowrap;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.tab{padding:10px 16px;color:var(--muted);cursor:pointer;font-size:14px;font-weight:500;border-bottom:2px solid transparent;}
.tab.active{color:var(--text);border-bottom-color:var(--gold);}

.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13px;text-align:center;}

.page-wrap{padding:36px 0 60px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.chart-bar-wrap{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px;}
.chart-bar{flex:1;background:linear-gradient(180deg,var(--gold),var(--gold-dim));border-radius:4px 4px 0 0;min-height:4px;position:relative;}
.chart-bar .tip{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap;}
.chart-labels{display:flex;gap:8px;margin-top:8px;}
.chart-labels span{flex:1;text-align:center;font-size:11px;color:var(--muted);}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;
}
.modal-backdrop.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;width:100%;max-width:420px;}

/* ===== Them cho trang chu phong cach nhieu san (broker/exchange listing) ===== */
.stats-bar{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:40px;}
.stats-bar .stat-item{flex:1;padding:18px;text-align:center;border-right:1px solid var(--line);}
.stats-bar .stat-item:last-child{border-right:none;}
.stats-bar .stat-item .num{font-family:'JetBrains Mono';font-size:22px;font-weight:600;color:var(--gold);}
.stats-bar .stat-item .lbl{font-size:12.5px;color:var(--muted);margin-top:4px;}
@media(max-width:700px){.stats-bar{flex-wrap:wrap;}.stats-bar .stat-item{flex:1 1 50%;border-bottom:1px solid var(--line);}}

.broker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.broker-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.broker-grid{grid-template-columns:1fr;}}
.broker-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;position:relative;transition:.15s;
}
.broker-card:hover{border-color:var(--gold-dim);}
.broker-card .badge-hot{
  position:absolute;top:14px;right:14px;background:var(--gold);color:#0B0F14;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
}
.broker-card .broker-name{font-family:'Space Grotesk';font-size:18px;font-weight:600;margin-bottom:14px;}
.broker-card .broker-rate{
  font-family:'JetBrains Mono';font-size:20px;color:var(--gold);font-weight:600;margin-bottom:2px;
}
.broker-card .broker-rate-label{font-size:12px;color:var(--muted);margin-bottom:16px;}
.broker-card .broker-actions{display:flex;gap:8px;}
.broker-card .broker-actions .btn{flex:1;}

.flow-wrap{
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
  padding:36px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
}
.flow-node{text-align:center;padding:0 24px;}
.flow-node .circle{
  width:64px;height:64px;border-radius:50%;background:var(--panel-2);border:2px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:24px;
}
.flow-node .lbl{font-size:13px;color:var(--text);font-weight:500;}
.flow-arrow{color:var(--gold-dim);font-size:22px;}

.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:800px){.step-grid{grid-template-columns:1fr;}}
.step-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:left;
}
.step-card .step-icon{
  width:40px;height:40px;border-radius:8px;background:rgba(227,179,65,.12);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono';font-weight:700;margin-bottom:14px;
}
.step-card h3{font-size:16px;margin-bottom:8px;}
.step-card p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0;}

.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:700px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.testi-stars{color:var(--gold);font-size:14px;margin-bottom:10px;letter-spacing:2px;}
.testi-card p.quote{font-size:14px;line-height:1.6;color:var(--text);margin:0 0 16px;}
.testi-person{display:flex;align-items:center;gap:10px;}
.testi-person .avatar{
  width:36px;height:36px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--gold);
}
.testi-person .name{font-size:13.5px;font-weight:600;}
.testi-person .sub{font-size:12px;color:var(--muted);}

.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-item summary{cursor:pointer;font-weight:500;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:20px;color:var(--gold);}
.faq-item[open] summary::after{content:'−';}
.faq-item p{color:var(--muted);font-size:14px;line-height:1.6;margin:12px 0 0;}
.faq-item[open] p{animation:faqFadeIn .25s ease;}
@keyframes faqFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* Loading skeleton (thay the chu "Dang tai..." kho khan) - shimmer nhe, dung chung mau voi
   design system hien tai (khong doi mau/bo cuc, chi la trang thai cho tam thoi). */
.skeleton-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.skeleton-line{height:14px;border-radius:4px;margin-bottom:10px;background:linear-gradient(90deg,var(--line) 25%,rgba(255,255,255,.08) 50%,var(--line) 75%);background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;}
@keyframes skeletonShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.cta-banner{
  background:linear-gradient(135deg,var(--panel-2),var(--panel));border:1px solid var(--gold-dim);
  border-radius:var(--radius);padding:40px;text-align:center;
}
.cta-banner h2{font-size:26px;margin-bottom:10px;}
.cta-banner p{color:var(--muted);margin-bottom:22px;}

.link-manager-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;margin-bottom:10px;
}
.link-manager-row .info .broker{font-weight:600;font-size:14px;}
.link-manager-row .info .acc{font-size:12.5px;color:var(--muted);font-family:'JetBrains Mono';}

/* ===== Bo sung: trust badges, calculator, payout ticker, hover nang nhe ===== */
.broker-card{transition:.2s ease;}
.broker-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35);}

.btn-green{background:var(--green);color:#062018;}
.btn-green:hover{background:#45d69c;}

.trust-strip{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;
}
.trust-badge{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 14px;
}
.trust-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

.calc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.calc-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;}
.calc-row .field{flex:1;min-width:150px;margin-bottom:0;}
.calc-result{
  background:var(--panel-2);border:1px dashed var(--gold-dim);border-radius:8px;padding:18px;text-align:center;margin-top:6px;
}
.calc-result .amount{font-family:'JetBrains Mono';font-size:28px;color:var(--gold);font-weight:600;}
.calc-result .sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
.calc-tabs{display:flex;gap:8px;margin-bottom:18px;}
.calc-tab{padding:8px 16px;border-radius:8px;border:1px solid var(--line);color:var(--muted);cursor:pointer;font-size:13.5px;}
.calc-tab.active{background:var(--gold);color:#0B0F14;border-color:var(--gold);font-weight:600;}
/* filter-tabs cho card "Chon broker" - copy y het style .calc-tab (khong tao design moi),
   dung class rieng de KHONG bi trung voi handler JS cua tab Calculator (.calc-tab). */
.filter-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.filter-tab{padding:8px 16px;border-radius:8px;border:1px solid var(--line);color:var(--muted);cursor:pointer;font-size:13.5px;}
.filter-tab.active{background:var(--gold);color:#0B0F14;border-color:var(--gold);font-weight:600;}

.payout-ticker{display:flex;flex-direction:column;gap:8px;}
.payout-item{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 16px;font-size:13.5px;
}
.payout-item .name{color:var(--text);font-weight:600;}
.payout-item .amount{color:var(--green);font-family:'JetBrains Mono';font-weight:600;}
.payout-item .time{color:var(--muted);font-size:12px;}

.compare-table-wrap{overflow-x:auto;}
.compare-table-wrap table{min-width:600px;}

/* ===== Bo sung dot 2: sticky header, hero checklist, logo strip, so sanh truc tiep, footer day du ===== */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg);}

.hero-checklist{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;}
.hero-checklist .check-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);}
.hero-checklist .check-item .tick{color:var(--green);font-weight:700;}

.logo-strip-label{text-align:center;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.logo-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.logo-chip{
  padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--muted);font-weight:600;font-size:14px;
}

.vs-table td:nth-child(2){color:var(--red);}
.vs-table td:nth-child(3){color:var(--green);font-weight:600;}

.footer-full{border-top:1px solid var(--line);padding:36px 0 20px;}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:24px;}
@media(max-width:700px){.footer-cols{grid-template-columns:1fr;}}
.footer-cols h4{font-size:13.5px;margin-bottom:12px;color:var(--text);}
.footer-cols a{display:block;color:var(--muted);font-size:13.5px;margin-bottom:8px;}
.footer-cols a:hover{color:var(--gold);}
.footer-risk{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:20px;
}

/* Banner "Thong bao chung" do admin dien trong Cai dat > Noi dung (site_announcement) -
   chi hien khi admin co dien noi dung, dat ngay duoi topbar tren cac trang lien quan
   du lieu/tin hieu giao dich. */
.site-announcement{
  display:flex;gap:10px;align-items:flex-start;background:rgba(245,197,24,.08);
  border:1px solid var(--gold-dim,#8a6d1f);border-radius:8px;padding:12px 16px;
  font-size:13px;color:var(--text);line-height:1.6;margin:16px 0;
}
.site-announcement .icon{flex-shrink:0;font-size:15px;}

/* Khung chua widget TradingView (bieu do, lich kinh te...) - dung chung cho market-analysis.html
   va signals.html, tranh dinh nghia lap lai o tung trang. */
.tv-widget-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}

/* Toast nho goc man hinh, dung khi vi/luot dung tu cap nhat (polling) ma khong can F5 trang -
   xem showWalletUpdatedToast() trong dashboard.html/upgrade.html. */
.wallet-toast{
  position:fixed;bottom:22px;left:22px;z-index:999;background:var(--panel);border:1px solid var(--gold);
  border-radius:8px;padding:12px 16px;font-size:13px;color:var(--text);box-shadow:0 4px 18px rgba(0,0,0,.35);
  max-width:320px;animation:walletToastIn .25s ease-out;
}
@keyframes walletToastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ===== Chat widget tu dong ===== */
.chat-bubble{
  position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;
  background:var(--gold);color:#0B0F14;display:flex;align-items:center;justify-content:center;
  font-size:24px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:100;border:none;
}
.chat-panel{
  position:fixed;bottom:90px;right:22px;width:340px;max-width:calc(100vw - 40px);height:440px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:none;flex-direction:column;overflow:hidden;z-index:100;
}
.chat-panel.open{display:flex;}
.chat-header{
  background:var(--panel-2);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);font-weight:600;font-size:14px;
}
.chat-header .close-btn{cursor:pointer;color:var(--muted);font-size:18px;background:none;border:none;}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:85%;padding:8px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;}
.chat-msg.user{align-self:flex-end;background:var(--gold);color:#0B0F14;}
.chat-msg.bot{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);color:var(--text);}
.chat-msg.system{align-self:center;color:var(--muted);font-size:12px;text-align:center;}
.chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);}
.chat-input-row input{flex:1;font-size:13.5px;padding:9px 12px;}
.chat-input-row button{padding:9px 14px;}

/* ===== Widget noi Phong chat cong dong - dat NGAY TREN nut chat ho tro (chat-bubble), cung
   cot right:22px, de khach de nhan ra day la "1 loai chat khac" ngay ben canh nhau ===== */
.community-bubble{
  position:fixed;bottom:88px;right:22px;width:56px;height:56px;border-radius:50%;
  background:var(--panel);border:2px solid var(--gold);color:var(--gold);display:flex;
  align-items:center;justify-content:center;font-size:24px;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:100;
}
.community-unread-badge{
  position:absolute;top:-4px;right:-4px;background:#ff5c72;color:#fff;font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px;
}
.community-panel{
  position:fixed;bottom:156px;right:22px;width:340px;max-width:calc(100vw - 40px);height:440px;
  background:var(--panel);border:1px solid var(--gold-dim,#8a6d1f);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:none;flex-direction:column;overflow:hidden;z-index:100;
}
.community-panel.open{display:flex;}
.cwid-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.cwid-msg{display:flex;gap:8px;align-items:flex-start;}
.cwid-msg.me{flex-direction:row-reverse;}
.cwid-avatar{width:26px;height:26px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--gold);flex-shrink:0;}
.cwid-bubble{max-width:76%;}
.cwid-name{font-size:10.5px;color:var(--muted);margin-bottom:2px;}
.cwid-name .cwid-admin-tag{color:var(--gold);font-weight:700;}
.cwid-text{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:12.5px;line-height:1.45;word-break:break-word;white-space:pre-wrap;}
.cwid-msg.me .cwid-text{background:var(--gold);color:#0B0F14;border-color:var(--gold);}
.cwid-time{font-size:9.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;}
.cwid-msg.me .cwid-time{justify-content:flex-end;}
.cwid-del{background:none;border:none;color:var(--muted);font-size:10px;cursor:pointer;padding:0;}

/* ===== Noi dung bai blog (HTML tu do do admin nhap) ===== */
.blog-content{color:var(--text);font-size:15.5px;line-height:1.8;}
.blog-content h2{font-family:'Space Grotesk';font-size:22px;margin:28px 0 12px;color:var(--text);}
.blog-content h3{font-family:'Space Grotesk';font-size:18px;margin:22px 0 10px;color:var(--text);}
.blog-content p{margin:0 0 16px;}
.blog-content ul,.blog-content ol{margin:0 0 16px;padding-left:22px;}
.blog-content li{margin-bottom:6px;}
.blog-content a{color:var(--gold);text-decoration:underline;}
.blog-content img{max-width:100%;border-radius:8px;margin:16px 0;}
.blog-content blockquote{border-left:3px solid var(--gold-dim);padding-left:16px;color:var(--muted);margin:16px 0;}
.blog-content code{background:var(--panel-2);padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono';font-size:13px;}

/* ===== Nut chuyen ngon ngu ===== */
#langSwitcher{display:flex;gap:4px;border:1px solid var(--line);border-radius:8px;padding:3px;}
#langSwitcher button{
  background:none;border:none;color:var(--muted);font-size:12.5px;padding:5px 9px;border-radius:6px;cursor:pointer;
}
#langSwitcher button.active{background:var(--panel-2);color:var(--gold);font-weight:600;}

/* ===== Song ngu cho noi dung tinh (FAQ, phap ly, gioi thieu) ===== */
html[lang="vi"] .lang-en{display:none;}
html[lang="en"] .lang-vi{display:none;}

/* ===== Nut lien he noi (Telegram/Zalo) canh nut chat ===== */
.contact-bubble{
  position:fixed;bottom:22px;right:88px;width:56px;height:56px;border-radius:50%;
  background:var(--green);color:#062018;display:flex;align-items:center;justify-content:center;
  font-size:24px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:100;border:none;
}
.contact-panel{
  position:fixed;bottom:90px;right:88px;width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:none;flex-direction:column;overflow:hidden;z-index:100;
}
.contact-panel.open{display:flex;}
.contact-panel .contact-header{
  background:var(--panel-2);padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--line);
}
.contact-panel .contact-body{padding:12px;display:flex;flex-direction:column;gap:8px;}
.contact-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:13.5px;text-decoration:none;
}
.contact-link:hover{border-color:var(--gold);}

/* ===== Nut dang nhap Google ===== */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;color:#3c4043;border:1px solid #dadce0;font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:8px;text-decoration:none;
}
.btn-google:hover{background:#f8f9fa;}
.divider-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;margin:18px 0;}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:var(--line);}

/* ============================================================
   MOBILE STICKY CTA (Muc XIV CRO spec) - CHI HIEN TREN MOBILE.
   Dat cuoi file de dam bao cascade override dung cac gia tri bottom
   cua nut chat/goi/install/toast noi co san tren mobile, tranh de len
   nhau (khong doi gi ben tren, khong doi hanh vi tren desktop).
   ============================================================ */
.mobile-sticky-cta{display:none;}
@media(max-width:760px){
  .mobile-sticky-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(0,0,0,.35);
  }
  .mobile-sticky-cta .btn{flex:1;text-align:center;font-size:14.5px;padding:12px;}

  /* Day cac nut noi (chat/goi/cong dong/cai app/toast) len cao hon de KHONG bi thanh CTA nay
     che mat, va nguoc lai thanh CTA cung khong bi cac nut do de len. Xep dang luoi 2x2:
     hang duoi (bottom:78) = chat + lien he, hang tren (bottom:144) = cong dong + cai app. */
  .chat-bubble,.contact-bubble{bottom:78px;}
  .chat-panel,.contact-panel{bottom:146px;}
  .community-bubble{bottom:144px;right:22px;}
  .community-panel{bottom:212px;right:16px;}
  .install-fab{bottom:144px;right:88px;left:auto;}
  .wallet-toast{bottom:78px;}

  /* Chua them khoang trong cuoi trang tren mobile de thanh CTA khong de len noi dung/footer */
  body{padding-bottom:64px;}
}