<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        background-color: #f8f9fa;
        height: 100vh;
        overflow: hidden;
        display: flex;
    }

    .wrapper {
        display: flex;
        height: 100vh;
        width: 100vw;
    }

    /* Sidebar bên trái dạng nền trắng hiện đại */
    .sidebar {
        width: 270px;
        min-width: 270px;
        background-color: #ffffff;
        color: #333;
        display: flex;
        flex-direction: column;
        padding: 20px 15px;
        overflow-y: auto;
        border-right: 1px solid #eaeaea;
        box-shadow: 2px 0 5px rgba(0,0,0,0.02);
    }

    .sidebar h2 {
        font-size: 20px;
        color: #4f46e5;
        margin-bottom: 25px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-left: 10px;
        line-height: 1.3;
    }

    .sidebar a {
        color: #4b5563;
        text-decoration: none;
        padding: 12px 15px;
        margin-bottom: 6px;
        border-radius: 8px;
        transition: all 0.2s ease;
        font-size: 14px;
        font-weight: 500;
        word-break: break-word;
    }

    /* Hiệu ứng khi hover hoặc đang chọn (Active) giống ảnh mẫu: Nền xanh dương, chữ trắng */
    .sidebar a:hover {
        background-color: #f3f4f6;
        color: #1f2937;
    }

    .sidebar a.active {
        background-color: #4f46e5;
        color: #ffffff;
    }

    .sidebar a.logout {
        margin-top: auto; 
        background-color: transparent;
        color: #dc2626;
        font-weight: bold;
    }

    .sidebar a.logout:hover {
        background-color: #fee2e2;
    }

    /* Nội dung chính bên phải */
    .main-content {
        flex: 1;
        padding: 30px;
        background-color: #f8f9fa;
        overflow-y: auto; 
    }

    .main-content h2 { color: #1f2937; margin-bottom: 15px; }
    .main-content p { color: #4b5563; margin-bottom: 10px; }
    .main-content table { width:100%; border-collapse: collapse; margin-top: 10px; }
    .main-content th { padding: 12px; border-bottom: 2px solid #e5e7eb; text-align: left; background-color: #ffffff; color: #374151; }
    .main-content td { padding: 12px; border-bottom: 1px solid #f3f4f6; color: #4b5563; }
</style>