/* limit.trade - trang Bang tin (sau dang nhap). Dung chung token / .brand / .skip-link tu styles.css */
.app-body {
  --a-bg: #F2F0EB;
  --a-panel: #FAFAF8;
  --a-line: #E8E6E1;
  --a-ink: #1A1A1A;
  --a-text: #6B6B6B;
  --a-muted: #9E9E9E;
  --a-up: #059669;
  --a-down: #DC2626;
  --a-chip: #F5F4F1;
  --a-top: 64px;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  background: var(--a-bg);
  color: var(--a-ink);
  font-size: 14px;
}
/* An trang cho toi khi xac nhan da dang nhap (tranh nhay noi dung truoc khi chuyen ve trang dang nhap) */
.is-checking .app-shell { visibility: hidden; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.chg { font-size: 11px; }
.chg--up { color: var(--a-up); }
.chg--down { color: var(--a-down); }
.chg--flat, .muted { color: var(--a-muted); }
.muted-xs { font-size: 11px; color: var(--a-muted); }
.muted-sm { font-size: 12px; color: var(--a-muted); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pair { display: inline-flex; align-items: baseline; gap: 6px; }
button { font: inherit; }

/* ---------- Thanh tren ---------- */
.topbar {
  position: sticky; top: 0; z-index: 950;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--a-top); padding: 0 24px; background: #fff; border-bottom: 1px solid var(--a-line);
}
.topbar__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--a-ink); }
.topbar__brand .brand__mark { width: 36px; height: 36px; border-radius: 10px; }
.topbar__brand .brand__name { font-size: 20px; }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav__item {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 100px;
  font-size: 14px; color: var(--a-text); white-space: nowrap;
}
.topnav__item .icon { width: 18px; height: 18px; }
.topnav__item.is-active { background: #EFF6FF; color: var(--blue); font-weight: 500; }
.is-soon { cursor: default; }
.topnav__item.is-soon:hover { background: var(--a-chip); }
.topbar__tools { display: flex; align-items: center; gap: 8px; }
.tool {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--a-chip); color: var(--a-ink);
}
.tool .icon { width: 20px; height: 20px; }
.tool__badge {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 100px; background: var(--a-down); color: #fff; font: 600 10px/1 var(--font-mono);
}
.usermenu { position: relative; }
.usermenu__btn { padding: 0; border: 0; border-radius: 50%; background: none; }
.uavatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase;
}
.usermenu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 240px; padding: 6px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(26, 26, 26, .12);
}
.usermenu__who { display: grid; gap: 2px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--a-line); }
.usermenu__who strong { font-size: 14px; overflow-wrap: anywhere; }
.usermenu__who span { font-size: 12px; color: var(--a-muted); overflow-wrap: anywhere; }
.usermenu__panel a, .usermenu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; font-size: 14px; color: var(--a-ink); text-align: left;
}
.usermenu__panel .icon { width: 16px; height: 16px; color: var(--a-text); }
.usermenu__panel a:hover, .usermenu__panel button:hover { background: var(--a-chip); }
.usermenu__panel [data-logout] { color: var(--a-down); }
.usermenu__panel [data-logout] .icon { color: inherit; }

/* ---------- Bo cuc 3 cot ---------- */
.app {
  display: grid; grid-template-columns: 370px minmax(0, 1fr) 370px; grid-template-areas: "left feed right";
  align-items: start; max-width: 1600px; margin: 0 auto;
}
.side {
  position: sticky; top: var(--a-top); display: flex; flex-direction: column;
  height: calc(100vh - var(--a-top)); height: calc(100dvh - var(--a-top)); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s;
}
/* Thanh cuon chi hien khi di chuot vao (hoac dang dung ban phim trong cot) */
.side:hover, .side:focus-within { scrollbar-color: var(--a-line) transparent; }
.side--left { grid-area: left; gap: 12px; padding: 32px 24px; }
.side--right { grid-area: right; gap: 16px; padding: 24px 16px; }

/* ---------- Khoi o cot trai ---------- */
.box {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 10px;
}
.box__title { font-size: 13px; font-weight: 600; }
.box .label { font-size: 12px; color: var(--a-text); }
.box .val { font-size: 12px; }
.portfolio__total { font-size: 26px; font-weight: 600; line-height: 1.2; }
.alloc { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.sym { font-size: 12px; font-weight: 600; }
.sym .num { font-weight: 400; }

.converter .cv-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 6px;
}
.converter .cv-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.converter input, .converter output {
  flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; outline: 0; background: none; font-size: 14px; line-height: 38px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-cur { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.cv-cur select {
  appearance: none; -webkit-appearance: none; padding: 4px 16px 4px 0; margin-right: -14px; border: 0; background: none;
  font: inherit; color: var(--a-ink); cursor: pointer;
}
.cv-cur .icon { width: 13px; height: 13px; color: var(--a-muted); pointer-events: none; }
.flag { display: none; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15); }
.cv-field[data-cur="USD"] .flag[data-flag="USD"], .cv-field[data-cur="EUR"] .flag[data-flag="EUR"],
.cv-field[data-cur="JPY"] .flag[data-flag="JPY"], .cv-field[data-cur="CNY"] .flag[data-flag="CNY"],
.cv-field[data-cur="VND"] .flag[data-flag="VND"] { display: block; }
.cv-swap { display: flex; justify-content: center; }
.cv-swap button {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--a-line); border-radius: 50%;
  background: #fff; color: var(--a-text); transition: transform .2s ease;
}
.cv-swap button:hover { color: var(--blue); transform: rotate(180deg); }
.cv-swap .icon { width: 13px; height: 13px; }

.markets { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px solid var(--a-line); }
.markets__title { font-size: 12px; font-weight: 500; color: var(--a-muted); }
.markets .row { font-size: 13px; }
.market__name { font-size: 13px; }

.ad {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px; color: #fff;
  background: linear-gradient(115deg, #0B1E3A 15%, #1D4ED8 85%);
}
.ad__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.ad__mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .15); }
.ad__mark .icon { width: 14px; height: 14px; }
.ad__tag { padding: 2px 8px; border-radius: 100px; background: rgba(255, 255, 255, .15); color: #DBEAFE; font-size: 8.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.ad__headline { font: 700 17px/20px var(--font-display); }
.ad__cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; background: #fff; color: #0B1E3A; font-size: 12.5px; font-weight: 700; }
.ad__cta .icon { width: 13px; height: 13px; }
.ad__art { display: flex; align-items: flex-end; gap: 8px; height: 24px; }
.ad__art i { width: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.ad__art i.g { background: #34D399; }
.ad__art i.w { background: #fff; }

/* ---------- Bang tin (cot giua) ---------- */
.feed { grid-area: feed; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 632px; margin: 0 auto; padding: 32px 16px 48px; }
.preview-note {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px;
  background: #FFF7E6; border: 1px solid #F6DFB0; color: #8A5A00; font-size: 12.5px;
}
.preview-note .icon { width: 15px; height: 15px; flex: none; }
.feedbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 0 6px 0 16px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 100px;
}
.feedbar__search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--a-muted); }
.feedbar__search .icon { width: 18px; height: 18px; }
.feedbar__search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; font-size: 14px; color: var(--a-ink); }
.feedbar__search input::placeholder { color: var(--a-muted); }
.feedbar__search:focus-within { color: var(--blue); }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 100px; background: var(--a-chip); }
.tab { padding: 6px 12px; border: 0; border-radius: 100px; background: none; font-size: 12px; color: var(--a-muted); white-space: nowrap; }
.tab[aria-selected="true"] { background: #fff; color: var(--a-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
/* Giu cho san do rong chu dam -> tab khong xo nhau khi chon */
.tab[data-label]::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 500; }

