/* t247.css - trader247 additions on top of the ported desk look (base.css -> desk.css -> this file).
   Same visual language: --b-* / --tk tokens, Bahnschrift HUD labels, Cascadia Mono numbers, corner-cut panels.
   Sections: top bar extras, backtest tab, nav menu, bands, page layout (non-desk pages), login / error, desk
   placeholders, phone layout (< 768 px), reduced motion. */

/* ================================================================ TOP BAR EXTRAS */
header#A.b2-bar #brand { text-decoration: none; }
header#A.b2-bar #brand b { color: #cfeeff; }
header#A.b2-bar #brand span { color: var(--b-cyan2); }
.t247-sym { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; border-left: 1px solid rgba(70, 185, 255, .12); }
.t247-sym button { height: 24px; padding: 0 8px; border: 1px solid transparent !important; border-radius: 3px; color: var(--b-chu3) !important;
  font: 600 12px/22px var(--f-hud) !important; font-stretch: 87.5%; letter-spacing: .08em; }
.t247-sym button:hover { color: var(--b-chu) !important; border-color: rgba(95, 211, 255, .35) !important; }
.t247-sym button[aria-pressed="true"] { color: #fff !important; background: linear-gradient(180deg, rgba(41, 182, 255, .2), rgba(41, 182, 255, .06)) !important;
  border-color: rgba(95, 211, 255, .5) !important; box-shadow: inset 0 -2px 0 var(--b-cyan), 0 0 10px -4px rgba(41, 182, 255, .8); }
