/* ==============================================================
   RESET VÀ BIẾN TOÀN CỤC (Áp dụng chung)
============================================================== */
:root { 
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-dark: #1B5E20;
    --secondary-color: #E8F5E9;
    --text-main: #2C3E50;
    --text-muted: #7F8C8D;
    --bg-main: #F4F7F6;
    --white: #FFFFFF;
    --danger: #E74C3C;
    --warning: #F1C40F;
    --success: #27AE60;
    --border-color: #E0E6ED;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --border-radius: 8px;
    --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

    a:hover {
        color: var(--primary-dark);
    }

ul {
    list-style: none;
}

/* ==============================================================
   USER LAYOUT CSS CHÍNH
============================================================== */
.user-body {
    background-color: #f8f9fa;
}

.user-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* === HEADER TOP === */
.user-header-top {
    background-color: var(--primary-dark);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    padding: 8px 0;
}

    .user-header-top a {
        color: rgba(255,255,255,0.8);
        margin-left: 15px;
    }

        .user-header-top a:hover {
            color: var(--white);
        }

/* === HEADER MAIN === */
.user-header-main {
    background-color: var(--white);
    padding: 20px 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 90;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .logo i {
        color: var(--primary-light);
    }

/* === NAVIGATION === */
.user-nav {
    display: flex;
    gap: 25px;
    align-items: center;
}

    .user-nav a {
        font-weight: 600;
        color: var(--text-main);
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

        .user-nav a:hover, .user-nav a.active {
            color: var(--primary-color);
        }

/* === ACTIONS (CART & LOGIN) === */
.user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-btn {
    position: relative;
    font-size: 20px;
    color: var(--text-main);
}

    .cart-btn:hover {
        color: var(--primary-color);
    }

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--warning);
    color: #000;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-btn {
    border: 2px solid var(--primary-color);
    padding: 8px 20px;
    border-radius: 30px;
    color: var(--primary-color);
    font-weight: 600;
}

    .login-btn:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }

/* === BODY MAIN (CONTENT & SIDEBAR) === */
.user-main-wrapper {
    display: flex;
    gap: 30px;
    margin: 40px auto;
    min-height: 500px;
}

/* Sidebar */
.user-sidebar {
    width: 280px;
    flex-shrink: 0;
}

.category-widget {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

    .category-widget h3 {
        background-color: var(--primary-color);
        color: var(--white);
        padding: 15px 20px;
        margin: 0;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .category-widget ul {
        padding: 10px 0;
    }

        .category-widget ul li a {
            display: block;
            padding: 12px 20px;
            color: var(--text-main);
            border-bottom: 1px solid var(--bg-main);
            transition: var(--transition);
        }

        .category-widget ul li:last-child a {
            border-bottom: none;
        }

        .category-widget ul li a:hover {
            padding-left: 25px;
            color: var(--primary-color);
            background-color: var(--secondary-color);
        }

/* Main Content Area */
.user-content {
    flex: 1;
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
}

/* === FOOTER === */
.user-footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 50px 0 20px;
    margin-top: 50px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col h4 {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

    .footer-col h4::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 2px;
        background-color: var(--primary-light);
    }

.footer-col p, .footer-col ul li a {
    color: #bdc3c7;
    margin-bottom: 10px;
    display: block;
}

    .footer-col ul li a:hover {
        color: var(--white);
        padding-left: 5px;
    }

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
    color: #95a5a6;
}
/* Hiệu ứng Dropdown cho User */
.user-menu-wrapper:hover .user-dropdown-content {
    display: block !important;
}

.user-dropdown-content a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color) !important;
}
/* Container bọc ngoài */
.user-menu-wrapper {
    position: relative;
    padding: 10px 0;
}

/* Phần hiển thị tên */
.user-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    transition: background 0.3s;
}

.user-name-text {
    color: var(--primary-color);
    font-weight: 700;
}

