/* CSS tùy chỉnh cho hiệu ứng Cyberpunk Neon */
body {
    background-color: #0A0A10; /* deep-abyss */
    color: #E0E0E0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Hiệu ứng Phát sáng Neon cho Tiêu đề chính */
.neon-glow-text {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 15px rgba(0, 255, 255, 0.5);
    color: #00FFFF; /* Neon Cyan */
}

/* Nút Bấm "Công Nghệ" */
.neon-button {
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    border: 2px solid #00FFFF;
    clip-path: polygon(0% 0%, 95% 0%, 100% 25%, 100% 100%, 5% 100%, 0% 75%); /* Hình dạng góc cạnh */
}

.neon-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.5); /* Đổi màu glow khi hover */
    background-color: #FF00FF; /* Neon Magenta */
    color: #0A0A10;
}

/* Hiệu ứng cho Game Card (Cyber Card) */
.cyber-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
    background-color: #1a1a2e; /* Nền tối hơn cho card */
    border-radius: 12px; /* Bo tròn cạnh */
}
.cyber-card-hover:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7); /* Neon Cyan Glow */
    border-color: #FF00FF; /* Neon Magenta Border */
    cursor: pointer;
}

/* Tùy chỉnh thanh cuộn ngang */
.scroll-container::-webkit-scrollbar {
    height: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background: #00FFFF; /* Neon Cyan */
    border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-track {
    background: #1a1a2e;
}

/* CSS cho Game Canvas trong Modal */
.game-canvas-container {
    /* Đảm bảo flex và căn giữa */
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 70vh;
    background-color: #0A0A10;
    border: 2px solid #FF00FF;
    transition: all 0.5s ease;
    margin: 0 auto; /* Đảm bảo căn giữa */
}

/* BỔ SUNG: Áp dụng cho Iframe bên trong Canvas */
.game-canvas-container iframe {
    box-sizing: border-box; /* Rất quan trọng để tính toán kích thước */
}

/* CHẾ ĐỘ MẶC ĐỊNH */
.game-canvas-default { 
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
}

/* CHẾ ĐỘ MOBILE (KHUNG DỌC) */
.game-canvas-mobile { 
    max-width: 400px; /* Chiều rộng tối đa cố định */
    height: 100%;
    aspect-ratio: 9 / 16; /* Tỷ lệ Dọc */
}

/* CHẾ ĐỘ FULLSCREEN */
.game-canvas-fullscreen { 
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* BỔ SUNG: CSS cho Modal Content để đảm bảo căn giữa và Full Screen hoạt động tốt */
#modalContent.fullscreen-mode {
    max-width: 95vw !important; /* Chiếm gần hết chiều rộng viewport */
    height: 95vh !important; /* Chiếm gần hết chiều cao viewport */
    margin: auto; /* Căn giữa */
    display: flex;
    flex-direction: column;
}
/* CSS cho trang Admin */
.admin-form-group label {
    color: #00FFFF;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
    font-family: 'Electrolize', sans-serif;
}
.admin-input {
    background-color: #1a1a2e;
    border: 1px solid #FF00FF;
    color: #E0E0E0;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.admin-input:focus {
    border-color: #00FFFF;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    outline: none;
}