/* ============================================================
   Lop tinh chinh tham my — nap SAU styles.css nen ghi de duoc.
   Tach rieng de khong dung do khi nhieu nguoi cung sua styles.css.

   Bon viec:
     1. Chu va chu so   — Inter Variable tu host + thang co chu
     2. Be mat song     — aurora troi, cung dong ho gradient
     3. Chat lieu       — 3 tang do noi, bo goc dong tam, bong 2 lop
     4. Chi tiet nho    — net icon dong nhat, nhan nho ro hon
   ============================================================ */

/* ══ 1. CHU VA CHU SO ═════════════════════════════════════ */

@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;

  /* zero: so 0 gach cheo — de phan biet voi chu O trong bang gia
     cv05: chu l co duoi, do lan voi so 1 */
  font-feature-settings: "zero" 1, "cv05" 1;
  font-optical-sizing: auto;

  /* Thang co chu theo ti le ~1.22, thay vi 12 co roi rac.
     Moi buoc co tracking rieng: co cang lon, chu cang phai siet lai. */
  --fs-2xs: 9.5px;
  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-base: 12.5px;
  --fs-md: 14px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --fs-hero: 38px;

  --tr-tight: -0.03em;
  --tr-snug: -0.018em;
  --tr-flat: 0;
  --tr-wide: 0.04em;
  --tr-wider: 0.07em;
}

/* So lieu lon: chu so ti le tu nhien (KHONG tabular — tabular lam
   so kieu 121 trong long lex o co chu lon) */
.hero-figure,
.gauge-center strong,
.vs-side b,
.pnl-val,
.perf-card b {
  font-variant-numeric: proportional-nums;
  font-feature-settings: "zero" 1;
}

/* So trong bang / cot phai thang hang -> tabular */
td, th,
.strip-cell b,
.plan-grid dd,
.pos-legs b,
.pos-size b,
.hist-row time, .hist-row .hp,
.perf-trade .meta, .perf-trade .r,
.pnl-meta b, .pnl-sub,
.ticker-sub b,
.bucket-top b {
  font-variant-numeric: tabular-nums;
}

.hero-figure {
  font-size: var(--fs-hero);
  font-weight: 620;
  letter-spacing: var(--tr-tight);
  line-height: 1;
}

.gauge-center strong {
  font-size: var(--fs-2xl);
  font-weight: 640;
  letter-spacing: var(--tr-tight);
}
.gauge-center small { font-size: var(--fs-sm); letter-spacing: var(--tr-flat); }

.vs-side b { font-size: 24px; font-weight: 620; letter-spacing: var(--tr-snug); }
.pnl-val { font-size: 30px; font-weight: 640; letter-spacing: var(--tr-tight); }

.side-head { font-size: var(--fs-xl); font-weight: 640; letter-spacing: var(--tr-snug); }
.card-head h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tr-flat); }
.pair-text strong { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tr-flat); }

#verdictReason,
.pos-action,
.msg { font-size: var(--fs-base); line-height: 1.6; }

/* Nhan nho: chu HOA nho thi phai gian ky tu, neu khong se dinh cuc */
.perp-tag,
.badge,
.vs-tag,
.seg-btn,
.rail-mark span { letter-spacing: var(--tr-wider); }

/* Nhan phu truoc day hoi bac mau — nang mot bac va gian nhe */
.strip-cell span,
.plan-grid dt,
.pos-legs span,
.pos-size span,
.perf-card span,
.fields label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: #7c88a0;
  font-weight: 550;
}

.hint, .bucket-why { font-size: var(--fs-sm); line-height: 1.6; }

/* ══ 2. BE MAT SONG ═══════════════════════════════════════ */

/* Aurora troi rat cham. Kinh chi ra chat kinh khi co gi do chuyen
   dong phia sau no. 90s/vong, bien do nho — de y moi thay. */
.phone::before {
  animation: aurora-drift 90s ease-in-out infinite alternate;
  transform-origin: 50% 20%;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  66%  { transform: translate3d(2%, -1%, 0) scale(1.03); }
  100% { transform: translate3d(1%, 2%, 0) scale(1.07); }
}

