@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: "Sarabun", sans-serif;
        }

        body {
            font-family: "Sarabun", sans-serif;
            min-height: 100vh;
            padding-bottom: 80px;
        }
        .bottom-nav .row>* {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .main-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #8b4513 100%);
            color: white;
            padding: 15px 20px;
        }

        .logo {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            font-size: 24px;
            backdrop-filter: blur(10px);
            color: #ffd700;
            border: 3px solid #fff;
            box-shadow: 0 4px 15px rgba(255,215,0,0.3);
        }

        .menu-btn {
            border: none;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 10px 15px;
        }

        .menu-btn.search {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            border: 2px solid #fff;
            box-shadow: 0 3px 10px rgba(255,215,0,0.3);
            text-decoration: none;
        }

        .menu-btn.cart {
            background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
            color: #333;
            border: 2px solid #ffd700;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .menu-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .seller-info {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 50%, #ffffff 100%);
            border-radius: 15px;
            border: 3px solid #fff;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
        }

        .table-header {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
            font-weight: 600;
        }

        .table-row:hover {
            background: #f8f9fa;
        }

        .desktop-nav-item {
            color: #666;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            border-radius: 15px;
        }

        .desktop-nav-item:hover {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            transform: translateX(5px);
        }

        .desktop-nav-item.active {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
        }

        .sidebar-stats {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
        }

        .stat-box {
            background: rgba(255,255,255,0.8);
            border-radius: 10px;
            text-align: center;
        }

        .stat-box .number {
            font-size: 24px;
            font-weight: bold;
            color: #8b4513;
        }

        .stat-box .label {
            font-size: 12px;
            color: #666;
        }

        .info-item i {
            width: 20px;
            color: #ffd700;
        }

        .quick-btn {
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 12px;
        }

        .quick-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139,69,19,0.3);
        }

        .profile-btn {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            color: white;
        }

        .profile-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }

        .back-btn {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .back-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }

        .profile-photo-section {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
            border: 3px solid #fff;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
        }

        .profile-photo {
            width: 120px;
            height: 120px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px auto;
            font-size: 50px;
            color: #ffd700;
            border: 5px solid white;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .profile-photo:hover {
            transform: scale(1.05);
        }

        .profile-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .photo-upload-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: 50%;
        }

        .profile-photo:hover .photo-upload-overlay {
            opacity: 1;
        }

        .photo-upload-text {
            color: white;
            font-size: 12px;
            text-align: center;
        }

        .form-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .section-title {
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ffd700;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #ffd700;
        }

        .form-label {
            color: #333;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #ffd700;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
        }

        .form-select {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-select:focus {
            border-color: #ffd700;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .btn-save {
            flex: 1;
            min-width: 150px;
            padding: 15px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .btn-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255,215,0,0.3);
        }

        .btn-cancel {
            flex: 1;
            min-width: 150px;
            padding: 15px;
            border: 2px solid #8b4513;
            border-radius: 10px;
            background: white;
            color: #8b4513;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .btn-cancel:hover {
            background: #8b4513;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139,69,19,0.3);
        }

        .input-group-text {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border: 2px solid #ffd700;
            color: #8b4513;
            font-weight: 500;
        }

        .bee-count-display {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
        }

        .bee-count-number {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .bee-count-label {
            font-size: 14px;
            opacity: 0.9;
        }

        /* User Overlay Styles */
        .user-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }

        .user-overlay.show {
            display: flex;
        }

        .user-modal {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .user-overlay.show .user-modal {
            transform: scale(1);
        }

        .user-modal-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #8b4513 100%);
            color: white;
            padding: 20px;
            border-radius: 20px 20px 0 0;
            position: relative;
        }

        .user-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .user-modal-close:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px auto;
            font-size: 35px;
            color: #ffd700;
            border: 4px solid white;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .user-modal-body {
            padding: 25px;
        }

        .user-info-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }

        .user-info-item:hover {
            background: #f8f9fa;
            margin: 0 -15px;
            padding: 12px 15px;
            border-radius: 10px;
        }

        .user-info-item:last-child {
            border-bottom: none;
        }

        .user-info-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 18px;
            color: #8b4513;
            box-shadow: 0 3px 10px rgba(255,215,0,0.3);
        }

        .user-info-content h6 {
            margin: 0;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .user-info-content p {
            margin: 0;
            color: #666;
            font-size: 12px;
        }

        .user-actions {
            padding: 20px 25px;
            border-top: 1px solid #f0f0f0;
        }

        .user-action-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 10px;
        }

        .user-action-btn.primary {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
        }

        .user-action-btn.secondary {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
        }

        .user-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .user-action-btn:last-child {
            margin-bottom: 0;
        }

        .nav-item {
            color: #666;
            font-size: 11px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .nav-item:hover {
            color: #ffd700;
            transform: translateY(-2px);
        }

        .nav-item.active {
            color: #ffd700;
        }

        .nav-item span {
            font-size: 10px;
            font-weight: 500;
            white-space: nowrap;
        }

        .nav-item i {
            font-size: 20px !important;
        }

        .scan-button {
            position: relative;
            margin-top: -15px;
        }

        .scan-button .scan-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid white;
            margin: 0 auto 8px auto;
        }

        .scan-button .scan-icon i {
            font-size: 24px !important;
            color: white;
        }

        .scan-button span {
            font-size: 10px !important;
            font-weight: 500 !important;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        @media (max-width: 767px) {
            .bottom-nav {
                padding-bottom: 10px;
                padding-top: 15px;
            }
            
            .nav-item span {
                font-size: 9px !important;
                line-height: 1.1;
                margin-top: 2px;
                font-weight: 500;
            }
            
            .nav-item i {
                font-size: 18px !important;
                margin-bottom: 0 !important;
            }
            
            .scan-button {
                margin-top: -20px;
            }
            
            .scan-button .scan-icon {
                width: 50px;
                height: 50px;
                margin-bottom: 6px;
            }
            
            .scan-button .scan-icon i {
                font-size: 22px !important;
            }
            
            .scan-button span {
                font-size: 9px !important;
            }

            .action-buttons {
                flex-direction: column;
            }

            .btn-save, .btn-cancel {
                min-width: 100%;
            }

            .edit-profile-container {
                padding: 15px;
            }

            .form-section {
                padding: 20px;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }


   /* หน้าข้อมูลเกษตร - CSS เพิ่มเติม */
        .farmer-data-container {
            padding: 25px;
        }

        .summary-cards {
            margin-bottom: 25px;
        }

        .summary-card {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            color: #8b4513;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
            border: 3px solid #fff;
            transition: transform 0.3s ease;
        }

        .summary-card:hover {
            transform: translateY(-3px);
        }

        .summary-card .number {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .summary-card .label {
            font-size: 14px;
            font-weight: 500;
        }

        .summary-card .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: #8b4513;
        }

        .filter-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            border: 2px solid #e9ecef;
        }

        .filter-title {
            color: #8b4513;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .filter-title i {
            margin-right: 10px;
            color: #ffd700;
        }

        .filter-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            border: none;
            border-radius: 8px;
            padding: 8px 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 10px;
            margin-bottom: 10px;
            font-size: 13px;
        }

        .filter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,215,0,0.3);
        }

        .filter-btn.active {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
        }

        .search-box {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 10px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
        }

        .search-box:focus {
            border-color: #ffd700;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
            outline: none;
        }

        .farmer-table {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .farmer-table .table {
            margin-bottom: 0;
        }

        .farmer-table .table thead th {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
            font-weight: 600;
            border: none;
            padding: 15px 12px;
            font-size: 14px;
            text-align: center;
        }

        .farmer-table .table tbody td {
            padding: 15px 12px;
            vertical-align: middle;
            border-color: #f0f0f0;
            font-size: 14px;
        }

        .farmer-name {
            font-weight: 600;
            color: #333;
        }

        .hive-count-badge {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 6px 6px;
            border-radius: 15px;
            font-weight: 500;
            font-size: 11px;
            display: inline-block;
        }

        .hive-ready-badge {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 6px 6px;
            border-radius: 15px;
            font-weight: 500;
            font-size: 11px;
            display: inline-block;
        }

        .map-icon {
            color: #ffd700;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .map-icon:hover {
            color: #8b4513;
            transform: scale(1.2);
        }

        .total-row {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            font-weight: bold;
            color: #8b4513;
        }

        .total-row td {
            border-top: 3px solid #8b4513 !important;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        .status-active {
            background: #28a745;
        }

        .status-inactive {
            background: #dc3545;
        }

        .status-pending {
            background: #ffc107;
        }

        .action-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            display: inline-flex;
            font-size: 14px;
            border: none;
            border-radius: 4px;
        }

        .action-btn.view {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: white;
        }

        .action-btn.edit {
            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
            color: white;
        }

        .action-btn.delete {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }

        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            gap: 15px;
        }

        .pagination-info {
            color: #666;
            font-size: 14px;
        }

        .pagination-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            border: none;
            border-radius: 8px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .pagination-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,215,0,0.3);
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .nav-item {
            color: #666;
            font-size: 11px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .nav-item:hover {
            color: #ffd700;
            transform: translateY(-2px);
        }

        .nav-item.active {
            color: #ffd700;
        }

        .nav-item span {
            font-size: 10px;
            font-weight: 500;
            white-space: nowrap;
        }

        .nav-item i {
            font-size: 20px !important;
        }

        .scan-button {
            position: relative;
            margin-top: -15px;
        }

        .scan-button .scan-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid white;
            margin: 0 auto 8px auto;
        }

        .scan-button .scan-icon i {
            font-size: 24px !important;
            color: white;
        }

        .scan-button span {
            font-size: 10px !important;
            font-weight: 500 !important;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
            z-index: 1000;
        }

      

         /* หน้าผลิตภัณฑ์ - CSS เพิ่มเติม */
        .products-container {
            padding: 25px;
        }

        .products-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            color: #8b4513;
            margin-bottom: 30px;
            border: 3px solid #fff;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
        }

        .products-header h4 {
            margin: 0;
            font-weight: 700;
            font-size: 24px;
        }

        .products-header p {
            margin: 5px 0 0 0;
            opacity: 0.8;
            font-size: 14px;
        }

        .product-section {
            margin-bottom: 40px;
        }

        .section-header {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 15px 15px 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .section-title {
            display: flex;
            align-items: center;
            margin: 0;
            font-weight: 600;
            font-size: 18px;
        }

        .section-title i {
            margin-right: 10px;
            font-size: 20px;
        }

        .section-count {
            background: rgba(255,255,255,0.2);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 14px;
            font-weight: 500;
        }

        .product-table-container {
            background: white;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .product-table {
            margin-bottom: 0;
        }

        .product-table thead th {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            color: #8b4513;
            font-weight: 600;
            border: none;
            padding: 15px 12px;
            font-size: 14px;
            text-align: center;
            border-bottom: 2px solid #8b4513;
        }

        .product-table tbody td {
            padding: 15px 12px;
            vertical-align: middle;
            border-color: #f0f0f0;
            font-size: 14px;
        }

        .farmer-name {
            font-weight: 600;
            color: #333;
        }

        .quantity-badge {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-weight: 500;
            font-size: 12px;
            display: inline-block;
        }

        /* สีแตกต่างกันสำหรับแต่ละผลิตภัณฑ์ */
        .honey-badge {
            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
        }

        .hive-badge {
            background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%);
        }

        .queen-badge {
            background: linear-gradient(135deg, #e83e8c 0%, #d91a72 100%);
        }

        .map-icon {
            color: #ffd700;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .map-icon:hover {
            color: #8b4513;
            transform: scale(1.2);
        }

        .no-products {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }

        .no-products i {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 15px;
        }

        .product-icon {
            font-size: 24px;
            margin-right: 10px;
        }

        .honey-icon {
            color: #ffc107;
        }

        .hive-icon {
            color: #fd7e14;
        }

        .queen-icon {
            color: #e83e8c;
        }

        .summary-row {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            font-weight: bold;
            color: #8b4513;
        }

        .summary-row td {
            border-top: 2px solid #8b4513 !important;
            padding: 12px !important;
        }

        .contact-btn {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .contact-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(23,162,184,0.3);
        }
        

        /* หน้าเกี่ยวกับ - CSS เพิ่มเติม */
        .about-container {
            padding: 25px;
        }

        .about-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            color: #8b4513;
            margin-bottom: 30px;
            border: 3px solid #fff;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
        }

        .about-header h4 {
            margin: 0;
            font-weight: 700;
            font-size: 24px;
        }

        .about-header p {
            margin: 5px 0 0 0;
            opacity: 0.8;
            font-size: 14px;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .hero-image {
            width: 100%;
            max-width: 400px;
            height: 300px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px auto;
            border: 5px solid #fff;
            box-shadow: 0 15px 35px rgba(255,215,0,0.3);
            position: relative;
            overflow: hidden;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
        }

        .hero-image .placeholder-icon {
            font-size: 80px;
            color: #8b4513;
            opacity: 0.8;
        }

        .hero-title {
            font-size: 22px;
            font-weight: 700;
            color: #8b4513;
            margin-bottom: 15px;
        }

        .hero-subtitle {
            font-size: 18px;
            color: #666;
            font-weight: 500;
            margin-bottom: 25px;
        }

        .content-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

       
    /* สไตล์สำหรับหน้าแสกน - ใช้ CSS เดิม */
        .scan-container {
            padding: 25px;
        }

        .scan-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            color: #8b4513;
            margin-bottom: 30px;
            border: 3px solid #fff;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
        }

        /* กรอบแสกน */
        .scan-frame {
            position: relative;
            width: 100%;
            max-width: 350px;
            height: 350px;
            margin: 0 auto 30px auto;
            background: #000;
            border-radius: 15px;
            overflow: hidden;
            border: 3px solid #ffd700;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .scan-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,179,71,0.1) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .scan-corners {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            border: 2px solid #ffd700;
            border-radius: 10px;
        }

        .scan-corners::before,
        .scan-corners::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border: 3px solid #ffd700;
        }

        .scan-corners::before {
            top: -3px;
            left: -3px;
            border-right: none;
            border-bottom: none;
        }

        .scan-corners::after {
            bottom: -3px;
            right: -3px;
            border-left: none;
            border-top: none;
        }

        .scan-line {
            width: 80%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            animation: scanMove 2s linear infinite;
        }

        @keyframes scanMove {
            0% { transform: translateY(-150px); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(150px); opacity: 0; }
        }

        .scan-icon {
            color: #ffd700;
            font-size: 60px;
            margin-bottom: 20px;
            opacity: 0.8;
        }

        .scan-text {
            color: white;
            font-size: 16px;
            text-align: center;
            background: rgba(0,0,0,0.7);
            padding: 10px 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        /* ผลลัพธ์การแสกน */
        .scan-result {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            border: 2px solid #ffd700;
        }

        .scan-result.show {
            display: block;
        }

        .result-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .result-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .result-icon.hive {
            color: #fd7e14;
        }

        .result-icon.honey {
            color: #ffc107;
        }

        .result-icon.queen {
            color: #e83e8c;
        }

        .result-icon.farmer {
            color: #28a745;
        }

        .result-title {
            font-size: 24px;
            font-weight: 700;
            color: #8b4513;
            margin-bottom: 10px;
        }

        .result-subtitle {
            color: #666;
            font-size: 16px;
        }

        .result-details {
            margin-top: 20px;
        }

        .detail-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .detail-item:last-child {
            border-bottom: none;
        }

        .detail-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #8b4513;
            font-size: 16px;
        }

        .detail-content h6 {
            margin: 0;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .detail-content p {
            margin: 0;
            color: #666;
            font-size: 13px;
        }

        /* ปุ่มควบคุม */
        .scan-controls {
            text-align: center;
            margin-top: 20px;
        }

        .scan-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            border: none;
            border-radius: 10px;
            padding: 12px 25px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 5px;
            font-size: 14px;
        }

        .scan-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,215,0,0.3);
        }

        .scan-btn.secondary {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
        }
         /* Auth Container - ปรับให้อยู่ในเนื้อหา */
        .auth-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            max-width: 400px;
            margin: 0 auto;
        }

        /* Auth Header - ส่วนหัวของฟอร์ม */
        .auth-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #8b4513 100%);
            color: white;
            padding: 25px 20px;
            text-align: center;
            position: relative;
        }

        /* Logo Container - กรอบโลโก้ */
        .auth-logo {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px auto;
            font-size: 24px;
            color: #ffd700;
            border: 3px solid white;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        /* Auth Title - หัวข้อฟอร์ม */
        .auth-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        /* Auth Subtitle - คำบรรยายใต้หัวข้อ */
        .auth-subtitle {
            font-size: 14px;
            opacity: 0.8;
            margin: 0;
        }

        /* Auth Body - เนื้อหาฟอร์ม */
        .auth-body {
            padding: 25px;
        }

        /* Form Group - กลุ่มฟิลด์ในฟอร์ม */
        .auth-form-group {
            margin-bottom: 20px;
            position: relative;
        }

        /* Form Label - ป้ายกำกับฟิลด์ */
        .auth-form-label {
            color: #333;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 14px;
            display: block;
        }

        /* Form Input - ช่องกรอกข้อมูล */
        .auth-form-input {
            width: 100%;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 45px 12px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fff;
        }

        .auth-form-input:focus {
            outline: none;
            border-color: #ffd700;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
        }

        .auth-form-input.error {
            border-color: #dc3545;
        }

        /* Input Icon - ไอคอนในช่องกรอก */
        .auth-input-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
            font-size: 16px;
            pointer-events: none;
        }

        .auth-form-group.has-icon .auth-input-icon {
            top: calc(50% + 12px);
        }

        /* Password Toggle - ปุ่มแสดง/ซ่อนรหัสผ่าน */
        .password-toggle {
            position: absolute;
            right: 15px;
            top: calc(50% + 12px);
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 16px;
            padding: 0;
            width: 20px;
            height: 20px;
        }

        .password-toggle:hover {
            color: #ffd700;
        }

        /* Remember & Forgot - ส่วนจำรหัสผ่าน/ลืมรหัส */
        .auth-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 13px;
        }

        /* Checkbox Custom - เช็คบ็อกซ์แบบกำหนดเอง */
        .auth-checkbox {
            display: flex;
            align-items: center;
            color: #666;
        }

        .auth-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            accent-color: #ffd700;
        }

        /* Forgot Link - ลิงก์ลืมรหัสผ่าน */
        .forgot-link {
            color: #ffd700;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .forgot-link:hover {
            color: #8b4513;
            text-decoration: underline;
        }

        /* Auth Button - ปุ่มหลักในฟอร์ม */
        .auth-btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            margin-bottom: 15px;
        }

        /* Primary Button - ปุ่มหลัก */
        .auth-btn.primary {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
        }

        .auth-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255,215,0,0.3);
        }

        /* Secondary Button - ปุ่มรอง */
        .auth-btn.secondary {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
        }

        .auth-btn.secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139,69,19,0.3);
        }

        /* Outline Button - ปุ่มโครงร่าง */
        .auth-btn.outline {
            background: white;
            border: 2px solid #ffd700;
            color: #ffd700;
        }

        .auth-btn.outline:hover {
            background: #ffd700;
            color: #8b4513;
            transform: translateY(-2px);
        }

        /* Divider - เส้นแบ่ง */
        .auth-divider {
            display: flex;
            align-items: center;
            margin: 20px 0;
            color: #666;
            font-size: 13px;
        }

        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e9ecef;
        }

        .auth-divider span {
            padding: 0 15px;
            background: white;
        }

        /* Social Buttons - ปุ่มโซเชียล */
        .social-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .social-btn {
            flex: 1;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .social-btn.google {
            color: #db4437;
        }

        .social-btn.facebook {
            color: #4267B2;
        }

        .social-btn.line {
            color: #00B900;
        }

        .social-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* Auth Footer - ส่วนท้ายฟอร์ม */
        .auth-footer {
            text-align: center;
            padding: 15px 25px;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            font-size: 14px;
            color: #666;
        }

        .auth-footer a {
            color: #ffd700;
            text-decoration: none;
            font-weight: 500;
        }

        .auth-footer a:hover {
            color: #8b4513;
            text-decoration: underline;
        }

        /* Error Message - ข้อความแสดงข้อผิดพลาด */
        .error-message {
            color: #dc3545;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        /* Success Message - ข้อความแสดงความสำเร็จ */
        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #c3e6cb;
            font-size: 14px;
            display: none;
        }

        .success-message.show {
            display: block;
        }

        /* Loading Spinner - สัญลักษณ์โหลด */
        .loading-spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #ffd700;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }
          /* Select Field - ช่องเลือก */
        .auth-form-select {
            width: 100%;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fff;
        }

        .auth-form-select:focus {
            outline: none;
            border-color: #ffd700;
            box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
        }
        /* Terms Checkbox - เช็คบ็อกซ์ยอมรับเงื่อนไข */
        .terms-checkbox {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
            font-size: 13px;
            color: #666;
        }

        .terms-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            margin-top: 2px;
            accent-color: #ffd700;
            flex-shrink: 0;
        }

        .terms-checkbox a {
            color: #ffd700;
            text-decoration: none;
        }

        .terms-checkbox a:hover {
            text-decoration: underline;
        }

 .location-input-group {
            position: relative;
        }
        
        .location-display {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 15px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #6c757d;
            min-height: 50px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .location-display.has-location {
            color: #333;
            border-color: #28a745;
            background: #d4edda;
        }
        
        .location-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .location-btn {
            flex: 1;
            padding: 10px 12px;
            border: 2px solid #ffd700;
            border-radius: 8px;
            background: white;
            color: #ffd700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .location-btn:hover {
            background: #ffd700;
            color: #8b4513;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,215,0,0.3);
        }
        
        .location-btn.active {
            background: #ffd700;
            color: #8b4513;
        }
        
        .map-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .map-modal.show {
            display: flex;
        }
        
        .map-container {
            background: white;
            border-radius: 20px;
            width: 95%;
            height: 80%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        .map-header {
            background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #8b4513 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .map-header h5 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }
        
        .map-close {
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .map-close:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }
        
        .map-body {
            flex: 1;
            position: relative;
        }
        
        #map {
            width: 100%;
            height: 100%;
        }
        
        .map-actions {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            background: #f8f9fa;
        }
        
        .coordinate-info {
            background: white;
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            font-size: 14px;
            border: 2px solid #ffd700;
        }
        
        .coordinate-info strong {
            color: #8b4513;
        }
        
        .map-btn-group {
            display: flex;
            gap: 10px;
        }
        
        .map-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .map-btn.primary {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
        }
        
        .map-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,215,0,0.3);
        }
        
        .map-btn.primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .map-btn.secondary {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
        }
        
        .map-btn.secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139,69,19,0.3);
        }
        /* Password Strength Indicator */
        .password-strength {
            margin-top: 8px;
        }
        .strength-bar {
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 5px;
        }

        .strength-fill {
            height: 100%;
            transition: width 0.3s, background-color 0.3s;
        }

        .strength-weak .strength-fill {
            width: 33%;
            background-color: #dc3545;
        }

        .strength-medium .strength-fill {
            width: 66%;
            background-color: #ffc107;
        }

        .strength-strong .strength-fill {
            width: 100%;
            background-color: #28a745;
        }
            /* เพิ่ม CSS สำหรับปุ่มจัดการ */
        .management-buttons {
            margin: 20px 0;
        }
        
        .management-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #8b4513;
            border: 2px solid #fff;
            border-radius: 15px;
            padding: 15px 20px;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255,215,0,0.2);
            font-weight: 600;
        }
        
        .management-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255,215,0,0.3);
            color: #8b4513;
        }
        
        .management-btn.secondary {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
            border-color: #8b4513;
        }
        
        .management-btn.secondary:hover {
            color: white;
            box-shadow: 0 8px 25px rgba(139,69,19,0.3);
        }
        
        .management-btn.info {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: white;
            border-color: #17a2b8;
        }
        
        .management-btn.info:hover {
            color: white;
            box-shadow: 0 8px 25px rgba(23,162,184,0.3);
        }
        
        .management-btn.success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border-color: #28a745;
        }
        
        .management-btn.success:hover {
            color: white;
            box-shadow: 0 8px 25px rgba(40,167,69,0.3);
        }
        
        .btn-icon {
            font-size: 24px;
            margin-right: 15px;
        }
        
        .btn-text {
            flex: 1;
            text-align: left;
        }
        
        .btn-text h6 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }
        
        .btn-text p {
            margin: 0;
            font-size: 12px;
            opacity: 0.8;
        }
        
        .btn-arrow {
            font-size: 16px;
        }
        
        .stats-overview {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            border: 3px solid #fff;
            box-shadow: 0 8px 25px rgba(255,215,0,0.2);
        }
        
        .stats-row {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .stat-item {
            flex: 1;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #8b4513;
            display: block;
        }
        
        .stat-label {
            font-size: 12px;
            color: #8b4513;
            opacity: 0.8;
        }
        
        .quick-actions {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            border: 2px solid #e9ecef;
        }
        
        .quick-actions h6 {
            color: #8b4513;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .quick-actions h6 i {
            margin-right: 10px;
            color: #ffd700;
        }
        
        .recent-activity {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .activity-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #8b4513;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-content h6 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        
        .activity-content p {
            margin: 0;
            font-size: 12px;
            color: #666;
        }
        
        .activity-time {
            font-size: 11px;
            color: #999;
        }
                .btn-save-hive {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 15px 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-size: 16px;
        }

        .btn-save-hive:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(40,167,69,0.3);
        }

        .btn-cancel {
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 15px 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-size: 16px;
            margin-bottom: 10px;
        }

        .btn-cancel:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139,69,19,0.3);
        }
        .form-label{
            font-size: 14px;
        }
        img.preview-image {
            max-width: 100%;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 767px) {
            .bottom-nav {
                padding-bottom: 10px;
                padding-top: 15px;
            }
            
            .nav-item span {
                font-size: 9px !important;
                line-height: 1.1;
                margin-top: 2px;
                font-weight: 500;
            }
            
            .nav-item i {
                font-size: 18px !important;
                margin-bottom: 0 !important;
            }
            
            .scan-button {
                margin-top: -20px;
            }
            
            .scan-button .scan-icon {
                width: 50px;
                height: 50px;
                margin-bottom: 6px;
            }
            
            .scan-button .scan-icon i {
                font-size: 22px !important;
            }
            
            .scan-button span {
                font-size: 9px !important;
            }

            .products-container {
                padding: 15px;
            }

            .product-table thead th,
            .product-table tbody td {
                padding: 10px 8px;
                font-size: 12px;
            }

            .products-header h4 {
                font-size: 20px;
            }

            .section-title {
                font-size: 16px;
            }

            .management-btn {
                padding: 10px 15px;
            }
            
            .btn-icon {
                font-size: 20px;
                margin-right: 12px;
            }
            
            .btn-text h6 {
                font-size: 14px;
            }
            
            
        }

        @media (max-width: 576px) {
            .product-table {
                font-size: 11px;
            }
            
            .product-table thead th,
            .product-table tbody td {
                padding: 8px 5px;
            }
            
            .quantity-badge,
            .honey-badge,
            .hive-badge,
            .queen-badge {
                font-size: 10px;
                padding: 4px 8px;
            }

            .contact-btn {
                padding: 4px 8px;
                font-size: 10px;
            }
            
        }