/* ==========================================================================
   STC — KHUNG ỨNG DỤNG (app_frame.js): công cụ thanh trên cùng (Làm mới, Xếp lưới, Lõi trình duyệt, Hỗ trợ, Thông báo, …), ngăn thông báo,
   thống kê chân thanh bên (Đã tạo/Tổng + thanh tiến độ, Tổng lần mở, Mở hôm nay), mục mới của menu tài khoản, hộp Trung tâm cá nhân / Phản hồi.
   Nạp SAU stc_orbit.css; chỉ dùng token sẵn có (--stc-*), hai giao diện Sáng/Tối. Không glow, không kính mờ, không gradient chữ.
   ========================================================================== */

/* ---- 1. Công cụ: nằm ở thanh trên cùng (#stc-tb-tools trong khe phải của titlebar.js; cỡ/kiểu trong thanh: titlebar.css). Không còn dải .topbar trong nội dung. ---- */
.stc-frame-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.stc-frame-tools[hidden], .stc-ft-btn[hidden] { display: none; }
/* tiêu đề màn (#page-title, app.js đặt chữ): chỉ ở các màn chưa có tiêu đề riêng; màn Hồ sơ, Proxy, Nhóm, Nhật ký, Cài đặt… tự có tiêu đề trong trang */
.stc-view-title { display: none; margin: 4px 0 18px; }
body:is([data-view="sync"], [data-view="warmer"], [data-view="mobile"], [data-view="ecommerce"], [data-view="audit"]) .stc-view-title { display: flex; }   /* cloudvps tự có h1 "Cloud Phone" (partials/cloudvps.html): hiện cả hai thì tiêu đề lặp (QA 14/11) */
body:is([data-view="sync"], [data-view="warmer"], [data-view="mobile"], [data-view="ecommerce"], [data-view="audit"], [data-view="cloudvps"]) .tab-view.active { height: auto; }

.stc-ft-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: var(--stc-r-card); background: transparent; color: var(--stc-muted); cursor: pointer; }
.stc-ft-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stc-ft-btn:hover, .stc-ft-btn[aria-expanded="true"] { color: var(--stc-text-strong); background: var(--stc-row-hover); border-color: var(--stc-line); }
.stc-ft-btn:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 1px; }
html[data-theme="dark"] .stc-ft-btn:focus-visible { outline-color: var(--stc-accent); }
.stc-ft-btn[aria-busy="true"] svg { animation: stc-ft-spin 0.8s linear infinite; }
@keyframes stc-ft-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stc-ft-btn[aria-busy="true"] svg { animation: none; opacity: 0.55; } }

/* số chưa đọc trên chuông + chấm báo trên nút lõi */
.stc-ft-count { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: var(--stc-err); color: var(--stc-ink-on-solid); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--stc-bg); pointer-events: none; }
.stc-ft-count[hidden], .stc-ft-dot[hidden] { display: none; }
.stc-ft-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--stc-accent); box-shadow: 0 0 0 2px var(--stc-bg); pointer-events: none; }

/* chú thích (cùng kiểu với nút Cập nhật trên thanh); Esc ẩn mà không rời tiêu điểm (WCAG 1.4.13) */
.stc-ft-btn[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 99500; width: max-content; max-width: 260px;
  padding: 7px 10px; border-radius: var(--stc-r-card); background: var(--stc-surface-2); color: var(--stc-text); border: 1px solid var(--stc-border);
  box-shadow: var(--stc-shadow); font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left; white-space: pre-line;
  opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.14s var(--stc-ease), transform 0.14s var(--stc-ease), visibility 0s linear 0.14s; pointer-events: none; }
.stc-ft-btn[data-tip]:hover::after, .stc-ft-btn[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: none; transition-delay: 0.25s, 0.25s, 0s; }
.stc-ft-btn[aria-expanded="true"]::after, .stc-ft-btn.tip-off::after { opacity: 0 !important; visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .stc-ft-btn[data-tip]::after { transition: none; } }

