/* ==========================================================================
   STC Quỹ đạo — GIAI ĐOẠN 1: lớp nền + khung ứng dụng.
   Nạp SAU style.css / stc_theme.css / updater.css / cloudphone*.css (xem index.html) và chỉ GHI ĐÈ: không đổi id, class, data-attribute hay aria nào của mã cũ.
   Phông Be Vietnam Pro nằm ở stc_orbit_fonts.css (nhúng data: URI, không tải mạng).
   Chế độ Operate: bảng/biểu mẫu quét mắt nhanh, trạng thái rõ; vàng chỉ dùng cho mục đang chọn, nút chính, tiêu điểm, đồng hồ hạn mức.
   Không glow, không kính mờ, không gradient chữ, không viền trái dày, không tiêu đề nhỏ in hoa đặt trên tiêu đề.
   Tương phản: chữ >= 4,5:1 ở CẢ HAI giao diện (đo bằng tests/test_ui_orbit_shell.py + tests/test_ui_light_contrast.py).
   ========================================================================== */

/* ---- 1–2. Bộ biến thiết kế (Tối/Sáng): CHUYỂN về stc_theme.css (một nguồn duy nhất). Trước 14/11/2026 khối ở đây ghi đè token tối bằng
   nâu ấm (#070605/#0F0C08/#17120B) + viền vàng trong suốt rgba(217,168,64,.2) + nền chọn vàng => nền đen bị "ám vàng". ---- */

/* ---- 3. Phông, bo góc, bóng: mọi lớp CSS cũ dùng --radius-* / --shadow-* nên đổi theo ---- */
:root {
  --stc-font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: var(--stc-r-ctl); --radius-md: var(--stc-r-card); --radius-lg: var(--stc-r-dlg); --radius-xl: var(--stc-r-dlg);
  --shadow-card: var(--stc-shadow-sm); --shadow-card-hover: var(--stc-shadow-sm);
  --stc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* style.css đặt font cho MỌI phần tử bằng "*": ghi đè cùng độ ưu tiên (đứng sau). Lớp riêng (.mono, JetBrains Mono...) có độ ưu tiên cao hơn nên giữ nguyên. */
*, *::before, *::after { font-family: var(--stc-font); }
body { font-size: 14px; line-height: 1.5; font-feature-settings: "tnum" 0; }
.stc-table td, .stc-table th, .stc-pill-count, .stc-tab .n, .nav-badge, .stc-foot b, .stc-bulk .count, .stc-trash-left, .stc-pager button { font-variant-numeric: tabular-nums; }

/* bề mặt trình duyệt: chọn chữ, con trỏ, thanh cuộn, ô tick theo bảng màu */
::selection { background: var(--stc-selection); color: inherit; }
input, textarea, select { caret-color: var(--stc-accent-text); accent-color: var(--stc-accent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--stc-scrollbar); border: 0; border-radius: var(--stc-r-ctl); }
::-webkit-scrollbar-thumb:hover { background: var(--stc-scrollbar-hover); }

/* tiêu điểm bàn phím: một vòng vàng thống nhất (sáng: vàng đậm >= 3:1 trên nền trắng) */
:is(.stc-seg button, .stc-btn2, .stc-menu button, .stc-tab, .stc-account > button, .nav-item, .stc-kebab, .stc-pager button, .btn, .stc-plan-upgrade):focus-visible,
:is(input, select, textarea, button, [role="button"], a):focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 2px; }
html[data-theme="dark"] :is(.stc-seg button, .stc-btn2, .stc-menu button, .stc-tab, .stc-account > button, .nav-item, .stc-kebab, .stc-pager button, .btn, .stc-plan-upgrade):focus-visible,
html[data-theme="dark"] :is(input, select, textarea, button, [role="button"], a):focus-visible { outline-color: var(--stc-accent); }
.nav-item:focus-visible { outline-offset: -2px; }

