/*
日本語: このファイルはウェブサイトのスタイルシートです。無断転載・改変を禁じます。
中国語: 此文件为网站样式表。禁止未经授权的复制和修改。
*/
:root {
    --h-red: #ff0000; /* 赤色警告 / 红色警告 */
      --h-green: #00ff41; /* 緑色表示 / 绿色显示 */
    }
    
    body { /* メインのボディスタイル / 主体样式 */
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        display: flex; /* フレックスボックス配置 / 弹性盒布局 */
        justify-content: center; /* 横方向中央寄せ / 水平居中 */
        align-items: center;     /* 縦方向中央寄せ / 垂直居中 */
        background: #000; /* 背景色 黒 / 背景色 黑色 */
        perspective: 2000px; /* 3D遠近法 / 3D透视 */
        font-family: 'Courier New', monospace; /* フォント設定 / 字体设置 */
        overflow: hidden; /* スクロールバー非表示 / 隐藏滚动条 */
    }
    
    .container-3d { /* 3Dコンテナ / 3D容器 */
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d; /* 3D変換保持 / 保持3D变换 */
    }
    
    #matrixCanvas { /* マトリックス背景 / 矩阵背景 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2; /* Nằm dưới lớp bg-overlay */
    }
    
    .bg-overlay {
        background: rgba(0, 0, 0, 0.85); /* Tăng độ mờ một chút để Card dễ nhìn hơn trên nền ma trận */
    }
    
    .profile-card {
        /* Giữ nguyên các thông số cũ, đảm bảo width không quá lớn */
        background: rgba(20, 20, 20, 0.9);
        width: 400px; 
        border-radius: 20px;
        transform-style: preserve-3d;
        transition: transform 0.1s ease-out;
        box-shadow: 0 40px 100px rgba(0,0,0,0.8);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.05);
        /* Đảm bảo Card luôn nằm ở giữa Container */
        position: relative; 
    }
    
    /* Banner & Avatar Layers */
    .banner-section {
        height: 120px;
        transform: translateZ(20px);
    }
    
    .banner-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .avatar-section {
        margin-top: -65px;
        transform: translateZ(100px);
        position: relative;
        z-index: 10;
    }
    
    .avatar-wrapper {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        position: relative;
    }
    
    .user-avatar {
        width: 95px;
        height: 95px;
        border-radius: 50%;
        position: absolute;
        top: 22px;
        left: 22px;
        border: 4px solid #141414;
        object-fit: cover;
    }
    
    .frame {
        width: 140px;
        height: 140px;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    
    .hacker-name {
        color: #fff;
        text-align: center;
        margin: 10px 0 5px;
        font-size: 24px;
        transform: translateZ(80px);
        text-shadow: 0 0 15px var(--h-red);
    }
    
    .badge-container {
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        transform: translateZ(90px);
    }
    
    .nitro-badge {
        width: 22px;
        filter: drop-shadow(0 0 5px #ff73fa);
    }
    
    /* Khung Terminal đen bóng */
    .terminal-box { 
        background: rgba(10, 10, 10, 0.95) !important; 
        border-left: 4px solid #ff0000;
        padding: 15px;
        margin: 15px 25px;
        border-radius: 8px;
        transform: translateZ(50px);
    }
    
    /* Chỉnh màu cho dòng chữ 'status:' và 'logs:' không còn bị đen */
    .terminal-box p {
        color: #00ff41 !important; /* Đổi hẳn sang màu xanh lá Hacker cho nổi */
        font-size: 14px;
        margin: 8px 0;
        text-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
    }
    
    /* Màu trắng cho các nội dung sau dấu hai chấm */
    .white { 
        color: #ffffff !important; 
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }
    
    /* Giữ biểu tượng ~ $ màu xanh lơ hoặc vàng tùy ý bác */
    .green { 
        color: #00ffff !important; 
    }
    
    /* Các thành phần Discord Status bên trong terminal */
    .discord-activity {
        transition: all 0.3s ease;
    }
    
    .nitro-msg {
        color: #ffcccc;
        font-weight: bold;
        font-size: 0.9em;
        animation: glitch 1s infinite;
    }
    
    @keyframes glitch {
        0% { opacity: 1; }
        50% { opacity: 0.7; transform: translateX(1px); }
        100% { opacity: 1; }
    }
    
    .loading-text::after, .dots::after {
        content: '';
        animation: dots-anim 1.5s infinite;
    }
    
    @keyframes dots-anim {
        0% { content: ''; }
        25% { content: '.'; }
        50% { content: '..'; }
        75% { content: '...'; }
    }
    
    /* Container tên */
    .name-container {
        text-align: center;
        margin-top: 15px;
        transform: translateZ(80px);
    }
    
    /* Tên chính - Phong cách Nhật Bản + Glitch */
    .hacker-name {
        font-size: 32px;
        font-weight: 900;
        color: #fff;
        position: relative;
        display: inline-block;
        letter-spacing: 4px;
        text-transform: uppercase;
        /* Hiệu ứng điện tử phát sáng đỏ */
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
        animation: glitch-anim 3s infinite linear alternate-reverse;
    }
    
    /* Dòng @bbbxyzbbb ít nổi hơn */
    .sub-name {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5); /* Mờ hơn tên chính */
        letter-spacing: 2px;
        margin-top: -5px;
        font-family: 'Courier New', monospace;
        transform: translateZ(70px);
    }
    
    /* Hiệu ứng điện tử Glitch kiểu Nhật */
    .hacker-name::before, .hacker-name::after {
        content: attr(data-text);
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: transparent;
    }
    
    .hacker-name::before {
        left: 2px;
        text-shadow: -2px 0 #ff0000;
        clip: rect(44px, 450px, 56px, 0);
        animation: glitch-anim-2 5s infinite linear alternate-reverse;
    }
    
    .hacker-name::after {
        left: -2px;
        text-shadow: -2px 0 #00ffff;
        clip: rect(44px, 450px, 56px, 0);
        animation: glitch-anim 2s infinite linear alternate-reverse;
    }
    
    @keyframes glitch-anim {
        0% { clip: rect(31px, 9999px, 94px, 0); }
        20% { clip: rect(62px, 9999px, 42px, 0); }
        40% { clip: rect(10px, 9999px, 86px, 0); }
        60% { clip: rect(57px, 9999px, 12px, 0); }
        80% { clip: rect(34px, 9999px, 78px, 0); }
        100% { clip: rect(89px, 9999px, 23px, 0); }
    }
    
    /* Thêm hiệu ứng gạch chéo Nhật Bản sau tên */
    .name-container::after {
        content: "サイバーパンク"; /* Nghĩa là Cyberpunk */
        font-size: 10px;
        color: #ff0000;
        display: block;
        margin-top: 5px;
        opacity: 0.7;
    }
    
    .red { color: var(--h-red); }
    
    .social-links {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-bottom: 25px;
        transform: translateZ(110px);
        max-width: 350px; /* Adjust this value as needed to align with terminal-box */
        margin: 15px auto; /* Center it and add vertical margin */
    }
    
    .btn {
        padding: 8px 15px;
        border-radius: 5px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: 13px;
        transition: 0.3s;
    }
    
    #status-text.online-style {
        color: #00ff41 !important;
        text-shadow: 0 0 10px #00ff41;
    }

    .sub-name .code-button { /* コードボタン / 代码按钮 */
        background: #000; /* 緑の背景 / 绿色背景 */
        padding: 2px 8px; /* パディング / 内边距 */
        border-radius: 12px; /* 角丸 / 圆角 */
        font-size: 0.8em; /* フォントサイズ / 字体大小 */
        color: #fff; /* 白いテキスト / 白色文本 */
        margin-left: 10px; /* 左マージン / 左外边距 */
        display: inline-flex; /* インラインフレックス / 行内弹性 */
        align-items: center; /* 中央寄せ / 垂直居中 */
        box-shadow: 0 0 8px rgba(80, 76, 76, 0.6); /* 影 / 阴影 */
        transition: all 0.2s ease-in-out;
    }
    
    .sub-name .code-button:hover { /* ホバーエフェクト / 悬停效果 */
        transform: scale(1.05); /* 拡大 / 放大 */
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.9); /* 影の強化 / 增强阴影 */
    }
    
    .sub-name .code-button .fas { /* アイコンスタイル / 图标样式 */
        margin-right: 5px; /* 右マージン / 右外边距 */
        color: #98fb98; /* 明るい緑 / 亮绿色 */
    }
    
    .youtube { background: #ff0000; }
    .discord { background: #5865f2; }
    
    .btn:hover {
        transform: scale(1.1) translateZ(20px);
        box-shadow: 0 0 15px var(--h-red);
        filter: brightness(1.2);
    }