/* ---- 2. Ngăn thông báo ---- */
.stc-ntf { position: fixed; z-index: 99600; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 72px)); display: flex; flex-direction: column;
  background: var(--stc-surface); color: var(--stc-text); border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); box-shadow: var(--stc-shadow); overflow: hidden; }
.stc-ntf[hidden] { display: none; }
.stc-ntf-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px 16px; border-bottom: 1px solid var(--stc-line); }
.stc-ntf-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--stc-text-strong); }
.stc-ntf-head .stc-ntf-n { color: var(--stc-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stc-ntf-all { margin-left: auto; padding: 5px 8px; border: 0; border-radius: var(--stc-r-ctl); background: transparent; color: var(--stc-accent-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.stc-ntf-all:hover:not([disabled]) { background: var(--stc-accent-soft); }
.stc-ntf-all[disabled] { color: var(--stc-dim); cursor: default; }
.stc-ntf-all:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 1px; }
.stc-ntf-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; }
.stc-ntf-item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; width: 100%; padding: 10px 26px 10px 10px; border: 0;
  border-radius: var(--stc-r-card); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.stc-ntf-item:hover { background: var(--stc-row-hover); }
.stc-ntf-item:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: -2px; }
.stc-ntf-ico { grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--stc-surface-2); color: var(--stc-muted); border: 1px solid var(--stc-line); }
.stc-ntf-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.stc-ntf-item[data-tone="warn"] .stc-ntf-ico { color: var(--stc-warn); background: var(--stc-plan-expired-bg); border-color: var(--stc-plan-expired-edge); }
.stc-ntf-item[data-tone="accent"] .stc-ntf-ico { color: var(--stc-accent-text); background: var(--stc-accent-soft); border-color: var(--stc-border); }
.stc-ntf-item[data-tone="err"] .stc-ntf-ico { color: var(--stc-err-text); }
.stc-ntf-t { font-size: 13.5px; font-weight: 600; color: var(--stc-text-strong); line-height: 1.4; overflow-wrap: anywhere; }
.stc-ntf-b { margin-top: 2px; font-size: 12.5px; color: var(--stc-muted); line-height: 1.45; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stc-ntf-m { margin-top: 4px; font-size: 11.5px; color: var(--stc-dim); font-variant-numeric: tabular-nums; }
.stc-ntf-item[data-read="true"] .stc-ntf-t { font-weight: 500; color: var(--stc-text); }
.stc-ntf-item[data-read="false"]::after { content: ""; position: absolute; top: 15px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--stc-accent); }
.stc-ntf-empty { padding: 34px 20px 38px; text-align: center; color: var(--stc-muted); font-size: 13.5px; line-height: 1.55; }
.stc-ntf-empty svg { display: block; width: 56px; height: 36px; margin: 0 auto 10px; color: var(--stc-dim); }
.stc-ntf-empty button { margin-top: 10px; }

/* ---- 3. Chân thanh bên (dưới ô Hồ sơ có sẵn): Đã tạo / Tổng của gói + thanh tiến độ (admin có gói), Tổng lần mở, Mở hôm nay ---- */
/* Thẻ hạn mức kiểu Bit (chủ 14/11): gọn khi bình thường; rê chuột / Tab vào thì NHÔ LÊN: tiêu đề + nút Nâng cấp nở ra với chiều cao CỐ ĐỊNH và lề trên âm
   đúng bằng phần nở thêm => đáy thẻ đứng yên, thẻ phủ lên phía trên (z-index), không xô lệch thanh bên. */
.stc-frame-stats { position: relative; z-index: 4; padding: 10px 12px 11px; border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); background: var(--stc-surface);
  font-size: 12.5px; line-height: 1.35; outline: none; transition: margin-top .24s var(--stc-ease), box-shadow .24s var(--stc-ease), border-color .24s var(--stc-ease); }