/* ---- 4. Nút, ô nhập, bảng, thẻ: tinh chỉnh theo bộ biến (không đổi bố cục) ---- */
.stc-btn2, .stc-select, .stc-search input { border-radius: var(--stc-r-card); }
/* điều khiển KHÔNG chuyển màu bằng transition: đổi Sáng/Tối hoặc mở màn phải ra đúng màu ngay (không có khung hình trung gian vàng/xám làm viền mất tương phản) */
.stc-btn2, .stc-search input, .stc-select, .stc-seg button, .stc-tab, .stc-pager button, .stc-kebab, .stc-modal input, .stc-modal textarea, .stc-modal select, #stc-login-overlay input { transition: none; }
.stc-btn2:not(.primary):hover:not([disabled]):not([aria-disabled="true"]) { background: var(--stc-surface-2); border-color: var(--stc-border-hover); }
.stc-btn2.primary:hover { background: var(--stc-accent); filter: brightness(1.07); }
.stc-btn2.primary, .btn-primary { text-shadow: none; }
.stc-search input, .stc-select, .stc-modal textarea, .stc-modal input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="search"], [type="url"]), .stc-modal select, #stc-login-overlay input { border-color: var(--stc-border-ctl); }
/* viền ô nhập/nút phụ >= 3:1 so với nền ở CẢ HAI giao diện (WCAG 1.4.11): tối #6B6B6B trên #0A0A0A = 3,7:1 (trên #202020 = 3,1:1); sáng #7A7A7A trên #F4F4F4 = 3,9:1 */
.stc-btn2:not(.primary):not(.danger), .stc-seg, .stc-seg2, .stc-pager button { border-color: var(--stc-border-ctl); }
html[data-theme="dark"] :is(.btn-secondary, .form-control, #sa-search, #cv-search, #cp-search, .stc-btn2:not(.primary):not(.danger)) { border-color: var(--stc-border-ctl) !important; }
.stc-search input:focus, .stc-select:focus, .stc-modal textarea:focus, .stc-modal input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="search"], [type="url"]):focus, #stc-login-overlay input:focus { outline: 2px solid var(--stc-accent-text); outline-offset: 0; border-color: var(--stc-accent); }
html[data-theme="dark"] :is(.stc-search input, .stc-select, .stc-modal textarea, .stc-modal input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="search"], [type="url"]), #stc-login-overlay input):focus { outline-color: var(--stc-accent); }
input::placeholder, textarea::placeholder { color: var(--stc-dim); opacity: 1; }