/* Khối Menu thả xuống */
.user-dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    min-width: 200px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1000;
    padding: 8px 0;
    display: none; /* Mặc định ẩn */
    border: 1px solid #eee;
    margin-top: 5px;
}

/* Hiệu ứng Hover để hiện Menu */
.user-menu-wrapper:hover .user-dropdown-content {
    display: block;
}

/* Các item trong menu */
.user-dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #333 !important;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

    .user-dropdown-content a i {
        width: 20px;
        color: var(--primary-color);
    }

    .user-dropdown-content a:hover {
        background-color: #f8f9fa;
        color: var(--primary-dark) !important;
        padding-left: 25px;
    }

/* Đường kẻ phân cách */
.dropdown-divider {
    height: 1px;
    background-color: #eee;
    margin: 5px 0;
}

/* Item đăng xuất màu đỏ */
.btn-logout-item {
    color: var(--danger) !important;
}

    .btn-logout-item i {
        color: var(--danger) !important;
    }
/* [BỔ SUNG VÀO PHẦN PRODUCT ACTIONS] */
.product-actions {
    display: flex;
    justify-content: center; /* Thêm: Căn giữa các nút */
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 0 10px 15px; /* Thêm padding cho đẹp */
}

.btn-action {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-buy {
    background-color: #2E7D32;
    color: white !important;
    flex: 2; /* Thêm: Nút Mua dài hơn nút khác */
    width: auto;
    gap: 5px; /* Khoảng cách icon và chữ MUA */
    font-weight: bold;
}

.btn-add {
    background-color: #f39c12;
    color: white !important;
    flex: 1;
}

.btn-view {
    background-color: #f1f2f6;
    color: #2f3542 !important;
    flex: 1;
}/* 1. Container bao quanh tất cả sản phẩm */
.product-grid {
    display: grid;
    /* Tự động chia cột: mỗi cột tối thiểu 220px, tự co giãn theo màn hình */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px; /* Khoảng cách giữa các ô sản phẩm */
    padding: 20px 0;
}

/* 2. Style cho từng ô sản phẩm (Card) */
.product-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Xếp các thành phần bên trong theo chiều dọc */
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

    .product-card:hover {
        transform: translateY(-5px); /* Hiệu ứng bay lên khi rà chuột */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: var(--primary-color);
    }

/* 3. Hình ảnh sản phẩm */
.product-img-wrapper {
    width: 100%;
    height: 200px; /* Cố định chiều cao hình ảnh để các hàng thẳng nhau */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

    .product-img-wrapper img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Giữ nguyên tỉ lệ ảnh không bị móp */
    }

/* 4. Thông tin chữ bên dưới ảnh */
.product-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Đẩy các nút xuống đáy nếu tên ngắn */
    text-align: center;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    height: 40px; /* Cố định 2 dòng chữ để các nút luôn thẳng hàng */
    overflow: hidden;
}

.product-price {
    color: var(--danger);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}
/* liên kết gg và fakebook-----------------------------------------------------------------------------------------*/
/* --- CẤU TRÚC ĐĂNG NHẬP MẠNG XÃ HỘI --- */

.social-login {
    margin-top: 30px;
    text-align: center;
}