.stc-frame-stats:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 2px; }
.stc-fs-head, .stc-fs-act { block-size: 0; overflow: hidden; visibility: hidden; opacity: 0;
  transition: block-size .24s var(--stc-ease), opacity .18s var(--stc-ease), visibility 0s linear .24s; }
.stc-fs-head > div { display: flex; align-items: center; gap: 8px; block-size: 34px; padding-bottom: 8px; box-sizing: border-box; font-size: 14px; font-weight: 600; color: var(--stc-text-strong); }
.stc-fs-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--stc-accent-text); }
.stc-fs-act > div { block-size: 46px; padding-top: 10px; box-sizing: border-box; }
.stc-fs-up { display: block; width: 100%; height: 36px; border: 0; border-radius: var(--stc-r-ctl); background: var(--stc-accent); color: var(--stc-accent-ink); font: 600 13.5px/1 var(--stc-font); cursor: pointer; }
.stc-fs-up:hover { filter: brightness(1.06); }
.stc-fs-up:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 2px; }
.stc-frame-stats:is(:hover, :focus-within) { margin-top: -34px; box-shadow: var(--stc-shadow); border-color: var(--stc-border-strong); }
.stc-frame-stats.has-act:is(:hover, :focus-within) { margin-top: -80px; }
.stc-frame-stats:is(:hover, :focus-within) .stc-fs-head { block-size: 34px; }
.stc-frame-stats.has-act:is(:hover, :focus-within) .stc-fs-act { block-size: 46px; }
.stc-frame-stats:is(:hover, :focus-within) :is(.stc-fs-head, .stc-fs-act) { visibility: visible; opacity: 1; transition: block-size .24s var(--stc-ease), opacity .18s var(--stc-ease) .04s, visibility 0s; }
body.stc-has-fstats .stc-sidebar-quota { display: none; }      /* đã có thẻ số liệu: bỏ ô quỹ đạo "Hồ sơ x/y" (chủ: chỉ hiện số, như Bit) */
.stc-frame-stats[hidden] { display: none; }
/* Kiểu Bit (chủ 15/11): nhãn trái — số phải; số vàng gold, phần "/ tổng" chữ phụ; thanh 6px; vượt/sắp hết đổi màu cảnh báo. */
.stc-fs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 20px; }
.stc-fs-lbl { color: var(--stc-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stc-fs-val { flex: none; color: var(--stc-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stc-fs-val b { font-size: 13.5px; font-weight: 600; color: var(--stc-accent-text); }
.stc-fs-val small { font-size: 12px; font-weight: 500; color: var(--stc-muted); }
.stc-fs-val[data-level="warn"] b { color: var(--stc-warn); }
.stc-fs-val[data-level="over"] b { color: var(--stc-err-text); }
html[data-theme="light"] .stc-fs-val[data-level="warn"] b { color: var(--stc-warn); }
.stc-fs-note { margin-top: 1px; font-size: 11.5px; color: var(--stc-muted); text-align: right; }
.stc-fs-bar { position: relative; height: 6px; margin: 7px 0 10px; border-radius: 999px; background: var(--stc-orbit-track); overflow: hidden; }
.stc-fs-bar[hidden] { display: none; }
.stc-fs-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--stc-accent); transition: width 0.5s var(--stc-ease); }
html[data-theme="light"] .stc-fs-bar > i { background: var(--stc-accent-text); }
.stc-fs-bar[data-level="warn"] > i, .stc-fs-bar[data-level="over"] > i { background: var(--stc-warn); }
.stc-fs-list { display: grid; gap: 5px; padding-top: 9px; border-top: 1px solid var(--stc-border); }
@media (prefers-reduced-motion: reduce) { .stc-fs-bar > i, .stc-frame-stats, .stc-fs-head, .stc-fs-act { transition: none; } }
@media (max-width: 900px) { .stc-frame-stats { display: none; } body.stc-has-fstats .stc-sidebar-quota { display: flex; } }      /* thanh bên 64px: số không nhãn dễ hiểu nhầm, còn ô Hồ sơ + đồng hồ quỹ đạo */

/* ---- 4. Menu tài khoản (thả xuống từ thanh trên cùng): mục mới có biểu tượng ---- */
#stc-account-menu { min-width: 244px; max-height: calc(100vh - 120px); overflow-y: auto; }
#stc-account-menu button { padding: 8px 12px; font-size: 13.5px; gap: 11px; white-space: nowrap; }
#stc-account-menu button > svg.stc-mi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--stc-muted); opacity: 1; }
#stc-account-menu button:hover > svg.stc-mi { color: var(--stc-text-strong); }
#stc-account-menu button[hidden] { display: none; }
#stc-account-menu button > svg.stc-mi-ext { width: 13px; height: 13px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--stc-dim); }

/* ---- 5. Hộp thoại khung: Trung tâm cá nhân, Phản hồi, Hỗ trợ, Đăng xuất và đóng ---- */
#me-plan[hidden], #fb-inbox[hidden], #lc-foot[hidden], #lc-list[hidden] { display: none; }
.stc-me-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
.stc-me-av { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--stc-accent-soft); color: var(--stc-accent-text); border: 1px solid var(--stc-border); font-size: 19px; font-weight: 700; }
.stc-me-name { font-size: 16px; font-weight: 600; color: var(--stc-text-strong); overflow-wrap: anywhere; }
.stc-me-sub { font-size: 13px; color: var(--stc-muted); }
.stc-me-dl { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); margin: 0; border: 1px solid var(--stc-line); border-radius: var(--stc-r-card); overflow: hidden; }
.stc-me-dl dt, .stc-me-dl dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--stc-line); font-size: 13.5px; line-height: 1.45; }
.stc-me-dl dt:first-of-type, .stc-me-dl dt:first-of-type + dd { border-top: 0; }
.stc-me-dl dt { color: var(--stc-muted); background: var(--stc-surface-2); }
.stc-me-dl dd { color: var(--stc-text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stc-me-dl dd .warn { color: var(--stc-warn); font-weight: 600; }

.stc-fb-kinds { display: inline-flex; margin: 2px 0 14px; }
.stc-fb-lbl { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--stc-text); }
.stc-fb-lbl span { font-weight: 400; color: var(--stc-muted); }
.stc-modal textarea.stc-fb-text { min-height: 128px; font-family: var(--stc-font); font-size: 14px; line-height: 1.5; resize: vertical; }
.stc-fb-meta { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 12px; font-size: 12.5px; color: var(--stc-muted); font-variant-numeric: tabular-nums; }
.stc-fb-meta .over { color: var(--stc-err-text); }
.stc-fb-res { min-height: 18px; margin-top: 8px; }
.stc-fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stc-fb-list li { padding: 10px 12px; border: 1px solid var(--stc-line); border-radius: var(--stc-r-card); }
.stc-fb-list .h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; color: var(--stc-muted); }
.stc-fb-list .h b { color: var(--stc-text-strong); font-size: 13.5px; }
.stc-fb-list .tag { padding: 0 7px; border-radius: 999px; background: var(--stc-accent-soft); color: var(--stc-accent-text); font-weight: 600; font-size: 11.5px; }
.stc-fb-list p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 13.5px; color: var(--stc-text); }
.stc-fb-switch { margin-right: auto; }

.stc-sup-site { margin: 12px 0 0; font-size: 13.5px; color: var(--stc-muted); }
.stc-sup-site a, .stc-plan-site a { color: var(--stc-accent-text); text-underline-offset: 3px; }
.stc-plan-site { margin: 12px 0 0; font-size: 13.5px; color: var(--stc-muted); }

.stc-lc-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.stc-lc-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: var(--stc-r-ctl); background: var(--stc-surface-2); font-size: 13px; }
.stc-lc-list li span:last-child { color: var(--stc-warn); white-space: nowrap; }