/* ===== CAPY GOLD — LIGHT THEME (1:1 selectors) ===== */
:root{
  --bg:#f8fafc;            /* nền trang */
  --card:#ffffff;          /* nền thẻ/panel */
  --muted:#64748b;         /* text phụ */
  --text:#0f172a;          /* text chính */
  --accent:#f2c94c;        /* vàng điểm nhấn (giữ nguyên tông bạn đang dùng) */
  --up:#16a34a;
  --down:#dc2626;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: "Be Vietnam Pro",sans-serif;
  
  color:var(--text);
  background: #fff9f9;
  font-size: 15px;
}

.container{max-width:1200px;margin:0 auto;/*! padding:3px; */}

h1{
  color:var(--accent);
  letter-spacing:.5px;
  margin:0 0 12px;
}

/* Controls (date, button, pill) */
.controls{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;/*! margin-bottom:16px; */
  margin: 5px;
}
.controls input[type="date"]{
  appearance:none;-webkit-appearance:none;
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:var(--text);
  padding:10px 12px;border-radius:2px;font-weight:600;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
}
.controls input[type="date"]:focus{
  outline:none;
  border-color:#0ea5e9;
  box-shadow:0 0 0 4px rgba(14,165,233,.15);
}

.btn{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:var(--text);
  padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;
  transition:filter .15s ease, box-shadow .15s ease, transform .06s ease;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
}
.btn:hover{filter:brightness(1.02); box-shadow:0 4px 12px rgba(2,6,23,.08); transform:translateY(-1px);}

.pill{
  display:inline-block;padding:6px 10px;/*! border-radius:999px; */
  /*! background:#fff; */color:#687a92;font-size:13px;/*! border:1px solid #e2e8f0; */
  font-style: italic;
}

/* Grid */
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;padding: 5px;}
@media(max-width:980px){.grid{grid-template-columns:1fr;}}

/* Card */
.card{
  background:var(--card);
  /*! border:1px solid #e5e7eb; */
  border-radius:6px;
  padding:5px 0px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}

/* Header phải */
.right{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  padding: 7PX;
}

.badge{
  padding:3px 8px;border-radius:999px;
  background:#f8fafc;border:1px solid #e5e7eb;color:#334155
}

/* Table */
table{width:100%;border-collapse:separate;border-spacing:0 8px;/*! padding: 5px; */}
thead th{
  font-size:12px;text-transform:uppercase;color:#303236;text-align:left;padding:5px;
  border-bottom: 1px solid #eee;
}
tbody tr{
  /*! background:#ed1919; */
  border:10px solid #da1556 !important;
  border-radius:12px; /* hint radius với border-spacing */
  /*! box-shadow:0 2px 8px rgba(2,6,23,.04); */
}
tbody td{padding:5px 8px;border-bottom: 1px solid #eee;font-size: 14px;}

.brand{font-weight:600}
.delta{font-weight:600;font-size:14px;}
.delta.up{color:var(--up)}
.delta.down{color:var(--down)}

.legend{font-size:12px;color:var(--muted);margin-top:6px;PADDING: 5PX;}

/* Chart empty state */
#chartWrap{position:relative;min-height:320px}
#chartWrap.chart-empty::after{
  content: attr(data-empty);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#64748b;font-weight:600;background:rgba(255,255,255,.65);border-radius:12px
}
#chart { min-height:300px; }

/* Optional: hover row sáng nhẹ cho UX */
tbody tr:hover{background:#fbfdff;border-color:#e2e8f0}


/* new css update */

#brandSelect {
  background-color: #fff;
  border: 1px solid #000;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  height: 38px;
}
/* ==== LIGHT THEME OVERRIDE (CSS-only, drop-in) ==== */
/* Palette sáng */
:root{
  --bg:#f8fafc !important;
  --card:#ffffff !important;
  --muted:#64748b !important;
  --text:#0f172a !important;
  --accent:#f2c94c !important;
  --up:#16a34a !important;
  --down:#dc2626 !important;
}

/* Nền & chữ chung */
body{
  background:var(--bg) !important;
  color:var(--text) !important;
}

/* Container, tiêu đề */
.container{ /* giữ layout */ }
h1{ color:var(--accent) !important; }

/* Thanh điều khiển */
.controls input[type="date"]{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
}
.controls input[type="date"]:focus{
  outline:none; border-color:#0ea5e9 !important;
  box-shadow:0 0 0 4px rgba(14,165,233,.15);
}