/* Đường kẻ ngang "Hoặc đăng nhập bằng" */
.social-login .divider {
    position: relative;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.social-login .divider span {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff; /* Phải trùng với màu nền trắng của Form */
    padding: 0 15px;
    color: #888;
    font-size: 13px;
    white-space: nowrap;
}

/* Container chứa 2 nút nằm ngang */
.social-buttons {
    display: flex;
    gap: 12px;
}

.btn-social {
    flex: 1; /* Chia đều 50-50 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 5px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none !important;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
}

/* Màu đặc trưng của Facebook */
.btn-facebook {
    background-color: #1877F2;
    color: white !important;
}

/* Màu đặc trưng của Google */
.btn-google {
    background-color: #ffffff;
    color: #555 !important;
    border: 1px solid #ddd; /* Google thường dùng nền trắng viền xám */
}

/* Hiệu ứng khi rà chuột */
.btn-social:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-facebook:hover {
    background-color: #166fe5;
}

.btn-google:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
}
/*=========================================================================================================================================================================*/
/* Container cho các nút ở trang chi tiết */
.product-details-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

/* Style chung cho nút ở trang chi tiết */
.btn-detail-action {
    flex: 1;
    height: 48px; /* Cao hơn nút ở ngoài danh sách một chút để dễ bấm */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none !important;
    font-size: 15px;
    transition: all 0.3s ease;
}

/* Nút Mua ngay - Xanh lá */
.btn-buy {
    background-color: #2E7D32;
    color: white !important;
    flex: 1.5; /* Nút chính nên to hơn */
}

/* Nút Thêm giỏ hàng - Màu cam */
.btn-add {
    background-color: #f39c12;
    color: white !important;
}

/* Nút Quay lại - Màu xám nhạt */
.btn-back {
    background-color: #f1f2f6;
    color: #2f3542 !important;
}

/* Hiệu ứng hover đồng bộ */
.btn-detail-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    filter: brightness(110%);
}
/* ==============================================================
    CSS CHO TRANG ĐĂNG NHẬP ADMIN (ADMIN LOGIN)
============================================================== */
.admin-login-body {
    margin: 0;
    padding: 0;
    background-color: #f0f2f1; /* Nền xám nhạt */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

    .login-card h2 {
        color: #1a432d;
        font-size: 24px;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-weight: 700;
    }

    .login-card .divider {
        height: 1px;
        background: #eee;
        margin-bottom: 30px;
    }

.admin-form-group {
    margin-bottom: 20px;
    position: relative;
}

    .admin-form-group input {
        width: 100%;
        padding: 14px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        box-sizing: border-box;
        outline: none;
        transition: border-color 0.3s;
    }

        .admin-form-group input:focus {
            border-color: #43835b;
        }

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
}

.btn-admin-submit {
    width: 100%;
    padding: 14px;
    background-color: #43835b;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

    .btn-admin-submit:hover {
        background-color: #356a49;
    }

.error-box {
    color: #e74c3c;
    background: #fdf2f2;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
}
/* Container bao quanh ảnh để tạo hình tròn */
/* 1. Container bao quanh avatar nhỏ gọn và tròn tuyệt đối */
.nav-avatar-container {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid var(--primary-color) !important;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.nav-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Giữ ảnh không bị bóp méo */
}

/* 2. Căn chỉnh cụm User Profile trên Navbar */
.user-auth-wrapper .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

/* 3. Dropdown Menu - Ép buộc nằm dọc và sang trọng */
.dropdown-menu {
    display: none; /* Mặc định ẩn, Bootstrap sẽ thêm class .show khi click */
    flex-direction: column !important;
    min-width: 240px !important;
    padding: 10px 0 !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 15px !important;
    background-color: var(--white) !important;
}

    /* Khi menu hiển thị */
    .dropdown-menu.show {
        display: flex !important;
    }

/* Item trong Menu */
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    width: 100% !important;
    color: #444 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    border: none !important;
    background: transparent !important;
}

    /* Hiệu ứng hover cho từng mục */
    .dropdown-item:hover {
        background-color: #f1f8f4 !important;
        color: var(--primary-color) !important;
        padding-left: 28px !important; /* Đẩy nhẹ sang phải tạo cảm giác linh hoạt */
    }

    /* Icon trong Menu */
    .dropdown-item i {
        width: 25px;
        margin-right: 10px;
        text-align: center;
        font-size: 16px;
        color: var(--primary-color);
    }

    /* Mục đăng xuất màu đỏ */
    .dropdown-item.text-danger {
        color: var(--danger) !important;
    }

        .dropdown-item.text-danger i {
            color: var(--danger) !important;
        }

/* Đường kẻ phân cách */
.dropdown-divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: 8px 0;
    width: 100%;
}

