/* --- Kiểu dáng Menu Chuột Phải Tùy Chỉnh (Giao diện dọc) --- */
#custom-context-menu {
    position: fixed;
    z-index: 10000;
    width: 300px; /* Tăng chiều rộng để có không gian thoải mái hơn */
    background: var(--background, #ffffff);
    border-radius: 12px; /* Bo góc mềm mại hơn */
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    padding: 10px;
    display: none; /* Ẩn theo mặc định */
    font-family: 'Inclusive Sans', sans-serif;
    border: 1px solid var(--border-color, #f0f0f0);
    transition: background 0.3s, border-color 0.3s;
}

#custom-context-menu .menu-options {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Dòng quan trọng: Đảm bảo layout là cột dọc */
    display: flex;
    flex-direction: column;
    
}

#custom-context-menu .menu-option {
    display: flex;
    align-items: center;
    padding: 10px 15px; /* Tăng padding cho thoáng hơn */
    cursor: pointer;
    font-size: 15px; /* Tăng cỡ chữ */
    color: var(--text-color, #333);
    border-radius: 8px; /* Bo góc cho mỗi mục */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#custom-context-menu .menu-option i {
    margin-right: 18px; /* Tăng khoảng cách icon và chữ */
    width: 22px;
    text-align: center;
    color: var(--icon-color, #555);
    font-size: 15px; /* Điều chỉnh lại kích thước icon nếu cần */
}

#custom-context-menu .menu-option:hover {
    background-color: var(--accent-color, #4ccccb);
    color: #fff;
}

body.dark-theme #custom-context-menu .menu-option:hover {
    background-color: var(--accent-color, #4dd683);
    color: #fff;
}

#custom-context-menu .menu-option:hover i {
    color: #fff;
}

#custom-context-menu hr {
    border: none;
    height: 1px;
    background-color: var(--border-color, #e9e9e9);
    margin: 8px 5px; /* Thêm margin hai bên cho đẹp */
}
/* === BỔ SUNG CSS CHO MENU LỊCH SỬ (SUBMENU) === */
/* Đoạn mã này được thêm vào để xử lý menu con mà không ảnh hưởng đến CSS đã có. */

/* Cần đặt position: relative cho mục cha để định vị menu con */
#custom-context-menu .menu-option.has-submenu {
    position: relative;
}

/* Thêm một mũi tên nhỏ để chỉ dẫn người dùng rằng có menu con */
.menu-option.has-submenu::after {
    content: '›';
    position: absolute;
    right: 12px;
    font-size: 16px;
    color: var(--icon-color, #888);
}

/* Ẩn menu con theo mặc định và thêm hiệu ứng chuyển động */
.has-submenu .submenu-options {
    position: absolute;
    left: 100%;
    top: -10px;
    width: 200px;
    list-style: none;
    margin: 0 0 0 5px;
    padding: 6px;
    background: var(--background, #ffffff);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color, #f0f0f0);
       flex-direction: column;
    /* --- THAY ĐỔI QUAN TRỌNG TẠI ĐÂY --- */
    visibility: hidden; /* Ẩn menu thay vì dùng display:none */
    opacity: 0;         /* Làm cho menu trong suốt */
    /* Thêm độ trễ 0.2 giây TRƯỚC KHI ẩn menu */
    transition: visibility 0s linear 0.2s, opacity 0.2s linear; 
}

/* Khi rê chuột vào mục cha, menu con SẼ HIỆN RA NGAY LẬP TỨC */
.has-submenu:hover > .submenu-options {
    visibility: visible; /* Hiện menu */
    opacity: 1;          /* Làm cho menu hiện rõ */
    /* Bỏ độ trễ khi hiện ra để menu xuất hiện tức thì */
    transition-delay: 0s; 
}

/* Định dạng cho các mục trong menu con */
.submenu-options .submenu-option {
    padding: 10px 15px;
    font-size: 14px;
    color: var(--text-color, #333);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.submenu-options .submenu-option:hover {
    background-color: #f5f5f5; /* Bạn có thể thay đổi màu này cho phù hợp với theme */
}