.tix-sidebar {
    background: var(--cm-gradient-card, #111827);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg, 16px);
    padding: 16px;
    align-self: flex-start;
    position: sticky;
    top: 90px;
}

.tix-head {
    font-weight: 700;
    font-size: var(--cm-font-md, 15px);
    color: var(--cm-text-primary);
    padding: 2px 8px 10px;
    border-bottom: 1px solid var(--cm-border);
    margin-bottom: 4px;
}

.tix-head i {
    color: #6366f1;
    margin-right: 6px;
}

.tix-nav {
    display: flex;
    flex-direction: column;
}

.tix-nhom {
    display: flex;
    flex-direction: column;
    gap: 3px;
    --tix-c: #6366f1;
    --tix-cr: 99, 102, 241;
}

.tix-nhom[data-p="hop-tac"] { --tix-c: #f59e0b; --tix-cr: 245, 158, 11; }
.tix-nhom[data-p="cong-cu"] { --tix-c: #3b82f6; --tix-cr: 59, 130, 246; }
.tix-nhom[data-p="ho-tro"] { --tix-c: #10b981; --tix-cr: 16, 185, 129; }

.tix-nhom-ten {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--cm-font-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tix-c);
    padding: 12px 8px 4px;
    margin-top: 6px;
    border-top: 1px solid var(--cm-border);
}

.tix-nhom:first-child .tix-nhom-ten {
    padding-top: 4px;
    margin-top: 0;
    border-top: none;
}

.tix-nhom-ten > i {
    width: 14px;
    text-align: center;
    font-size: 11px;
}

.tix-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--cm-radius-sm, 8px);
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-sm, 13.5px);
    font-weight: 500;
    text-decoration: none;
    transition: var(--cm-transition-fast, background .15s, color .15s);
}

.tix-item > i {
    width: 18px;
    text-align: center;
    font-size: 12.5px;
    color: var(--cm-text-dim);
    flex: 0 0 auto;
}

.tix-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tix-item:hover {
    background: var(--cm-bg-card, rgba(255, 255, 255, .05));
    color: var(--cm-text-primary);
}

.tix-item.active {
    background: rgba(var(--tix-cr), .16);
    color: #fff;
    font-weight: 600;
    border-left: 3px solid var(--tix-c);
    padding-left: 9px;
}

.tix-item.active > i {
    color: var(--tix-c);
}

@media (max-width: 1024px) {
    .tix-sidebar {
        position: static;
        top: auto;
    }
    .cm-sidebar-left.tix-sidebar { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .tix-item { transition: none; }
}

.cm-sidebar-layout .sphere-background { left: 0; width: 100%; transform: none; }
.cm-sidebar-layout .sphere-background canvas { position: relative; left: 50%; transform: translateX(-50%); }

.tix-hero {
    --tixh-1: #818cf8;
    --tixh-2: #2563eb;
    --tixh-1r: 99, 102, 241;
    --tixh-2r: 37, 99, 235;
    --tixh-t: var(--tixh-1);
    position: relative;
    overflow: hidden;
    border-radius: var(--cm-radius-lg);
    padding: var(--cm-space-2xl) var(--cm-space-lg);
    margin-bottom: var(--cm-space-xl);
    text-align: center;
    background: radial-gradient(circle at 18% 18%, rgba(var(--tixh-1r), .28) 0%, transparent 52%), radial-gradient(circle at 82% 80%, rgba(var(--tixh-2r), .22) 0%, transparent 52%), var(--cm-gradient-card);
    border: 1px solid var(--cm-border);
}

.tix-hero h1 {
    font-size: var(--cm-font-4xl);
    font-weight: 800;
    margin: 0 0 10px;
    background: linear-gradient(135deg, var(--tixh-1) 0%, var(--tixh-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tix-hero p {
    color: var(--cm-text-secondary);
    font-size: var(--cm-font-md);
    max-width: 640px;
    margin: 0 auto;
}

.tix-hero .tix-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--cm-radius-full);
    background: rgba(var(--tixh-1r), .14);
    border: 1px solid rgba(var(--tixh-1r), .4);
    color: var(--tixh-t);
    font-size: var(--cm-font-sm);
    font-weight: 600;
    margin-bottom: var(--cm-space-md);
}

.tix-hero[data-t="legal"] { --tixh-1: #818cf8; --tixh-2: #2563eb; --tixh-1r: 99, 102, 241; --tixh-2r: 37, 99, 235; --tixh-t: #a5b4fc; }
.tix-hero[data-t="affiliate"] { --tixh-1: #34d399; --tixh-2: #059669; --tixh-1r: 52, 211, 153; --tixh-2r: 5, 150, 105; --tixh-t: #6ee7b7; }
.tix-hero[data-t="check_port"] { --tixh-1: #22d3ee; --tixh-2: #0891b2; --tixh-1r: 34, 211, 238; --tixh-2r: 8, 145, 178; --tixh-t: #67e8f9; }
.tix-hero[data-t="check_ip"] { --tixh-1: #38bdf8; --tixh-2: #4f46e5; --tixh-1r: 56, 189, 248; --tixh-2r: 79, 70, 229; --tixh-t: #7dd3fc; }
.tix-hero[data-t="check_proxy"] { --tixh-1: #a78bfa; --tixh-2: #7c3aed; --tixh-1r: 167, 139, 250; --tixh-2r: 124, 58, 237; --tixh-t: #c4b5fd; }

@media (max-width: 600px) {
    .tix-hero {
        padding: var(--cm-space-xl) var(--cm-space-lg);
    }

    .tix-hero h1 {
        font-size: var(--cm-font-2xl);
    }
}