/* ── Thống kê trạm (trong search panel) ── */
        .tram-stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            font-size: 12px;
        }

        .tram-stat-row:last-child {
            border-bottom: none;
        }

        .tram-stat-lbl {
            color: #94a3b8;
        }

        .tram-stat-val {
            font-weight: 700;
            color: #f1f5f9;
        }

        .tram-stat-val.up {
            color: #29d67d;
        }

        .tram-stat-val.down {
            color: #ff4d4d;
        }

        .tram-ky-title {
            font-size: 11px;
            font-weight: 700;
            color: #60a5fa;
            margin: 10px 0 4px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        /* ── Zone top customer list ── */
        .zone-top-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 8px;
            margin-bottom: 4px;
            background: rgba(15, 23, 42, .5);
            border: 1px solid rgba(96, 165, 250, .12);
            border-radius: 6px;
            cursor: pointer;
            transition: background .15s, border-color .15s;
        }

        .zone-top-item:hover {
            background: rgba(37, 99, 235, .18);
            border-color: rgba(96, 165, 250, .35);
        }

        .zone-top-rank {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 800;
            background: rgba(96, 165, 250, .2);
            color: #93c5fd;
            flex-shrink: 0;
        }

        .zone-top-rank.r1 {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #7c2d12;
        }

        .zone-top-rank.r2 {
            background: linear-gradient(135deg, #cbd5e1, #94a3b8);
            color: #1e293b;
        }

        .zone-top-rank.r3 {
            background: linear-gradient(135deg, #fb923c, #ea580c);
            color: #fff;
        }

        .zone-top-info {
            flex: 1;
            min-width: 0;
        }

        .zone-top-name {
            font-size: 12px;
            font-weight: 700;
            color: #f1f5f9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .zone-top-meta {
            font-size: 10px;
            color: #94a3b8;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .zone-top-tt {
            font-size: 12px;
            font-weight: 800;
            color: #60a5fa;
            font-variant-numeric: tabular-nums;
            flex-shrink: 0;
        }

        /* Scrollbar cho top list */
        #zoneTopList::-webkit-scrollbar {
            width: 6px;
        }

        #zoneTopList::-webkit-scrollbar-track {
            background: transparent;
        }

        #zoneTopList::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #60a5fa, #3b82f6);
            border-radius: 3px;
        }

        @keyframes pulse-dot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: .6;
                transform: scale(1.3);
            }
        }

        /* ── QR Scanner styling ── */
        #qrReader {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #qrReader video {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
        }

        #qrReader img[alt="Info icon"] {
            display: none !important;
        }

        #qrReader>div {
            border: none !important;
        }

        #html5-qrcode-button-camera-permission {
            background: #2563eb !important;
            color: #fff !important;
            border: none !important;
            border-radius: 8px !important;
            padding: 12px 24px !important;
            font-size: 15px !important;
            font-family: Quicksand, sans-serif !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            margin: 20px auto !important;
        }

        #html5-qrcode-anchor-scan-type-change {
            display: none !important;
        }

        /* ── Giới hạn chiều cao search panel ── */
        .search-panel.open {
            max-height: 70vh !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            border-radius: 12px !important;
        }

        #nvListBody {
            max-height: none !important;
        }

        /* ── Scrollbar style IoT (đặt trong viền panel) ── */
        .search-panel::-webkit-scrollbar,
        #nvListBody::-webkit-scrollbar,
        .search-results::-webkit-scrollbar,
        #tramStatsBody::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .search-panel::-webkit-scrollbar-track,
        #nvListBody::-webkit-scrollbar-track,
        .search-results::-webkit-scrollbar-track,
        #tramStatsBody::-webkit-scrollbar-track {
            background: transparent;
            margin: 4px 0;
        }

        .search-panel::-webkit-scrollbar-thumb,
        #nvListBody::-webkit-scrollbar-thumb,
        .search-results::-webkit-scrollbar-thumb,
        #tramStatsBody::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
            border-radius: 3px;
            box-shadow: 0 0 4px rgba(96, 165, 250, .4);
        }

        .search-panel::-webkit-scrollbar-thumb:hover,
        #nvListBody::-webkit-scrollbar-thumb:hover,
        .search-results::-webkit-scrollbar-thumb:hover,
        #tramStatsBody::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
            box-shadow: 0 0 8px rgba(147, 197, 253, .6);
        }

        /* Firefox */
        .search-panel,
        #nvListBody,
        .search-results,
        #tramStatsBody {
            scrollbar-width: thin;
            scrollbar-color: #3b82f6 transparent;
        }

        /* ── Mobile: ẩn scrollbar, dùng touch scroll ── */
        @media (max-width: 760px) {

            .search-panel::-webkit-scrollbar,
            #nvListBody::-webkit-scrollbar,
            .search-results::-webkit-scrollbar,
            #tramStatsBody::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
                display: none !important;
            }

            .search-panel,
            #nvListBody,
            .search-results,
            #tramStatsBody {
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            .search-panel.open {
                -webkit-overflow-scrolling: touch;
            }
        }

        .nv-stat-card {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(15, 23, 42, .5);
            border: 1px solid rgba(96, 165, 250, .15);
            border-radius: 6px;
            padding: 6px 10px;
        }

        .nv-stat-card .icon {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .nv-stat-card .body {
            flex: 1;
            min-width: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
        }

        .nv-stat-card .lbl {
            font-size: 10px;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: .4px;
            font-weight: 600;
        }

        .nv-stat-card .val {
            font-size: 12px;
            font-weight: 700;
            color: #f1f5f9;
            font-variant-numeric: tabular-nums;
        }

        .nv-stat-card .val.up {
            color: #22c55e;
        }

        .nv-stat-card .val.down {
            color: #ef4444;
        }