/* 4. Text "Xin chào" */
.user-info-nav {
    line-height: 1.2;
}

    .user-info-nav .fw-bold {
        color: var(--primary-color);
        font-weight: 700;
    }
/* ===================================================
   CSS FOOTER PHONG CÁCH NÔNG NGHIỆP XANH HOÀN TOÀN MỚI
   =================================================== */
/* ===================================================
   CSS FOOTER SIÊU SẮC NÉT - BẬT TÔNG XANH SÁNG, NỔI BẬT 100%
   =================================================== */
/* Khung lớn chứa Footer */
.green-footer {
    background: linear-gradient(rgba(24, 84, 18, 0.92), rgba(12, 51, 8, 0.96)), url('../Images/anh_admin.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
    padding: 50px 0 25px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    width: 92%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
}

/* Định dạng cột chung */
.footer-col {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* CHIA TỶ LỆ KHÔNG GIAN CHO TỪNG CỘT */
.col-left {
    flex: 1;
    min-width: 280px;
}
/* Cột bản đồ: 25% */
.col-center {
    flex: 2;
    min-width: 450px;
}
/* Cột thông tin công ty: 50% (Rộng gấp đôi) */
.col-right {
    flex: 1;
    min-width: 220px;
}
/* Cột liên kết nhanh: 25% */

/* CSS Cột Tiêu đề */
.footer-heading {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffff00 !important; /* Đổi hẳn sang chữ màu vàng chanh sáng rực cực kỳ chuyên nghiệp */
    margin-top: 0;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
}

/* Style Khung Bản Đồ Cột 1 */
.footer-map-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 15px;
}

/* Style phần Hotline dưới bản đồ */
.hotline-support-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-title {
    font-size: 14px;
    color: #ffffff;
    margin: 5px 0;
    font-weight: 700;
}

.support-branch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
}

/* Tạo nhãn viên thuốc Bo tròn cho Nhánh 1, Nhánh 2 giống mẫu */
.badge-branch {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
}

.branch-1 {
    background-color: #3b82f6;
}
/* Màu xanh dương */
.branch-2 {
    background-color: #06b6d4;
}
/* Màu xanh ngọc */

/* Style Cột giữa thông tin chi tiết */
.company-name {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: #ffffff;
}

.company-details {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

    .company-details li {
        font-size: 13.5px;
        margin-bottom: 10px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.9);
    }

        .company-details li i {
            color: #ffff00; /* Icon chi tiết màu vàng chanh nổi bật */
            width: 18px;
        }

/* Style nút mạng xã hội */
.social-icons {
    display: flex;
    gap: 10px;
}

    .social-icons a {
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

        .social-icons a:hover {
            background: #ffffff;
            color: #185412;
            transform: translateY(-3px);
        }

/* Style Cột bên phải (Liên kết nhanh) */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-links a {
        color: #ffffff;
        font-size: 13.5px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: padding-left 0.2s ease;
    }

        .footer-links a i {
            font-size: 12px;
            opacity: 0.7;
        }

        .footer-links a:hover {
            padding-left: 6px;
            color: #ffff00;
        }

/* Bản quyền đáy */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 35px;
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}
/*NÚT TIỆN LIÊN HỆ*/
/* ===================================================
   CSS BỘ NÚT LIÊN HỆ LƠ LỬNG GÓC PHẢI (FLOATING BAR)
   =================================================== */
.floating-contact-bar {
    position: fixed;
    bottom: 90px; /* Chỉ cần đổi từ 40px lên thành 90px hoặc 100px là cụm nút tự dịch lên trên */
    right: 50px;  /* Giữ nguyên khoảng cách với lề phải */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999999;
}
/* Định dạng chung cho cả 4 nút */
.floating-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

    /* Hiệu ứng phóng to nhẹ khi di chuột vào nút */
    .floating-btn:hover {
        transform: scale(1.12) translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

/* 1. Màu nút Giỏ Hàng (Xanh lá đậm) */
.btn-cart {
    background-color: #0b820a;
}

/* Số hiển thị trên giỏ hàng (Badge màu đỏ giống hình mẫu) */
.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff;
}

