/* Căn chỉnh lại cụm tiêu đề khi không có ảnh */
.server-brand {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-left: 10px; /* Giữ padding để không dính lề trái */
    margin-top: 10px;    /* Tạo khoảng cách với dòng tag phía trên */
}

section[id="intro"] h2 {
    margin: 0;
    font-size: 2.5rem;   /* Có thể tăng kích thước chữ lên một chút cho nổi bật */
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(100, 255, 218, 0.2); /* Thêm hiệu ứng sáng nhẹ cho chữ */
}

/* Fix lỗi mobile khi không có ảnh */
@media (max-width: 900px) {
    /* Nút 3 gạch */
    .menu-toggle {
        display: block;
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1000;
        background: var(--primary);
        color: #111;
        width: 45px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        border-radius: 10px;
    }

    /* 1. Sidebar ẩn/hiện dạng trượt */
    .sidebar {
        position: fixed;
        left: -300px; /* Ẩn mặc định */
        top: 0;
        height: 100vh;
        z-index: 999;
        transition: 0.3s ease;
        width: 280px;
        background: rgba(17, 19, 23, 0.98); /* Nền đậm để nhìn rõ chữ */
        display: block !important;
    }

    .sidebar.active {
        left: 0; /* Hiện khi bấm nút */
    }

    /* 2. Ép Menu thẳng hàng 1 cột (Sửa lỗi lộn xộn của bạn) */
    .nav-menu {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc 1 hàng duy nhất */
        grid-template-columns: none !important; /* Bỏ chia 2 cột */
        gap: 5px !important;
        padding: 0 15px;
    }

    .nav-item {
        width: 100% !important;
        justify-content: flex-start !important;
        font-size: 0.9rem !important;
    }

    /* 3. Luật nhỏ (Sub-menu) thẳng hàng */
    .nav-sub-container {
        grid-column: auto !important; /* Bỏ span 2 */
        margin-left: 35px !important;
        border-left: 1px solid var(--border);
    }

    /* 4. Layout chung */
    .container {
        flex-direction: column;
        padding-top: 70px; /* Chừa chỗ cho nút 3 gạch */
        padding-left: 10px;
        padding-right: 10px;
    }

    .tab-content {
        padding: 25px 15px;
        height: auto;
    }

    /* Fix các ô stats xếp dọc */
    section[id="intro"] > div:first-of-type {
        grid-template-columns: 1fr !important;
    }
}
/* 1. CẤU HÌNH KHUNG HIỂN THỊ CHUNG */
.rule-page {
    padding: 30px;
    line-height: 1.8;
}

/* Đẹp hóa thanh cuộn bên trong khung luật */
.rule-page::-webkit-scrollbar {
    width: 5px;
}
.rule-page::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

/* Định dạng Tiêu đề điều luật (Dùng nội dung từ ::before) */
.rule-page::before {
    display: block;
    font-family: 'Fira Code', monospace;
    color: var(--primary);
    font-size: 0.75rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* Định dạng Nội dung chi tiết (Dùng nội dung từ ::after) */
.rule-page::after {
    display: block;
    white-space: pre-wrap; /* Quan trọng: Để nhận diện dấu xuống dòng \A */
    color: var(--text-dim);
    font-size: 0.95rem;
    text-align: justify;
}
/* Container chứa các mục con */
.nav-sub-container {
    margin-left: 45px;      /* Thụt lề vào so với menu chính */
    margin-bottom: 10px;
    border-left: 1px solid var(--border); /* Đường kẻ dọc mờ mờ cho đẹp */
}

/* Định dạng từng mục luật nhỏ trong menu */
.nav-sub-item {
    padding: 5px 12px;
    font-size: 0.7rem;      /* Chữ nhỏ hẳn lại */
    color: var(--text-dim);
    font-family: 'Fira Code', monospace; /* Font lập trình như bạn muốn */
    cursor: pointer;
    transition: var(--transition);
    display: block;
}

/* Hiệu ứng khi chỉ chuột vào hoặc khi mục đó đang được xem */
.nav-sub-item:hover {
    color: var(--primary);
    padding-left: 18px;     /* Hiệu ứng trượt nhẹ khi hover */
}

/* Thêm dấu gạch ngang phía trước mỗi mục con */
.nav-sub-item::before {
    content: "- ";
    color: var(--primary);
}
/* Tùy chỉnh thanh cuộn cho toàn bộ trang hoặc các vùng có overflow */
::-webkit-scrollbar {
    width: 8px; /* Độ rộng của thanh cuộn */
}

/* Phần nền của thanh cuộn */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Màu nền mờ nhẹ */
    border-radius: 10px;
}

/* Phần tay kéo (thanh trượt) */
::-webkit-scrollbar-thumb {
    background: var(--primary); /* Sử dụng màu xanh chủ đạo của bạn */
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0); /* Tạo khoảng cách để trông thanh mảnh hơn */
    background-clip: padding-box;
}

/* Hiệu ứng khi di chuột vào thanh cuộn */
::-webkit-scrollbar-thumb:hover {
    background: #52ffd1; /* Màu sáng hơn một chút khi hover */
}
/* Thanh Discord nằm ngang */
/* DISCORD BANNER */
        .discord-banner-bar {
            background: #5865f2;
            border-radius: 15px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;
            gap: 20px;
        }

        .dis-info {
            flex: 1;
        }

        .dis-title {
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .dis-subtitle {
            font-size: 0.85rem;
            opacity: 0.9;
        }

        .dis-btn-white {
            background: white;
            color: #5865f2;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-weight: 700;
            font-size: 0.8rem;
            white-space: nowrap;
            transition: var(--transition);
        }

        .dis-btn-white:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* Responsive cho Mobile */
        @media (max-width: 600px) {
            .discord-banner-bar {
                flex-direction: column;
                text-align: center;
            }
        }
/* Nội dung cho bảng con 1.1 */
#rule1::before { content: "Luật I. Sở hữu trí tuệ"; }
#rule1::after { content: ""; }

#rule1_1::before { 
    content: "I. Điều khoản Dịch vụ"; 
}
#rule2::before { content: "Luật II. Giao thương - Economy Policy"; }
#rule2::after { content: ""; }

#rule3::before { content: "Luật III. Quảng cáo - Tiếp thị"; }
#rule3::after { content: ""; }

/* Luật số 4 */
#rule4::before { content: "VII. Nội quy nhóm Box Messenger"; }
#rule4::after { content: ""; }

#rule5::before { content: "Luật IV. Bảo vệ công trình & tài sản người chơi"; }
#rule5::after { content: ""; }