/* Bổ sung riêng cho id.vtvlive.app — chỉ dùng token var(--vt-*) của vtv-ui.css */
[hidden] { display: none !important; }

/* Trang đăng nhập / quên / đặt lại / hoàn tất: một thẻ giữa màn hình */
.sso-auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--vt-space-6) var(--vt-space-4); gap: var(--vt-space-5); }
.sso-auth__brand { display: flex; align-items: center; gap: var(--vt-space-2); font-weight: 700; font-size: var(--vt-text-md); color: var(--vt-fg); }
.sso-auth__brand .vt-brand__mark { width: 32px; height: 32px; font-size: 14px; }
.sso-auth .vt-card { width: 100%; max-width: 400px; }
.sso-auth .vt-card__body { display: flex; flex-direction: column; gap: var(--vt-space-4); }
.sso-auth h1 { font-size: var(--vt-text-xl); }
.sso-auth__lead { color: var(--vt-fg-muted); margin-top: var(--vt-space-1); }
.sso-auth__foot { text-align: center; font-size: var(--vt-text-sm); color: var(--vt-fg-muted); }
.sso-auth__theme { position: fixed; top: var(--vt-space-3); right: var(--vt-space-3); }
.sso-section-title { font-size: var(--vt-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-fg-subtle); }
.vt-btn--block { width: 100%; }
.vt-tabs--fill .vt-tab { flex: 1; text-align: center; }

/* Danh sách tool ở trang chủ */
.sso-apps { display: grid; gap: var(--vt-space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sso-app { display: flex; gap: var(--vt-space-3); align-items: flex-start; padding: var(--vt-space-4) var(--vt-space-5); color: var(--vt-fg); transition: border-color var(--vt-fast), box-shadow var(--vt-fast); }
.sso-app:hover { text-decoration: none; border-color: var(--vt-primary); box-shadow: var(--vt-shadow); }
.sso-app__mark { width: 40px; height: 40px; flex: none; border-radius: var(--vt-radius); display: grid; place-items: center; background: var(--vt-primary-soft); color: var(--vt-primary); font-weight: 700; }
.sso-app__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sso-app__name { font-weight: 600; }
.sso-app__url { font-size: var(--vt-text-sm); color: var(--vt-fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sso-app .vt-badge { align-self: flex-start; margin-top: var(--vt-space-1); }

/* Bảng quản trị: ô chọn quyền gọn */
.vt-select--sm, .vt-input--sm { height: 30px; font-size: var(--vt-text-sm); padding: 0 var(--vt-space-2); }
.vt-select--sm { width: auto; min-width: 116px; }
.sso-cell-email { display: flex; align-items: center; gap: var(--vt-space-1); }
.sso-user { display: flex; flex-direction: column; white-space: nowrap; }
.sso-cell-email { white-space: nowrap; }
.sso-user b { font-weight: 600; }
.sso-flags { display: flex; flex-wrap: wrap; gap: var(--vt-space-1); }
.vt-table td.sso-nowrap { white-space: nowrap; }
.sso-apps-pick { display: flex; flex-wrap: wrap; gap: var(--vt-space-3); }
.sso-apps-pick .vt-field { min-width: 150px; }
.sso-checks { display: flex; flex-wrap: wrap; gap: var(--vt-space-2) var(--vt-space-5); }
.sso-max { max-width: 640px; }

/* Liên kết tên tài khoản trong bảng */
a.sso-user { color: var(--vt-fg); }
a.sso-user:hover { text-decoration: none; }
a.sso-user:hover b { color: var(--vt-primary); text-decoration: underline; }
.sso-desc { max-width: 42ch; min-width: 200px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--vt-fg-muted); font-size: var(--vt-text-sm); }
.sso-app__desc { font-size: var(--vt-text-sm); color: var(--vt-fg-muted); margin-top: var(--vt-space-1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Trang chi tiết tài khoản */
.sso-avatar-lg { width: 48px; height: 48px; font-size: var(--vt-text-lg); }
#dTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sso-detail { display: grid; gap: var(--vt-space-4); grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
.sso-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--vt-space-3) var(--vt-space-4); margin: 0; font-size: var(--vt-text-sm); }
.sso-dl dt { color: var(--vt-fg-muted); }
.sso-dl dd { margin: 0; min-width: 0; }
.sso-list { list-style: none; margin: 0; padding: 0; }
.sso-list li { display: flex; align-items: center; gap: var(--vt-space-4); padding: var(--vt-space-3) var(--vt-space-5); border-bottom: 1px solid var(--vt-border); }
.sso-list li:last-child { border-bottom: 0; }
.sso-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sso-list__main .vt-subtle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sso-list__title { font-weight: 600; }
.sso-danger { border-color: color-mix(in srgb, var(--vt-danger) 35%, var(--vt-border)); }
.sso-danger .vt-card__head h2 { color: var(--vt-danger); }
.sso-danger__row { display: flex; align-items: center; justify-content: space-between; gap: var(--vt-space-4); }
.sso-danger__row + .sso-danger__row { border-top: 1px solid var(--vt-border); padding-top: var(--vt-space-4); }
@media (max-width: 900px) { .sso-detail { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sso-danger__row { flex-direction: column; align-items: stretch; } .sso-list li { flex-wrap: wrap; } }

/* Logo / thương hiệu */
.sso-mark { display: contents; }
.vt-brand__logo { display: block; height: 28px; width: auto; max-width: 140px; object-fit: contain; }
.sso-auth__brand .vt-brand__logo { height: 40px; max-width: 200px; }
.sso-brand-row { display: flex; gap: var(--vt-space-4); align-items: flex-start; padding-top: var(--vt-space-4); border-top: 1px solid var(--vt-border); }
.sso-brand-prev { width: 96px; height: 64px; flex: none; display: grid; place-items: center; border: 1px dashed var(--vt-border-strong); border-radius: var(--vt-radius); background: var(--vt-surface-2); overflow: hidden; }
.sso-brand-prev img { max-width: 84px; max-height: 52px; object-fit: contain; }
.sso-brand-prev--sm img { width: 32px; height: 32px; }
.sso-brand-prev .vt-subtle { font-size: var(--vt-text-xs); }
.sso-brand-info { display: flex; flex-direction: column; gap: var(--vt-space-2); min-width: 0; }