/* ==========================================================
   SIDEBAR  –  phiên bản hoàn chỉnh, phẳng màu
   ========================================================== */

/* ===== KHUNG SIDEBAR (PC: luôn mở) ======================= */
.sidebar{
    position:fixed;
    top:0; left:0;
    width:240px;            /* bề rộng menu */
    height:100vh;           /* full chiều cao */
    background:#1a1a2e;     /* màu nền phẳng */
    color:#fff;
    padding:60px 0 0;       /* chừa chỗ cho nút ☰ khi mobile */
    overflow-y:auto;
    z-index:998;
    transition:left .3s ease;
    padding:60px 0 calc(env(safe-area-inset-bottom) + 40px);
}

/* ===== NÚT ☰ (mobile mới hiển thị) ====================== */
.sidebar-toggle{
    position:fixed;
    top:12px; left:12px;
    width:42px; height:42px;
    background:#1a1a2e;
    color:#fff;
    border:none; border-radius:6px;
    font-size:22px;         /* icon kích thước */
    display:none;           /* PC ẩn */
    align-items:center; justify-content:center;
    z-index:999;
}

/* ===== DANH SÁCH MỤC ==================================== */
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{
    padding:14px 26px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    font-size:15px;
    cursor:pointer; user-select:none;
}
.sidebar li:hover:not(.menu-title){
    background:#16213e;
}

/* ===== TIÊU ĐỀ NHÓM ==================================== */
.menu-title{
    padding:12px 26px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#ddd;
    background:transparent;
    cursor:default;
    border-bottom:none;
    opacity:.8;

    /* NEW – khoảng cách phía trên, trừ nhóm đầu tiên */
    margin-top:20px;
}
/* Nếu muốn KHÔNG áp dụng cho nhóm đầu tiên: */
.menu-title:first-child{
    margin-top:0;
}
.menu-title + li{           /* khoảng cách sau heading */
    margin-top:4px;
}

/* ===== LI CHỨA <a>  ===================================== */
.sidebar a{
    color:inherit;
    text-decoration:none;
    display:block;          /* hover trên toàn dòng */
}
.sidebar a:hover{ text-decoration:none; }

.sidebar::after{
    content:'';
    display:block;
    height:calc(env(safe-area-inset-bottom) + 180px); /* 60 px + safe‑area */
    flex-shrink:0;   /* phòng trường hợp sidebar dùng flex trong tương lai */
}

/* ----------------------------------------------------------
   CANH LỀ NỘI DUNG CHÍNH (.content)
---------------------------------------------------------- */

/* PC (≥769px): sidebar luôn mở nên chừa 240px */
.content{
    margin-left:240px;
    padding:24px;
    transition:margin-left .3s ease;
}

/* MOBILE (≤768px) */
@media (max-width:768px){
    .sidebar        { left:-240px; }  /* ẩn mặc định */
    .sidebar.open   { left:0; }       /* mở khi JS thêm class open */
    .sidebar-toggle { display:flex; } /* nút ☰ hiện */

    .content{ margin-left:0; }        /* nội dung full width */
    /* Khi sidebar mở → đẩy nội dung sang phải 240px */
    .sidebar.open ~ .content{ margin-left:240px; }
}