/* Container cảnh báo chưa đăng nhập */
.login-alert-container {
    display: none; /* Mặc định ẩn hoàn toàn để chống nhấp nháy khi F5 */
    width: 100%;
    max-width: 820px; /* Bằng độ rộng tối đa của khung chatbox */
    margin: 0px auto 8px auto; /* căn giữa theo chiều ngang */
    padding: 0 15px; /* khoảng đệm bằng với viền lề chatbox */
    box-sizing: border-box;
}

/* Thẻ alert mô phỏng Bootstrap Warning Alert */
.login-alert-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.login-alert-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: #664d03;
}

.login-alert-link {
    color:  var(--primary-color, #0c826f);   
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    margin-left: 5px;
}

.login-alert-link:hover {
    color: color-mix(in srgb, var(--primary-color, #0c826f) 70%, transparent);  
}

/* Nút tắt alert */
.login-alert-close {
    background: none;
    border: none;
    color: #664d03;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    padding: 0 4px;
    transition: opacity 0.2s;
}

.login-alert-close:hover {
    opacity: 1;
}

/* B. TABLET / DI ĐỘNG LỚN (Max-width: 735px) */
@media screen and (max-width: 735px) {
   .login-alert-container {         
        margin-left: 20px; 
        margin-right: 0;       
        /* Chiều rộng tự trừ 40px (20px lề trái + 20px khoảng trống bên phải) */
        width: calc(100% - 40px);         
        /* Đảm bảo khung không vượt quá chiều rộng đẹp nhất */
        max-width: 400px; 
        box-sizing: border-box;
        padding: 0 8px; /* khoảng đệm bằng với viền lề chatbox */
    }

    .login-alert-box {       
        padding: 8px 12px;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    
}