.btn{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  color:var(--text) !important;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
}
.btn:hover{ filter:brightness(1.02) !important; }

/* Nhãn nhỏ */
.pill{
  /*! background:#f1f5f9 !important; */
  color:#334155 !important;
  /*! border:1px solid #e2e8f0 !important; */
}

/* Lưới & thẻ */
.card{
  background:var(--card) !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 8px 24px rgba(2,6,23,.06) !important;
}
.badge{
  background:#f8fafc !important;
  border:1px solid #e5e7eb !important;
  color:#334155 !important;
}

/* Bảng */
table{ border-collapse:separate; border-spacing:0 8px; width:100%; }
thead th{
  color:#64748b !important;
}
tbody tr{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  /*! box-shadow:0 2px 8px rgba(2,6,23,.04); */
}
tbody tr:hover{
  background:#fbfdff !important;
  border-color:#e2e8f0 !important;
}
tbody td{ color:var(--text) !important; }
.brand{ font-weight:600; }
.delta{ font-weight:600; font-size:13px; }
.delta.up{ color:var(--up) !important; }
.delta.down{ color:var(--down) !important; }
.legend{ color:var(--muted) !important; }

/* Chart container (chỉ làm nền & bo góc cho đẹp) */
#chartWrap{
  background:var(--card) !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
}
#chartWrap.chart-empty::after{
  color:#64748b !important;
  background:rgba(255,255,255,.65) !important;
}
#chart{ 
  min-height:300px; 
  background:var(--card) !important; 
  border-radius:12px !important; 
}

/* Scrollbar sáng (tuỳ chọn) */
::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
::-webkit-scrollbar-track{ background:#eef2f7; }
/* ---- ApexCharts light overrides (CSS-only) ---- */

/* 1) Chữ legend & nhãn trục đậm, rõ */
.apexcharts-legend-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text{
  fill:#111827 !important;   /* gần như đen */
  color:#111827 !important;
  opacity:1 !important;
}

/* 2) Vạch lưới đậm hơn */
.apexcharts-gridline line{
  stroke:#111827 !important;
}

/* 3) Đổi màu series
   series-0 = Mua vào (xanh lá đậm), series-1 = Bán ra (đỏ) */
.apexcharts-series.apexcharts-series-0 path,
.apexcharts-series.apexcharts-series-0 .apexcharts-marker{
  stroke:#15803d !important;   /* xanh lá đậm */
  fill:#15803d !important;
}

.apexcharts-series.apexcharts-series-1 path,
.apexcharts-series.apexcharts-series-1 .apexcharts-marker{
  stroke:#dc2626 !important;   /* đỏ */
  fill:#dc2626 !important;
}

/* 4) Marker ở legend khớp màu */
.apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker{
  background:#15803d !important; border-color:#15803d !important;
}
.apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker{
  background:#dc2626 !important; border-color:#dc2626 !important;
}
.head {
  width: 100%;
  background-color: #123c4b !important;
  color: #fff;
}
.menu {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.menu ul {
  margin: 0 !important;
  padding: 0px;
}
.menu ul li.active {
  color: #fff;
  background-color: #118396;
}
.menu ul li {
  float: left;
  list-style-type: none;
  text-transform: uppercase;
  font-size: 16px;
}
.menu ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: block;
  font-size: 14px;
}
.site-logo {
    width: 1200px;
    margin: 0 auto;
}
.site-logo img {
   width: 130px;
    /* height: 30px; */
    margin-left: 5px;
    margin-top: 5px;
}
svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-11rav32 {
    transition: transform 0.2s linear, background-color 0.3s linear;
    font-size: 4.5rem;
    padding: 8px;
    box-shadow: 0 0 4px rgb(240 92 34 / 44%);
    border-radius: 100%;
    background-color: #fff;
    font-size: 1.5em !important;
    width: 30px;
    height: 30px;
    margin-bottom: -7px;
    margin-right: 10px;
}
a.come-home {
    color: #000;
    text-decoration: none;
    display: block;
    float: right;
    /* line-height: 120px; */
    margin-top: 13px;
    margin-right: 5px;
}
@media only screen and (max-width: 768px) {
    .menu,
    .site-logo
     {
      width: 100%;
    }
}