/* Container bao quanh */
.pn-user-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Menu con */
.pn-user-wrapper .pn-dropdown-menu {
    --pn-bg: #ffffff;
    --pn-text: #333333;
    --pn-border: rgba(0,0,0,0.1);
    --pn-hover: #f8f9fa;

    position: absolute;
    top: 100%;
    right: auto;
    left: 0;
    margin-top: 15px;
    padding: 8px 0;
    width: 200px;
    background-color: var(--pn-bg);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 1002;
    display: none;
    border: 1px solid var(--pn-border);
    
    /* QUAN TRỌNG: Bỏ dấu chấm ở đây */
    list-style: none !important; 
    margin: 0;
}

/* Khử dấu chấm cho từng mục li bên trong đề phòng bị ghi đè */
.pn-user-wrapper .pn-dropdown-menu li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Chế độ Dark Mode (Nền đen chữ trắng) */
.dark .pn-user-wrapper .pn-dropdown-menu {
    --pn-bg: #1a1a1a;
    --pn-text: #ffffff;
    --pn-border: #333333;
    --pn-hover: #2d2d2d;
}

/* Hiển thị khi di chuột */
.pn-user-wrapper:hover .pn-dropdown-menu {
    display: block;
}

/* Link bên trong */
.pn-user-wrapper .pn-dropdown-menu li a {
    color: var(--pn-text) !important;
    padding: 10px 16px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.pn-user-wrapper .pn-dropdown-menu li a:hover {
    background-color: var(--pn-hover);
    color: #ff6b6b !important;
}

/* Đường kẻ phân cách */
.pn-user-wrapper .pn-divider {
    height: 1px;
    background-color: var(--pn-border);
    margin: 4px 0;
    list-style: none !important; /* Bỏ dấu chấm nếu divider là thẻ li */
}
/* Màu mặc định cho Icon User (Chế độ sáng) */
.pn-user-wrapper .pn-user-trigger {
    color: #333 !important; /* Ép màu xám đậm/đen giống icon Moon và Cart */
    font-size: 20px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* Khi di chuột vào icon */
.pn-user-wrapper .pn-user-trigger:hover {
    color: #ff6b6b !important; /* Màu đỏ thương hiệu khi hover */
}
.pn-user-wrapper a {
    color: inherit;
}
/* Trạng thái mặc định (Light Mode) */
.pn-user-wrapper .pn-dropdown-menu {
    /* Khai báo biến màu */
    --menu-bg: #ffffff;
    --menu-text: #333333;
    --menu-border: rgba(0,0,0,0.1);
    --menu-hover-bg: #f8f9fa;

    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 15px;
    padding: 8px 0;
    width: 200px;
    background-color: var(--menu-bg) !important; /* Dùng biến màu */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 1002;
    display: none;
    border: 1px solid var(--menu-border) !important;
    list-style: none !important;
}

/* --- TRẠNG THÁI LIGHT MODE (MẶC ĐỊNH) --- */
.pn-user-wrapper .pn-dropdown-menu {
    position: absolute;
    top: 100%;
    right: auto;
    left: 0;
    margin-top: 15px;
    padding: 8px 0;
    width: 200px;
    background-color: #ffffff !important; /* Nền trắng khi ở chế độ sáng */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 1002;
    display: none;
    border: 1px solid rgba(0,0,0,0.1);
    list-style: none !important; /* Bỏ dấu chấm */
    margin: 0;
}

.pn-user-wrapper .pn-dropdown-menu li a {
    color: #333333 !important; /* Chữ đen khi ở chế độ sáng */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none !important;
    font-size: 14px;
}

/* --- TRẠNG THÁI DARK MODE (Dựa trên JavaScript của bạn) --- */
/* Khi body có class .dark-theme, menu sẽ đổi màu */
.dark-theme .pn-user-wrapper .pn-dropdown-menu {
    background-color: #1a1a1a !important; /* Nền đen */
    border-color: #333333 !important;
}

.dark-theme .pn-user-wrapper .pn-dropdown-menu li a {
    color: #ffffff !important; /* Chữ trắng */
}

/* Hiệu ứng hover trong chế độ tối */
.dark-theme .pn-user-wrapper .pn-dropdown-menu li a:hover {
    background-color: #333333 !important;
    color: #ff6b6b !important;
}

/* Hiển thị khi di chuột */
.pn-user-wrapper:hover .pn-dropdown-menu {
    display: block;
}

/* Khử dấu chấm cho li */
.pn-user-wrapper .pn-dropdown-menu li {
    list-style: none !important;
}