/* bảng cũ (.bit-table: Proxy, Mobile, Đồng bộ...): đầu bảng cùng ngôn ngữ với bảng hồ sơ, chữ thường dễ quét mắt */
.bit-table th { background: var(--stc-surface-2); color: var(--stc-muted); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.bit-table td { border-bottom-color: var(--stc-line); }
/* nút .stc-btn (bảng nhân viên): chàm -> vàng theo bộ biến (theme sáng đã có luật riêng ở stc_theme.css) */
.stc-btn { background: var(--stc-accent-soft); border-color: var(--stc-border-ctl); color: var(--stc-accent-text); }
.stc-btn:hover { background: var(--stc-surface-3); border-color: var(--stc-border-strong); color: var(--stc-text-strong); }
.stc-table-card { border-radius: var(--stc-r-card); }
.stc-table th { background: var(--stc-surface-2); font-weight: 600; color: var(--stc-muted); border-bottom-color: var(--stc-border); }
.stc-table td { border-bottom-color: var(--stc-line); }
.stc-tab[aria-selected="true"] { color: var(--stc-accent-text); }
.stc-pill-count, .stc-chip, .stc-tab .n { border-radius: var(--stc-r-ctl); }
.pill-btn.active .pill-count { background: var(--stc-accent); color: var(--stc-accent-ink); }     /* trước: chữ trắng trên vàng sáng (1,5:1) */
.stc-modal-bg { background: var(--stc-scrim); }
.stc-modal { border-radius: var(--stc-r-dlg); }
.stc-menu { border-radius: var(--stc-r-card); }
.stc-avatar { background: var(--stc-accent-soft); border-color: var(--stc-border); }

/* toast: nền luôn tối ở cả hai giao diện (token --stc-toast-*, đảo tối ở stc_theme.css); một viền xám 1px, một bóng có độ lệch, không blur, không quầng màu.
   Loại thông báo (thành công/lỗi/cảnh báo) do biểu tượng màu trạng thái báo, KHÔNG tô viền cả khối. */
.toast { background: var(--stc-toast-bg); backdrop-filter: none; border: 1px solid var(--stc-toast-border); border-radius: var(--stc-r-card); box-shadow: var(--stc-shadow); }
.toast.toast-success, .toast.toast-error, .toast.toast-info, .toast.toast-warn { border-color: var(--stc-toast-border); box-shadow: var(--stc-shadow); }
.toast .toast-msg { color: var(--stc-toast-muted); }

/* nút chuyển (switch) trong hộp "Tạo/Sửa cửa sổ": nền đang bật = vàng, núm tối để thấy rõ trên vàng sáng */
html[data-theme="dark"] input:checked + .bit-slider { background-color: var(--stc-accent); border-color: var(--stc-accent); }
html[data-theme="dark"] input:checked + .bit-slider:before { background-color: var(--stc-accent-ink); }

/* màu viết cứng (xanh chàm/xám lạnh) trong style="…" của HTML/JS cũ: theme TỐI cũng trả về bảng màu ấm (theme sáng đã có ở stc_theme.css) */
html[data-theme="dark"] [style*="background:#0f172a"], html[data-theme="dark"] [style*="background: #0f172a"], html[data-theme="dark"] [style*="background:#0e1526"],
html[data-theme="dark"] [style*="background: #0e1526"], html[data-theme="dark"] [style*="background:#141b2e"], html[data-theme="dark"] [style*="background:#0b1020"] { background: var(--stc-surface) !important; }
html[data-theme="dark"] [style*="border:1px solid rgba(148,163,184"], html[data-theme="dark"] [style*="border: 1px solid rgba(148,163,184"] { border-color: var(--stc-border) !important; }
html[data-theme="dark"] [style*="color:#94a3b8"], html[data-theme="dark"] [style*="color: #94a3b8"], html[data-theme="dark"] [style*="color:#cbd5e1"], html[data-theme="dark"] [style*="color: #cbd5e1"] { color: var(--stc-muted) !important; }
html[data-theme="dark"] [style*="color:#64748b"], html[data-theme="dark"] [style*="color: #64748b"] { color: var(--stc-dim) !important; }
html[data-theme="dark"] [style*="color:#a5b4fc"], html[data-theme="dark"] [style*="color: #a5b4fc"], html[data-theme="dark"] [style*="color:#6366f1"], html[data-theme="dark"] [style*="color:#818cf8"],
html[data-theme="dark"] [style*="color:#38bdf8"], html[data-theme="dark"] [style*="color:#60a5fa"] { color: var(--stc-accent-text) !important; }

/* ---- 5. Khung: thanh bên trái ---- */
.sidebar { width: 248px; background: var(--stc-side); border-right: 1px solid var(--stc-border); }
.stc-side-brand { padding: 14px 16px 12px; gap: 10px; border-bottom: 1px solid var(--stc-line); }
.stc-side-brand img { width: 30px; height: 30px; }
.stc-side-brand span { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.nav-menu { padding: 8px 10px; gap: 2px; }
.nav-item { gap: 10px; padding: 6px 10px; font-size: 13.5px; font-weight: 500; border: 0; color: var(--stc-text); transition: none; }
.nav-icon-box { width: 28px; height: 28px; border: 0; border-radius: var(--stc-r-card); color: var(--stc-muted); }
.nav-svg { width: 20px; height: 20px; transition: none; }
.nav-item:hover .nav-svg { transform: none; }
.nav-label { font-size: 13.5px; line-height: 1.3; }
.nav-item.active { background: var(--stc-accent-soft); box-shadow: inset 0 0 0 1px var(--stc-border); color: var(--stc-text-strong); font-weight: 600; }
.nav-item.active .nav-icon-box, .nav-item.active:hover .nav-icon-box { color: var(--stc-accent-text); }
.nav-badge { background: var(--stc-accent-soft); color: var(--stc-accent-text); border-radius: var(--stc-r-ctl); font-family: var(--stc-font); font-size: 12px; font-weight: 600; padding: 1px 7px; margin-left: auto; }
/* nhóm mục: chữ thường, dịu, không in hoa */
.nav-sec { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--stc-dim); padding: 14px 10px 4px; }

/* chân thanh bên: đồng hồ hạn mức (elip quỹ đạo) + tài khoản + Sáng/Tối */
.stc-side-foot { padding: 10px 12px 12px; gap: 8px; border-top: 1px solid var(--stc-line); }
.stc-sidebar-quota { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center;
  padding: 6px 12px 6px 8px; border-radius: var(--stc-r-card); border: 1px solid var(--stc-border); background: var(--stc-surface); }
.stc-sidebar-quota > span:first-child { grid-column: 2; grid-row: 1; align-self: end; font-size: 12px; color: var(--stc-muted); line-height: 1.3; }
.stc-sidebar-quota > b { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; font-weight: 600; color: var(--stc-text-strong); line-height: 1.3; overflow-wrap: anywhere; }
.stc-sidebar-quota > small { grid-column: 2; grid-row: 3; font-size: 11.5px; line-height: 1.3; color: var(--stc-muted); }      /* "gồm N trong thùng rác" (chủ 14/11) */
.stc-sidebar-quota > small[hidden] { display: none; }
.stc-orbit-gauge { grid-column: 1; grid-row: 1 / span 3; display: block; width: 56px; height: 36px; color: var(--stc-accent-text); }
.stc-orbit-gauge:empty { display: none; }
.stc-sidebar-quota:has(.stc-orbit-gauge:empty) { grid-template-columns: minmax(0, 1fr); }
.stc-sidebar-quota:has(.stc-orbit-gauge:empty) > span:first-child, .stc-sidebar-quota:has(.stc-orbit-gauge:empty) > b, .stc-sidebar-quota:has(.stc-orbit-gauge:empty) > small { grid-column: 1; }
.stc-orbit-gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stc-orbit-gauge .o-track { fill: none; stroke: var(--stc-orbit-track); stroke-width: 2; }
.stc-orbit-gauge .o-arc { fill: none; stroke: var(--stc-accent); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dasharray 0.5s var(--stc-ease); }
.stc-orbit-gauge .o-planet { fill: var(--stc-orbit-planet); }
.stc-orbit-gauge .o-sat { fill: var(--stc-accent); stroke: var(--stc-surface); stroke-width: 1.5; }
html[data-theme="light"] .stc-orbit-gauge .o-arc { stroke: var(--stc-accent-text); }
html[data-theme="light"] .stc-orbit-gauge .o-sat { fill: var(--stc-accent-text); }
.stc-orbit-gauge[data-level="warn"] .o-arc, .stc-orbit-gauge[data-level="over"] .o-arc { stroke: var(--stc-warn); }
.stc-orbit-gauge[data-level="warn"] .o-sat, .stc-orbit-gauge[data-level="over"] .o-sat { fill: var(--stc-warn); }
.stc-orbit-gauge[data-level="open"] .o-arc { display: none; }
.stc-orbit-gauge[data-level="open"] .o-sat { display: none; }
.stc-seg { border-radius: var(--stc-r-card); }

/* ---- 6. Khung: thanh trên gọn + biểu ngữ trạng thái gói ---- */

.stc-plan-banner { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 28px; min-height: 44px; box-sizing: border-box;
  color: var(--stc-text-strong); font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid var(--stc-line); }
.stc-plan-banner[hidden] { display: none; }
.stc-plan-banner svg { flex-shrink: 0; width: 22px; height: 14px; }
.stc-plan-banner .stc-plan-msg { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.stc-plan-banner .stc-plan-hint { color: var(--stc-muted); min-width: 0; overflow-wrap: anywhere; }
.stc-plan-banner .stc-plan-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1 1 260px; min-width: 0; }
.stc-plan-banner .stc-plan-upgrade { flex-shrink: 0; margin-left: auto; }
.stc-plan-banner[data-state="trial"] { background: var(--stc-plan-trial-bg); border-bottom-color: var(--stc-plan-trial-edge); }
.stc-plan-banner[data-state="trial"] svg { color: var(--stc-accent-text); }
.stc-plan-banner[data-state="expired"] { background: var(--stc-plan-expired-bg); border-bottom-color: var(--stc-plan-expired-edge); }
.stc-plan-banner[data-state="expired"] svg { color: var(--stc-warn); }
.stc-plan-banner[data-state="suspended"] { background: var(--stc-plan-suspended-bg); border-bottom-color: var(--stc-plan-suspended-edge); }
.stc-plan-banner[data-state="suspended"] svg { color: var(--stc-muted); }
.stc-plan-banner[data-state="over"] { background: var(--stc-plan-expired-bg); border-bottom-color: var(--stc-plan-expired-edge); }
.stc-plan-banner[data-state="over"] svg { color: var(--stc-warn); }
.stc-plan-banner[data-state="ending"] { background: var(--stc-plan-trial-bg); border-bottom-color: var(--stc-plan-trial-edge); }
.stc-plan-banner[data-state="ending"] svg { color: var(--stc-accent-text); }
.stc-chip.stc-chip-over { color: var(--stc-err-text); border-color: var(--stc-plan-expired-edge); }

/* nhãn nhỏ cũ ở đầu các màn chưa dựng lại (.section-tag-pill, 10px): nâng lên cỡ tối thiểu 12px cho dễ đọc; việc bỏ hẳn nhãn nằm ở giai đoạn dựng lại từng màn */
.section-tag-pill { display: none; }        /* 14/11 QA: nhãn chỉ lặp lại tiêu đề màn (đã có .stc-view-title) => bỏ hẳn ở mọi màn */

/* ---- 7. Trạng thái trống của bảng hồ sơ (cùng ngôn ngữ quỹ đạo, không đổi logic) ---- */
#profiles-tbody > tr:only-child > td[colspan], #stc-trash-body > tr:only-child > td[colspan], #grp-tbody > tr:only-child > td[colspan], #act-tbody > tr:only-child > td[colspan] {
  height: auto !important; padding: 44px 24px !important; text-align: center; color: var(--stc-muted) !important; font-size: 14px; line-height: 1.6; text-wrap: balance; }