.post { display: flex; gap: 8px; padding: 16px; background: #fff; border-radius: 10px; }
.post[hidden] { display: none; }
.post__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--a-chip); }
.post__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.post__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; }
.post__head strong { font-weight: 500; }
.verified { display: inline-flex; color: var(--blue); }
.verified .icon { width: 16px; height: 16px; }
.post__meta { font-size: 13px; color: var(--a-muted); }
.post__text { margin-top: -6px; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.linkcard { display: flex; min-height: 116px; border: 1px solid var(--a-line); border-radius: 6px; overflow: hidden; }
.linkcard img { flex: none; width: 150px; height: auto; object-fit: cover; }
.linkcard > div { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 16px; min-width: 0; }
.linkcard__domain { font-size: 10px; letter-spacing: .4px; color: var(--a-muted); }
.linkcard__title { font-size: 14px; line-height: 19px; }
.linkcard__desc { font-size: 12px; line-height: 17px; color: var(--a-text); }
.post__photo { width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: 6px; background: var(--a-chip); }
.tradecard { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 8px; border-radius: 6px; background: var(--a-panel); }
.tradecard dt { font-size: 9px; color: var(--a-muted); }
.tradecard dd { margin: 0; font-size: 12px; }
.post__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--a-muted); }
.post__actions > * { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin: -4px; border: 0; border-radius: 6px; background: none; color: inherit; }
.post__actions .icon { width: 15px; height: 15px; }
.post__actions button:hover { color: var(--blue); background: #EFF6FF; }
.act-like:hover { color: #E11D48 !important; background: #FFF1F2 !important; }
.act-like[aria-pressed="true"] { color: #E11D48; }
.act-like[aria-pressed="true"] .icon, .act-save[aria-pressed="true"] .icon { fill: currentColor; }
.act-save[aria-pressed="true"] { color: var(--blue); }

/* ---------- Cot phai ---------- */
.widget { display: flex; flex-direction: column; gap: 8px; }
.widget__title { font: 600 16px/1.3 var(--font-display); }
.tz { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; background: var(--a-panel); font-size: 11px; color: var(--a-muted); }
.tz .icon { width: 12px; height: 12px; }
.chips { display: flex; gap: 6px; }
.cchip { padding: 5px 12px; border: 0; border-radius: 100px; background: var(--a-panel); font-size: 12px; color: var(--a-text); }
.cchip[aria-pressed="true"] { background: #EFF6FF; color: var(--blue); }
.cal__head { display: grid; grid-template-columns: 36px 22px 1fr; gap: 8px; padding: 6px 0; border-radius: 6px; background: var(--a-panel); font-size: 10px; color: var(--a-muted); }
.cal__head span:first-child { padding-left: 4px; }
.cal__row {
  display: grid; grid-template-columns: 36px 22px 1fr; gap: 2px 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--a-line);
}
.cal__time, .cal__cur { font-size: 11px; color: var(--a-text); }
.cal__cur { font-size: 10px; }
.cal__event { font-size: 12px; overflow-wrap: anywhere; }
.impact { display: inline-flex; gap: 3px; }
.impact i { width: 5px; height: 5px; border-radius: 50%; background: var(--a-line); }
.impact--3 i { background: var(--a-down); }
.impact--2 i:nth-child(-n+2) { background: #D97706; }
.impact--1 i:first-child { background: var(--amber); }
.cal__flag .flag { display: block; width: 16px; height: 11px; }
.cal__stats { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 9px; color: var(--a-muted); }
.cal__stats b { margin-left: 2px; font-size: 11px; font-weight: 400; color: var(--a-text); }
.cal__stats b.chg--up { color: var(--a-up); font-weight: 600; }
.cal__stats b.chg--down { color: var(--a-down); font-weight: 600; }
.cal__stats b.muted { color: var(--a-muted); }
.cal__empty { padding: 16px 0; text-align: center; }
.live { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 100px; background: #ECFDF5; color: var(--a-up); font-size: 11px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.wcard { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--a-panel); }
.wcard.row { flex-direction: row; }
.wcard__name { display: block; font-size: 13px; }
.wcard__price { font-size: 14px; }
.wcard .chg { font-size: 14px; font-weight: 600; }
.wcard__meta { display: flex; gap: 24px; font-size: 11px; color: var(--a-muted); }
.sigside { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
.sigside--buy { background: #ECFDF5; color: var(--a-up); }
.sigside--sell { background: #FEF2F2; color: var(--a-down); }
.savings table { width: 100%; border-collapse: collapse; }
.savings th, .savings td { padding: 3px 0; text-align: right; font-weight: 400; }
.savings thead th { font-size: 9.5px; color: var(--a-muted); }
.savings th[scope="row"], .savings thead th:first-child { text-align: left; }
.savings th[scope="row"] { font-size: 12px; font-weight: 600; }
.savings td { width: 32px; font-size: 11px; }

/* ---------- Thanh duoi (mobile) + thong bao ---------- */
.tabbar { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 10px; background: var(--a-ink); color: #fff; font-size: 13px;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .topnav__item { padding: 10px 12px; }
}
/* Man vua: 2 cot, cot ben gom ca khoi trai va phai */
@media (max-width: 1240px) {
  .app { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "left feed" "right feed"; }
  .side { position: static; height: auto; overflow: visible; }
  .side--left { padding-bottom: 12px; }
  .side--right { padding: 12px 24px 32px; }
  .topnav__item span { display: none; }
  .topnav__item.is-active span { display: inline; }
}
/* Tablet / mobile: 1 cot, bang tin truoc, menu chuyen xuong thanh duoi */
@media (max-width: 900px) {
  .app { display: flex; flex-direction: column; }
  .feed { order: -1; padding: 16px 12px 24px; }
  .side { width: 100%; background: transparent; }
  .side--left, .side--right { padding: 0 12px 16px; }
  .side--left::before, .side--right::before {
    content: attr(aria-label); padding: 8px 4px 0; font: 600 16px/1.3 var(--font-display); color: var(--a-ink);
  }
  .widget, .markets { padding: 12px; background: #fff; border: 1px solid var(--a-line); border-radius: 10px; }
  .markets { gap: 12px; }
  .box { background: #fff; }
  .topnav { display: none; }
  .topbar { padding: 0 16px; }
  .tabbar {
    position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--a-line);
  }
  .tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 10.5px; color: var(--a-muted); }
  .tabbar__item .icon { width: 21px; height: 21px; }
  .tabbar__item.is-active { color: var(--blue); font-weight: 600; }
  .app-shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .tool--wide { display: none; }
  .topbar__brand .brand__name { font-size: 18px; }
  .feedbar { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 6px 6px; border-radius: 14px; }
  .feedbar__search { padding: 0 8px; }
  .tabs { justify-content: space-between; }
  .tab { flex: 1; }
  .post { padding: 14px 12px; }
  .post__avatar { width: 36px; height: 36px; }
  .linkcard { flex-direction: column; }
  .linkcard img { width: 100%; height: 140px; }
  .post__photo { max-height: 240px; }
}

/* ================= Trang Nhat ky giao dich ================= */
.journal { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1920px; margin: 0 auto; padding: 24px 32px 40px; }
.journal .preview-note { align-self: flex-start; }
.jhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.jhead__title { font: 700 28px/1.2 var(--font-body); letter-spacing: -0.01em; }
.jhead__sub { margin-top: 6px; font-size: 14px; color: var(--a-text); }
.jhead__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 100px; background: var(--a-chip); }
.seg__item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; font-size: 12px; color: var(--a-muted); }
.seg__item .icon { width: 14px; height: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--a-line); border-radius: 100px;
  background: #fff; font-size: 14px; font-weight: 500; color: var(--a-ink); white-space: nowrap; transition: background-color .15s ease, border-color .15s ease;
}
.pill .icon { width: 16px; height: 16px; }
.pill:hover { border-color: #D6D3CC; }
.pill--export { color: #29872C; }
.pill--primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.pill--primary:hover { background: #1D4ED8; border-color: #1D4ED8; }

.jstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.jstat { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--a-line); border-radius: 10px; }
.jstat__top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--a-muted); }
.jstat__ic { display: grid; place-items: center; width: 30px; height: 30px; }
.jstat__ic .icon { width: 26px; height: 26px; }
.jstat__ic--blue { color: var(--blue); }
.jstat__ic--green { color: var(--a-up); }
.jstat__ic--amber { color: var(--amber); }
.jstat__val { font-size: 26px; font-weight: 600; line-height: 1.15; }
.jstat__delta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--a-text); }
.jstat__delta .icon { width: 14px; height: 14px; color: var(--a-up); }
.jstat__pair { display: flex; gap: 28px; }
.jstat__pair p { display: grid; gap: 2px; }
.jstat__pair span { font-size: 11px; color: var(--a-muted); }
.jstat__pair b { font-size: 22px; font-weight: 600; }

.jtable { background: #fff; border: 1px solid var(--a-line); border-radius: 14px; }
.jtoolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 20px; }
.jtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jsearch {
  display: flex; align-items: center; gap: 8px; width: 360px; max-width: 100%; height: 38px; padding: 0 14px;
  border: 1px solid var(--a-line); border-radius: 100px; color: var(--a-muted);
}
.jsearch .icon { width: 16px; height: 16px; flex: none; }
.jsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--a-ink); }
.jsearch:focus-within { border-color: var(--blue); color: var(--blue); }
.fsel {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid var(--a-line); border-radius: 100px; font-size: 13px; color: var(--a-muted); white-space: nowrap;
}
.fsel select {
  appearance: none; -webkit-appearance: none; padding: 0 18px 0 0; margin-right: -18px; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--a-ink); cursor: pointer;
}
.fsel select:disabled { color: var(--a-muted); cursor: default; }
.fsel > .icon { width: 14px; height: 14px; pointer-events: none; }
.fsel:focus-within { border-color: var(--blue); }
.fsel__clear { display: none; padding: 0; border: 0; background: none; color: inherit; }
.fsel__clear .icon { width: 14px; height: 14px; }
.fsel--time.is-active { border-color: transparent; background: #EFF6FF; color: var(--blue); }
.fsel--time.is-active select { color: var(--blue); }
.fsel--time.is-active > .icon { display: none; }
.fsel--time.is-active .fsel__clear { display: grid; place-items: center; }

.jscroll { position: relative; overflow-x: auto; scrollbar-width: thin; }
.jt { width: 100%; min-width: 1280px; border-collapse: collapse; font-size: 13px; }
.jt th {
  padding: 12px 6px; background: var(--a-panel); font-size: 11px; font-weight: 500; letter-spacing: .3px; color: var(--a-muted);
  text-align: left; text-transform: uppercase; white-space: nowrap;
}
.jt td { padding: 14px 6px; border-top: 1px solid var(--a-line); vertical-align: middle; }
.jt th:first-child, .jt td:first-child { padding-left: 20px; }
.jt th:last-child, .jt td:last-child { padding-right: 20px; }
.jt tbody tr:hover { background: #FCFCFA; }
.c-sym { width: 144px; }
.c-sym b { display: block; font-size: 13px; font-weight: 600; }
.c-sym small { font-size: 11px; color: var(--a-muted); }
.c-side { width: 86px; }
.c-time { width: 118px; color: var(--a-text); white-space: nowrap; }
.jt td.c-time { font-family: var(--font-body); }
.c-num { width: 102px; text-align: right !important; white-space: nowrap; }
.c-pnl { width: 128px; text-align: right !important; }
.c-pnl b { display: block; font-weight: 600; }
.c-r { width: 52px; text-align: center !important; font-weight: 600; }
.c-strat { width: 116px; }
.c-src { width: 124px; }
.c-edit { width: 60px; text-align: center !important; }
.jt th.c-edit .icon { display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.sidebadge { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.sidebadge--buy { background: #ECFDF5; color: var(--a-up); }
.sidebadge--sell { background: #FEF2F2; color: var(--a-down); }
.st { font-size: 11px; font-weight: 500; }
.st--closed { color: var(--a-up); }
.st--open { color: var(--blue); }
.st--stopped { color: var(--a-down); }
.stchip { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--a-chip); font-size: 12px; color: var(--a-text); white-space: nowrap; }
.srcb { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.srcb .icon { width: 12px; height: 12px; }
.srcb--auto { background: #EFF6FF; color: var(--blue); }
.srcb--manual { background: #F5F3FF; color: #7C3AED; }
.jnote { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.jnote p { font-size: 12px; line-height: 17px; color: var(--a-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(135deg, #1E293B, #2563EB); color: rgba(255, 255, 255, .85);
}
.thumb[hidden] { display: none; }
.thumb .icon { width: 20px; height: 20px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.addimg {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px;
  background: var(--a-chip); color: var(--a-muted);
}
.addimg .icon { width: 18px; height: 18px; }
.addimg:hover { color: var(--blue); background: #EFF6FF; }
.editbtn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: #FEF2F2; color: var(--a-down);
}
.editbtn .icon { width: 15px; height: 15px; }
.editbtn:hover, .editbtn[aria-expanded="true"] { background: #FEE2E2; }
.jfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--a-line); font-size: 12px; color: var(--a-muted); }
.pager { display: flex; gap: 6px; }
.pager__btn {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--a-line); border-radius: 6px;
  background: #fff; font-size: 12px; color: var(--a-ink);
}
.pager__btn .icon { width: 14px; height: 14px; }
.pager__btn.is-current { border-color: var(--blue); background: var(--blue); color: #fff; }
.pager__btn:disabled { color: var(--a-line); cursor: default; }

.rowmenu {
  position: fixed; z-index: 45; display: grid; min-width: 150px; padding: 6px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(26, 26, 26, .14);
}
.rowmenu[hidden] { display: none; }
.rowmenu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 6px; background: none; font-size: 14px; color: var(--a-ink); text-align: left; }
.rowmenu button + button { border-top: 1px solid var(--a-line); border-radius: 0 0 6px 6px; }
.rowmenu button .icon { width: 15px; height: 15px; }
.rowmenu button:hover { background: var(--a-chip); }
.rowmenu__danger { color: var(--a-down) !important; }

/* Popup them / sua giao dich */
.tmodal {
  width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 14px;
  color: var(--a-ink); box-shadow: 0 30px 80px rgba(26, 26, 26, .3);
}
.tmodal::backdrop { background: rgba(26, 26, 26, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tform__head { display: flex; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--a-line); }
.tform__head h2 { font-size: 18px; font-weight: 700; }
.tform__head p { margin-top: 4px; font-size: 12px; color: var(--a-muted); }
.tform__close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--a-chip); color: var(--a-ink); }
.tform__close .icon { width: 16px; height: 16px; }
.tform__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; }
.tform__note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; background: #FFFBEB; color: #D97706; font-size: 12px; }
.tform__note .icon { width: 15px; height: 15px; flex: none; }
.tform.is-edit .tform__note { background: #EFF6FF; color: var(--blue); }
.tform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tf { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 11px; color: var(--a-text); }
.tf > span, .tf > legend, .tf > label { padding: 0; font-size: 11px; color: var(--a-text); }
.tf > legend { margin-bottom: 6px; }
.tf input:not([type="radio"]):not([type="file"]), .tf select, .tf textarea {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff;
  font: 400 13px/1.4 var(--font-body); color: var(--a-ink);
}
.tf--select select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.tf--select > .icon { position: absolute; right: 12px; bottom: 13px; width: 15px; height: 15px; color: var(--a-muted); pointer-events: none; }
.tf select:disabled { background: var(--a-panel); color: var(--a-text); opacity: 1; }
.tf input:focus, .tf select:focus, .tf textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.tf [aria-invalid="true"] { border-color: var(--a-down) !important; }
.tseg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 42px; padding: 3px; border-radius: 6px; background: var(--a-chip); }
.tseg label { position: relative; display: block; }
.tseg input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tseg span { display: grid; place-items: center; height: 100%; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--a-text); }
.tseg input:checked + .tseg__buy { background: #fff; color: var(--a-up); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.tseg input:checked + .tseg__sell { background: #fff; color: var(--a-down); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.tseg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.tf__area { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--a-line); border-radius: 6px; }
.tf__area:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.tf .tf__area textarea { height: auto; min-height: 60px; padding: 0; border: 0; box-shadow: none; resize: vertical; line-height: 20px; }
.tf__attach { display: flex; align-items: center; gap: 8px; }
.tf__attach .thumb { width: 42px; height: 42px; }
.tf__addimg {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 6px;
  font-size: 12px; color: var(--a-text); cursor: pointer;
}
.tf__addimg .icon { width: 15px; height: 15px; }
.tf__addimg:hover { border-color: var(--blue); color: var(--blue); }
.tf__rmimg { padding: 0; border: 0; background: none; font-size: 12px; color: var(--a-down); }
.tf__rmimg[hidden] { display: none; }
.tform__error { padding: 10px 12px; border-radius: 6px; background: #FEF2F2; color: var(--a-down); font-size: 12.5px; }
.tform__error[hidden] { display: none; }
.tform__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--a-line); }

/* Responsive Nhat ky */
@media (max-width: 1500px) {
  .jstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .journal { padding: 20px 20px 32px; }
  .jsearch { width: 280px; }
}
@media (max-width: 900px) {
  .journal { padding: 16px 12px 24px; gap: 14px; }
  .jhead { align-items: flex-start; }
  .jhead__title { font-size: 24px; }
  .jhead__actions { width: 100%; }
  .pill--primary { margin-left: auto; }
  .jstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jstat:last-child { grid-column: 1 / -1; }
  .jstat__val { font-size: 22px; }
  .jtoolbar { padding: 12px; }
  .jtoolbar .tabs { width: 100%; }
  .jtoolbar .tab { flex: 1; }
  .jtools { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .jsearch { flex: 0 0 220px; }
  .fsel { flex: none; }
  /* Bang -> the cho tung lenh */
  .jscroll { overflow: visible; }
  .jt { min-width: 0; }
  .jt thead { display: none; }
  .jt, .jt tbody { display: block; }
  .jt tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 14px 12px; border-top: 1px solid var(--a-line); }
  .jt td { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: auto; padding: 0 !important; border: 0; text-align: left !important; }
  .jt td::before { content: attr(data-label); font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--a-muted); }
  .jt td.c-sym { grid-column: 1; grid-row: 1; display: block; }
  .jt td.c-sym::before, .jt td.c-note::before, .jt td.c-edit::before, .jt td.c-side::before { content: none; }
  .jt td.c-side { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 10px; }
  .jt td.c-edit { position: absolute; }
  .jt tr { position: relative; }
  .jt td.c-edit { top: 14px; right: 12px; }
  .jt td.c-side { padding-right: 44px !important; }
  .jt td.c-pnl b { display: inline; }
  .jt td.c-pnl { justify-content: space-between; }
  .jt td.c-pnl small { margin-left: 6px; }
  .jt td.c-note { grid-column: 1 / -1; }
  .jnote { min-width: 0; width: 100%; }
  .tform__row { grid-template-columns: 1fr; }
  .tform__head, .tform__body, .tform__foot { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .pill { padding: 9px 14px; }
  .pill--export span { display: none; }
}

/* ---------- Nhat ky: che do Kanban ---------- */
.seg__item { border: 0; background: none; font: inherit; font-size: 12px; cursor: pointer; }
.seg__item[aria-pressed="true"] { background: #fff; color: var(--a-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.seg__item[aria-pressed="false"]:hover { color: var(--a-ink); }
.journal.is-kanban .jstats, .journal.is-kanban .fsel--table-only { display: none; }
.journal.is-kanban .jtable { background: none; border: 0; }
.journal.is-kanban .jtoolbar { padding: 0; }
[data-table-view][hidden], .board[hidden] { display: none; }
.board { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.kcol { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: #EDEBE5; }
.kcol__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.kcol__head h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.kcol__head h2 i { width: 8px; height: 8px; border-radius: 50%; }
.kcol__count { padding: 2px 8px; border-radius: 100px; background: #fff; font-size: 11px; font-weight: 500; color: var(--a-text); }
.kcol__plus { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--a-muted); }
.kcol__plus:hover { background: #fff; color: var(--a-ink); }
.kcol__plus .icon { width: 16px; height: 16px; }
.kcol__cards { display: flex; flex-direction: column; gap: 10px; }
.kcol__add {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px dashed #D6D3CC; border-radius: 10px;
  background: none; font-size: 12px; color: var(--a-muted);
}
.kcol__add .icon { width: 14px; height: 14px; }
.kcol__add:hover { border-style: solid; background: rgba(255, 255, 255, .6); color: var(--a-ink); }
.kcard {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--a-line); border-radius: 10px; background: #fff;
  cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease;
}
.kcard:hover { border-color: #D6D3CC; box-shadow: 0 6px 16px rgba(26, 26, 26, .06); }
.kcard__top, .kcard__mid, .kcard__foot { display: flex; justify-content: space-between; gap: 10px; }
.kcard__top { align-items: center; }
.kcard__top b { display: block; font-size: 14px; font-weight: 600; }
.kcard__top small, .kcard__mid small { font-size: 11px; color: var(--a-muted); }
.kcard__top .sidebadge { padding: 3px 9px; font-size: 11px; }
.kcard__mid { align-items: flex-end; }
.kcard__val { font-size: 18px; font-weight: 600; line-height: 1.25; }
.kcard__val--wait { font-size: 14px; font-weight: 500; color: var(--a-text); }
.kcard__r { font-size: 12px; font-weight: 600; }
.kcard__r.is-empty { padding: 4px 8px; border-radius: 6px; background: var(--a-chip); color: var(--a-muted); font-weight: 400; }
.kcard__note { font-size: 12px; line-height: 17px; color: var(--a-text); }
.kcard__img {
  display: grid; place-items: center; height: 88px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(135deg, #1E293B, #2563EB); color: rgba(255, 255, 255, .85);
}
.kcard__img .icon { width: 26px; height: 26px; }
.kcard__img img { width: 100%; height: 100%; object-fit: cover; }
.kcard__foot { align-items: center; padding-top: 9px; border-top: 1px solid var(--a-line); }
.kcard__foot .stchip { padding: 3px 9px; font-size: 11px; }
.kcard__foot time { font-size: 11px; color: var(--a-muted); }
.kcard--cancelled { opacity: .78; }
.kcol[hidden] { display: none; }
/* Kanban khi loc 1 trang thai: mot cot rong ca bang, the xep thanh luoi nhieu cot */
.board.is-single { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
.board.is-single .kcol__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }

@media (max-width: 1500px) {
  .board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(280px, 1fr); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
}
@media (max-width: 900px) {
  .board { grid-auto-columns: 82%; scroll-snap-type: x mandatory; margin: 0 -12px; padding: 0 12px 6px; scroll-padding: 0 12px; }
  .kcol { scroll-snap-align: start; }
}

/* ---------- Trang Chien luoc ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.jstat__delta--warn .icon { color: var(--amber); }
.fsel--caps > span { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.jt--strat { min-width: 1640px; }
.jt--strat th, .jt--strat td { padding-left: 4px; padding-right: 4px; }
.jt--strat td { padding-top: 14px; padding-bottom: 14px; }
.s-c { text-align: center !important; white-space: nowrap; }
.s-r { text-align: right !important; white-space: nowrap; }
.s-name { min-width: 300px; }
.sname { display: flex; align-items: center; gap: 12px; }
.sname__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--a-chip); }
.sname__ic .icon { width: 18px; height: 18px; }
.sname__ic--blue { color: var(--blue); }
.sname__ic--green { color: var(--a-up); }
.sname__ic--amber { color: #D97706; }
.sname__ic--gray { color: var(--a-text); }
.sname b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sname__link { color: inherit; }
.sname__link:hover { color: var(--blue); text-decoration: underline; }
.sname small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--a-muted); }
.sstate { padding: 1px 7px; border-radius: 100px; font-size: 10px; font-weight: 500; }
.sstate--paused { background: #FFFBEB; color: #D97706; }
.sstate--draft { background: var(--a-chip); color: var(--a-text); }
.jt tbody tr.is-paused td:not(.c-edit), .jt tbody tr.is-draft td:not(.c-edit) { opacity: .62; }
.srun { display: inline-flex; align-items: center; gap: 6px; min-width: 88px; justify-content: center; padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; }
.srun::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.srun--live { background: #ECFDF5; color: var(--a-up); }
.srun--demo { background: #EFF6FF; color: var(--blue); }
.srun--backtest { background: #FFFBEB; color: #D97706; }
.schip { display: inline-block; min-width: 72px; padding: 5px 10px; border-radius: 6px; background: var(--a-chip); font-size: 12px; color: var(--a-text); }
.schip--line { background: #fff; border: 1px solid var(--a-line); }
.s-sym { font-weight: 600; }
.s-rt { color: var(--blue); }
.s-muted { color: var(--a-text); }
.s-warn { color: #D97706; }
.s-strong { font-weight: 600; }
.smode { display: inline-block; min-width: 88px; padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; color: #fff; }
.smode--auto { background: #16A34A; }
.smode--manual { background: #7C3AED; }

@media (max-width: 900px) {
  .jt--strat { min-width: 0; }
  .jt--strat td.s-name { grid-column: 1 / -1; padding-right: 44px !important; }
  .jt--strat td.s-name::before { content: none; }
  .jt--strat td.s-c, .jt--strat td.s-r { text-align: left !important; }
  .srun, .schip, .smode { min-width: 0; }
}

/* ---------- Dropdown theo thiet ke (thay <select> mac dinh) ---------- */
.jsearch, .fsel { background: #fff; }
select.dd-native {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important;
}
.dd-btn {
  display: inline-flex; align-items: center; min-width: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dd-btn:disabled { cursor: default; }
.dd-btn:focus-visible { outline: none; }
.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel, .tf--select, .cv-cur { cursor: pointer; }
.fsel .dd-btn { font-weight: 600; color: var(--a-ink); }
.fsel.is-disabled { cursor: default; }
.fsel.is-disabled .dd-btn { color: var(--a-muted); }
.fsel:has(.dd-btn:focus-visible) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.fsel.is-open { border-color: #9E9E9E; box-shadow: none; }
.fsel--time.is-active.is-open { border-color: transparent; }
.fsel--time.is-active .dd-btn { color: var(--blue); }
.fsel > .icon, .tf--select > .icon, .cv-cur > .icon { transition: transform .15s ease; }
.is-open > .icon { transform: rotate(180deg); }
.tf--select > .icon { transform-origin: 50% 50%; }
.tf--select .dd-btn {
  width: 100%; height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff;
  font: 400 13px/1.4 var(--font-body); color: var(--a-ink);
}
.tf--select.is-open .dd-btn, .tf--select .dd-btn:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.tf--select .dd-btn:disabled { background: var(--a-panel); color: var(--a-text); }
.tf--select.is-disabled { cursor: default; }
.cv-cur .dd-btn { padding: 4px 16px 4px 0; margin-right: -14px; font-weight: 600; color: var(--a-ink); }

.dd-panel {
  position: fixed; z-index: 1100; display: flex; flex-direction: column; gap: 2px; max-height: min(320px, 60vh); overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(26, 26, 26, .12);
  font: 400 13px/1.4 var(--font-body); color: var(--a-ink); outline: none; scrollbar-width: thin;
}
.dd-panel[hidden] { display: none; }
.dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 6px;
  white-space: nowrap; cursor: pointer;
}
.dd-opt:hover, .dd-opt.is-active { background: var(--a-panel); }
.dd-opt[aria-selected="true"] { background: var(--a-chip); }
.dd-opt[aria-disabled="true"] { opacity: .5; cursor: default; }
.dd-opt__left { display: inline-flex; align-items: center; gap: 10px; }
.dd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dd-check { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dd-value:has(.dd-candles) { display: inline-flex; align-items: center; gap: 10px; }
.dd-candles { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.dd-candles i { position: relative; display: block; width: 5px; border-radius: 1px; }
.dd-candles i::before { content: ""; position: absolute; left: 2px; top: -3px; bottom: -3px; width: 1px; background: inherit; }
.dd-candles i:first-child { height: 7px; background: var(--a-down); }
.dd-candles i:last-child { height: 13px; background: var(--a-up); }
.dd-candles--bear i:first-child { height: 13px; background: var(--a-up); }
.dd-candles--bear i:last-child { height: 7px; background: var(--a-down); }
.dd-panel--accent .dd-opt { justify-content: flex-start; }
.dd-panel--accent .dd-opt[aria-selected="true"] { background: #EFF6FF; color: var(--blue); font-weight: 600; }

/* ================= Trang Tao chien luoc ================= */
.snew .preview-note { margin-bottom: -4px; }
.snew__head { align-items: flex-end; }
.snew__back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--blue); }
.snew__back .icon { width: 14px; height: 14px; }
.snew__back:hover { text-decoration: underline; }
.pill--ghost { color: var(--a-text); background: #F5F4F1; border-color: transparent; }
.pill--sm { padding: 8px 14px; font-size: 13px; }
.pill--sm .icon { width: 15px; height: 15px; }
.pill--link { color: var(--blue); }
.snew__error { padding: 10px 14px; border-radius: 8px; background: #FEF2F2; color: var(--a-down); font-size: 13px; }
.snew__error[hidden] { display: none; }
.snew__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 600px); gap: 26px; align-items: start; }
.snew__main, .snew__side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.scard { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--a-line); border-radius: 10px; }
.scard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.scard__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scard__title h2 { font-size: 16px; font-weight: 600; }
.scard__title p { margin-top: 2px; font-size: 12px; color: var(--a-muted); }
.scard__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 6px; background: #EFF6FF; color: var(--blue); }
.scard__ic .icon { width: 18px; height: 18px; }
.scard__ic--green { background: #ECFDF5; color: var(--a-up); }
.scard__ic--amber { background: #FFFBEB; color: #D97706; }
.scard__ic--violet { background: #F5F3FF; color: #7C3AED; }

.snew .tf > span { font-size: 12px; font-weight: 600; color: var(--a-text); }
.snew .tf textarea { height: auto; min-height: 70px; padding: 10px 12px; resize: vertical; line-height: 20px; }
.snew .tf input::placeholder, .snew .tf textarea::placeholder { color: var(--a-muted); }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgrid__full { grid-column: 1 / -1; }
.shint { font-size: 11px; color: var(--a-muted); }

/* Chon tai khoan (goc phai the Thong tin co ban) */
.acct {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 15px; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  width: min(340px, 100%); min-height: 46px; padding: 6px 12px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; cursor: pointer;
}
.acct.is-open, .acct:has(.dd-btn:focus-visible) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.acct__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #EFF6FF; color: var(--blue); }
.acct__ic .icon { width: 15px; height: 15px; }
.acct .dd-btn { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--a-ink); }
.acct .dd-btn::after { content: ""; position: absolute; inset: 0; }
.acct small { grid-column: 2; grid-row: 2; font-size: 11px; color: var(--a-muted); }
.acct > .icon { grid-column: 3; grid-row: 1 / 3; width: 15px; height: 15px; color: var(--a-muted); transition: transform .15s ease; }

/* Nut chon kieu segmented */
.sseg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 3px; height: 42px; padding: 3px; border-radius: 6px; background: var(--a-chip); }
.sseg label { position: relative; display: block; min-width: 0; }
.sseg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sseg span { display: grid; place-items: center; height: 100%; padding: 0 6px; border-radius: 5px; font-size: 13px; color: var(--a-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sseg input:checked + span { background: #fff; color: var(--blue); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.sseg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.sseg--sm { width: 180px; height: 34px; }
.sseg--sm span { font-size: 12px; }
.sseg--4 input:checked + span { color: var(--a-ink); }
.sbadge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 100px; background: #EFF6FF; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 600; vertical-align: 1px; }
.sbadge .icon { width: 11px; height: 11px; }
.sfake {
  display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 6px;
  background: var(--a-chip); font-size: 13px; color: var(--a-text);
}
.sfake .icon { width: 16px; height: 16px; color: var(--a-up); }
.sfake[hidden], [data-period][hidden] { display: none; }

/* Chi bao */
.indlist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ind { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 6px; }
.ind__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 6px; background: var(--a-chip); color: var(--blue); }
.ind__ic .icon { width: 18px; height: 18px; }
.ind__ic--green { color: var(--a-up); }
.ind__ic--amber { color: #D97706; }
.ind__ic--violet { color: #7C3AED; }
.ind__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.ind__info b { font-size: 14px; font-weight: 600; }
.ind__info small { font-size: 11px; color: var(--a-muted); }
.ind__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.itag { padding: 4px 10px; border-radius: 100px; background: var(--a-chip); font-size: 11px; color: var(--a-muted); white-space: nowrap; }
.itag--entry { background: #ECFDF5; color: var(--a-up); }
.itag--exit { background: #FFFBEB; color: #D97706; }
.ind__rm, .rule__rm { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: var(--a-chip); color: var(--a-text); }
.ind__rm .icon, .rule__rm .icon { width: 15px; height: 15px; }
.ind__rm:hover, .rule__rm:hover { background: #FEF2F2; color: var(--a-down); }
.sempty { padding: 14px; border: 1px dashed var(--a-line); border-radius: 6px; font-size: 13px; color: var(--a-muted); text-align: center; }
.sempty[hidden] { display: none; }

/* Dieu kien */
.slogic { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--a-text); }
.rules { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rule { display: grid; grid-template-columns: 26px 210px 150px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.rule--empty { display: block; padding: 12px; border-radius: 6px; background: var(--a-panel); font-size: 13px; color: var(--a-muted); text-align: center; }
.rule__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a-chip); font-size: 12px; color: var(--a-text); }
.rsel { position: relative; display: block; min-width: 0; cursor: pointer; }
.rsel .dd-btn { width: 100%; height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; font-size: 13px; color: var(--a-ink); }
.rsel > .icon { position: absolute; right: 12px; top: 12px; width: 13px; height: 13px; color: var(--a-muted); pointer-events: none; transition: transform .15s ease; }
.rsel--op .dd-btn { border-color: #EFF6FF; background: #EFF6FF; color: var(--blue); font-weight: 600; }
.rsel--op > .icon { color: var(--blue); }
.rsel.is-open .dd-btn, .rsel .dd-btn:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.rsel .dd-btn:disabled { background: var(--a-panel); color: var(--a-muted); }
.addrule {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1px solid var(--a-line); border-radius: 6px;
  background: #fff; font-size: 13px; font-weight: 600; color: var(--blue);
}
.addrule .icon { width: 15px; height: 15px; }
.addrule:hover { border-color: var(--blue); background: #F8FAFF; }

/* Dung lo / chot loi */
.slfield { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 6px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; }
.slfield:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.slfield:has([aria-invalid="true"]) { border-color: var(--a-down); }
.slbasis { position: relative; display: block; flex: none; cursor: pointer; }
.slbasis .dd-btn { height: 30px; padding: 0 28px 0 10px; border-radius: 6px; background: #EFF6FF; color: var(--blue); font-size: 13px; font-weight: 600; }
.slbasis > .icon { position: absolute; right: 10px; top: 9px; width: 13px; height: 13px; color: var(--blue); pointer-events: none; transition: transform .15s ease; }
.snew .tf .slfield input { flex: 1; min-width: 40px; height: 38px; padding: 0; border: 0; box-shadow: none; text-align: right; font-weight: 600; }
.snew .tf .slfield input:focus { box-shadow: none; }
.slfield__unit { flex: none; font-size: 13px; color: var(--a-muted); white-space: nowrap; }
.sswitch { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sswitch strong { display: block; font-size: 13px; font-weight: 600; }
.sswitch small { display: block; margin-top: 2px; font-size: 11px; color: var(--a-muted); }
.switch {
  position: relative; flex: none; width: 44px; height: 24px; margin: 0; border-radius: 100px; background: #D6D3CC; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: background-color .15s ease;
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease; }
.switch:checked { background: var(--blue); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Khoi luong */
.ufield { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; }
.snew .tf > .ufield { padding: 0 12px; font-size: 13px; font-weight: 400; color: var(--a-ink); }
.ufield:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.ufield:has([aria-invalid="true"]) { border-color: var(--a-down); }
.ufield i { flex: none; font-size: 13px; font-style: normal; color: var(--a-ink); }
.ufield i:empty { display: none; }
.snew .tf .ufield input, .snew .tf .ufield input:focus { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; box-shadow: none; }
.snote { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 6px; background: #FFFBEB; color: #D97706; font-size: 11.5px; line-height: 1.5; }
.snote .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.snote--info { background: #EFF6FF; color: #4B5E80; }
.snote--info .icon { color: var(--blue); }
.snote--blue { background: #EFF6FF; color: var(--blue); }

/* Cot phai */
.sbal { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 8px; background: #ECFDF5; }
.sbal span { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--a-ink); }
.sbal span .icon { width: 16px; height: 16px; color: var(--a-up); }
.sbal p { font-size: 12px; color: var(--a-muted); }
.sbal b { font-family: var(--font-body); font-size: 22px; font-weight: 700; color: var(--a-up); }
.sconn { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--a-text); }
.sconn::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a-up); }
.ssum { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ssum div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ssum dt { font-size: 13px; color: var(--a-text); }
.ssum dd { margin: 0; font-size: 12px; font-weight: 500; color: var(--a-ink); text-align: right; }
.ssum--plain { gap: 8px; }
.ssum--plain dd { font: 600 13px/1.4 var(--font-body); }
.sout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sout__box { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 8px; }
.sout__box span { font-size: 11px; font-weight: 600; }
.sout__box b { font-family: var(--font-body); font-size: 22px; font-weight: 700; }
.sout__box small { font-size: 11px; }
.sout__box--up { background: #ECFDF5; color: var(--a-up); }
.sout__box--down { background: #FEF2F2; color: var(--a-down); }
.sout__cap { font-size: 11px; color: var(--a-text); }
.tmodal--sm { width: min(460px, calc(100vw - 24px)); }

@media (max-width: 1500px) {
  .snew__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; }
  .snew__main, .snew__side { gap: 20px; }
  .rule { grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) 32px; }
  .sseg--4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .sseg--4 span { height: 36px; }
}
@media (max-width: 1100px) {
  .snew__grid { grid-template-columns: minmax(0, 1fr); }
  .snew__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .snew__side > .scard:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .snew__head .jhead__actions { justify-content: flex-end; }
  .snew__head .pill--primary { margin-left: 0; }
  .snew__side { display: flex; }
  .scard { padding: 16px 14px; }
  .acct { width: 100%; }
  .sgrid, .sgrid--3 { grid-template-columns: minmax(0, 1fr); }
  .rule { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "n left left rm" ". op right right"; row-gap: 8px; }
  .rule__n { grid-area: n; }
  .rsel--left { grid-area: left; }
  .rsel--op { grid-area: op; }
  .rsel--right { grid-area: right; }
  .rule__rm { grid-area: rm; }
  .ind { flex-wrap: wrap; }
  .ind__tags { order: 3; width: 100%; justify-content: flex-start; padding-left: 48px; }
  .ind__rm { margin-left: auto; }
  .sout__box b { font-size: 19px; }
}
@media (max-width: 520px) {
  .snew__head .jhead__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .snew__head .pill--primary { grid-column: 1 / -1; justify-content: center; }
  .snew__head .pill { justify-content: center; }
  .sswitch { align-items: flex-start; }
}

/* ================= Trang Chi tiet chien luoc ================= */
.sdet .preview-note { margin-bottom: -4px; }
.sdet__body { display: flex; flex-direction: column; gap: 24px; }
.sdet__body[hidden], .sdet__missing[hidden] { display: none; }
.sdet__missing { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; background: #fff; border: 1px solid var(--a-line); border-radius: 10px; color: var(--a-text); }
.sdet__crumbs { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sdet__crumbs ol { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.sdet__crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sdet__crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text); }
.sdet__crumbs a { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 500; white-space: nowrap; }
.sdet__crumbs a:hover { text-decoration: underline; }
.sdet__crumbs .icon { width: 13px; height: 13px; flex: none; color: var(--a-muted); }
.sdet__crumbs a .icon { color: inherit; }
.sdet__close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--a-line); border-radius: 50%; background: #FFF2F2; color: var(--a-ink) !important; }
.sdet__close:hover { background: #FEE2E2; }
.sdet__close .icon { width: 16px; height: 16px; }
.sdet__head { margin-top: -8px; }
.sdet__title { min-width: 0; }
.sdet__title h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.sdet__title h1 > span:first-child { overflow-wrap: anywhere; }
.sdstate { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font: 600 11px/1.3 var(--font-body); letter-spacing: 0; }
.sdstate::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sdstate--active { background: #ECFDF5; color: var(--a-up); }
.sdstate--paused { background: #FFFBEB; color: #D97706; }
.sdstate--draft { background: var(--a-chip); color: var(--a-text); }
.sdet__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sdet__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--a-line); border-radius: 100px; background: #fff; font-size: 12px; font-weight: 600; color: var(--a-ink); }
.sdet__chips .icon { width: 13px; height: 13px; color: var(--blue); }
.pill--green { border-color: #16A34A; background: #16A34A; color: #fff; }
.pill--green:hover { border-color: #15803D; background: #15803D; }
.sdet__head .jhead__actions .pill { min-width: 180px; justify-content: center; font-weight: 600; }
.sdet__more { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--a-line); border-radius: 50%; background: #fff; color: var(--a-ink); }
.sdet__more:hover, .sdet__more[aria-expanded="true"] { background: var(--a-chip); }
.sdet__more .icon { width: 18px; height: 18px; }

.sdet__kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jstat__delta.is-down .icon { color: var(--a-down); }
.jstat__delta.is-warn .icon { color: #D97706; }
.jstat__val.chg--down { color: var(--a-down); }

.sdcard { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--a-line); border-radius: 10px; min-width: 0; }
.sdcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sdcard__head h2 { font-size: 16px; font-weight: 700; }
.sdcard__head p { margin-top: 2px; font-size: 12px; color: var(--a-muted); }
.sdcard__head--line { padding-bottom: 14px; border-bottom: 1px solid var(--a-line); }

/* Bieu do cot P&L theo thang */
.pchart { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 240px auto; column-gap: 8px; row-gap: 6px; padding: 18px 0 0; }
.pchart[hidden], .pchart__stats[hidden] { display: none; }
.pchart__axis { position: relative; }
.pchart__axis span { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; color: var(--a-muted); white-space: nowrap; }
.pchart__plot { position: relative; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; }
.pchart__zero { position: absolute; left: 0; right: 0; height: 1px; background: #9E9E9E; }
.pchart__col { position: relative; }
.pchart__col:hover { background: rgba(0, 0, 0, .025); border-radius: 4px; }
.pchart__bar { position: absolute; left: 50%; width: min(44px, 64%); transform: translateX(-50%); min-height: 2px; }
.pchart__bar.is-up { background: var(--a-up); border-radius: 3px 3px 0 0; }
.pchart__bar.is-down { background: var(--a-down); border-radius: 0 0 3px 3px; }
.pchart__val { position: absolute; left: 0; right: 0; padding: 3px 0; font-size: 10px; font-weight: 600; text-align: center; white-space: nowrap; }
.pchart__labels { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; }
.pchart__labels span { font-size: 10px; color: var(--a-muted); text-align: center; }
.pchart__empty { padding: 40px 0; text-align: center; color: var(--a-muted); }
.pchart__empty[hidden] { display: none; }
.pchart__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 0 72px; padding-top: 14px; border-top: 1px solid var(--a-line); text-align: center; }
.pchart__stats dt { font-size: 11px; color: var(--a-muted); }
.pchart__stats dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }

/* Cau hinh + tin hieu */
.sdet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 600px); gap: 24px; align-items: stretch; }
.sdconf__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sdconf__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sdconf h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); }
.sdconf h3:not(:first-child) { margin-top: 6px; }
.sdlogic { font-weight: 500; letter-spacing: 0; text-transform: none; }
.sdind { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sdind__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.sdind__chip .icon { width: 13px; height: 13px; }
.sdind__chip--blue { background: #EFF6FF; color: var(--blue); }
.sdind__chip--amber { background: #FFFBEB; color: #D97706; }
.sdind__chip--orange { background: #FFF7ED; color: #EA580C; }
.sdind__chip--green { background: #ECFDF5; color: var(--a-up); }
.sdind__chip--violet { background: #F5F3FF; color: #7C3AED; }
.sdrisk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sdrisk div { padding: 9px 12px; border-radius: 6px; background: var(--a-panel); min-width: 0; }
.sdrisk dt { font-size: 11px; color: var(--a-muted); }
.sdrisk dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--a-ink); overflow-wrap: anywhere; }
.sdrisk dd.is-down { color: var(--a-down); }
.sdrisk dd.is-blue { color: var(--blue); }
.sdrisk dd.is-muted { color: var(--a-muted); }
.sdrules { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--a-ink); }
.sdrules li { display: flex; align-items: center; gap: 10px; }
.sdrules__ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: #ECFDF5; color: var(--a-up); }
.sdrules__ic .icon { width: 13px; height: 13px; }
.sdrules--exit .sdrules__ic { background: #FFFBEB; color: #D97706; }
.sdempty { font-size: 12px; color: var(--a-muted); }

.sdsig { padding: 0; gap: 0; overflow: hidden; }
.sdsig .sdcard__head { padding: 14px 16px; }
.sdsig__scroll { flex: 1; overflow-x: auto; }
.sdsig__t { width: 100%; border-collapse: collapse; font-size: 13px; }
.sdsig__t th { padding: 10px 8px; background: #FAFAF8; border-bottom: 1px solid var(--a-line); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); text-align: left; white-space: nowrap; }
.sdsig__t td { padding: 11px 8px; border-bottom: 1px solid var(--a-line); }
.sdsig__t th:first-child, .sdsig__t td:first-child { padding-left: 16px; }
.sdsig__t th:last-child, .sdsig__t td:last-child { padding-right: 16px; text-align: right; }
.sg-time { width: 84px; color: var(--a-muted); font-size: 12px; white-space: nowrap; }
.sg-symbol { width: 100px; font-weight: 700; }
.sg-signal { color: var(--a-text); }
.sgbadge { display: inline-block; min-width: 100px; padding: 4px 10px; border: 1px solid #D97706; border-radius: 100px; background: #FFFBEB; color: #D97706; font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; }
button.sgbadge:hover { background: #FEF3C7; }
.sgbadge.is-done { border-color: var(--a-up); background: #ECFDF5; color: var(--a-up); }
.sdsig__foot { padding: 12px 16px; font-size: 12px; color: var(--a-muted); }

/* Lich su lenh */
.sdtrades__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 18px 20px 0; }
.sdtrades__head h2 { font-size: 16px; font-weight: 700; }
.sdtrades__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--a-muted); }
.sdtrades__meta b { margin-left: 4px; font-size: 13px; color: var(--a-ink); }
.sdtrades__meta b.chg--up { color: var(--a-up); }
.fsel--accent { border-color: transparent; background: #EFF6FF; color: var(--blue); }
.fsel--accent select { color: var(--blue); font-weight: 600; }
.jt--sd { min-width: 1240px; }
.jt--sd th { white-space: nowrap; }
.d-time { width: 120px; white-space: nowrap; color: var(--a-text); }
.d-sym { width: 120px; }
.d-sym b { display: block; font-size: 13px; font-weight: 700; }
.d-sym small { font-size: 11px; color: var(--a-muted); }
.d-r { text-align: right !important; white-space: nowrap; }
.d-c { text-align: center !important; white-space: nowrap; }
.d-pnl { font-weight: 600; }
.d-rr { font-weight: 600; }
.d-sig { min-width: 180px; padding-left: 16px !important; color: var(--a-text); }
.s-muted { color: var(--a-text); }
.sdst { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--a-ink); }
.sdst::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sdst--open { color: var(--blue); }
.sdclose { display: inline-block; min-width: 80px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-align: center; }
.sdclose--tp { background: #ECFDF5; color: var(--a-up); }
.sdclose--sl { background: #FEF2F2; color: var(--a-down); }
.sdclose--trailing { background: #FFFBEB; color: #D97706; }
.sdclose--manual { background: #F5F3FF; color: #7C3AED; }
.pager__gap { display: grid; place-items: center; width: 20px; color: var(--a-muted); }

@media (max-width: 1500px) {
  .sdet__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sdet__grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); }
  .sdconf__cols { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 1100px) {
  .sdet__grid { grid-template-columns: 1fr; }
  .sdconf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sdet__head .jhead__actions .pill { min-width: 0; }
}
@media (max-width: 900px) {
  .sdet__body { gap: 16px; }
  .sdet__head { margin-top: -4px; }
  .sdet__head .jhead__actions { width: 100%; }
  .sdet__head .jhead__actions .pill { flex: 1; margin: 0; padding-left: 12px; padding-right: 12px; }
  .sdet__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdet__kpis .jstat:last-child { grid-column: auto; }
  .sdcard { padding: 16px 14px; }
  .sdcard__head .tabs { width: 100%; }
  .sdcard__head .tab { flex: 1; }
  .pchart { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 200px auto; column-gap: 4px; }
  .pchart__plot, .pchart__labels { gap: 2px; }
  .pchart__val { font-size: 8.5px; }
  .pchart__labels span { font-size: 9px; }
  .pchart__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; text-align: left; }
  .sdconf__cols { grid-template-columns: 1fr; gap: 16px; }
  .sdsig .sdcard__head { padding: 14px; }
  .sdtrades__head { padding: 14px 12px 0; }
  .jt--sd { min-width: 0; }
  .jt--sd td.d-time { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; color: var(--a-muted); font-size: 12px; }
  .jt--sd td.d-time::before { content: none; }
  .jt--sd td.d-sym { grid-column: 1; grid-row: 2; display: block; }
  .jt--sd td.d-sym::before { content: none; }
  .jt--sd td.d-sym b, .jt--sd td.d-sym small { display: inline; margin-right: 6px; }
  .jt--sd td.d-sym + td { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .jt--sd td.d-sym + td::before { content: none; }
  .jt--sd td.d-sig { grid-column: 1 / -1; min-width: 0; }
  .d-c, .d-r { text-align: left !important; }
}
@media (max-width: 520px) {
  .sdet__kpis .jstat__val { font-size: 20px; }
  .pchart__val { display: none; }
  .sdsig__t .sg-signal { min-width: 140px; }
  .sdet__head .jhead__actions .pill span { white-space: nowrap; }
}
@media (max-width: 600px) {
  .sdsig__t thead { display: none; }
  .sdsig__t, .sdsig__t tbody { display: block; }
  .sdsig__t tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--a-line); }
  .sdsig__t td { padding: 0 !important; border: 0; }
  .sdsig__t .sg-time { width: auto; }
  .sdsig__t .sg-symbol { width: auto; }
  .sdsig__t .sg-status { grid-row: 1 / 3; grid-column: 3; }
  .sdsig__t .sg-signal { grid-column: 1 / 3; font-size: 12.5px; }
  .sgbadge { min-width: 0; }
}

/* ================= Tien ich (thanh tren): menu + cua so noi ================= */
button.tool { padding: 0; border: 0; cursor: pointer; }
button.tool:hover, button.tool[aria-expanded="true"] { background: #EFF6FF; color: var(--blue); }
.utilmenu { position: relative; }
.utilmenu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; display: grid; width: 240px; padding: 6px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(26, 26, 26, .12);
}
.utilmenu__panel[hidden] { display: none; }
.utilmenu__head { padding: 8px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); }
.utilmenu__panel button {
  display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 8px; background: none;
  font-size: 13px; color: var(--a-ink); text-align: left;
}
.utilmenu__panel button .icon { width: 15px; height: 15px; color: var(--a-text); }
.utilmenu__panel button:hover, .utilmenu__panel button:focus-visible { background: var(--a-chip); outline: none; }

.uwidget {
  position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: #fff; border: 1px solid var(--a-line); border-radius: 16px; box-shadow: 0 20px 48px rgba(26, 26, 26, .16);
  cursor: grab; touch-action: none; user-select: none;
}
.uwidget[hidden] { display: none; }
.uwidget.is-dragging { cursor: grabbing; box-shadow: 0 28px 60px rgba(26, 26, 26, .22); }
.uwidget input, .uwidget textarea, .uwidget button, .uwidget select { cursor: auto; user-select: text; touch-action: auto; }
.uwidget button { cursor: pointer; }
.uwidget__close {
  position: absolute; top: -10px; right: -10px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--a-line); border-radius: 50%; background: #fff; color: var(--a-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.uwidget__close .icon { width: 13px; height: 13px; }
.uwidget__close:hover { background: #FEF2F2; color: var(--a-down); }
.uwidget__head { display: flex; align-items: center; gap: 10px; }
.uwidget__head h2 { font-size: 14px; font-weight: 700; }
.uwidget__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #EFF6FF; color: var(--blue); }
.uwidget__ic .icon { width: 15px; height: 15px; }

/* May tinh */
.uwidget--calc { width: 227px; }
.calc__screen {
  display: block; height: 52px; padding: 0 14px; border-radius: 8px; background: #EFF6FF; overflow: hidden;
  font-size: 24px; font-weight: 600; line-height: 52px; color: var(--blue); text-align: right; white-space: nowrap;
}
.calc__screen.is-long { font-size: 16px; }
.calc__keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.calc__key {
  height: 40px; padding: 0; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--a-line) inset;
  font: 500 13px/1 var(--font-body); color: var(--a-ink);
}
.calc__key:hover { background: var(--a-panel); }
.calc__key:active { transform: translateY(1px); }
.calc__key--fn { color: var(--a-text); }
.calc__key[data-key="clear"] { color: #D97706; }
.calc__key--op { color: var(--blue); font-size: 15px; }
.calc__key--op.is-on { background: #EFF6FF; box-shadow: 0 0 0 1px #BFDBFE inset; }
.calc__key--zero { grid-column: span 2; }
.calc__key--eq { background: var(--blue); box-shadow: none; color: #fff; font-size: 15px; }
.calc__key--eq:hover { background: #1D4ED8; }

/* Tinh lot size */
.uwidget--lot { width: 300px; padding: 16px; }
.lotcalc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lotf { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 11px; color: var(--a-muted); }
.lotf--full { grid-column: 1 / -1; }
.lotf input, .lotf select {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: var(--a-panel);
  font: 600 13px/1 var(--font-body); color: var(--a-ink); text-align: right;
}
.lotf input:focus { outline: none; border-color: var(--blue); background: #fff; }
.lotf .dd-btn { height: 38px; border-color: transparent; background: var(--a-panel); font-size: 12px; }
.lotf.tf--select > .icon { position: absolute; right: 12px; bottom: 12px; width: 14px; height: 14px; color: var(--a-muted); pointer-events: none; }
.lotcalc__out { display: grid; gap: 2px; margin-top: 4px; padding: 12px; border-radius: 8px; background: #EFF6FF; }
.lotcalc__out span { font-size: 11px; color: var(--a-text); }
.lotcalc__out b { font: 700 20px/1.25 var(--font-body); color: var(--blue); }
.lotcalc__out b.is-muted { font-size: 12px; font-weight: 500; color: var(--a-muted); }

/* Ghi chu nhanh (giay note) */
.uwidget--note { width: 248px; gap: 6px; padding: 18px 18px 12px; border: 0; border-radius: 4px 4px 4px 14px; background: #FEF3A0; box-shadow: 0 14px 30px rgba(120, 100, 0, .22); }
.note__title, .note__body {
  width: 100%; padding: 0; border: 0; background: none; color: #3D3A2A; font-family: "Patrick Hand", "Comic Sans MS", cursive;
}
.note__title { font-size: 24px; font-weight: 400; line-height: 1.2; }
.note__body { min-height: 110px; font-size: 18px; line-height: 1.35; resize: vertical; }
.note__title:focus, .note__body:focus { outline: none; }
.note__title::placeholder, .note__body::placeholder { color: rgba(61, 58, 42, .45); }
.note__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 16px/1 "Patrick Hand", cursive; color: rgba(61, 58, 42, .6); }
.note__foot button { padding: 2px 0; border: 0; background: none; font: inherit; font-size: 14px; color: rgba(61, 58, 42, .6); text-decoration: underline; }
.note__foot button:hover { color: #B91C1C; }
.uwidget--note .uwidget__close { background: #FFFBE0; }

/* Man hep: cua so nam co dinh phia tren thanh duoi, khong keo */
.uwidget.is-docked { left: 50% !important; top: auto !important; bottom: 78px; transform: translateX(-50%); max-width: calc(100vw - 32px); cursor: default; }

/* ================= Cai dat ================= */
.setx .preview-note { margin-bottom: -4px; }
.setx__offline { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: #EFF6FF; color: var(--blue); font-size: 13px; }
.setx__offline[hidden] { display: none; }
.setx__offline .icon { width: 15px; height: 15px; flex: none; }
.setx__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.setx__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.setnav { position: sticky; top: 88px; padding: 14px 10px; background: #fff; border: 1px solid var(--a-line); border-radius: 12px; }
.setnav ul { display: grid; gap: 2px; margin: 0 0 6px; padding: 0; list-style: none; }
.setnav__group { padding: 10px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); }
.setnav__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--a-ink); }
.setnav__item .icon { width: 17px; height: 17px; flex: none; color: var(--a-text); }
.setnav__item:hover { background: var(--a-panel); }
.setnav__item.is-active { background: #EFF6FF; color: var(--blue); font-weight: 600; }
.setnav__item.is-active .icon { color: var(--blue); }

.setcard { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: #fff; border: 1px solid var(--a-line); border-radius: 12px; min-width: 0; }
.setcard__head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 700; }
.setcard__head p { margin-top: 3px; font-size: 13px; color: var(--a-text); }
.setcard__foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--a-line); }
.setcard__foot--split { justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--a-text); }
.setcard__foot--split a:hover { color: var(--blue); text-decoration: underline; }
.setcard__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setcard--flush { padding: 24px 0 0; gap: 14px; }
.setcard--flush .setcard__bar { padding: 0 24px; }
.setgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.setgrid__full { grid-column: 1 / -1; }
.setx .tf > span { font-size: 12px; font-weight: 600; color: var(--a-text); }
.setx .tf textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; line-height: 20px; }
.setx .tf input::placeholder, .setx .tf textarea::placeholder { color: var(--a-muted); }
.setx .tf input[readonly] { background: var(--a-panel); color: var(--a-text); }
.setx .tf .shint { font-size: 11px; color: var(--a-muted); }

/* Ho so */
.setavatar { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--a-line); flex-wrap: wrap; }
.setavatar__pic { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--blue) center / cover no-repeat; color: #fff; font: 700 24px/1 var(--font-body); }
.setavatar__pic.has-photo span { visibility: hidden; }
.setavatar__who { flex: 1; min-width: 180px; }
.setavatar__who b { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.setavatar__who p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--a-text); }
.setavatar__actions { display: flex; gap: 10px; }
.setavatar__actions label { cursor: pointer; }
.setavatar__actions label:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.setavatar__actions [hidden] { display: none; }
.setplan { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; background: #EFF6FF; color: var(--blue); font-size: 11px; font-weight: 600; }
.setplan .icon { width: 12px; height: 12px; }
.uavatar.has-photo { color: transparent; background-size: cover; background-position: center; }
.settiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settiles > div { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 8px; background: var(--a-panel); min-width: 0; }
.settiles span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--a-text); }
.settiles span .icon { width: 14px; height: 14px; }
.settiles b { font-size: 17px; font-weight: 700; color: var(--a-ink); }
.settiles small { font-size: 11.5px; color: var(--a-muted); }

/* Bao mat */
.setnote { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--a-panel); font-size: 12.5px; line-height: 1.5; color: var(--a-text); }
.setnote[hidden] { display: none; }
.setnote .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--blue); }
.setpw { position: relative; display: block; }
.setx .tf .setpw input { padding-right: 44px; }
.setpw__eye { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--a-muted); transform: translateY(-50%); }
.setpw__eye:hover, .setpw__eye.is-on { color: var(--blue); }
.setpw__eye .icon { width: 16px; height: 16px; }
.setstrength { display: grid; gap: 10px; }
.setstrength p { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--a-text); }
.setstrength p b.is-1 { color: var(--a-down); }
.setstrength p b.is-2 { color: #D97706; }
.setstrength p b.is-3, .setstrength p b.is-4 { color: var(--a-up); }
.setstrength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.setstrength__bars i { height: 5px; border-radius: 3px; background: var(--a-chip); }
.setstrength__bars i.is-1 { background: var(--a-down); }
.setstrength__bars i.is-2 { background: #D97706; }
.setstrength__bars i.is-3, .setstrength__bars i.is-4 { background: var(--a-up); }
.setrules { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--a-muted); }
.setrules li { display: flex; align-items: center; gap: 6px; }
.setrules .icon { width: 13px; height: 13px; color: var(--a-line); }
.setrules li.is-ok { color: var(--a-text); }
.setrules li.is-ok .icon { color: var(--a-up); }
.setrows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.setrows > li, .setrows__row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--a-line); }
.setrows > li:first-child, .setrows__row { padding-top: 0; }
.setrows > li:last-child, .setrows__row:last-child { padding-bottom: 0; border-bottom: 0; }
.setrows > li > div, .setrows__row > div { flex: 1; min-width: 0; }
.setrows b { display: block; font-size: 14px; font-weight: 600; }
.setrows small { display: block; margin-top: 2px; font-size: 12px; color: var(--a-muted); overflow-wrap: anywhere; }
.setrows small.is-linked { color: var(--a-up); }
.setrows__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--a-panel); color: var(--a-text); }
.setrows__ic .icon { width: 18px; height: 18px; }
.setrows__ic--fb { color: #1877F2; }
.setsoon { flex: none; padding: 3px 9px; border-radius: 100px; background: var(--a-chip); font-size: 11px; font-weight: 600; color: var(--a-text); white-space: nowrap; }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.setbadge { display: inline-flex; align-items: center; flex: none; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.setbadge--green { background: #ECFDF5; color: var(--a-up); }
.setbadge--blue { background: #EFF6FF; color: var(--blue); }
.setbadge--red { background: #FEF2F2; color: var(--a-down); }
.setdanger { border-color: transparent; background: #FEF2F2; color: var(--a-down); }
.setdanger:hover { border-color: #FECACA; }

/* Lien ket */
.seticon { position: relative; display: block; }
.seticon > .icon { position: absolute; top: 50%; left: 12px; width: 15px; height: 15px; color: var(--a-muted); transform: translateY(-50%); pointer-events: none; }
.setx .tf .seticon input { padding-left: 36px; }

/* Thong bao */
.setmatrix__scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.setmatrix { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.setmatrix thead th { padding: 10px 16px; background: var(--a-panel); font-size: 11.5px; font-weight: 600; color: var(--a-muted); text-align: center; }
.setmatrix thead th:first-child { text-align: left; border-radius: 6px 0 0 6px; }
.setmatrix thead th:last-child { border-radius: 0 6px 6px 0; }
.setmatrix tbody th { padding: 18px 16px; font-weight: 500; text-align: left; }
.setmatrix tbody td { width: 128px; text-align: center; }
.setmatrix tbody tr + tr { border-top: 1px solid var(--a-line); }
.setmatrix .switch { vertical-align: middle; }

/* Goi dich vu */
.setplanhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--a-line); }
.setplanhead__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.setplans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.setplan-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-panel); }
.setplan-card.is-current { border-color: var(--blue); background: #EFF6FF; }
.setplan-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.setplan-card h3 { font-size: 15px; font-weight: 700; }
.setplan-card__pop { font-size: 11px; font-weight: 700; color: var(--blue); }
.setplan-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.setplan-card__price b { font-size: 24px; font-weight: 700; }
.setplan-card__price span { font-size: 12px; color: var(--a-muted); }
.setplan-card ul { display: grid; gap: 8px; flex: 1; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--a-text); }
.setplan-card li { display: flex; gap: 8px; }
.setplan-card li .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--a-up); }
.setplan-card .pill { justify-content: center; width: 100%; background: #fff; }
.setplan-card .pill--primary { background: var(--blue); cursor: default; }
.setcode { display: grid; place-items: center; flex: none; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--a-chip); font-size: 11px; font-weight: 700; color: var(--a-text); }
.sethist__scroll { overflow-x: auto; scrollbar-width: thin; }
.sethist { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; }
.sethist th { padding: 12px 24px; background: #FAFAF8; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); font-size: 12px; font-weight: 600; color: var(--a-muted); text-align: left; white-space: nowrap; }
.sethist td { padding: 18px 24px; border-bottom: 1px solid var(--a-line); }
.sethist tr:last-child td { border-bottom: 0; }
.sethist .h-date { color: var(--a-text); white-space: nowrap; }
.sethist .h-amount { text-align: right; font-weight: 600; white-space: nowrap; }
.sethist .h-status, .sethist .h-invoice { text-align: center; }
.sethist__dl { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--a-text); }
.sethist__dl:hover { background: var(--a-chip); color: var(--blue); }
.sethist__dl .icon { width: 16px; height: 16px; }

/* Ngon ngu */
.setlangs { display: flex; flex-direction: column; }
.setlang { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--a-line); cursor: pointer; }
.setlang:last-child { border-bottom: 0; padding-bottom: 0; }
.setlang:first-child { padding-top: 0; }
.setlang input { position: absolute; opacity: 0; pointer-events: none; }
.setlang__code { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--a-panel); font-size: 12px; font-weight: 700; color: var(--a-text); }
.setlang__name { flex: 1; min-width: 0; }
.setlang__name b { display: block; font-size: 14px; font-weight: 600; }
.setlang__name small { font-size: 12px; color: var(--a-muted); }
.setlang__radio { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--a-line); border-radius: 50%; color: transparent; }
.setlang__radio .icon { width: 13px; height: 13px; stroke-width: 3; }
.setlang input:checked ~ .setlang__radio { border-color: var(--blue); background: var(--blue); color: #fff; }
.setlang input:checked ~ .setlang__code { background: #EFF6FF; color: var(--blue); }
.setlang input:focus-visible ~ .setlang__radio { outline: 2px solid var(--blue); outline-offset: 2px; }
.setlang.is-soon { cursor: default; }
.setlang.is-soon .setlang__name, .setlang.is-soon .setlang__code { opacity: .55; }
.setlang:not(.is-soon):hover .setlang__radio { border-color: var(--blue); }
.setpreview { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--a-panel); font-size: 13px; color: var(--a-text); }
.setpreview .icon { width: 15px; height: 15px; flex: none; }

/* Ket noi nen tang */
.setconn > li { flex-wrap: wrap; }
.setconn__bal { flex: none !important; text-align: right; }
.setconn__bal b { font-family: var(--font-mono); font-size: 14px; }
.setconn .pill .icon { width: 14px; height: 14px; }
.setconn .is-spinning .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.setplatforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.setplatform { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-panel); min-width: 0; }
.setplatform > div { flex: 1; min-width: 0; }
.setplatform b { display: block; font-size: 14px; font-weight: 600; }
.setplatform small { font-size: 11.5px; color: var(--a-muted); }
.setplatform .setcode { background: #fff; }
.setplatform .pill { flex: none; background: #fff; }
.setalert { display: flex; gap: 12px; padding: 16px 18px; border-radius: 10px; background: #EFF6FF; color: var(--blue); }
.setalert > .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.setalert b { font-size: 13.5px; font-weight: 600; }
.setalert p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
.tmodal [data-mt5-only][hidden] { display: none; }

@media (max-width: 1240px) {
  .setx__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
  .setplans, .setplatforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .setx__grid { grid-template-columns: 1fr; gap: 14px; }
  .setnav { position: static; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
  .setnav ul { display: flex; margin: 0; }
  .setnav__group { display: none; }
  .setnav__item { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .setcard { padding: 18px 16px; }
  .setcard--flush { padding: 18px 0 0; }
  .setcard--flush .setcard__bar { padding: 0 16px; }
  .settiles { grid-template-columns: 1fr; }
  .setplans, .setplatforms { grid-template-columns: 1fr; }
  .sethist th, .sethist td { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
  .setgrid { grid-template-columns: 1fr; }
  .setavatar { gap: 14px; }
  .setavatar__actions { width: 100%; }
  .setconn__bal { order: 5; flex-basis: 100% !important; display: flex; align-items: baseline; gap: 8px; padding-left: 58px; text-align: left; }
  .setconn > li { row-gap: 10px; }
  .setconn .pill { order: 6; }
  .setconn .setbadge { order: 4; }
  .setrules { flex-direction: column; }
}

/* ================= Popup trang Tao chien luoc: icon, thong so chi bao, mau nen, ghep mau ================= */
.tmodal--md { width: min(560px, calc(100vw - 24px)); }
.tmodal--lg { width: min(640px, calc(100vw - 24px)); }
.tmodal--xl { width: min(1000px, calc(100vw - 24px)); }
.tform__foot--split { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.tform__foot--split > div { display: flex; gap: 10px; margin-left: auto; }
.pill--danger { border-color: #FCA5A5; color: var(--a-down); }
.pill--danger:hover { background: #FEF2F2; border-color: var(--a-down); }
.pill--violet { border-color: #A78BFA; color: #7C3AED; }
.pill--violet:hover { background: #F5F3FF; }
.pill--violet-solid { border-color: #7C3AED; background: #7C3AED; color: #fff; }
.pill--violet-solid:hover { background: #6D28D9; border-color: #6D28D9; }

/* Nut doi icon o the Thong tin co ban */
.scard__ic--pick { padding: 0; border: 1px dashed #93C5FD; cursor: pointer; }
.scard__ic--pick:hover, .scard__ic--pick:focus-visible { border-style: solid; background: #DBEAFE; outline: none; }

/* Tim kiem + chip loc trong popup */
.pfind { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-muted); }
.pfind .icon { width: 15px; height: 15px; flex: none; }
.pfind input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--a-ink); }
.pfind:focus-within { border-color: var(--blue); color: var(--blue); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchips label { position: relative; }
.pchips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pchips span { display: block; padding: 6px 12px; border-radius: 100px; background: var(--a-chip); font-size: 12px; font-weight: 500; color: var(--a-text); white-space: nowrap; }
.pchips input:checked + span { background: #EFF6FF; color: var(--blue); font-weight: 600; }
.pchips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.psel { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--a-muted); }
.psel__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; background: #EFF6FF; color: var(--blue); font-size: 12px; font-weight: 600; min-width: 0; }
.psel__chip .icon { width: 13px; height: 13px; flex: none; }
.psel__chip .cnd { height: 18px; }

/* Chon icon */
.iconpick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.iconpick__item { position: relative; display: grid; place-items: center; aspect-ratio: 66 / 56; border: 1px solid transparent; border-radius: 6px; background: var(--a-chip); color: var(--a-text); cursor: pointer; }
.iconpick__item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.iconpick__item .icon { width: 20px; height: 20px; pointer-events: none; }
.iconpick__item:hover { background: #ECEAE4; }
.iconpick__item:has(input:checked) { border-color: var(--blue); background: #EFF6FF; color: var(--blue); }
.iconpick__item:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Danh sach chi bao: nut sua */
.ind__edit { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: var(--a-chip); color: var(--a-text); }
.ind__edit .icon { width: 14px; height: 14px; }
.ind__edit:hover { background: #EFF6FF; color: var(--blue); }

/* Chinh thong so chi bao */
.tform__head--tabs { flex-wrap: wrap; padding-bottom: 0; }
.tform__head--tabs > div:first-child { flex: 1; }
.itabs { display: flex; gap: 22px; width: 100%; margin-top: 4px; }
.itabs[hidden] { display: none; }
.tform__head--tabs:has(.itabs[hidden]) { padding-bottom: 20px; }
.itabs button { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 13px; color: var(--a-text); }
.itabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 600; }
.ipanel { display: flex; flex-direction: column; gap: 16px; }
.ipanel[hidden] { display: none; }
.ipanel [hidden] { display: none !important; }
.itype { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--a-line); border-radius: 6px; }
.itype .ind__ic { width: 28px; height: 28px; }
.itype .ind__ic .icon { width: 15px; height: 15px; }
.itype b { display: block; font-size: 13px; font-weight: 600; color: var(--a-ink); }
.itype small { font-size: 11px; color: var(--a-muted); }
.cstep__box { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 4px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; }
.cstep__box button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: var(--a-chip); color: var(--a-text); }
.cstep__box button:hover { background: #EFF6FF; color: var(--blue); }
.cstep__box button .icon { width: 13px; height: 13px; }
.cstep__box input { width: 40px; height: 28px; padding: 0; border: 0; background: none; font: 600 14px/1 var(--font-mono); text-align: center; color: var(--a-ink); }
.cstep__box input:focus { outline: none; }
.cstep__box:focus-within { border-color: var(--blue); }
.cstep__box--wide { display: flex; width: 100%; height: 42px; }
.cstep__box--wide input { flex: 1; width: auto; }
.tf .cstep__box input { height: 28px; border: 0; box-shadow: none; }
.icheck { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--a-ink); cursor: pointer; }
.icheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.iuse { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--a-line); }
.iuse__label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); }
.iuse__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iuse__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--a-line); border-radius: 100px; background: #fff; font-size: 13px; font-weight: 500; color: var(--a-text); }
.iuse__chip .icon { width: 14px; height: 14px; }
.iuse__chip:disabled { opacity: .5; cursor: not-allowed; }
.iuse__chip--entry[aria-pressed="true"] { border-color: transparent; background: #ECFDF5; color: var(--a-up); }
.iuse__chip--exit[aria-pressed="true"] { border-color: transparent; background: #FFFBEB; color: #D97706; }
.iuse__chip--none[aria-pressed="true"] { border-color: var(--a-text); color: var(--a-ink); }
.iswatch { display: flex; gap: 10px; }
.iswatch label { position: relative; }
.iswatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.iswatch i { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--a-line); }
.iswatch input:checked + i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.iswatch input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 5px; }
.sseg--sm label { min-width: 0; }

/* Nen mini */
.cnd { display: block; flex: none; width: auto; height: 28px; max-width: 100%; }

/* O dieu kien "Mau hinh nen": nut mo bang chon */
.rsel--pat { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 32px 0 10px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; font-size: 13px; color: var(--a-ink); text-align: left; }
.rsel--pat:hover { border-color: #C7D2FE; }
.rsel--pat:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.rsel__cnd { height: 22px; flex: none; }
.rsel__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chon mau hinh nen */
.pfilters { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pcount { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--a-text); }
.pcount .sseg { width: auto; }
.pcount .sseg span { padding: 0 12px; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pcol__head { font-size: 12px; font-weight: 600; color: var(--a-text); }
.pitem { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--a-line); border-radius: 8px; background: #fff; cursor: pointer; min-width: 0; }
.pitem input, .psetup input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pitem:hover, .psetup:hover { border-color: #C7D2FE; }
.pitem:has(input:checked) { border-color: var(--blue); background: #EFF6FF; }
.pitem:has(input:focus-visible), .psetup:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.pitem__cnd { display: grid; place-items: center; flex: none; width: 60px; height: 40px; padding: 5px; border-radius: 6px; background: #F7F6EE; }
.pitem__cnd .cnd { height: 28px; }
.pitem__txt { display: grid; gap: 2px; min-width: 0; }
.pitem__txt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem__n { margin-left: auto; align-self: flex-end; font-size: 11px; color: var(--a-muted); white-space: nowrap; }
.pdir { font-size: 11px; font-weight: 500; }
.pdir--bull { color: var(--a-up); }
.pdir--bear { color: var(--a-down); }
.pdir--neutral { color: var(--a-muted); }
.psetups__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; }
.psetups__head h3 { font-size: 14px; font-weight: 700; }
.psetups__head p { margin-top: 2px; font-size: 12px; color: var(--a-muted); }
.psetups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.psetup { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--a-line); border-radius: 10px; background: #fff; cursor: pointer; min-width: 0; }
.psetup:has(input:checked) { border-color: #7C3AED; background: #F5F3FF; }
.psetup__pics { display: flex; align-items: center; justify-content: center; gap: 8px; }
.psetup__pics i { font-style: normal; color: var(--a-muted); }
.psetup > b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psetup__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.psetup__meta small { font-size: 11px; color: var(--a-muted); }
.psetup__rm { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--a-chip); color: var(--a-text); }
.psetup__rm .icon { width: 12px; height: 12px; }
.psetup__rm:hover { background: #FEF2F2; color: var(--a-down); }

/* Ghep mau nen */
.cpair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.cpair__card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--a-line); border-radius: 8px; min-width: 0; }
.cpair__top { display: flex; justify-content: space-between; font-size: 11px; color: var(--a-muted); }
.cpair__top b { color: var(--blue); font-weight: 600; }
.cpair__preview { display: grid; place-items: center; height: 52px; padding: 8px; border-radius: 6px; background: #F7F6EE; }
.cpair__preview .cnd { height: 34px; }
.cpair__select { position: relative; display: block; }
.cpair__select .dd-btn { width: 100%; height: 30px; padding: 0 22px 0 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--a-ink); text-align: left; }
.cpair__select > .icon { position: absolute; right: 0; top: 9px; width: 13px; height: 13px; color: var(--a-muted); pointer-events: none; }
.cpair__link { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--a-muted); }
.cpair__link .icon { width: 15px; height: 15px; }
.cpair__link b { padding: 3px 9px; border-radius: 100px; background: var(--a-chip); font-size: 11px; font-weight: 500; color: var(--a-text); white-space: nowrap; }
.sseg--auto { width: fit-content; max-width: 100%; }
.sseg--auto span { padding: 0 14px; font-size: 12.5px; }
.cstep { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--a-text); }
.cstep[hidden] { display: none; }
.cillus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cillus[hidden] { display: none; }
.cillus__card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 8px; border: 0; border-radius: 8px; background: #FAFAF4; opacity: .5; }
.cillus__card.is-on { background: #F7F6EE; opacity: 1; }
.cillus__row { display: flex; align-items: flex-end; gap: 10px; height: 28px; }
.cillus__row i { display: block; width: 6px; border-radius: 1px; background: #9E9E9E; }
.cillus__row i.is-a, .cillus__row i.is-b { background: var(--blue); }
.cillus__card:not(.is-on) .cillus__row i.is-a, .cillus__card:not(.is-on) .cillus__row i.is-b { background: #93C5FD; }
.cillus__zone { display: flex; align-items: flex-end; gap: 10px; height: 100%; padding: 0 6px; border-radius: 3px; background: #FDE7C8; }
.cillus__lab { display: flex; gap: 36px; font-size: 9px; color: var(--a-text); }
.ctol { display: grid; gap: 8px; font-size: 12px; color: var(--a-text); }
.ctol[hidden] { display: none; }
.ctol > span { font-weight: 600; }
.ctol__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctol__row input { width: 120px; height: 38px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 6px; font: 600 13px/1 var(--font-mono); color: var(--a-ink); }
.ctol__row input:focus { outline: none; border-color: var(--blue); }
.ctol__row input[aria-invalid="true"] { border-color: var(--a-down); }
.ctol__unit { padding: 9px 12px; border: 1px solid var(--a-line); border-radius: 6px; font-weight: 600; color: var(--a-ink); }
.ctol__row code { font: 11px/1.4 var(--font-mono); color: var(--a-muted); }
.ctol__draw { position: relative; height: 62px; border-radius: 8px; background: #F7F6EE; }
.ctol__band { position: absolute; left: 22%; width: 46%; height: 7px; background: #F6D9A8; }
.ctol__c { position: absolute; bottom: 4px; width: 10px; font-size: 9px; text-align: center; color: var(--a-text); }
.ctol__c::before { content: ""; position: absolute; left: 0; width: 10px; background: var(--a-down); border-radius: 1px; }
.ctol__c--a { left: 28%; }
.ctol__c--b { left: 52%; }
.ctol__draw--same_low .ctol__band { bottom: 22px; }
.ctol__draw--same_low .ctol__c::before { bottom: 24px; height: 28px; }
.ctol__draw--same_low .ctol__c--b::before { height: 22px; }
.ctol__draw--same_high .ctol__band { top: 10px; }
.ctol__draw--same_high .ctol__c::before { bottom: 18px; height: 34px; }
.ctol__draw--same_high .ctol__c--b::before { height: 32px; bottom: 20px; }
.ctol__draw--breakout .ctol__band { top: 20px; height: 2px; background: #F59E0B; width: 60%; }
.ctol__draw--breakout .ctol__c--a::before { bottom: 16px; height: 22px; }
.ctol__draw--breakout .ctol__c--b::before { bottom: 16px; height: 36px; background: var(--a-up); }
.ctol__draw em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 10px; font-style: normal; font-weight: 600; color: #D97706; }
.cchain { display: grid; gap: 8px; }
.cchain[hidden] { display: none; }
.cchain p { display: flex; justify-content: space-between; font-size: 12px; color: var(--a-muted); }
.cchain p b { color: var(--a-ink); }
.cchain__box { display: grid; place-items: center; height: 72px; padding: 14px; border-radius: 8px; background: #F7F6EE; }
.cchain__box .cnd { height: 42px; }
.cbanner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: #F5F3FF; color: #7C3AED; }
.cbanner__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #7C3AED; color: #fff; }
.cbanner__ic .icon { width: 14px; height: 14px; }
.cbanner > div { flex: 1; min-width: 0; }
.cbanner b { display: block; font-size: 13px; font-weight: 600; }
.cbanner small { font-size: 11.5px; }
.cbanner em { padding: 3px 9px; border-radius: 100px; background: #7C3AED; color: #fff; font-size: 11px; font-style: normal; font-weight: 600; }
.cbanner em[hidden] { display: none; }
.cbanner.is-new { background: #EFF6FF; color: var(--blue); }
.cbanner.is-new .cbanner__ic { background: var(--blue); }
.cname__title { font-size: 13px; font-weight: 700; color: var(--a-ink); }
.seticon--end > .icon { left: auto; right: 12px; }
.snew .tf .seticon--end input, .tmodal .tf .seticon--end input { padding-left: 12px; padding-right: 36px; }
.tmodal .seticon { position: relative; display: block; }
.tmodal .seticon > .icon { position: absolute; top: 50%; width: 14px; height: 14px; color: var(--a-muted); transform: translateY(-50%); pointer-events: none; }

@media (max-width: 1000px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psetups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .iconpick { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pgrid, .psetups { grid-template-columns: 1fr; }
  .pfilters { align-items: flex-start; flex-direction: column; }
  .pcount { flex-wrap: wrap; }
  .pcount .sseg { max-width: 100%; overflow-x: auto; }
  .cpair { grid-template-columns: 1fr; }
  .cpair__link { flex-direction: row; justify-content: center; }
  .cpair__link .icon { transform: rotate(90deg); }
  .sseg--auto { width: 100%; }
  .sseg--auto span { padding: 0 6px; font-size: 12px; }
  .tform__foot--split > div { width: 100%; justify-content: flex-end; }
}

/* Popup Tao nhanh chien luoc (trang Danh sach) */
[data-quick-modal] .tf > span { font-size: 12px; font-weight: 600; }
[data-quick-modal] .tf > .ufield { padding: 0 12px; font-size: 13px; font-weight: 400; color: var(--a-ink); }
[data-quick-modal] .tf .ufield input, [data-quick-modal] .tf .ufield input:focus { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; box-shadow: none; }
[data-quick-modal] .tf textarea { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 20px; }
[data-quick-modal] .snote { margin: 0; }
.qtags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qtags__list { display: contents; }
.qtags__tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 100px; background: var(--a-chip); font-size: 12px; color: var(--a-text); list-style: none; }
.qtags__tag button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--a-muted); }
.qtags__tag button:hover { background: #FEE2E2; color: var(--a-down); }
.qtags__tag .icon { width: 11px; height: 11px; }
.qtags__add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px dashed var(--a-line); border-radius: 100px; color: var(--a-muted); }
.qtags__add .icon { width: 12px; height: 12px; flex: none; }
.qtags__add input { width: 96px; height: 22px; padding: 0; border: 0; outline: 0; background: none; font-size: 12px; color: var(--a-ink); }
.qtags__add:focus-within { border-style: solid; border-color: var(--blue); color: var(--blue); }
@media (max-width: 600px) {
  [data-quick-modal] .sgrid { grid-template-columns: 1fr; }
}
[data-quick-modal] .qtags__add input, [data-quick-modal] .qtags__add input:focus { width: 96px; height: 22px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 12px; }

/* Menu nguoi dung (dau menu co avatar) + popover Thong bao */
.usermenu__who { display: flex !important; align-items: center; gap: 10px; }
.usermenu__who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.uavatar--lg { flex: none; width: 40px; height: 40px; font-size: 14px; }
.usermenu__sep { margin-top: 4px; border-top: 1px solid var(--a-line) !important; border-radius: 0 0 8px 8px !important; }
.notifmenu { position: relative; }
.notifmenu__panel {
  position: absolute; top: calc(100% + 8px); right: -48px; z-index: 1000; width: min(340px, calc(100vw - 24px)); overflow: hidden;
  background: #fff; border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(26, 26, 26, .12);
}
.notifmenu__panel[hidden] { display: none; }
.notifmenu__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--a-line); }
.notifmenu__head b { font-size: 14px; }
.notifmenu__head button { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--blue); }
.notifmenu__head button:disabled { color: var(--a-muted); cursor: default; }
.notifmenu__list { margin: 0; padding: 4px 0; list-style: none; }
.notif { display: flex; gap: 12px; padding: 12px 16px; }
.notif + .notif { border-top: 1px solid #F3F2EE; }
.notif > div { flex: 1; min-width: 0; }
.notif b { font-size: 13px; font-weight: 600; }
.notif p { margin-top: 2px; font-size: 12px; color: var(--a-text); }
.notif time { flex: none; font-size: 11px; color: var(--a-muted); }
.notif.is-unread b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--blue); vertical-align: 2px; }
.notif__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; }
.notif__ic .icon { width: 14px; height: 14px; }
.notif__ic--fill { background: #ECFDF5; color: var(--a-up); }
.notif__ic--strategy { background: #EFF6FF; color: var(--blue); }
.notif__ic--due { background: #FFFBEB; color: #D97706; }
.notifmenu__all { display: block; padding: 12px; border-top: 1px solid var(--a-line); font-size: 13px; font-weight: 600; color: var(--blue); text-align: center; }
.notifmenu__all:hover { background: #F8FAFF; }
.tool__badge[hidden] { display: none; }

/* Luon giu cho thanh cuon cua trang: loc bai (it bai -> het cuon) khong lam ca bo cuc lech ngang */
html { scrollbar-gutter: stable; }

/* Man rong (3 cot): khoi menu module tren thanh top thang mep trai / phai cua bai trong Bang tin
   (bai = cot giua toi da 632px tru 16px dem moi ben, nam giua man hinh) */
@media (min-width: 1241px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) min(100% - 724px, 600px) minmax(0, 1fr); }
  .topbar__brand { justify-self: start; }
  .topbar__tools { justify-self: end; }
  .topnav { justify-content: space-between; gap: 0; }
}
/* Khong du cho cho ca 5 nhan -> chi giu nhan cua muc dang mo */
@media (max-width: 1340px) {
  .topnav__item span { display: none; }
  .topnav__item.is-active span { display: inline; }
}

/* Bo loc cung co (Chien luoc / Danh sach): o rong bang nhau, tieu de nho can giua doc voi gia tri */
.fsel--eq { width: 184px; flex: none; }
.fsel--eq > span { flex: none; font-size: 10px; line-height: 1; }
.fsel--eq .dd-btn { flex: 1; min-width: 0; display: flex; align-items: center; line-height: 1.2; }
.fsel--eq .dd-value { overflow: hidden; text-overflow: ellipsis; }
.fsel--eq { gap: 5px; padding: 0 12px; }
/* Bo loc cung co (Nhat ky / Chien luoc), man >= 901px: hang 1 = tab + o tim kiem (ben phai), hang 2 = cac o loc chia deu ca hang. */
@media (min-width: 901px) {
  .jtoolbar:has(.fsel--eq) > .jsearch { flex: 0 1 320px; width: auto; min-width: 0; margin-left: auto; }
  .jtoolbar:has(.fsel--eq) > .jsearch input { width: 0; }
  .jtools:has(.fsel--eq) { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; gap: 8px; }
  .fsel--eq { flex: 1 1 0; width: auto; min-width: 0; padding: 0 10px; gap: 4px; }
  .fsel--eq > span { flex: 0 20 auto; min-width: 18px; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
  .fsel--eq .dd-btn { flex: 0 0 auto; max-width: calc(100% - 40px); }
  .fsel--eq > .icon { margin-left: auto; flex: none; }
}
/* O tim kiem rong ~ 3 lan mot o loc (+ 2 khoang cach), co gian khi thieu cho; man nho -> 2 hang (tim kiem cung hang tab) */
@media (min-width: 901px) {
  #journal .jtoolbar > .jsearch { flex: 0 1 520px; min-width: 200px; }    /* 3 x 168 + 16 */
  #strategies .jtoolbar > .jsearch { flex: 0 1 484px; min-width: 200px; } /* 3 x 156 + 16 */
}
/* Man du rong: tab + tim kiem + o loc (rong co dinh, bang nhau) cung mot hang */
@media (min-width: 1700px) {
  #journal .jtoolbar { flex-wrap: nowrap; }
  #journal .jtools { flex: none; }
  #journal .fsel--eq { flex: none; width: 168px; }
}
@media (min-width: 1500px) {
  #strategies .jtoolbar { flex-wrap: nowrap; }
  #strategies .jtools { flex: none; }
  #strategies .fsel--eq { flex: none; width: 156px; }
}
/* O loc cung co: chu nho hon (tieu de 9px, gia tri 12px) */
.fsel--eq { font-size: 12px; }
.fsel--eq > span { font-size: 9px; }
.fsel--eq > .icon { width: 13px; height: 13px; }
.fsel--eq.fsel--time .fsel__clear { margin-left: auto; }
.jtoolbar .tabs { flex: none; }
@media (max-width: 900px) {
  .jtoolbar > .jsearch { flex: 1 1 100%; width: 100%; }
}

/* Popup Tao / Sua nhat ky: o Loi lo tu tinh (chi doc) */
.tf__pnl { display: flex; align-items: center; height: 42px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-panel); font-size: 14px; font-weight: 600; color: var(--a-ink); }
.tf__pnl.is-empty { font: 400 13px/1.4 var(--font-body); color: var(--a-muted); }
.tf__pnl.chg--up { color: var(--a-up); }
.tf__pnl.chg--down { color: var(--a-down); }

/* Tao / Sua chien luoc: khung noi dung gon, de trong 2 ben nhu Bang tin */
.journal.snew { max-width: 1344px; }
.snew__grid { grid-template-columns: minmax(0, 1fr) 420px; }
@media (max-width: 1500px) { .snew__grid { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (max-width: 1100px) { .snew__grid { grid-template-columns: minmax(0, 1fr); } }

/* Chi tiet chien luoc: ban thu hep (de trong 2 ben) + nut chuyen o mep trai */
@media (min-width: 1441px) {
  .journal.sdet { padding-left: 112px; padding-right: 112px; } /* ban rong: chua le 2 ben, nut thu hep nam gon trong le trai */
  .journal.sdet.is-narrow { max-width: 1344px; padding-left: 32px; padding-right: 32px; }
  .sdet.is-narrow .sdet__grid { grid-template-columns: minmax(0, 1fr) 420px; }
}
.sdet__width { position: fixed; left: 20px; top: 88px; z-index: 20; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--a-line); border-radius: 50%; background: #fff; color: var(--a-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); cursor: pointer; }
.sdet__width:hover { background: var(--a-chip); color: var(--blue); }
.sdet__width .icon { width: 16px; height: 16px; }
.sdet__width-wide, .sdet.is-narrow .sdet__width-narrow { display: none; }
.sdet.is-narrow .sdet__width-wide { display: contents; }
.sdet__width-narrow { display: contents; }
@media (max-width: 1440px) { .sdet__width { display: none; } }

/* Chi tiet chien luoc: nut Chay Demo / Live dang chay, trang thai tin hieu che do Auto, popup Xac nhan vao lenh */
.sdet__head .pill--green.is-running { background: #ECFDF5; border-color: #A7F3D0; color: var(--a-up); cursor: default; box-shadow: none; }
.sgbadge.is-matched { border-color: transparent; background: #EFF6FF; color: var(--blue); }
.sgbadge.is-skip { border-color: transparent; background: #F5F4F1; color: #6B7280; cursor: help; }
.sdc__info { margin: 0; padding: 10px 12px; border-radius: 6px; background: #F5F4F1; font-size: 12px; line-height: 1.5; color: var(--a-text); }
.sdc__sum { min-height: 18px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.sdc__sum.is-up { color: var(--a-up); }
.sdc__sum.is-down { color: var(--a-down); }
.sdc__sum.is-open { font-weight: 500; color: var(--a-muted); }
.sdet__head .pill[hidden] { display: none; }
/* Nut Dong o breadcrumb: .sdet__crumbs a (inline-flex) de mat can giua -> can lai icon */
.sdet__crumbs .sdet__close { display: grid; place-items: center; gap: 0; padding: 0; }
.sdet__crumbs .sdet__close:hover { text-decoration: none; }

/* Popup Chon mau hinh nen: o tim kiem nam cung hang tieu de */
.tform__head--find { align-items: center; }
.tform__head--find > div:first-child { flex: none; }
.tform__head--find .pfind { flex: 0 1 420px; min-width: 0; margin-left: auto; }
.tform__head--find .tform__close { flex: none; }
@media (max-width: 700px) {
  .tform__head--find { flex-wrap: wrap; }
  .tform__head--find > div:first-child { flex: 1; }
  .tform__head--find .pfind { order: 3; flex: 1 1 100%; margin-left: 0; }
}

/* ---------- Menu tinh nang (nut luoi tren thanh tren) ---------- */
.fmenu { position: relative; }
.fmenu__panel {
  position: fixed; top: calc(var(--a-top) + 6px); right: 16px; z-index: 1000; display: flex; flex-direction: column;
  width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - var(--a-top) - 20px); max-height: calc(100dvh - var(--a-top) - 20px);
  background: #fff; border: 1px solid var(--a-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); overflow: hidden;
}
.fmenu__panel[hidden] { display: none; }
.fmenu__head { display: flex; align-items: center; gap: 12px; flex: none; padding: 18px 20px; border-bottom: 1px solid var(--a-line); }
.fmenu__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: #EFF6FF; color: var(--blue); }
.fmenu__ic .icon { width: 22px; height: 22px; }
.fmenu__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fmenu__title b { font-size: 18px; font-weight: 700; color: var(--a-ink); }
.fmenu__title span { font-size: 13px; color: var(--a-text); }
.fmenu__find { display: flex; align-items: center; gap: 8px; flex: 0 1 310px; min-width: 0; height: 38px; margin-left: auto; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: var(--a-chip); color: var(--a-muted); }
.fmenu__find .icon { width: 15px; height: 15px; flex: none; }
.fmenu__find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--a-ink); }
.fmenu__find:focus-within { border-color: var(--blue); background: #fff; color: var(--blue); }
.fmenu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 6px 20px 10px; overflow-y: auto; }
.fmenu__group { padding: 16px 0 10px; }
.fmenu__group:nth-child(n + 4) { border-top: 1px solid var(--a-line); }
.fmenu__group[hidden] { display: none; }
.fmenu__group h3 { margin: 0 0 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-ink); }
.fmenu__group ul { margin: 0; padding: 0; list-style: none; }
.fmenu__group li[hidden] { display: none; }
.fmenu__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--a-ink); text-decoration: none; }
.fmenu__item:hover, .fmenu__item:focus-visible { background: var(--a-chip); outline: none; }
.fmenu__iic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; }
.fmenu__iic .icon { width: 16px; height: 16px; }
.fmenu__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fmenu__txt b { font-size: 14px; font-weight: 500; }
.fmenu__txt small { font-size: 12px; color: var(--a-muted); }
.fmenu__group--green .fmenu__iic { background: #ECFDF5; color: #059669; }
.fmenu__group--violet .fmenu__iic { background: #F5F3FF; color: #7C3AED; }
.fmenu__group--red .fmenu__iic { background: #FEF2F2; color: #DC2626; }
.fmenu__group--blue .fmenu__iic { background: #EFF6FF; color: #2563EB; }
.fmenu__group--amber .fmenu__iic { background: #FFFBEB; color: #D97706; }
.fmenu__group--cyan .fmenu__iic { background: #ECFEFF; color: #0891B2; }
.fmenu__empty { margin: 0; padding: 28px 20px; font-size: 13px; color: var(--a-text); text-align: center; }
.fmenu__empty[hidden] { display: none; }
.fmenu__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 22px; flex: none; padding: 14px 20px; border-top: 1px solid var(--a-line); }
.fmenu__foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; }
.fmenu__foot a:hover { text-decoration: underline; }
.fmenu__foot .icon { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .fmenu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmenu__group:nth-child(n + 3) { border-top: 1px solid var(--a-line); }
}
@media (max-width: 600px) {
  .fmenu__panel { right: 8px; width: calc(100vw - 16px); }
  .fmenu__head { flex-wrap: wrap; padding: 14px 16px; }
  .fmenu__find { flex: 1 1 100%; margin-left: 0; }
  .fmenu__grid { grid-template-columns: minmax(0, 1fr); padding: 0 12px 6px; }
  .fmenu__group:nth-child(n + 2) { border-top: 1px solid var(--a-line); }
  .fmenu__foot { justify-content: flex-start; padding: 12px 16px; }
}

/* =================== Trang Khoa hoc =================== */
.capp { display: grid; grid-template-columns: 320px minmax(0, 1fr) 420px; grid-template-areas: "left main right"; align-items: start; max-width: 1920px; margin: 0 auto; }
.cside { grid-area: left; gap: 2px; padding: 24px 16px; border-right: 1px solid var(--a-line); }
.cright { grid-area: right; gap: 16px; padding: 20px; border-left: 1px solid var(--a-line); }
.cmain { grid-area: main; display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 28px 28px 48px; }
.cside__title { margin: 4px 0 10px; font-size: 18px; font-weight: 700; color: var(--a-ink); }
.cnav { display: flex; flex-direction: column; gap: 2px; }
.cnav__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--a-ink); text-align: left; cursor: pointer; }
.cnav__item .icon { width: 18px; height: 18px; flex: none; color: var(--a-text); }
.cnav__item > span:not(.cnav__n) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnav__n { font-size: 12px; color: var(--a-muted); }
.cnav__item:hover { background: var(--a-chip); }
.cnav__item[aria-current="true"] { background: #EFF6FF; color: var(--blue); font-weight: 600; }
.cnav__item[aria-current="true"] .icon, .cnav__item[aria-current="true"] .cnav__n { color: var(--blue); }
.cnav__sec { margin: 10px 0 4px; padding: 10px 0 0; border-top: 1px solid var(--a-line); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-muted); }
.cbox { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 16px; border-radius: 10px; background: var(--a-chip); }
.cbox--bottom { margin-top: auto; }
.cbox__head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--a-ink); }
.cbox__head--split { justify-content: space-between; }
.cbox__head--split > span { display: inline-flex; align-items: center; gap: 8px; }
.cbox__head--split > span .icon { width: 16px; height: 16px; color: #D97706; }
.cbox__text { margin: 0; font-size: 12px; line-height: 1.5; color: var(--a-text); }
.cbox__streak { font-size: 13px; color: #D97706; }
.cbox__pct { font-size: 13px; color: var(--blue); }
.cbox__ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; }
.cbox__ic .icon { width: 16px; height: 16px; }
.cbox__ic--violet { background: #F5F3FF; color: #7C3AED; }
.cbox__ic--amber { background: #FFFBEB; color: #D97706; }
.cbox__ic--blue { background: #EFF6FF; color: var(--blue); }
.cstreak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cstreak i { height: 5px; border-radius: 3px; background: #E5E3DE; }
.cstreak i.is-on { background: #D97706; }
.cbar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #E5E3DE; }
.cbar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 100px; background: var(--blue); font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer; }
.cbtn:hover { background: #1D4ED8; }
.cbtn:disabled { background: #ECFDF5; color: var(--a-up); cursor: default; }
.cbtn--block { width: 100%; }
.cbtn--sm { height: 32px; padding: 0 14px; font-size: 12px; }
.cbtn--ghost { border: 1px solid var(--a-line); background: #fff; color: var(--a-ink); }
.cbtn--ghost:hover { background: var(--a-chip); }
.cbtn--ghost .icon { width: 16px; height: 16px; color: #7C3AED; }
.clink { padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--blue); white-space: nowrap; cursor: pointer; }
.clink:hover { text-decoration: underline; }

.chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.chead__title { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--a-ink); }
.chead__sub { margin-top: 6px; font-size: 14px; color: var(--a-text); }
.chead__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfind { display: flex; align-items: center; gap: 8px; width: 280px; height: 40px; padding: 0 14px; border: 1px solid var(--a-line); border-radius: 100px; background: #fff; color: var(--a-muted); }
.cfind .icon { width: 15px; height: 15px; flex: none; }
.cfind input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--a-ink); }
.cfind:focus-within { border-color: var(--blue); color: var(--blue); }
.cbar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -10px; }
.cbar2 .tab { padding: 7px 14px; font-size: 13px; }
.csort { background: #fff; }
.csec { display: flex; flex-direction: column; gap: 14px; }
.csec[hidden] { display: none; }
.csec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.csec__head h2 { font-size: 19px; font-weight: 700; color: var(--a-ink); }
.csec__head p { margin-top: 2px; font-size: 13px; color: var(--a-text); }
.csec__more { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; }
.csec__more[hidden] { display: none; }
.csec__more .icon { width: 14px; height: 14px; }
.csec__more:hover { text-decoration: underline; }
.cgrid { display: grid; gap: 16px; }
.cgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ctag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; background: #EFF6FF; color: var(--blue); }
.ctag--cert { margin-left: auto; background: #FFFBEB; color: #D97706; }
.ctag .icon { width: 12px; height: 12px; }
.cpill { display: inline-flex; align-items: center; flex: none; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cpill--amber { background: #FFFBEB; color: #D97706; }
.cpill--green { background: #ECFDF5; color: #059669; }

/* Tiep tuc hoc */
.cprog { display: flex; gap: 16px; padding: 14px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; }
.cprog__pic { flex: none; width: 104px; overflow: hidden; border-radius: 10px; }
.cprog__pic .ccover { display: block; width: 100%; height: 100%; }
.cprog__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding: 4px 0; }
.cprog__top { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 13px; color: var(--blue); }
.cprog h3 { font-size: 16px; font-weight: 600; }
.cprog h3 a, .ccard__title a, .cskill h3 a { color: var(--a-ink); text-decoration: none; }
.cprog h3 a:hover, .ccard__title a:hover, .cskill h3 a:hover { color: var(--blue); }
.cprog__meta { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 12.5px; color: var(--a-text); }
.cprog__meta .num { color: var(--a-muted); }

/* Thu thach & trac nghiem */
.ccard2 { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; }
.ccard2__head { display: flex; align-items: flex-start; gap: 12px; }
.ccard2__head > div { flex: 1; min-width: 0; }
.ccard2 h3 { font-size: 15px; font-weight: 600; color: var(--a-ink); }
.ccard2__head p { margin-top: 2px; font-size: 12px; color: var(--a-muted); }
.cdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cdays li { display: grid; place-items: center; height: 32px; border-radius: 100px; background: var(--a-chip); font-size: 12px; color: var(--a-muted); }
.cdays li .icon { width: 14px; height: 14px; }
.cdays li.is-done { background: #059669; color: #fff; }
.cdays li.is-today { background: #D97706; color: #fff; }
.ccard2__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; font-size: 12.5px; color: var(--a-text); }
.ccard2__foot p { display: flex; align-items: center; gap: 10px; margin: 0; }
.ccard2__foot p b { color: var(--a-ink); }
.ccard2__foot--line { padding-top: 12px; border-top: 1px solid var(--a-line); }
.ccard2__foot--line b { color: var(--a-ink); }
.cxp { font-weight: 600; color: #7C3AED; }
.cquiz { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--a-chip); }
.cquiz > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cquiz b { font-size: 13.5px; font-weight: 600; color: var(--a-ink); }
.cquiz small { font-size: 11.5px; color: var(--a-muted); }

/* The khoa hoc */
.ccard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; transition: box-shadow .15s; }
.ccard[hidden] { display: none; }
.ccard:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.ccard__pic { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.ccover { display: block; width: 100%; height: 100%; }
.ccard__level { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 100px; background: rgba(255, 255, 255, .92); font-size: 11.5px; font-weight: 600; color: var(--a-ink); }
.ccard__rate { position: absolute; bottom: 10px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; color: var(--a-ink); }
.ccard__rate .icon { width: 13px; height: 13px; color: #F59E0B; }
.ccard__rate small { font-weight: 400; color: var(--a-muted); }
.ccard__save { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--a-text); cursor: pointer; }
.ccard__save .icon { width: 15px; height: 15px; }
.ccard__save:hover { color: var(--blue); }
.ccard__save[aria-pressed="true"] { color: var(--blue); }
.ccard__save[aria-pressed="true"] .icon { fill: currentColor; }
.ccard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.ccard__topic { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--blue); }
.ccard__title { font-size: 16px; font-weight: 600; line-height: 1.35; }
.ccard__meta { display: flex; gap: 16px; margin: 0; font-size: 12.5px; color: var(--a-text); }
.ccard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ccard__meta .icon { width: 14px; height: 14px; color: var(--a-muted); }
.ccard__state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--blue); }
.ccard__state .cbar { flex: 1; max-width: 140px; }
.ccard__state.is-done { color: var(--a-up); }
.ccard__state .icon { width: 14px; height: 14px; }
.ccard__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--a-line); font-size: 12.5px; color: var(--a-text); }
.ccard__teacher { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__price { font-size: 14px; color: var(--blue); }
.cavatar { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #EFF6FF; font-size: 10px; font-weight: 700; color: var(--blue); }
.cavatar--violet { width: 32px; height: 32px; background: #F5F3FF; color: #7C3AED; font-size: 11px; }
.cavatar--blue { width: 28px; height: 28px; background: var(--blue); color: #fff; }

/* Chu de ky nang */
.cskill { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; }
.cskill.is-flash { animation: cflash 1.6s ease; }
@keyframes cflash { 0%, 60% { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }
.cskill__top { display: flex; align-items: flex-start; justify-content: space-between; margin: 0; }
.cskill__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; }
.cskill__ic .icon { width: 20px; height: 20px; }
.cskill h3 { margin-top: 4px; font-size: 17px; font-weight: 600; }
.cskill__desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--a-text); }
.cskill__meta { display: flex; justify-content: space-between; margin: auto 0 0; font-size: 11.5px; color: var(--a-muted); }
.cskill__meta b { color: var(--a-ink); }
.cskill--red .cskill__ic { background: #FEF2F2; color: #DC2626; }
.cskill--red .cbar i { background: #DC2626; }
.cskill--blue .cskill__ic { background: #EFF6FF; color: #2563EB; }
.cskill--amber .cskill__ic { background: #FFFBEB; color: #D97706; }
.cskill--amber .cbar i { background: #D97706; }
.cskill--violet .cskill__ic { background: #F5F3FF; color: #7C3AED; }
.cskill--violet .cbar i { background: #7C3AED; }
.cskill--green .cskill__ic { background: #ECFDF5; color: #059669; }
.cskill--green .cbar i { background: #059669; }

/* Banner */
.cbanner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 32px 36px; border-radius: 16px; background: linear-gradient(100deg, #2563EB, #4F46E5); color: #fff; }
.cbanner[hidden] { display: none; }
.cbanner::before { content: ""; position: absolute; left: -60px; top: -40px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.cbanner > * { position: relative; }
.cbanner__kicker { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .75; }
.cbanner h2 { font-size: 24px; font-weight: 700; }
.cbanner p:last-child { margin: 6px 0 0; font-size: 13.5px; opacity: .85; }
.cbanner__btn { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 20px; border: 0; border-radius: 100px; background: #fff; font-size: 14px; font-weight: 600; color: var(--blue); cursor: pointer; }
.cbanner__btn .icon { width: 16px; height: 16px; }

/* Cot phai */
.rcard { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; }
.rcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rcard__head h2 { font-size: 15px; font-weight: 700; color: var(--a-ink); }
.rcard__head p { margin-top: 2px; font-size: 12px; color: var(--a-muted); }
.rcard__up { font-size: 12.5px; color: var(--a-up); }
.rcard__blue { font-size: 12.5px; color: var(--blue); }
.rboard { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rboard li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.rboard li > b { margin-left: auto; color: var(--a-ink); }
.rboard__rank { width: 16px; text-align: center; font-size: 12px; color: var(--a-muted); }
.rboard__rank--1 { color: #D97706; font-weight: 700; }
.rboard__rank--3 { color: #B45309; font-weight: 700; }
.rboard__who { display: flex; flex-direction: column; min-width: 0; }
.rboard__who b { font-weight: 600; color: var(--a-ink); }
.rboard__who small { font-size: 11px; color: var(--a-muted); }
.rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--a-line); font-size: 12.5px; color: var(--a-text); }
.rcard__foot > span { display: inline-flex; align-items: center; gap: 8px; }
.rstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rstat { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--a-chip); }
.rstat p { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 11.5px; color: var(--a-text); }
.rstat b { font-size: 21px; color: var(--a-ink); }
.rstat small { font-size: 11px; color: var(--a-muted); }
.rstat__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.rstat__ic .icon { width: 13px; height: 13px; }
.rstat__ic--blue { color: var(--blue); }
.rstat__ic--green { color: #059669; }
.rstat__ic--violet { color: #7C3AED; }
.rstat__ic--amber { color: #D97706; }
.rbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 130px; }
.rbars__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.rbars__col i { display: block; width: 100%; max-width: 44px; min-height: 6px; border-radius: 6px 6px 3px 3px; background: var(--blue); }
.rbars__col i.is-max { background: #7C3AED; }
.rbars__col span { font-size: 11px; color: var(--a-muted); }
.rmeter p { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 12.5px; color: var(--a-text); }
.rmeter b { color: var(--a-ink); }
.rlist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rlist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--a-chip); }
.rlist__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rlist__txt b { font-size: 13px; font-weight: 600; color: var(--a-ink); }
.rlist__txt small { font-size: 11.5px; color: var(--a-muted); }
.rdate { display: flex; flex-direction: column; align-items: center; flex: none; width: 42px; padding: 4px 0; border-radius: 8px; background: #EFF6FF; color: var(--blue); }
.rdate b { font-size: 16px; line-height: 1.1; }
.rdate small { font-size: 10px; }

@media (max-width: 1600px) {
  .capp { grid-template-columns: 280px minmax(0, 1fr) 360px; }
}
@media (max-width: 1380px) {
  .cgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1440px) {
  .capp { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "left main" "left right"; }
  .cright { position: static; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 0 28px 40px; border-left: 0; background: none; }
}
@media (max-width: 900px) {
  .capp { display: flex; flex-direction: column; }
  .capp > * { min-width: 0; max-width: 100%; }
  .cside::before { content: none; }
  .cbar2 .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cside { position: static; height: auto; overflow: visible; padding: 16px 16px 0; border-right: 0; background: none; }
  .cside__title, .cside .cbox, .cnav__sec { display: none; }
  .cnav { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .cnav__item { flex: none; width: auto; padding: 7px 12px; border: 1px solid var(--a-line); border-radius: 100px; background: #fff; font-size: 13px; }
  .cnav__item > span:not(.cnav__n) { flex: none; overflow: visible; }
  .cmain { padding: 20px 16px 32px; }
  .cright { display: flex; padding: 0 16px 32px; }
  .chead__tools { width: 100%; }
  .chead__tools .cfind { flex: 1; width: auto; }
}
@media (max-width: 640px) {
  .cgrid--2, .cgrid--3 { grid-template-columns: minmax(0, 1fr); }
  .cbanner { flex-direction: column; align-items: flex-start; padding: 24px; }
  .chead__title { font-size: 24px; }
}

/* Popup Canh bao chua luu (Tao / Sua chien luoc) */
.tmodal--leave { width: min(520px, calc(100vw - 24px)); }
.tform__close--sq { border-radius: 6px; }
.leavewarn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 6px; background: #FFFBEB; }
.leavewarn > .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #D97706; }
.leavewarn b { display: block; font-size: 13px; font-weight: 700; color: #D97706; }
.leavewarn p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--a-text); }
.leavehint { margin: 0; font-size: 11.5px; color: var(--a-muted); }
.pill--danger-ghost { border: 1px solid #DC2626; background: transparent; color: #DC2626; }
.pill--danger-ghost:hover { background: #FEF2F2; }

/* Cai dat (Ho so ca nhan...): khung noi dung gon, de trong 2 ben nhu trang Tao chien luoc */
.journal.setx { max-width: 1344px; }
/* Menu tinh nang: khoang cach dong sat thiet ke */
.fmenu__item { padding: 9px 8px; }
.fmenu__iic { width: 30px; height: 30px; }
.fmenu__txt { gap: 0; line-height: 1.3; }
.fmenu__txt small { font-size: 11.5px; }
.fmenu__group { padding: 18px 0 10px; }

img.ccover { object-fit: cover; }

/* =================== Trang Bai hoc =================== */
.lapp { display: grid; grid-template-columns: 380px minmax(0, 1fr) 420px; grid-template-areas: "left main right"; align-items: start; max-width: 1920px; margin: 0 auto; }
.ltoc { grid-area: left; gap: 0; padding: 24px 16px; border-right: 1px solid var(--a-line); }
.lright { grid-area: right; gap: 16px; padding: 20px; border-left: 1px solid var(--a-line); }
.lmain { grid-area: main; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px 28px 40px; }
.ltoc__title { font-size: 16px; font-weight: 700; color: var(--a-ink); }
.ltoc__sub { margin: 2px 0 14px; font-size: 12px; color: var(--a-muted); }
.ltoc__plabel { margin: 0 0 8px; font-size: 12px; color: var(--a-text); }
.ltoc__bar { margin-bottom: 16px; }
.ltoc__list { display: flex; flex-direction: column; gap: 4px; }
.lch__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font-size: 13.5px; font-weight: 600; color: var(--a-ink); text-align: left; cursor: pointer; }
.lch__head:hover { background: var(--a-chip); }
.lch__head .icon { width: 14px; height: 14px; flex: none; color: var(--a-muted); transition: transform .15s; }
.lch__head[aria-expanded="true"] .icon { transform: rotate(90deg); }
.lch__name { flex: 1; min-width: 0; }
.lch__n { font-size: 11px; font-weight: 500; color: var(--a-muted); }
.lch.is-current .lch__head { background: #EFF6FF; color: var(--blue); }
.lch.is-current .lch__head .icon, .lch.is-current .lch__n { color: var(--blue); }
.lch__list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; padding: 0; list-style: none; }
.lch__list[hidden] { display: none; }
.lles { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 30px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 13px; color: var(--a-ink); text-align: left; cursor: pointer; }
.lles:hover { background: var(--a-chip); }
.lles .icon { width: 16px; height: 16px; flex: none; color: var(--a-muted); }
.lles.is-done .icon { color: var(--a-up); }
.lles__name { flex: 1; min-width: 0; }
.lles__dur { font-size: 11px; color: var(--a-muted); }
.lles.is-current { border-color: var(--blue); background: #fff; color: var(--blue); font-weight: 600; }
.lles.is-current .icon, .lles.is-current .lles__dur { color: var(--blue); }
.lpractice { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding: 16px; border-radius: 12px; background: #EFF6FF; }
.lpractice__head, .lcert__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.lpractice__head > span:last-child, .lcert__head > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lpractice__head b { font-size: 15px; color: var(--a-ink); }
.lpractice__head small, .lcert__head small { font-size: 12px; color: var(--a-text); }
.lpractice__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blue); color: #fff; }
.lpractice__ic .icon { width: 18px; height: 18px; }
.lpractice__btn { background: #7C3AED; }
.lpractice__btn:hover { background: #6D28D9; }
.lpractice__btn .icon { width: 15px; height: 15px; }
.lcert { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--a-chip); }
.lcert__head b { font-size: 13.5px; color: var(--a-ink); }
.lcert__left { margin: 0; font-size: 11.5px; color: var(--a-muted); }

.lcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--a-muted); }
.lcrumbs a { color: var(--a-muted); text-decoration: none; }
.lcrumbs a:hover { color: var(--blue); }
.lcrumbs .icon { width: 13px; height: 13px; }
.lcrumbs span { color: var(--a-ink); font-weight: 500; }
.lvideo { position: relative; overflow: hidden; aspect-ratio: 16 / 7.2; border-radius: 14px; background: #0B1220; }
.lvideo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.lvideo__badge { position: absolute; top: 20px; left: 20px; padding: 5px 12px; border-radius: 100px; background: rgba(15, 23, 42, .65); font-size: 12px; font-weight: 600; color: #fff; }
.lvideo__hd { position: absolute; top: 20px; right: 20px; padding: 4px 9px; border-radius: 6px; background: rgba(15, 23, 42, .65); font-size: 11px; font-weight: 600; color: #fff; }
.lvideo__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--a-ink); transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); cursor: pointer; }
.lvideo__play .icon { width: 30px; height: 30px; margin-left: 4px; }
.lvideo__play:hover { transform: translate(-50%, -50%) scale(1.05); }
.lvideo__bar { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; background: linear-gradient(transparent, rgba(2, 6, 23, .85)); color: #fff; }
.lvideo__bar button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.lvideo__bar .icon { width: 18px; height: 18px; }
.lvideo__track { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.lvideo__track i { display: block; height: 100%; background: var(--blue); }
.lvideo__time { font-size: 12.5px; font-weight: 600; }
.lhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lhead__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lhead__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.lhead__tags .ctag { text-transform: uppercase; letter-spacing: .3px; }
.lpill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; background: var(--a-chip); font-size: 11.5px; font-weight: 600; color: var(--a-text); }
.lpill[hidden] { display: none; }
.lpill .icon { width: 13px; height: 13px; }
.lpill--green { background: #ECFDF5; color: var(--a-up); }
.lhead__title { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--a-ink); }
.lhead__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 13px; color: var(--a-text); }
.lhead__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.lhead__meta .icon { width: 14px; height: 14px; color: var(--a-muted); }
.lhead__actions { display: flex; gap: 10px; }
.lhead__actions .icon { width: 16px; height: 16px; }
.lhead__docs .icon { color: var(--a-ink); }
.cbtn.is-done { background: #ECFDF5; color: var(--a-up); }
.ltabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; scroll-margin-top: calc(var(--a-top) + 12px); }
.ltabs .tab { padding: 7px 14px; font-size: 13px; }
.ltabs__save { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--a-muted); }
.ltabs__save .icon { width: 14px; height: 14px; }
.lpanel { display: flex; flex-direction: column; gap: 14px; }
.lpanel[hidden], .lpanel [hidden] { display: none; }
.lpanel__intro { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--a-text); }
.lpanel__h { margin: 18px 0 10px; font-size: 15px; font-weight: 700; color: var(--a-ink); }
.llearn { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.llearn li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--a-ink); }
.llearn .icon { width: 16px; height: 16px; flex: none; color: var(--a-up); }
.ltip { display: flex; gap: 12px; margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: #FFFBEB; }
.ltip > .icon { flex: none; width: 18px; height: 18px; color: #D97706; }
.ltip b { font-size: 13.5px; color: #D97706; }
.ltip p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--a-text); }
.lfiles { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lfiles li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--a-chip); }
.lpanel .lfiles li { background: #fff; border: 1px solid var(--a-line); }
.lfile__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; }
.lfile__ic .icon { width: 16px; height: 16px; }
.lfile__ic--pdf { background: #FEF2F2; color: #DC2626; }
.lfile__ic--sheet { background: #ECFDF5; color: #059669; }
.lfile__ic--slide { background: #EFF6FF; color: var(--blue); }
.lfile__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lfile__txt b { overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--a-ink); text-overflow: ellipsis; white-space: nowrap; }
.lfile__txt small { font-size: 11px; color: var(--a-muted); }
.lfile__dl { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--a-muted); cursor: pointer; }
.lfile__dl:hover { background: #fff; color: var(--blue); }
.lfile__dl .icon { width: 15px; height: 15px; }
.ldiscuss { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ldiscuss li { display: flex; gap: 12px; }
.ldiscuss__who { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; color: var(--a-ink); }
.ldiscuss__who small { font-size: 11.5px; color: var(--a-muted); }
.ldiscuss li > div > p:last-child { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--a-text); }
.lcompose { display: flex; gap: 10px; }
.lcompose input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--a-line); border-radius: 100px; font-size: 13px; }
.lnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--a-line); }
.lnav__mid { margin: 0; font-size: 12.5px; color: var(--a-muted); text-align: center; }
.lnav .icon { width: 15px; height: 15px; }
.lnav .cbtn:disabled { opacity: .45; background: var(--a-chip); color: var(--a-muted); cursor: default; }

.lcourse { gap: 10px; }
.lcourse__pic { position: relative; overflow: hidden; aspect-ratio: 3 / 1; border-radius: 10px; }
.lcourse__pic img { width: 100%; height: 100%; object-fit: cover; }
.lcourse__tag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 100px; background: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--blue); text-transform: uppercase; }
.lcourse__title { font-size: 17px; font-weight: 700; color: var(--a-ink); }
.lteacher { display: flex; align-items: center; gap: 10px; margin: 0; }
.lteacher > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lteacher b { font-size: 13px; font-weight: 600; color: var(--a-ink); }
.lteacher small { font-size: 11px; color: var(--a-muted); }
.lteacher--lg .cavatar { width: 44px; height: 44px; font-size: 14px; }
.lteacher--lg b { font-size: 14.5px; }
.lteacher--lg small { font-size: 12px; }
.lcourse__stats { display: flex; justify-content: space-between; margin: 0; font-size: 12.5px; color: var(--a-text); }
.lcourse__stats > span { display: inline-flex; align-items: center; gap: 5px; }
.lcourse__stats .icon { width: 13px; height: 13px; color: var(--a-muted); }
.lstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lstats p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.lstats p:nth-child(2) { align-items: center; }
.lstats p:last-child { align-items: flex-end; }
.lstats b { font-size: 14px; color: var(--a-ink); }
.lstats small { font-size: 11px; color: var(--a-muted); }
.lright__h { font-size: 15px; font-weight: 700; color: var(--a-ink); }
.lright__bio { margin: 0; font-size: 13px; line-height: 1.6; color: var(--a-text); }
.lcount { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; background: var(--a-chip); font-size: 11px; color: var(--a-text); }
.lnotes { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lnote { display: flex; align-items: flex-start; gap: 10px; }
.lnote > .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: #D97706; }
.lnote > div { flex: 1; min-width: 0; }
.lnote p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--a-ink); }
.lnote small { font-size: 11px; color: var(--a-muted); }
.lnote--empty { font-size: 13px; color: var(--a-muted); }
.lnote__rm { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--a-muted); cursor: pointer; }
.lnote__rm:hover { background: #FEF2F2; color: var(--a-down); }
.lnote__rm .icon { width: 14px; height: 14px; }
.lpanel .lnotes { padding: 16px; border: 1px solid var(--a-line); border-radius: 12px; background: #fff; }
.lnote-add label { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 8px; background: var(--a-chip); color: var(--blue); }
.lnote-add .icon { width: 14px; height: 14px; flex: none; }
.lnote-add input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--a-ink); }
.lnote-add label:focus-within { box-shadow: 0 0 0 2px var(--blue) inset; background: #fff; }

@media (max-width: 1600px) {
  .lapp { grid-template-columns: 320px minmax(0, 1fr) 360px; }
}
@media (max-width: 1440px) {
  .lapp { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "left main" "left right"; }
  .lright { position: static; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 0 28px 40px; border-left: 0; background: none; }
}
@media (max-width: 900px) {
  .lapp { display: flex; flex-direction: column; }
  .lapp > * { min-width: 0; max-width: 100%; }
  .lmain { order: -1; padding: 16px 16px 24px; }
  .ltoc { position: static; height: auto; overflow: visible; padding: 0 16px 16px; border-right: 0; background: none; }
  .ltoc::before { content: none; }
  .ltoc__list { padding: 8px; border: 1px solid var(--a-line); border-radius: 12px; background: #fff; }
  .lpractice { margin-top: 16px; }
  .lright { display: flex; align-items: stretch; padding: 0 16px 32px; }
  .lvideo { aspect-ratio: 16 / 9; }
  .lvideo__play { width: 64px; height: 64px; }
  .ltabs .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lhead__title { font-size: 21px; }
}
@media (max-width: 560px) {
  .lhead__actions { width: 100%; }
  .lhead__actions .cbtn { flex: 1; }
  .lnav__mid { display: none; }
}


/* ---------- Ảnh đại diện: bấm để đổi, kéo thả ảnh, popup căn chỉnh ---------- */
.setavatar { position: relative; }
button.setavatar__pic { position: relative; padding: 0; border: 0; overflow: hidden; cursor: pointer; }
button.setavatar__pic:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.setavatar__cam { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .5); color: #fff; opacity: 0; transition: opacity .15s; }
.setavatar__cam .icon { width: 22px; height: 22px; }
button.setavatar__pic:hover .setavatar__cam, button.setavatar__pic:focus-visible .setavatar__cam { opacity: 1; }
.setavatar__pic.has-photo .setavatar__cam { visibility: visible; }
.setavatar__drop { position: absolute; inset: -8px -8px 12px; z-index: 1; display: none; place-items: center; margin: 0; border: 2px dashed var(--blue); border-radius: 14px; background: rgba(239, 246, 255, .94); font-size: 14px; font-weight: 600; color: var(--blue); pointer-events: none; }
.setavatar.is-drop .setavatar__drop { display: grid; }

.acrop { position: relative; width: min(280px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #0F172A; cursor: grab; touch-action: none; user-select: none; }
.acrop:active { cursor: grabbing; }
.acrop:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.acrop canvas { display: block; width: 100%; height: 100%; }
.acrop__ring { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 999px rgba(15, 23, 42, .55); pointer-events: none; }
.acrop__zoom { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); margin: 16px auto 0; }
.acrop__zoom input { flex: 1; accent-color: var(--blue); }
.acrop__btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--a-muted); cursor: pointer; }
.acrop__btn:hover { background: var(--a-chip); color: var(--a-ink); }
.acrop__btn .icon { width: 18px; height: 18px; }
.acrop__tools { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.acrop__tools label { cursor: pointer; }
.acrop__tools label:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-crop-save]:disabled { opacity: .7; cursor: progress; }

/* ---------- Lịch kinh tế: dữ liệu thật (/api/calendar) ---------- */
.cal { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cal__day { position: sticky; top: 0; z-index: 1; padding: 8px 4px 6px; border-bottom: 1px solid var(--a-line); background: #fff; font-size: 11px; font-weight: 600; color: var(--a-muted); text-transform: capitalize; }
.cal__day.is-today { color: var(--blue); }
.cal__row.is-past { opacity: .55; }
.impact--0 i { background: var(--a-line); }
.cal__filter { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; color: var(--a-text); cursor: pointer; }
.cal__filter input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.cal__src { margin: 8px 0 0; font-size: 10px; text-align: right; }

/* ---------- Bot tin tức trên Bảng tin ---------- */
.botfeed { display: contents; }
.botav { display: grid; place-items: center; color: #fff; }
.botav .icon { width: 20px; height: 20px; }
.botav--vnstock { background: #059669; }
.botav--macro { background: #7C3AED; }
.botav--global { background: var(--blue); }
.botav--crypto { background: #D97706; }
.botbadge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; background: var(--a-chip); font-size: 10px; font-weight: 600; color: var(--a-muted); }
.botbadge .icon { width: 11px; height: 11px; }
.linkcard--news { min-height: 0; color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
.linkcard--news:hover { border-color: var(--blue); background: #F8FAFF; }
.linkcard--news:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.linkcard--news img { width: 150px; height: 100px; background: var(--a-chip); }
.linkcard--news .linkcard__title { font-weight: 600; }
.trnote { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 11px; color: var(--a-muted); cursor: pointer; }
.trnote:hover { color: var(--blue); text-decoration: underline; }
.botfeed__more { align-self: center; margin: 4px auto 8px; }
.botfeed__more[hidden] { display: none; }
@media (max-width: 640px) {
  .linkcard--news img { width: 100%; height: 160px; }
}
.newsq { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.newsq[hidden] { display: none; }
.newsq label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--a-text); cursor: pointer; }
.newsq input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.newsq small { font-size: 11px; color: var(--a-muted); }
.topbadge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: #FEF3C7; font-size: 10px; font-weight: 700; color: #B45309; }
.topbadge .icon { width: 11px; height: 11px; }
.botav--reddit { background: #FF4500; }

/* ---------- Giá thời gian thực (cột trái) ---------- */
[data-q] { border-radius: 4px; transition: background-color .6s; }
[data-q].tick-up { animation: tickUp .9s ease-out; }
[data-q].tick-down { animation: tickDown .9s ease-out; }
@keyframes tickUp { from { background-color: rgba(5, 150, 105, .18); } to { background-color: transparent; } }
@keyframes tickDown { from { background-color: rgba(220, 38, 38, .16); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { [data-q].tick-up, [data-q].tick-down { animation: none; } }
.live--sm { font-size: 10px; }
.live--sm[hidden] { display: none; }
.markets__src { margin: 6px 0 0; font-size: 10px; line-height: 1.4; }

/* ---------- Bài của Bot Giá cả ---------- */
.botav--prices { background: #0891B2; }
.pricecard { display: flex; flex-direction: column; border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden; }
.pricecard__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; }
.pricecard__row + .pricecard__row { border-top: 1px solid var(--a-line); }
.pricecard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text); }
.pricecard__v { font-weight: 600; color: var(--a-ink); text-align: right; }
.pricecard__row .chg { text-align: right; }
.pricecard__h { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--a-muted); }
.pricecard__src { margin: 0; font-size: 11px; color: var(--a-muted); }
.pricealert { font-weight: 600; }
.coinchips { display: flex; flex-wrap: wrap; gap: 6px; }
.coinchip { padding: 3px 10px; border-radius: 999px; background: var(--a-chip); font-size: 12px; font-weight: 600; color: var(--a-ink); }
@media (max-width: 640px) {
  .pricecard__row { grid-template-columns: minmax(0, 1fr) auto 58px; gap: 8px; padding: 8px 10px; }
}

/* ---------- Kết nối MT5 (Cài đặt > Kết nối nền tảng) ---------- */
.setbadge--amber { background: #FEF3C7; color: #B45309; }
.setalert--sm { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.setalert--sm .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--a-up); }
.setalert--sm[hidden] { display: none; }
.tform [data-api-only][hidden] { display: none; }
.mt5key { display: flex; gap: 8px; }
.mt5key input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-chip);
  font: 600 13px/1 var(--font-mono); color: var(--a-ink); }
.mt5steps { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.55; color: var(--a-text); }
.mt5steps li::marker { font-weight: 700; color: var(--blue); }
.mt5steps .pill { margin-left: 4px; vertical-align: middle; }
.mt5status { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: #FFFBEB; font-size: 13px; font-weight: 600; color: #B45309; }
.mt5status i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.mt5status.is-ok { background: #ECFDF5; color: var(--a-up); }
.mt5status.is-ok i { animation: none; }
[data-mt5-modal] .pill[hidden] { display: none; }
.mt5key .pill { flex: none; }

/* ---------- Trình hướng dẫn kết nối MT5 (Cài đặt) ---------- */
.mgwiz .tform__body { min-height: 300px; }
.mgbar { height: 4px; background: var(--a-chip); }
.mgbar i { display: block; width: 20%; height: 100%; background: var(--blue); transition: width .3s ease; }
.mgstep h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 700; color: var(--a-ink); }
.mgstep__n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); font-size: 13px; font-weight: 700; color: #fff; }
.mgstep[hidden] { display: none; }
.mg__text { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--a-text); }
.mg__path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.mg__crumb { padding: 5px 10px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-chip); font-size: 13px; font-weight: 600; color: var(--a-ink); }
.mg__path .icon { width: 14px; height: 14px; color: var(--a-muted); }
.mg__dl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; }
.mg__src { font-size: 12.5px; color: var(--a-muted); text-decoration: underline; }
.mg__copy { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.mg__copy code { padding: 8px 12px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-chip); font: 600 13px/1.2 var(--font-mono); color: var(--a-ink); }
.mg__copy input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-chip); font: 600 13px/1 var(--font-mono); color: var(--a-ink); }
.mg__copy .pill { flex: none; }
.mg__tip, .mg__note { display: flex; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFFBEB; font-size: 13px; line-height: 1.55; color: #92400E; }
.mg__note { background: #EFF6FF; color: var(--blue); }
.mg__tip .icon, .mg__note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.mgtrouble { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 10px; font-size: 13px; }
.mgtrouble summary { cursor: pointer; font-weight: 600; color: var(--a-ink); }
.mgtrouble p { margin: 10px 0 0; line-height: 1.55; color: var(--a-text); }
.mgtrouble b { display: block; color: var(--a-ink); }
.mgtrouble[hidden] { display: none; }
.mgwiz__foot { justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mgwiz__guide { font-size: 12.5px; color: var(--a-muted); text-decoration: underline; }
.mgwiz__nav { display: flex; gap: 8px; margin-left: auto; }
.mgwiz__nav .pill[hidden] { display: none; }

/* ---------- Hộp xác nhận (ltApp.confirm, thay hộp thoại mặc định của trình duyệt) ---------- */
.lconfirm { width: min(420px, calc(100vw - 24px)); }
.lconfirm__body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 28px 8px; text-align: center; }
.lconfirm__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: #FEF2F2; color: #DC2626; }
.lconfirm__icon .icon { width: 24px; height: 24px; }
.lconfirm--warning .lconfirm__icon { background: #FFFBEB; color: #D97706; }
.lconfirm h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--a-ink); overflow-wrap: anywhere; }
.lconfirm p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--a-text); }
.lconfirm__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 28px 24px; }
.lconfirm__foot .pill { justify-content: center; min-height: 40px; }
.pill--danger-solid { border-color: #DC2626; background: #DC2626; color: #fff; }
.pill--danger-solid:hover { border-color: #B91C1C; background: #B91C1C; }
.pill--danger-solid:focus-visible { outline: 2px solid #DC2626; outline-offset: 2px; }

/* Minh hoạ tab Inputs của MT5 (hướng dẫn kết nối, bước 4) */
.mg__sub { margin: 10px 0 0; padding-left: 22px; list-style: decimal; font-size: 14px; line-height: 1.7; }
.mg__sub li::marker { font-weight: 700; color: var(--blue); }
.mg__sub li + li { margin-top: 2px; }
.mtmock { margin: 14px 0 0; }
.mtmock__win { overflow: hidden; border: 1px solid #C9CED6; border-radius: 6px; background: #F0F0F0; font: 12px/1.3 "Segoe UI", Tahoma, sans-serif; color: #1F2328; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.mtmock__title { padding: 7px 10px; background: #fff; border-bottom: 1px solid #E1E4E8; }
.mtmock__tabs { display: flex; gap: 14px; padding: 6px 10px 0; }
.mtmock__tabs span { padding-bottom: 4px; }
.mtmock__tabs .is-on { border-bottom: 2px solid #0A64D6; font-weight: 600; }
.mtmock__table { margin: 6px 10px; border: 1px solid #C9CED6; background: #fff; }
.mtmock__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.mtmock__row > span { min-width: 0; overflow: hidden; padding: 5px 8px; border-bottom: 1px solid #ECEEF1; text-overflow: ellipsis; white-space: nowrap; }
.mtmock__row > span + span { border-left: 1px solid #ECEEF1; }
.mtmock__row i { margin-right: 6px; font-style: normal; font-weight: 700; color: #B8860B; }
.mtmock__row--head > span { background: #F6F7F9; font-weight: 600; }
.mtmock__row--group > span { background: #F6F7F9; color: #57606A; }
.mtmock__row.is-dim { color: #8C959F; }
.mtmock__row.is-hl > span { background: #FFF8DB; font-weight: 600; }
.mtmock__cell { position: relative; outline: 2px solid #DC2626; outline-offset: -2px; color: #DC2626; animation: mtpulse 1.6s ease-in-out infinite; }
@keyframes mtpulse { 50% { outline-color: rgba(220, 38, 38, .35); } }
@media (prefers-reduced-motion: reduce) { .mtmock__cell { animation: none; } }
.mtmock__foot { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 8px; }
.mtmock__foot span { padding: 3px 18px; border: 1px solid #C9CED6; border-radius: 3px; background: #fff; }
.mtmock__foot .mtmock__ok { border-color: #0A64D6; }
.mtmock figcaption { margin-top: 6px; font-size: 12.5px; color: #6B7280; }

/* Nút tải EA: bấm xong -> xanh lá nhạt, hơi mờ, biểu tượng ✓ */
.mg__dlbtn { transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease, box-shadow .25s ease; }
.mg__dlic { display: inline-flex; }
.mg__dlic--done { display: none; }
.mg__dlbtn.is-done { border-color: #A7F3D0; background: #ECFDF5; color: #047857; box-shadow: none; opacity: .75; }
.mg__dlbtn.is-done:hover { opacity: 1; transform: none; }
.mg__dlbtn.is-done .mg__dlic { display: none; }
.mg__dlbtn.is-done .mg__dlic--done { display: inline-flex; }
.mg__crumb--act { border-color: #BFDBFE; background: #EFF6FF; color: #1D4ED8; }

/* Nút sao chép (hướng dẫn MT5): đã chép -> giữ cố định "Đã sao chép", nền xanh lá, biểu tượng ✓ */
.mg__cpbtn { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.mg__cpic { display: inline-flex; }
.mg__cpic--done { display: none; }
.mg__cpbtn.is-copied { border-color: #A7F3D0; background: #ECFDF5; color: #047857; box-shadow: none; }
.mg__cpbtn.is-copied:hover { transform: none; }
.mg__cpbtn.is-copied .mg__cpic { display: none; }
.mg__cpbtn.is-copied .mg__cpic--done { display: inline-flex; }
.mg__after { margin-top: 12px; }

/* ---------- Trạng thái trống (component _empty.html, theo thiết kế "3. Empty state") ---------- */
.estate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 36px 24px; border-radius: 6px; background: #fff; text-align: center; }
.estate[hidden] { display: none; }
.estate__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 100px; background: #F5F4F1; color: #9E9E9E; }
.estate__icon .icon { width: 24px; height: 24px; }
.estate__title { margin: 0; font-size: 15px; font-weight: 700; color: #1A1A1A; }
.estate__desc { max-width: 420px; margin: 0; font-size: 12px; line-height: 1.55; color: #9E9E9E; }
.estate__m { display: none; }
.estate[data-mode="none"] .estate__m--none, .estate[data-mode="filter"] .estate__m--filter { display: inline; }
.estate__icon .estate__m { line-height: 0; }
.mg__caption { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: #6B7280; }
.mg__caption .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: #059669; }