.b2-gia .so.n { font-family: var(--f-so); }
.b2-gia .ma { min-width: 56px; }
.t247-co { display: inline-flex; align-items: center; gap: 6px; }
.t247-chip { height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 3px; white-space: nowrap;
  font: 600 11px/1 var(--f-hud); font-stretch: 87.5%; letter-spacing: .1em; border: 1px solid rgba(95, 211, 255, .35); color: #cfeeff; background: rgba(41, 182, 255, .06); }
.t247-chip[hidden] { display: none; }
.t247-chip.mode-paper { color: var(--tk-thu); border-color: rgba(169, 139, 255, .55); background: rgba(169, 139, 255, .1); }
.t247-chip.mode-live { color: var(--tk-that); border-color: rgba(34, 214, 140, .6); background: rgba(34, 214, 140, .1); }
.t247-chip.armed { color: #04140c; background: var(--tk-that); border-color: var(--tk-that); box-shadow: 0 0 12px -2px var(--tk-that-q); }
.t247-chip.kill { color: #fff; background: rgba(248, 81, 73, .3); border-color: var(--b-dung); box-shadow: 0 0 10px -2px var(--b-dung); animation: b2-nhip 1.1s ease-in-out infinite; }
.t247-chip.pause, .t247-chip.maint { color: #ffe2a0; border-color: rgba(227, 179, 65, .7); background: rgba(227, 179, 65, .14); }
.b2-he .dot.tat { background: var(--b-chu4); box-shadow: none; }
.b2-he .dot.tre { background: var(--b-canh); box-shadow: 0 0 6px var(--b-canh); }
header#A.b2-bar #clock { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
#clock #clockTz { color: var(--b-chu3); }
.t247-thu-nut { display: none; }
header#A.b2-bar #navNut { padding: 0 6px 0 12px; margin-left: 4px; }
#navNut[aria-expanded="true"] svg { stroke: var(--b-cyan2); }

/* ================================================================ BACKTEST TAB ('bt', docs/CONTRACTS.md C4)
   Third account tab BACKTEST · KHUNG BÉ: its own gold accent (the source desk's third tab colour) through the same
   --tk tokens, so every money panel, chip and the top-bar line turn gold while it is selected. Simulated money only:
   the MT5 live-state chip hides like on PAPER. */
:root { --tk-bt: #f0b90b; --tk-bt-q: rgba(240, 185, 11, .5); --tk-bt-n: #2a1f06; }
html[data-tk="bt"] { --tk: var(--tk-bt); --tk-q: var(--tk-bt-q); --tk-n: var(--tk-bt-n); }
#tabBt { --c: var(--tk-bt); --cq: var(--tk-bt-q); --cn: var(--tk-bt-n); min-width: 196px; justify-content: center; }
html[data-tk="bt"] header#A.b2-bar .b2-tt { display: none; }
@media (max-width: 1599px), (max-height: 859px) {
  #tabBt { min-width: 112px; }
  #tabBt .dai { display: none; } #tabBt .ngan { display: inline; }
}

/* ================================================================ NAV MENU (popover in the .b2-the card look) */
#popNav { top: calc(var(--h-bar) + 6px); right: 8px; width: 280px; padding: 0 0 8px; }
#popNav nav { display: grid; gap: 2px; padding: 8px 8px 0; }
#popNav a, #popNav button.muc { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 1px solid transparent; background: transparent;
  color: var(--b-chu2); text-decoration: none; cursor: pointer; text-align: left; font: 600 12px/1 var(--f-hud); letter-spacing: .08em; text-transform: uppercase; width: 100%; }
#popNav a:hover, #popNav button.muc:hover { border-color: rgba(95, 211, 255, .35); color: #fff; }
#popNav a[aria-current="page"] { color: #fff; border-color: rgba(95, 211, 255, .5); background: rgba(41, 182, 255, .1); box-shadow: inset 2px 0 0 var(--b-cyan); }
#popNav a i { width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--b-cyan2); opacity: .6; flex: none; }
#popNav a[aria-current="page"] i { background: var(--b-cyan2); opacity: 1; }
#popNav form { margin: 6px 8px 0; padding-top: 6px; border-top: 1px solid rgba(70, 185, 255, .12); }
#popNav .gioi { padding: 8px 18px 0; font: 11px/1.45 var(--f-ui); color: var(--b-chu3); }

/* ================================================================ BANDS */
.desk.b2a #bands { display: grid; gap: 4px; }
.desk.b2a #bands:empty, .desk.b2a #bandsJs:empty { display: none; }
.desk.b2a > #bands:has(> #bandsJs:empty:only-child) { margin-bottom: 0; }
#bandsJs { display: grid; gap: 4px; }
.band { display: flex; align-items: center; gap: 12px; }
.band a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.band .b-chu { flex: 1 1 auto; min-width: 0; }
.band.demo { background: repeating-linear-gradient(135deg, rgba(255, 138, 31, .2) 0 10px, rgba(255, 138, 31, .07) 10px 20px); color: #ffd2a6;
  border: 1px solid var(--tk-mp); font-size: 13px; }
.band.demo b { color: #fff; }
.band.info { background: rgba(41, 182, 255, .08); color: #cfeeff; border: 1px solid rgba(95, 211, 255, .45); }

/* ================================================================ PAGE LAYOUT (every page except the desk) */
body.page { overflow: auto; }
.desk.b2a.page { height: auto; min-height: 100vh; overflow: visible; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--h-bar) + 8px) auto minmax(0, 1fr); }
.desk.b2a.page > header#A { grid-row: 1; }
.desk.b2a.page > #bands { grid-row: 2; }
.desk.b2a.page > .trang { grid-row: 3; grid-column: 1 / -1; }
.trang { display: grid; gap: 8px; align-content: start; width: 100%; max-width: 1600px; margin: 0 auto; padding-bottom: 16px; }
.trang-dau { display: flex; align-items: baseline; gap: 12px; padding: 4px 4px 0; }
.trang-dau h1 { margin: 0; font: 600 18px/1.2 var(--f-hud); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: #cfeeff; text-shadow: 0 0 10px rgba(41, 182, 255, .55); }
.trang-dau p { margin: 0; color: var(--b-chu3); font-size: 12px; }
.luoi { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.o > .than { flex: 1 1 auto; min-height: 0; }
.o .than.dem { padding: 12px var(--pad) 14px 20px; }
.o .than.dem p { margin: 0 0 8px; color: var(--b-chu2); line-height: 1.5; }
.t247-cho { padding: 14px 16px 14px 20px; }
.t247-cho .mo-na { display: block; }
.t247-cho small { display: block; margin-top: 6px; font: 12px/1.4 var(--f-ui); color: var(--b-chu3); text-transform: none; letter-spacing: 0; }

/* ================================================================ LOGIN / ERROR (bare layout) */
body.bare { overflow: auto; display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.hop { width: min(440px, 100%); }
.hop .o { min-height: 0; }
.hop .logo { display: flex; align-items: center; gap: 10px; padding: 18px 20px 4px; font: 700 15px/1 var(--f-hud); font-stretch: 87.5%; letter-spacing: .14em; color: #cfeeff;
  text-shadow: 0 0 8px rgba(41, 182, 255, .7); }
.hop .logo::before { content: ''; width: 13px; height: 13px; transform: rotate(45deg); border: 1.5px solid var(--b-cyan2); box-shadow: 0 0 8px rgba(41, 182, 255, .8), inset 0 0 0 3px #071326, inset 0 0 0 6px rgba(95, 211, 255, .85); }
.hop .logo span { color: var(--b-cyan2); }
.hop form { display: grid; gap: 10px; padding: 12px 20px 20px; }
.hop label { font: 600 11px/1 var(--f-hud); letter-spacing: .1em; color: var(--b-chu3); text-transform: uppercase; }
.hop input[type="password"] { height: 36px; padding: 0 10px; font: 14px/1 var(--f-ui); background: rgba(2, 6, 14, .8); color: var(--b-chu); border: 1px solid rgba(95, 211, 255, .35); border-radius: 3px; }
.hop input[type="password"]:focus { outline: none; border-color: var(--b-cyan2); box-shadow: 0 0 0 1px var(--b-cyan2), 0 0 12px -4px rgba(41, 182, 255, .9); }
.nut-chinh { height: 36px; padding: 0 18px; border: 1px solid var(--b-cyan2); background: linear-gradient(180deg, rgba(41, 182, 255, .26), rgba(41, 182, 255, .08)); color: #fff; cursor: pointer;
  font: 600 13px/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.nut-chinh:hover { background: linear-gradient(180deg, rgba(41, 182, 255, .4), rgba(41, 182, 255, .12)); }
.nut-chinh:focus-visible { outline: 1px dashed var(--b-cyan2); outline-offset: 3px; }
.loi-dong { padding: 8px 10px; border-left: 2px solid var(--b-dung); background: rgba(248, 81, 73, .12); color: #ffb3ae; font: 600 12px/1.4 var(--f-ui); }
.ghi-dong { padding: 8px 10px; border-left: 2px solid var(--b-canh); background: rgba(227, 179, 65, .1); color: #ffe2a0; font: 12px/1.4 var(--f-ui); }
.hop .chan { padding: 0 20px 16px; font: 11px/1.4 var(--f-ui); color: var(--b-chu3); }
.hop .chan a { color: var(--b-cyan2); }
.ma-loi { font: 600 44px/1 var(--f-so); color: #f2f8ff; text-shadow: 0 0 14px rgba(120, 200, 255, .35); padding: 18px 20px 0; }

/* ================================================================ DESK PLACEHOLDERS (filled by the desk step) */
/* RSI pane height: the source sets 200 / 168 / 136 px from JS; until the desk script does, CSS gives the same steps */
.desk.b2a #rsiBox { flex: 0 0 var(--h-rsi, 200px); }
@media (max-width: 1599px), (max-height: 859px) { .desk.b2a #rsiBox { flex-basis: var(--h-rsi, 168px); } }
@media (max-height: 760px) { .desk.b2a #rsiBox { flex-basis: var(--h-rsi, 136px); } }
#C .cho-bieu-do { display: grid; place-items: center; height: 100%; color: var(--b-chu3); font: 600 12px/1.4 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; }
#sim .t247-cho { height: 100%; display: grid; place-items: center; }

/* ================================================================ TOP BAR FIT (>= 768 px): never wider than the screen
   The bar holds more than the source's (symbol switch, ≡ NK): up to about 1800 px at full size. Below 1920 px it is
   compacted so it stays one row down to 1280 px; whatever still does not fit (narrower screens, extra KILL / TẠM DỪNG /
   LIVE_ARMED chips) wraps to a second row instead of pushing the page menu off screen or widening the one-column desk
   grid (< 1280 px). The first grid row follows the bar's height. */
@media (min-width: 768px) {
  .desk.b2a > header#A { height: auto; min-height: var(--h-bar); margin-bottom: 8px; }
  header#A.b2-bar { flex-wrap: wrap; row-gap: 0; min-width: 0; }
  .desk.b2a.page { grid-template-rows: auto auto minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .desk.b2a, .desk.b2a.co-sim { grid-template-rows: auto auto minmax(0, 1fr) calc(var(--sim-h, 288px) + 8px); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .desk.b2a, .desk.b2a.co-sim { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1919px) {
  header#A.b2-bar { gap: 6px; padding: 0 8px 0 6px; }
  #tabThu, #tabMt5, #tabBt { min-width: 112px; }
  #tabBt .dai { display: none; } #tabBt .ngan { display: inline; }
  header#A.b2-bar .t247-sym { padding: 0 6px; }
  header#A.b2-bar .t247-sym button { padding: 0 6px; }
  header#A.b2-bar .b2-gia, header#A.b2-bar .b2-tt { min-width: 0; }
  header#A.b2-bar .b2-he .nh { display: none; }
  header#A.b2-bar #b2Agent { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  header#A.b2-bar #b2AgentTxt { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header#A.b2-bar #clock { gap: 6px; padding-left: 8px; font-size: 12px; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  #tabThu, #tabMt5, #tabBt { min-width: 100px; }
  header#A.b2-bar #b2AgentTxt { max-width: 80px; }
}

/* ================================================================ PHONE (< 768 px): one column, collapsible top bar */
@media (max-width: 767px) {
  body { font-size: 13px; }
  .desk.b2a, .desk.b2a.co-sim, .desk.b2a.page { padding: 0 6px 6px; gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; overflow: visible; }
  .desk.b2a > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .desk.b2a > header#A { margin: 0 -6px 6px; }
  header#A.b2-bar { height: auto !important; min-height: var(--h-bar); flex-wrap: wrap; row-gap: 0; padding: 4px 6px; }
  header#A.b2-bar > * { flex: 0 0 auto; }
  header#A.b2-bar #brand { width: 32px; padding: 0 2px; }
  header#A.b2-bar #brand b, header#A.b2-bar #brand i, header#A.b2-bar #brand span { display: none; }
  .b2-tabs { height: 36px; }
  #tabThu, #tabMt5, #tabBt { min-width: 0; padding: 0 10px; font-size: 12px !important; }
  #tabThu .dai, #tabBt .dai { display: none; } #tabThu .ngan, #tabBt .ngan { display: inline; }
  .t247-thu-nut { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; margin-left: auto; border: 1px solid rgba(95, 211, 255, .3) !important; border-radius: 3px;
    font: 600 11px/1 var(--f-hud) !important; letter-spacing: .1em; color: var(--b-chu2) !important; }
  .t247-thu-nut[aria-expanded="true"] { color: #fff !important; border-color: var(--b-cyan2) !important; }
  header#A.b2-bar > .sp { display: none; }
  header#A.b2-bar:not(.mo) .t247-gon { display: none !important; }
  header#A.b2-bar .t247-sym, header#A.b2-bar .b2-gia { order: 10; flex: 1 1 100%; min-width: 0; border-left: 0; padding: 0; height: 34px; }
  header#A.b2-bar .t247-sym { order: 11; }
  header#A.b2-bar .t247-sym button { flex: 1 1 0; }
  header#A.b2-bar.mo .t247-gon { order: 12; border-left: 0; padding: 0 6px 0 0; height: 30px; }
  header#A.b2-bar #clock { order: 13; padding-left: 0; border-left: 0; }
  #popNav { position: fixed; top: 52px; left: 8px; right: 8px; width: auto; }
  .desk.b2a > #L, .desk.b2a > #R { display: grid; grid-template-rows: none !important; grid-auto-rows: auto; gap: 8px; margin-bottom: 8px; }
  .desk.b2a > #L > .o, .desk.b2a > #R > .o { min-height: 180px; }
  /* SỔ LỆNH scrolls inside a bounded box (hundreds of trades must not make the page thousands of px long);
     ĐƯỜNG VỐN gets a fixed height so its curve stays readable */
  .desk.b2a > #L > #oSo { max-height: 55vh; }
  .desk.b2a > #R > #oVon { height: 260px; }
  .desk.b2a > #R > #oVon .von-khung { min-height: 140px; }
  .desk.b2a > #R > #oNK { display: flex !important; }
  .desk.b2a > #C { height: max(360px, 62vh); margin-bottom: 8px; }
  /* the chart comes right after the bands on a phone; money wings and the flow row follow */
  .desk.b2a > header#A { order: -3; } .desk.b2a > #bands { order: -2; } .desk.b2a > #C { order: -1; }
  .desk.b2a.co-sim > #sim { height: auto; min-height: 220px; }
  .band { flex-wrap: wrap; font-size: 12px !important; padding: 6px 10px !important; }
  .trang-dau { flex-wrap: wrap; }
  .luoi { grid-template-columns: minmax(0, 1fr); }
  .b2-the { max-width: calc(100vw - 16px); }
}

/* ================================================================ REDUCED MOTION (the user's PC froze under load before) */
@media (prefers-reduced-motion: reduce) {
  .t247-chip, .band, header#A.b2-bar *, .b2-cham { animation: none !important; transition: none !important; }
}
html.t247-an * { animation-play-state: paused !important; }