#profiles-tbody > tr:only-child > td[colspan]::before, #stc-trash-body > tr:only-child > td[colspan]::before {
  content: ""; display: block; width: 56px; height: 36px; margin: 0 auto 12px; opacity: 0.9;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg transform='rotate(-16 32 20)' fill='none' stroke='%238A8476' stroke-width='2'%3E%3Cellipse cx='32' cy='20' rx='28' ry='11'/%3E%3C/g%3E%3Ccircle cx='32' cy='20' r='3' fill='%238A8476'/%3E%3C/svg%3E"); }

/* ---- 8. Màn đăng nhập ---- */
#stc-login-overlay .card { border-radius: var(--stc-r-dlg); }
#stc-login-overlay .card h1 { font-weight: 600; letter-spacing: 0; }

/* ---- 9. Co theo cỡ cửa sổ (đặt lại các mốc của stc_theme.css vì lớp này đứng sau) ---- */
@media (max-width: 1100px) {
  .sidebar { width: 216px; }
  .stc-plan-banner { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .stc-side-brand { border-bottom: 0; }
  .nav-item { justify-content: center; padding: 6px 4px; }
  .nav-badge { display: none; }
  .stc-side-foot { padding: 8px 3px 10px; }
  .stc-sidebar-quota { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 3px; }
  .stc-sidebar-quota > span:first-child, .stc-sidebar-quota > small { display: none; }
  .stc-sidebar-quota > b { font-size: 10.5px; line-height: 1.25; text-align: center; font-weight: 600; overflow-wrap: break-word; max-width: 100%; }
  .stc-orbit-gauge { width: 40px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .stc-orbit-gauge .o-arc { transition: none; } }

/* ---- 10. Gói dịch vụ (P2): ô Mã tổ chức, chỉ báo hạn mức, nút bị khóa theo gói, thông báo lỗi gói, hộp liên hệ nâng cấp (plan_status.js) ---- */
#stc-login-overlay .login-org-label { display: block; margin: 0 2px 6px; font-size: 13px; font-weight: 600; color: var(--stc-text); text-align: left; }
#stc-login-overlay .login-org-label span { font-weight: 400; color: var(--stc-muted); }
#stc-login-overlay .card p.login-org-hint { text-align: left; margin: -4px 2px 16px; font-size: 12.5px; line-height: 1.45; color: var(--stc-muted); }

/* hộp Tạo/Sửa hồ sơ: thanh "Máy tính này" có style display inline => [hidden] cần !important (ẩn khi chọn điện thoại) */
#modal-hw-bar[hidden] { display: none !important; }
#modal-hw-note strong, #modal-os-mismatch-note strong { color: var(--stc-text-strong); font-weight: 600; }


/* nút bị khóa vì gói: KHÔNG làm mờ chữ (vẫn đọc được lý do), thêm nhãn "Plus"; bấm => thông báo lý do + Nâng cấp */
[data-plan-lock] { cursor: not-allowed; }
.stc-btn2[data-plan-lock][aria-disabled="true"], button[data-plan-lock][aria-disabled="true"]:not(.stc-btn2) { opacity: 1; color: var(--stc-muted); }
[data-plan-lock]::after, .stc-menu button.plan-locked .tag { content: "Plus"; display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  line-height: 1.5; letter-spacing: 0; color: var(--stc-accent-text); background: var(--stc-accent-soft); border: 1px solid var(--stc-border); vertical-align: 1px; }
[data-plan-lock][data-plan-tag="custom"]::after { content: "Chưa bật"; }     /* gói tùy chỉnh: STC bật theo yêu cầu, không phải "lên Plus" */
.stc-menu button.plan-locked { color: var(--stc-muted); cursor: not-allowed; }
.stc-menu button.plan-locked .tag { margin-left: auto; }
.stc-menu button.plan-locked svg, .stc-btn2[data-plan-lock] svg { opacity: .5; }      /* kiểu Bit: chức năng ngoài gói xám nhạt (chữ vẫn >= 4,5:1) */
/* khung "Mẹo" khi rê chuột vào chức năng bị khóa (plan_tips.js) */
.stc-plan-tip { position: fixed; z-index: 2147483000; width: min(420px, calc(100vw - 16px)); padding: 16px 18px 18px; border-radius: var(--stc-r-card); background: var(--stc-surface);
  border: 1px solid var(--stc-border-strong); box-shadow: var(--stc-shadow); color: var(--stc-text); }
.stc-plan-tip[hidden] { display: none; }
.stc-plan-tip-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--stc-text-strong); }
.stc-plan-tip-head svg { width: 20px; height: 20px; fill: none; stroke: var(--stc-accent-text); stroke-width: 1.8; stroke-linecap: round; }
.stc-plan-tip-title { margin: 12px 0 0; font-weight: 700; font-size: 15px; line-height: 1.45; color: var(--stc-accent-text); }
.stc-plan-tip-more { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--stc-text); }
.stc-plan-tip-more[hidden] { display: none; }
.stc-plan-tip-go { display: block; margin: 16px auto 0; padding: 10px 22px; border: 0; border-radius: var(--stc-r-ctl); background: var(--stc-accent); color: var(--stc-accent-ink);
  font: 600 14px/1 var(--stc-font); cursor: pointer; }
