/* 
   ==========================================================================
   THEME CSS - Hiệu ứng Kính Mờ, Bảng, Tỏa Sáng Nghệ Thuật
   ========================================================================== 
*/

/* --- Glassmorphism Framework --- */

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.glass-panel-dark {
    background: rgba(10, 10, 15, 0.85);
    /* Tối hơn, dùng cho bài viết */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel-light {
    background: rgba(30, 30, 35, 0.5);
    /* Sáng hơn, dùng làm nền nổi */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Tỏa Sáng / Neon Elements --- */

/* Text phát sáng */
.glow-on-hover {
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

.glow-on-hover:hover {
    color: var(--gold-bright);
    text-shadow: var(--neon-gold);
}

/* Nút bấm viền phát sáng (Dùng cho Tầng 4b) */
.btn-border-glow {
    background: transparent;
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
    padding: 8px 20px;
    font-family: var(--font-cinzel);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-border-glow:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: var(--neon-gold);
    color: var(--gold-bright);
}

/* Nút Bấm Kim Loại Có Khắc (Chữ Vàng trên nền Chì) Dùng cho Center Area */
.btn-metal {
    background: linear-gradient(to bottom, #3b3b3b 0%, #1f1f1f 50%, #0d0d0d 51%, #2c2c2c 100%);
    color: var(--gold-primary);
    border: 1px solid #111;
    padding: 10px 25px;
    font-family: var(--font-cinzel);
    font-size: 14px;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -3px 5px rgba(0, 0, 0, 0.8), 0 5px 10px rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    transition: all 0.2s ease;
}

.btn-metal:hover {
    background: linear-gradient(to bottom, #4a4a4a 0%, #2e2e2e 50%, #1c1c1c 51%, #3a3a3a 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -3px 5px rgba(0, 0, 0, 0.8), 0 5px 15px rgba(212, 175, 55, 0.3);
    color: var(--gold-bright);
    transform: translateY(-1px);
}

.btn-metal:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* TÊN MÁY CHỦ Bằng chữ Vàng Chạm Khắc Đổ Bóng */
.server-main-title {
    background: linear-gradient(to bottom, #fcebb6 0%, #c49a45 40%, #8a6523 45%, #e5c065 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    font-family: var(--font-cinzel);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

/* --- Hoạt ảnh (Animations) --- */

/* Hiệu ứng Fade In cơ bản cho việc nhúng Fragment */
.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.fade-out {
    animation: fadeOut 0.05s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* --- Kiểu dáng liên kết (Links) --- */
a {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
    color: var(--gold-bright);
    text-shadow: var(--neon-gold);
}