/* 2. Màu nút Messenger (Xanh thương hiệu FB) */
.btn-messenger {
    background-color: #2b5597;
}

/* 3. Màu nút Điện thoại (Đỏ rực + Hiệu ứng nhịp tim thu hút bấm vào) */
.btn-phone {
    background-color: #d11a1a;
    animation: phonePulse 2s infinite;
}

/* 4. Màu nút Zalo (Xanh da trời chuẩn Zalo) */
.btn-zalo {
    background-color: #1e74fd;
}

    /* Tinh chỉnh riêng cho Icon SVG của Zalo nằm ngay ngắn */
    .btn-zalo svg {
        display: block;
    }

/* HIỆU ỨNG NHẤP NHÁY / RUNG NHẸ CHO NÚT ĐIỆN THOẠI HẤP DẪN */
@keyframes phonePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(209, 26, 26, 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(209, 26, 26, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(209, 26, 26, 0);
    }
}
floating-btn:hover .btn-label {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   🌱 ĐOẠN CSS ĐẶC TRỊ PHÁT SÁNG MÀU XANH LÁ CHO MENU ĐƯỢC BẤM (ACTIVE)
   ========================================================================== */

/* 1. Đối với thanh điều hướng chính (Header) khi được active hoặc hover */
.user-nav a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 12px !important; /* Gọt nhỏ khoảng đệm lại để không bị phình khối */
    margin: 0 2px !important; /* Khoảng cách an toàn vừa đủ giữa các mục */
    color: #475569 !important; /* Màu chữ gốc xám dịu thanh lịch */
    font-weight: 700 !important; /* Chữ đậm rõ nét như hình mẫu */
    font-size: 14px !important; /* Cân bằng lại cỡ chữ cho vừa vặn */
    border-radius: 4px !important; /* Bo góc nhẹ chuẩn form */
    text-decoration: none !important;
    white-space: nowrap !important; /* 🌟 CHÍ MẠNG: Khóa cứng chữ, cấm tuyệt đối không cho rớt dòng cắt chữ */
    border-left: 3px solid transparent !important; /* Tạo vách ẩn chống giật khung hình */
    transition: all 0.15s ease-in-out !important;
}

    /* 2. HIỆU ỨNG SÁNG NỀN MỜ VÀ VẠCH XANH SÁT MÉP KHI BẤM (ACTIVE) HOẶC HOVER */
    .user-nav a.active_user_menu,
    .user-nav a:hover {
        color: #1b5e20 !important; /* Chữ chuyển màu xanh đậm cực nét */
        background-color: #E8F5E9 !important; /* 🌟 Nền mờ xanh nhạt dịu mát y chang bên Admin */
        border-left: 3px solid #2E7D32 !important; /* 🌟 Vạch đứng xanh đậm sát rạt mép trái, ôm khít gọn gàng */
    }
/* ==========================================================================
   🌱 CSS ACTIVE SIDEBAR: NỀN MỜ, CHỮ XANH ĐẬM GỌN GÀNG ĐÚNG KÍCH THƯỚC
   ========================================================================== */
.sidebar-category-link {
    display: block !important;
    padding: 10px 15px !important; /* Tạo độ rộng hàng vừa mắt */
    color: #333333 !important; /* Màu chữ gốc mặc định */
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 4px; /* Bo góc nhẹ chuẩn form */
}

    /* Hiệu ứng bừng sáng nền mờ xanh nhạt khi được click chọn hoặc rê chuột vào */
    .sidebar-category-link.active_sidebar_menu,
    .sidebar-category-link:hover {
        color: #1b5e20 !important; /* Chữ chuyển sang màu xanh đậm rõ nét */
        background-color: #E8F5E9 !important; /* Lớp nền xanh mờ dịu mắt chuẩn đét như hình mẫu */
        font-weight: bold !important; /* Làm đậm chữ lên để tạo điểm nhấn */
    }