.stc-plan-tip-go:hover { filter: brightness(1.06); }
.stc-plan-tip-go:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 2px; }

/* thông báo lỗi gói: cùng khối thông báo (luôn tối ở cả hai giao diện) nhưng có hai nút; KHÔNG tự tắt (có thao tác bên trong) */
.toast.stc-plan-toast { align-items: flex-start; }
.stc-plan-toast .stc-plan-toast-ico { width: 22px; height: 14px; flex-shrink: 0; margin-top: 4px; color: var(--stc-toast-title); }
.stc-plan-toast .toast-title { color: var(--stc-toast-title); }
.stc-plan-toast .toast-msg { color: var(--stc-toast-muted); font-size: 13px; overflow-wrap: anywhere; }
.stc-plan-toast-act { display: flex; gap: 8px; margin-top: 10px; }
.stc-plan-toast-act button { padding: 6px 12px; border-radius: var(--stc-r-ctl); font-size: 13px; cursor: pointer; font-weight: 600; }
.stc-plan-toast-up { background: var(--stc-accent); color: var(--stc-accent-ink); border: 1px solid var(--stc-accent); }
.stc-plan-toast-up:hover { filter: brightness(1.07); }
.stc-plan-toast-later { background: transparent; color: var(--stc-toast-text); border: 1px solid var(--stc-border-ctl); font-weight: 500; }
.stc-plan-toast-later:hover { border-color: var(--stc-toast-title); }
.stc-plan-toast-act button:focus-visible { outline: 2px solid var(--stc-accent); outline-offset: 2px; }

/* hộp "Nâng cấp lên Plus": kênh liên hệ công khai (cùng thông tin với website) */
.stc-plan-up-lead { margin: 0 0 10px; color: var(--stc-text); line-height: 1.55; max-width: 62ch; }
.stc-plan-up-how { margin: 0; }
.stc-plan-contact { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.stc-plan-contact a { display: flex; align-items: baseline; gap: 14px; padding: 10px 12px; border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); color: var(--stc-text); text-decoration: none; }
.stc-plan-contact a:hover { border-color: var(--stc-border-hover); background: var(--stc-surface-2); }
.stc-plan-contact a:focus-visible { outline: 2px solid var(--stc-accent-text); outline-offset: 1px; }
html[data-theme="dark"] .stc-plan-contact a:focus-visible { outline-color: var(--stc-accent); }
.stc-plan-contact b { min-width: 76px; font-weight: 600; color: var(--stc-text-strong); }
.stc-plan-contact span { color: var(--stc-accent-text); overflow-wrap: anywhere; min-width: 0; }
/* QA 14/11: bảng Nhóm chỉ 4 cột ngắn — min-width 860px chung của .stc-table làm nút Sửa/Xóa bị cắt ở cửa sổ 1024px */
#view-groups table.stc-table { min-width: 0; }