/* Cung dong ho: gradient that (defs do polish.js chen vao SVG). */
.gauge-fill.ready { stroke: url(#gg-ready); }
.gauge-fill.watch { stroke: url(#gg-watch); }
.gauge-fill.none { stroke: url(#gg-none); }

/* Vach chia nho quanh cung — polish.js ve */
.gauge-scale line { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-linecap: round; }
.gauge-scale line.major { stroke: rgba(255, 255, 255, 0.3); }

/* Khi du dieu kien vao lenh, the ket luan "tho" rat nhe */
.verdict[data-state="ready"] { animation: breathe 4.5s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { box-shadow: var(--edge), var(--lift-2), 0 0 40px -20px rgba(74, 222, 128, 0.7); }
  50%      { box-shadow: var(--edge), var(--lift-2), 0 0 58px -18px rgba(74, 222, 128, 0.95); }
}

/* The vao man hinh so le nhau — mat doc tu tren xuong thay vi
   tat ca bat ra cung luc */
.tab-panel.is-active > * { animation: rise 0.44s var(--ease) backwards; }
.tab-panel.is-active > *:nth-child(1) { animation-delay: 0.02s; }
.tab-panel.is-active > *:nth-child(2) { animation-delay: 0.06s; }
.tab-panel.is-active > *:nth-child(3) { animation-delay: 0.1s; }
.tab-panel.is-active > *:nth-child(4) { animation-delay: 0.14s; }
.tab-panel.is-active > *:nth-child(5) { animation-delay: 0.18s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ══ 3. CHAT LIEU VA CHIEU SAU ════════════════════════════ */

:root {
  /* Bo goc dong tam: ban kinh trong = ban kinh ngoai - dem.
     22 - 14 = 8. Sai quy tac nay thi goc nhin "lech" kho goi ten. */
  --r-card: 22px;
  --pad-card: 14px;
  --r-inner: 8px;

  /* Bong 2 lop: bong tiep xuc gan (sac, mo) + bong moi truong xa
     (rong, rat mo). Mot lop duy nhat luon trong nhu sticker. */
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 22px -14px rgba(0, 0, 0, 0.85);
  --lift-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 22px 44px -20px rgba(0, 0, 0, 0.95);

  /* Nguon sang nhat quan tu TREN-TRAI: sang o canh tren va canh trai,
     toi o canh duoi. */
  --edge: inset 1px 1px 0 rgba(255, 255, 255, 0.13),
    inset -1px -1px 0 rgba(0, 0, 0, 0.32);
}

/* — Tang 2 (mac dinh): the thuong — */
.card {
  padding: var(--pad-card);
  border-radius: var(--r-card);
  box-shadow: var(--edge), var(--lift-1);
}

/* — Tang 1 (cao nhat): the ket luan va the vi the — chi 2 cai — */
.verdict,
.pos-card {
  box-shadow: var(--edge), var(--lift-2);
}

/* — Tang 3 (lom vao): o con ben trong the — */
.strip-cell,
.plan-grid > div,
.pos-legs div,
.pos-size div,
.perf-card,
.pos-action,
.alert,
.hist-row,
.perf-trade,
.msg.agent {
  border-radius: var(--r-inner);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.vs-side { border-radius: calc(var(--r-card) - var(--pad-card) + 4px); }

.strip { border-radius: calc(var(--r-card) - 6px); box-shadow: var(--edge), var(--lift-1); }

/* Nut giu bo goc hai hoa voi o nhap canh no */
.cta { border-radius: var(--r-inner); }
input, .seg, .seg-btn, .chat-form button { border-radius: var(--r-inner); }
.seg-btn { border-radius: calc(var(--r-inner) - 3px); }

/* Bong duoi nut theo dung nguon sang: quang mau o duoi, khong toa deu */
.cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 14px 26px -14px rgba(77, 225, 255, 0.85);
}
.cta.long {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 26px -14px rgba(74, 222, 128, 0.9);
}
.cta.short {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 26px -14px rgba(255, 92, 122, 0.9);
}
.cta:disabled { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }

/* ══ 4. CHI TIET NHO ══════════════════════════════════════ */

/* Net icon dong nhat toan app: 1.75px, dau tron, noi tron */
.icon-btn svg,
.tab svg,
.ptr svg {
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* icon vi the la khoi dac nen khong co net */
.tab[data-tab="position"] svg { stroke: none; }

/* Thanh diem: them mot vach sang mong o dau du lieu, giong mep chat long */
.bucket-fill::after,
.vs-bar i::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}
.bucket-fill, .vs-bar i { position: relative; overflow: hidden; }
/* diem 0 thi khong co "dau du lieu" de ma sang */
.bucket-fill.is-empty::after { display: none; }

/* #stopBtn la anh em ruot cua #posBody trong .pos-card. `.card` la block
   thuong (khong phai grid) nen giua hai the nay khong co khoang cach nao —
   nut bi dinh sat hang ENTRY/SL/TP. Tra lai dung nhip cua the. */
.pos-card > .cta { margin-top: var(--pad-card); }

/* Trang thai rong: nhe nhang hon, bot nang ne */
.empty-art { fill: rgba(255, 255, 255, 0.06); }
.pos-empty p { font-size: var(--fs-base); }

/* Vien duoi cung cua the co mot vet sang cuc mong — bat sang moi truong */
.card::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .phone::before,
  .verdict[data-state="ready"],
  .tab-panel.is-active > * { animation: none; }
}