 đây là giao diện hiện tại sau khi chỉnh và đây là file nav <body>
    <style>
  #site-mascot {
    position: absolute;
    left: 25%;
    top: 0;
    width: 90px;
    height: 90px;
    z-index: 51;
    pointer-events: none;
    will-change: left, transform;
    animation: mascotWalk 44s linear infinite; /* Rồng đi bộ */
  }
  @keyframes mascotWalk {
    0%   { left: 25%; transform: translateY(calc(-100% + 8px)) scaleX(-1); }
    49%  { left: calc(75% - 90px); transform: translateY(calc(-100% + 8px)) scaleX(-1); }
    50%  { left: calc(75% - 90px); transform: translateY(calc(-100% + 8px)) scaleX(1); }
    99%  { left: 25%; transform: translateY(calc(-100% + 8px)) scaleX(1); }
    100% { left: 25%; transform: translateY(calc(-100% + 8px)) scaleX(-1); }
  }
  .footer-grass { /* Lùm cỏ */
    position: absolute;
    bottom: 100%;
    margin-bottom: -30px;
    transform: translateX(-50%);
    z-index: 49;
    pointer-events: none;
  }
</style>

<div id="site-mascot" aria-hidden="true"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var host = document.getElementById('site-mascot');
    var footer = document.getElementById('footer');
    if (footer) {
      footer.style.position = 'relative';
      footer.style.overflow = 'visible';
      footer.appendChild(host);

      // Tạo 4 lùm cỏ (cây xanh) ngẫu nhiên
      var GRASS = "https://shopcongtien.com/_assets/images/lottie/grass.json";
      var GMIN = 60, GMAX = 180;
      [8, 30, 70, 92].forEach(function (pos) {
        var g = document.createElement('div');
        g.className = 'footer-grass';
        var size = Math.round(GMIN + Math.random() * (GMAX - GMIN)); 
        g.style.left = pos + '%';
        g.style.width = size + 'px';
        g.style.height = size + 'px';
        footer.appendChild(g);
        if (window.lottie) {
          window.lottie.loadAnimation({ container: g, renderer: 'svg', loop: true, autoplay: true, path: GRASS });
        }
      });
    }
    // Tải hình ảnh con rồng
    if (window.lottie) {
      window.lottie.loadAnimation({
        container: host,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: "https://shopcongtien.com/_assets/images/lottie/mascot.json"
      });
    }
  });
</script>

        <style>
            /* Concept 2: Minimalist & Clean Navbar Redesign */
            .app-topbar {
                background: #ffffff !important;
                border-bottom: none !important;
                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03) !important;
                transition: background-color 0.3s ease;
            }
            
            [data-bs-theme="dark"] .app-topbar {
                background: #111827 !important; /* Flat charcoal background */
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
                border-bottom: none !important;
            }

            /* Search Box */
            .viweb-search-box .topbar-search {
                background: #f1f5f9 !important;
                border: 1px solid transparent !important;
                color: #334155;
                transition: all 0.3s ease;
                border-radius: 9999px !important;
            }
            .viweb-search-box .topbar-search:focus {
                background: #ffffff !important;
                border-color: #cbd5e1 !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
            }
            [data-bs-theme="dark"] .viweb-search-box .topbar-search {
                background: #1f2937 !important;
                color: #f3f4f6;
            }
            [data-bs-theme="dark"] .viweb-search-box .topbar-search:focus {
                background: #111827 !important;
                border-color: #374151 !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            }
            
            /* Icon buttons and text muted normally, bright on hover */
            .btn-icon, .topbar-link {
                color: #94a3b8 !important;
                transition: all 0.3s ease !important;
                border-radius: 12px !important;
                background: transparent !important;
            }
            .btn-icon:hover, .topbar-link:hover {
                color: #0ea5e9 !important; 
                transform: translateY(-2px);
                background: transparent !important;
            }
            [data-bs-theme="dark"] .btn-icon, [data-bs-theme="dark"] .topbar-link {
                color: #6b7280 !important;
            }
            [data-bs-theme="dark"] .btn-icon:hover, [data-bs-theme="dark"] .topbar-link:hover {
                color: #38bdf8 !important;
            }
            
            /* Fade Up Animation for Dropdowns - Fixed to not conflict with Popper.js */
            .dropdown-menu {
                border: none !important;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
                border-radius: 16px !important;
            }
            .dropdown-menu.show {
                animation: fadeUp 0.25s ease-out forwards;
            }
            [data-bs-theme="dark"] .dropdown-menu {
                background: #1f2937 !important;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
            }

            @keyframes fadeUp {
                0% {
                    opacity: 0;
                    margin-top: 15px;
                }
                100% {
                    opacity: 1;
                    margin-top: 5px;
                }
            }

            /* Clean Logo hover effect */
            .logo-topbar a {
                transition: opacity 0.2s, transform 0.3s ease;
            }
            .logo-topbar a:hover {
                opacity: 0.85;
                transform: scale(1.02);
            }
        </style>
        <div class="wrapper">
            <header class="app-topbar">
                <div class="container-fluid topbar-menu">
                    <div class="d-flex align-items-center gap-2">
                        <!-- Topbar Brand Logo -->
                        <div class="logo-topbar">
                            <!-- Logo light -->
                            <a href="/" class="logo-light" aria-label="Home">
                                <span class="logo-lg">
                                    <img src="<?=$bentancoder['logo'];?>" alt="<?=$bentancoder['mota'];?>" height="40" width="auto" />
                                </span>
                                <span class="logo-sm">
                                    <img src="<?=$bentancoder['favicon'];?>" alt="<?=$bentancoder['mota'];?>" height="32" width="32" />
                                </span>
                            </a>

                            <!-- Logo Dark -->
                            <a href="/" class="logo-dark" aria-label="Home">
                                <span class="logo-lg">
                                    <img src="<?=$bentancoder['logo_dark'];?>" alt="<?=$bentancoder['mota'];?>" height="40" width="auto" />
                                </span>
                                <span class="logo-sm">
                                    <img src="<?=$bentancoder['favicon'];?>" alt="<?=$bentancoder['mota'];?>" height="32" width="32" />
                                </span>
                            </a>
                        </div>

                        <!-- Sidebar Menu Toggle Button -->
                        <button class="sidenav-toggle-button btn btn-primary btn-icon" aria-label="Toggle Sidebar">
                            <i class="ti ti-menu-4"></i>
                        </button>

                        <!-- Horizontal Menu Toggle Button -->
                        <button class="topnav-toggle-button px-2" data-bs-toggle="collapse" data-bs-target="#topnav-menu" aria-label="Toggle Topnav">
                            <i class="ti ti-menu-4"></i>
                        </button>

                        <div id="search-box-rounded" class="app-search d-none d-xl-flex viweb-search-box">
                            <input type="search" id="viwebServiceSearch" class="form-control rounded-pill topbar-search" name="search" placeholder="Tìm kiếm dịch vụ" aria-label="Tìm kiếm dịch vụ" autocomplete="off" />
                            <i class="ti ti-search app-search-icon text-muted"></i>
                            <div class="viweb-search-dropdown" id="searchDropdown">
            <p class="mb-2 text-secondary f-s-15 viweb-search-title">
                TÌM KIẾM LIÊN QUAN:
            </p>

            <ul class="search-list list-unstyled mb-0" id="viwebServiceSearchList">
                <?php include __DIR__ . '/service-search.php'; ?>

                <li id="viwebServiceSearchEmpty" class="d-none text-center text-muted py-3">
                    Không tìm thấy dịch vụ
                </li>
            </ul>
        </div>
                        </div>

                       
                    </div>

<style>
.viweb-search-box{
    position: relative;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.viweb-search-inner{
    position: relative;
    width: 380px;
}

.viweb-search-box .topbar-search{
    width: 380px !important;
    height: 42px !important;
    padding: 0 45px 0 18px !important;
}

.viweb-search-box .app-search-icon{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.viweb-search-dropdown{
    position: absolute;
    top: 52px;
    left: 0;
    width: 380px;
    max-height: 430px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    border: 1px solid #edf0f5;
    z-index: 99999;
    display: none;
}

.viweb-search-dropdown.active{
    display: block;
}

.viweb-service-search-item{
    list-style: none;
    padding: 8px 10px;
    border-radius: 8px;
}

.viweb-service-search-item:hover{
    background: #f5f7fb;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('viwebServiceSearch');
    const dropdown = document.getElementById('searchDropdown');
    const empty = document.getElementById('viwebServiceSearchEmpty');

    if (!input || !dropdown) return;

    input.addEventListener('focus', function () {
        dropdown.classList.add('active');
    });

    document.addEventListener('click', function (e) {
        if (!e.target.closest('.viweb-search-box')) {
            dropdown.classList.remove('active');
        }
    });

    input.addEventListener('input', function () {
        const keyword = input.value.toLowerCase().trim();
        const items = document.querySelectorAll('.viweb-service-search-item');
        let shown = 0;

        items.forEach(function (item) {
            const text = (
                item.getAttribute('data-search') ||
                item.textContent ||
                ''
            ).toLowerCase();

            const match = keyword === '' || text.includes(keyword);

            item.style.display = match ? '' : 'none';

            if (match) shown++;
        });

        if (empty) {
            empty.classList.toggle('d-none', shown !== 0);
        }
    });
});
</script>




                    <div class="d-flex align-items-center gap-2">
                        <!-- Pill Switcher (Theme & Gtranslate) -->
                        <div class="d-flex align-items-center">
                            <div class="pill-mode-switcher d-inline-flex align-items-center px-2 py-1" id="pillModeSwitcher">
                                <!-- Nút chuyển theme Sáng / Tối -->
                                <button type="button" class="btn-theme-toggle d-flex align-items-center justify-content-center border-0 bg-transparent me-1" id="quickThemeBtn" title="Chuyển đổi giao diện Sáng / Tối" aria-label="Chuyển đổi theme">
                                    <i class="ti ti-moon theme-pill-icon fs-16" id="pillThemeIcon"></i>
                                </button>

                                <!-- Widget Ngôn ngữ GTranslate -->
                                <div id="language-selector-rounded" class="gtranslate_wrapper d-inline-flex align-items-center justify-content-center">
                                </div>
                            </div>
                        </div>

                        <style>
                            .pill-mode-switcher {
                                background: #f1f3f5;
                                border: 1.5px solid #e2e8f0;
                                border-radius: 50px !important;
                                height: 36px;
                                max-height: 36px;
                                display: inline-flex;
                                align-items: center;
                                transition: all 0.25s ease;
                            }
                            [data-bs-theme="dark"] .pill-mode-switcher {
                                background: #212529;
                                border-color: #343a40;
                            }
                            .btn-theme-toggle {
                                width: 26px;
                                height: 26px;
                                border-radius: 50%;
                                color: #495057;
                                transition: all 0.2s ease;
                                padding: 0;
                                flex-shrink: 0;
                            }
                            [data-bs-theme="dark"] .btn-theme-toggle {
                                color: #ffc107;
                            }
                            .btn-theme-toggle:hover {
                                transform: scale(1.1);
                            }
                            /* Tinh chỉnh để gtranslate widget nằm gọn trong pill */
                            .gtranslate_wrapper, 
                            .gtranslate_wrapper .gt_switcher, 
                            .gtranslate_wrapper select, 
                            .gtranslate_wrapper a,
                            .gtranslate_wrapper img {
                                margin: 0 !important;
                                padding: 0 !important;
                                line-height: 1 !important;
                                max-height: 24px !important;
                                border: none !important;
                                background: transparent !important;
                                box-shadow: none !important;
                            }
                            .gtranslate_wrapper img {
                                width: 22px !important;
                                height: 22px !important;
                                border-radius: 50% !important;
                                object-fit: cover !important;
                            }
                        </style>

                        <script>
                            document.addEventListener('DOMContentLoaded', function () {
                                const themeBtn = document.getElementById('quickThemeBtn');
                                const themeIcon = document.getElementById('pillThemeIcon');
                                const htmlEl = document.documentElement;

                                function updateThemeIcon() {
                                    const currentTheme = htmlEl.getAttribute('data-bs-theme');
                                    if (currentTheme === 'dark') {
                                        themeIcon.className = 'ti ti-sun text-warning fs-16';
                                    } else {
                                        themeIcon.className = 'ti ti-moon text-secondary fs-16';
                                    }
                                }

                                if (themeBtn) {
                                    themeBtn.addEventListener('click', function (e) {
                                        e.stopPropagation();
                                        const currentTheme = htmlEl.getAttribute('data-bs-theme');
                                        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                                        htmlEl.setAttribute('data-bs-theme', newTheme);
                                        
                                        // Lưu config nếu có
                                        if (window.config) {
                                            window.config.theme = newTheme;
                                        }
                                        try {
                                            let saved = sessionStorage.getItem('__THEME_CONFIG__');
                                            let parsed = saved ? JSON.parse(saved) : {};
                                            parsed.theme = newTheme;
                                            sessionStorage.setItem('__THEME_CONFIG__', JSON.stringify(parsed));
                                        } catch(err) {}

                                        updateThemeIcon();
                                    });
                                }

                                updateThemeIcon();
                            });
                        </script>

                                <div id="notification-dropdown-people" class="topbar-item">
                            <div class="dropdown">
                                <button class="topbar-link dropdown-toggle drop-arrow-none d-flex align-items-center justify-content-center p-2 position-relative" data-bs-toggle="dropdown" data-bs-offset="0,12" type="button" data-bs-auto-close="outside" aria-haspopup="false" aria-expanded="false" style="border-radius: 12px; background: transparent; border: none;">
                                    <!-- Animated Custom Bell SVG (Tương tự ảnh mẫu có chuông xanh + chấm nảy) -->
                                    <div class="custom-bell-wrapper position-relative d-inline-flex">
                                        <svg class="custom-animated-bell" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <!-- Bell Body -->
                                            <path class="bell-body" d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="#0ea5e9" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="rgba(14, 165, 233, 0.12)"/>
                                            <!-- Bell Clapper -->
                                            <path class="bell-clapper" d="M13.73 21a2 2 0 0 1-3.46 0" stroke="#0ea5e9" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <!-- Dot Notification inside/top right -->
                                            <circle class="bell-dot" cx="16.5" cy="5.5" r="2.2" fill="#0284c7" stroke="#ffffff" stroke-width="1"/>
                                        </svg>

                                        <?php
                                        $total_thongbao = 0;
                                        $total_logs = 0;
                                        if (isset($_SESSION['username'])) {
                                            $username = $_SESSION['username'];
                                            $count_tb = mysqli_query($ketnoi, "SELECT COUNT(*) as total FROM `thongbao` WHERE `nguoinhan` = '$username' OR `nguoinhan` = 'ALL'");
                                            if($count_tb) {
                                                $total_thongbao = mysqli_fetch_assoc($count_tb)['total'] ?? 0;
                                            }
                                            $count_lg = mysqli_query($ketnoi, "SELECT COUNT(*) as total FROM `log_login` WHERE `username` = '$username'");
                                            if($count_lg) {
                                                $total_logs = mysqli_fetch_assoc($count_lg)['total'] ?? 0;
                                            }
                                        }
                                        $total_all_noti = $total_thongbao + $total_logs;
                                        if ($total_all_noti > 0) {
                                        ?>
                                            <span class="badge bg-danger rounded-pill position-absolute" style="top: -6px; right: -8px; font-size: 10px; padding: 2px 5px; min-width: 16px; line-height: 1.1; border: 1.5px solid var(--bs-body-bg, #fff); font-weight: 700;" id="total_thongbao">
                                                <?=$total_all_noti > 99 ? '99+' : $total_all_noti;?>
                                            </span>
                                        <?php } ?>
                                    </div>
                                </button>

                                <div class="dropdown-menu p-0 dropdown-menu-end shadow-lg border-0" style="width: 360px; border-radius: 16px; overflow: hidden;">
                                    <!-- Header with Navigation Tabs -->
                                    <div class="px-3 pt-3 pb-2 border-bottom bg-light bg-opacity-50">
                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                            <h6 class="m-0 fs-md fw-bold d-flex align-items-center gap-1">
                                                <i class="ti ti-bell-ringing text-primary"></i>
                                                <span>Trung tâm thông báo</span>
                                            </h6>
                                            <span class="badge bg-primary-subtle text-primary fw-semibold px-2 py-1" style="border-radius: 6px; font-size: 11px;">
                                                <?=$total_all_noti;?> mới
                                            </span>
                                        </div>
                                        <!-- Nav Tabs: Thông báo & Nhật ký -->
                                        <ul class="nav nav-pills nav-justified p-1 bg-body rounded-3" id="notiTab" role="tablist" style="font-size: 13px;">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active py-1 px-2 fw-semibold rounded-2 d-flex align-items-center justify-content-center gap-1" id="noti-system-tab" data-bs-toggle="pill" data-bs-target="#noti-system" type="button" role="tab" aria-controls="noti-system" aria-selected="true">
                                                    <i class="ti ti-speakerphone fs-15"></i> Hệ thống (<?=$total_thongbao;?>)
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link py-1 px-2 fw-semibold rounded-2 d-flex align-items-center justify-content-center gap-1" id="noti-logs-tab" data-bs-toggle="pill" data-bs-target="#noti-logs" type="button" role="tab" aria-controls="noti-logs" aria-selected="false">
                                                    <i class="ti ti-history fs-15"></i> Nhật ký (<?=$total_logs;?>)
                                                </button>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- Tab Contents -->
                                    <div class="tab-content" id="notiTabContent">
                                        <!-- Tab 1: Thông báo từ Admin -->
                                        <div class="tab-pane fade show active" id="noti-system" role="tabpanel" aria-labelledby="noti-system-tab">
                                            <div style="max-height: 320px; overflow-y: auto;" class="p-2 custom-noti-scroll">
                                                <?php
                                                if (isset($_SESSION['username'])) {
                                                    $result = mysqli_query($ketnoi, "SELECT * FROM `thongbao` WHERE `nguoinhan` = '$username' OR `nguoinhan` = 'ALL' ORDER BY `timeago` DESC LIMIT 15");
                                                    if ($result && mysqli_num_rows($result) > 0) {
                                                        while ($row = mysqli_fetch_assoc($result)) {
                                                ?>
                                                        <div class="p-2 mb-1 rounded-3 notification-card-item transition-all" style="background: rgba(14, 165, 233, 0.04); border-left: 3px solid #0ea5e9;">
                                                            <div class="d-flex align-items-start gap-2">
                                                                <div class="flex-shrink-0 mt-1">
                                                                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary" style="width: 32px; height: 32px;">
                                                                        <i class="ti ti-bell fs-16"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="flex-grow-1 overflow-hidden">
                                                                    <div class="d-flex justify-content-between align-items-center">
                                                                        <h6 class="mb-0 fs-13 fw-semibold text-truncate text-body"><?=htmlspecialchars($row['tieude'] ?? 'Thông báo hệ thống');?></h6>
                                                                        <small class="text-muted fs-10"><?=function_exists('timeAgo') ? timeAgo($row['timeago']) : ($row['timeago'] ?? '');?></small>
                                                                    </div>
                                                                    <p class="mb-0 fs-12 text-muted mt-1" style="line-height: 1.4;"><?=nl2br(htmlspecialchars($row['noidung'] ?? ''));?></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                <?php
                                                        }
                                                    } else {
                                                ?>
                                                    <div class="text-center py-4 text-muted">
                                                        <i class="ti ti-bell-off fs-36 text-secondary mb-2 d-block opacity-50"></i>
                                                        <p class="mb-0 fs-13">Không có thông báo hệ thống nào</p>
                                                    </div>
                                                <?php
                                                    }
                                                } else {
                                                ?>
                                                    <div class="text-center py-4 text-muted">
                                                        <i class="ti ti-lock fs-36 text-secondary mb-2 d-block opacity-50"></i>
                                                        <p class="mb-0 fs-13">Vui lòng đăng nhập để xem thông báo</p>
                                                    </div>
                                                <?php } ?>
                                            </div>
                                        </div>

                                        <!-- Tab 2: Nhật ký hoạt động của User -->
                                        <div class="tab-pane fade" id="noti-logs" role="tabpanel" aria-labelledby="noti-logs-tab">
                                            <div style="max-height: 320px; overflow-y: auto;" class="p-2 custom-noti-scroll">
                                                <?php
                                                if (isset($_SESSION['username'])) {
                                                    $logs_result = mysqli_query($ketnoi, "SELECT * FROM `log_login` WHERE `username` = '$username' ORDER BY `id` DESC LIMIT 15");
                                                    if ($logs_result && mysqli_num_rows($logs_result) > 0) {
                                                        while ($log = mysqli_fetch_assoc($logs_result)) {
                                                ?>
                                                        <div class="p-2 mb-1 rounded-3 notification-card-item transition-all" style="background: rgba(16, 185, 129, 0.04); border-left: 3px solid #10b981;">
                                                            <div class="d-flex align-items-start gap-2">
                                                                <div class="flex-shrink-0 mt-1">
                                                                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-success-subtle text-success" style="width: 32px; height: 32px;">
                                                                        <i class="ti ti-activity fs-16"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="flex-grow-1 overflow-hidden">
                                                                    <div class="d-flex justify-content-between align-items-center">
                                                                        <h6 class="mb-0 fs-13 fw-semibold text-truncate text-body">Nhật ký hoạt động</h6>
                                                                        <small class="text-muted fs-10"><?=htmlspecialchars($log['time'] ?? '');?></small>
                                                                    </div>
                                                                    <p class="mb-0 fs-12 text-muted mt-1" style="line-height: 1.4;"><?=htmlspecialchars($log['content'] ?? '');?></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                <?php
                                                        }
                                                    } else {
                                                ?>
                                                    <div class="text-center py-4 text-muted">
                                                        <i class="ti ti-clipboard-list fs-36 text-secondary mb-2 d-block opacity-50"></i>
                                                        <p class="mb-0 fs-13">Chưa có nhật ký hoạt động nào</p>
                                                    </div>
                                                <?php
                                                    }
                                                } else {
                                                ?>
                                                    <div class="text-center py-4 text-muted">
                                                        <i class="ti ti-lock fs-36 text-secondary mb-2 d-block opacity-50"></i>
                                                        <p class="mb-0 fs-13">Vui lòng đăng nhập để xem nhật ký</p>
                                                    </div>
                                                <?php } ?>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Footer action -->
                                    <div class="p-2 border-top bg-light bg-opacity-25 text-center">
                                        <a href="/profile" class="text-primary text-decoration-none fw-semibold fs-12 d-inline-flex align-items-center gap-1">
                                            <span>Xem chi tiết lịch sử</span>
                                            <i class="ti ti-arrow-right fs-14"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Style for Notification Bell Animation & Tabs -->
                        <style>
                            .custom-bell-wrapper {
                                cursor: pointer;
                            }
                            .custom-animated-bell {
                                transform-origin: top center;
                                animation: bellRingAnimation 3.5s ease-in-out infinite;
                            }
                            .bell-dot {
                                animation: dotBounceAnimation 2s ease-in-out infinite;
                            }
                            @keyframes bellRingAnimation {
                                0%, 50%, 100% {
                                    transform: rotate(0deg);
                                }
                                5%, 15% {
                                    transform: rotate(14deg);
                                }
                                10%, 20% {
                                    transform: rotate(-14deg);
                                }
                                25% {
                                    transform: rotate(6deg);
                                }
                                30% {
                                    transform: rotate(0deg);
                                }
                            }
                            @keyframes dotBounceAnimation {
                                0%, 100% {
                                    transform: translateY(0);
                                }
                                50% {
                                    transform: translateY(-2px);
                                }
                            }
                            .notification-card-item:hover {
                                background: rgba(14, 165, 233, 0.08) !important;
                                transform: translateX(2px);
                            }
                            .custom-noti-scroll::-webkit-scrollbar {
                                width: 4px;
                            }
                            .custom-noti-scroll::-webkit-scrollbar-thumb {
                                background: rgba(0,0,0,0.15);
                                border-radius: 4px;
                            }
                        </style>
                        <!-- Cart Button (Ẩn trên mobile, hiện từ tablet/desktop md trở lên) -->
                        <div class="topbar-item d-none d-md-flex align-items-center">
                            <a href="/gio-hang" class="topbar-link d-flex align-items-center justify-content-center p-2 position-relative text-decoration-none" title="Giỏ hàng của bạn" style="border-radius: 12px;">
                                <div class="custom-cart-wrapper position-relative d-inline-flex align-items-center justify-content-center">
                                    <svg class="custom-animated-cart" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <!-- Cart Basket Frame -->
                                        <path class="cart-body" d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" stroke="#0ea5e9" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="rgba(14, 165, 233, 0.12)"/>
                                        <!-- Cart Wheels -->
                                        <circle class="cart-wheel wheel-1" cx="10" cy="20.5" r="1.5" fill="#0284c7" stroke="#0ea5e9" stroke-width="1"/>
                                        <circle class="cart-wheel wheel-2" cx="18" cy="20.5" r="1.5" fill="#0284c7" stroke="#0ea5e9" stroke-width="1"/>
                                    </svg>
                                    <?php
                                    $total_cart_count = 0;
                                    if (isset($_SESSION['username'])) {
                                        $u_cart = $_SESSION['username'];
                                        $c_query = mysqli_query($ketnoi, "SELECT COUNT(*) as total FROM `giohang` WHERE `username` = '$u_cart' AND `trangthai` = 'cho'");
                                        if ($c_query) {
                                            $total_cart_count = mysqli_fetch_assoc($c_query)['total'] ?? 0;
                                        }
                                    }
                                    if ($total_cart_count > 0) {
                                    ?>
                                        <span class="badge bg-warning text-dark rounded-pill position-absolute" style="top: -6px; right: -8px; font-size: 10px; padding: 2px 5px; min-width: 16px; line-height: 1.1; font-weight: 700; border: 1.5px solid var(--bs-body-bg, #fff);" id="loadCartCount">
                                            <?=$total_cart_count > 99 ? '99+' : $total_cart_count;?>
                                        </span>
                                    <?php } ?>
                                </div>
                            </a>
                        </div>

                        <style>
                            .custom-cart-wrapper {
                                cursor: pointer;
                            }
                            .topbar-link:hover .custom-animated-cart {
                                animation: cartDriveAnimation 0.6s ease-in-out;
                            }
                            .topbar-link:hover .cart-wheel {
                                animation: wheelSpinAnimation 0.6s linear infinite;
                            }
                            @keyframes cartDriveAnimation {
                                0% { transform: scale(1) rotate(0deg); }
                                25% { transform: scale(1.1) rotate(-8deg) translateY(-2px); }
                                50% { transform: scale(1.1) rotate(6deg) translateY(-1px); }
                                75% { transform: scale(1.05) rotate(-3deg); }
                                100% { transform: scale(1) rotate(0deg); }
                            }
                            @keyframes wheelSpinAnimation {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            }
                        </style>

<?php if(!isset($_SESSION['username'])){ ?>
                        <div id="user-dropdown-detailed" class="topbar-item nav-user">
                            <div class="dropdown">
                                <a class="topbar-link dropdown-toggle drop-arrow-none px-2" data-bs-toggle="dropdown" href="#!" aria-haspopup="false" aria-expanded="false" aria-label="User Menu">
                                    <img src="/assets/ducviet/images/users/user-1.jpg" width="32" height="32" class="rounded-circle me-lg-2 d-flex" alt="user-image" />
                                    <div class="d-lg-flex align-items-center gap-1 d-none">
                                        <span>
                                            <h5 class="my-0 lh-1 pro-username">Khách tham quan!</h5>
                                            <span class="fs-xs lh-1">Vui lòng đăng nhập</span>
                                        </span>
                                        <i class="ti ti-chevron-down align-middle"></i>
                                    </div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <!-- Header -->
                                    <div class="dropdown-header noti-title">
                                        <h6 class="text-overflow m-0">Welcome back 👋!</h6>
                                    </div>

                                    <!-- My Profile -->
                                    <a href="/login" class="dropdown-item">
                                        <i class="ti ti-user-circle me-1 fs-lg align-middle"></i>
                                        <span class="align-middle">Đăng nhập</span>
                                    </a>

                                    <!-- Notifications -->
                                    <a href="/reg" class="dropdown-item">
                                        <i class="ti ti-bell-ringing me-1 fs-lg align-middle"></i>
                                        <span class="align-middle">Đăng Kí</span>
                                    </a>

                                    
                                </div>
                            </div>
                        </div>
                        <?php }else{ ?>
                        <div id="user-dropdown-detailed" class="topbar-item nav-user">
                            <div class="dropdown">
                                <a class="topbar-link dropdown-toggle drop-arrow-none px-2 d-flex align-items-center" data-bs-toggle="dropdown" href="#!" aria-haspopup="false" aria-expanded="false">
                                    <div class="position-relative">
                                        <img src="https://ui-avatars.com/api/?background=random&name=<?=$username;?>" width="36" height="36" class="rounded-circle d-flex shadow-sm" alt="user-image" />
                                        <span class="position-absolute bottom-0 end-0 bg-success border border-2 border-white rounded-circle" style="width: 10px; height: 10px;"></span>
                                    </div>
                                    <div class="d-none d-lg-flex flex-column align-items-start ms-2 text-start">
                                        <span class="fw-bold text-truncate text-primary" style="font-size: 14px; max-width: 130px; letter-spacing: 0.2px; text-transform: uppercase;"><?=$username;?></span>
                                        <span class="fs-xs text-muted" style="font-size: 11px;">Số Dư: <b class="text-success"><?=number_format($user['money']);?>đ</b></span>
                                    </div>
                                    <i class="ti ti-chevron-down align-middle ms-2 text-muted d-none d-lg-block"></i>
                                </a>
                                
                                <div class="dropdown-menu dropdown-menu-end custom-user-card-menu p-3 shadow-lg border-0" style="width: 320px; border-radius: 18px;">
                                    <!-- User Header Info -->
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="position-relative me-3">
                                            <img src="https://ui-avatars.com/api/?background=random&name=<?=$username;?>" width="48" height="48" class="rounded-circle border" alt="avatar" />
                                            <span class="position-absolute bottom-0 end-0 bg-success border border-2 border-white rounded-circle" style="width: 13px; height: 13px;"></span>
                                        </div>
                                        <div class="overflow-hidden">
                                            <h6 class="mb-0 fw-bold text-truncate user-card-name" style="font-size: 16px;"><?=$username;?></h6>
                                            <small class="text-muted text-truncate d-block user-card-email" style="font-size: 12px;"><?=!empty($user['email']) ? $user['email'] : ($username . '@gmail.com');?></small>
                                        </div>
                                    </div>

                                    <!-- Wallet & Points Card -->
                                    <div class="row g-2 mb-3">
                                        <div class="col-6">
                                            <div class="user-stat-card p-2 rounded-3 text-start position-relative overflow-hidden" style="background: rgba(14, 165, 233, 0.08); border: 1px solid rgba(14, 165, 233, 0.15);">
                                                <small class="text-muted text-uppercase fw-semibold d-block" style="font-size: 10px; letter-spacing: 0.5px;">SỐ DƯ</small>
                                                <div class="fw-bold fs-6 text-primary mt-1"><?=number_format($user['money']);?>đ</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="user-stat-card p-2 rounded-3 text-start position-relative overflow-hidden" style="background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.15);">
                                                <small class="text-muted text-uppercase fw-semibold d-block" style="font-size: 10px; letter-spacing: 0.5px;">ĐIỂM THƯỞNG</small>
                                                <div class="fw-bold fs-6 mt-1" style="color: #f59e0b;"><?=isset($user['point']) ? number_format($user['point']) : (isset($user['diem']) ? number_format($user['diem']) : '0');?></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Utility Services Grid -->
                                    <div class="mb-3">
                                        <div class="text-muted text-uppercase fw-bold mb-2 ps-1" style="font-size: 11px; letter-spacing: 0.5px;">TIỆN ÍCH</div>
                                        <div class="row g-2 text-center user-utilities-grid">
                                            <!-- Item 1: Hồ sơ -->
                                            <div class="col-3">
                                                <a href="/profile" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-users fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Hồ sơ</span>
                                                </a>
                                            </div>
                                            <!-- Item 2: Nạp tiền -->
                                            <div class="col-3">
                                                <a href="/nap-ngan-hang" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-credit-card fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Nạp tiền</span>
                                                </a>
                                            </div>
                                            <!-- Item 3: Nạp thẻ -->
                                            <div class="col-3">
                                                <a href="/napthe" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-qrcode fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Nạp thẻ</span>
                                                </a>
                                            </div>
                                            <!-- Item 4: Lịch sử -->
                                            <div class="col-3">
                                                <a href="/lich-su-taowebsite" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-history fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Lịch sử</span>
                                                </a>
                                            </div>
                                            <!-- Item 5: Giao dịch -->
                                            <div class="col-3">
                                                <a href="/chuyentien" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-wallet fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Giao dịch</span>
                                                </a>
                                            </div>
                                            <!-- Item 6: Nhật ký -->
                                            <div class="col-3">
                                                <a href="/gio-hang" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-notes fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Nhật ký</span>
                                                </a>
                                            </div>
                                            <!-- Item 7: Tiếp thị -->
                                            <div class="col-3">
                                                <a href="/affiliate" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-coin fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Tiếp thị</span>
                                                </a>
                                            </div>
                                            <!-- Item 8: Hỗ trợ -->
                                            <div class="col-3">
                                                <a href="<?=$bentancoder['fb_admin'] ?? '#';?>" target="_blank" class="utility-icon-link d-flex flex-column align-items-center text-decoration-none py-1">
                                                    <div class="utility-icon-box d-flex align-items-center justify-content-center rounded-circle mb-1">
                                                        <i class="ti ti-ticket fs-18"></i>
                                                    </div>
                                                    <span class="utility-text text-secondary">Hỗ trợ</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Logout Button -->
                                    <div class="pt-1">
                                        <a href="/logout" class="btn btn-logout-custom w-100 d-flex align-items-center justify-content-center py-2 fw-semibold" style="border-radius: 12px; font-size: 14px; text-decoration: none;">
                                            <i class="ti ti-logout me-1 fs-16"></i>
                                            <span>Đăng xuất</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <style>
                            .custom-user-card-menu {
                                background: #ffffff;
                                border: 1px solid rgba(0,0,0,0.06) !important;
                                margin-top: 10px !important;
                            }
                            .custom-user-card-menu.show {
                                animation: fadeInMenu 0.2s ease-out;
                            }
                            [data-bs-theme="dark"] .custom-user-card-menu {
                                background: #1a1d21;
                                border: 1px solid rgba(255,255,255,0.08) !important;
                            }
                            [data-bs-theme="dark"] .user-card-name {
                                color: #f3f4f6;
                            }
                            .user-stat-card {
                                transition: all 0.2s ease;
                            }
                            .user-stat-card:hover {
                                transform: translateY(-2px);
                            }
                            .utility-icon-box {
                                width: 44px;
                                height: 44px;
                                background: rgba(14, 165, 233, 0.1);
                                transition: all 0.2s ease;
                            }
                            .utility-icon-link:hover .utility-icon-box {
                                background: rgba(14, 165, 233, 0.2);
                                transform: translateY(-2px) scale(1.05);
                            }
                            .utility-text {
                                font-size: 11px;
                                font-weight: 500;
                                transition: color 0.2s ease;
                            }
                            .utility-icon-link:hover .utility-text {
                                color: #0ea5e9 !important;
                            }
                            .btn-logout-custom {
                                background-color: #fff1f2;
                                border: 1px solid #fecdd3;
                                color: #f43f5e;
                                transition: all 0.2s ease;
                            }
                            .btn-logout-custom:hover {
                                background-color: #ffe4e6;
                                border-color: #fda4af;
                                color: #e11d48;
                                transform: translateY(-1px);
                            }
                            [data-bs-theme="dark"] .btn-logout-custom {
                                background-color: rgba(244, 63, 94, 0.15);
                                border-color: rgba(244, 63, 94, 0.3);
                                color: #fb7185;
                            }
                            [data-bs-theme="dark"] .btn-logout-custom:hover {
                                background-color: rgba(244, 63, 94, 0.25);
                                border-color: rgba(244, 63, 94, 0.5);
                                color: #fda4af;
                            }
                            @keyframes fadeInMenu {
                                from {
                                    opacity: 0;
                                }
                                to {
                                    opacity: 1;
                                }
                            }

                            /* Tối ưu responsive thanh điều hướng trên Điện thoại (< 576px) */
                            @media (max-width: 575.98px) {
                                .app-topbar .topbar-menu {
                                    padding-left: 8px !important;
                                    padding-right: 8px !important;
                                }
                                .app-topbar .gap-2 {
                                    gap: 6px !important;
                                }
                                .logo-topbar .logo-sm img {
                                    height: 28px !important;
                                    width: auto !important;
                                }
                                .sidenav-toggle-button {
                                    width: 34px !important;
                                    height: 34px !important;
                                    padding: 0 !important;
                                }
                                .pill-mode-switcher {
                                    height: 32px !important;
                                    max-height: 32px !important;
                                    padding: 2px 6px !important;
                                }
                                .btn-theme-toggle {
                                    width: 22px !important;
                                    height: 22px !important;
                                }
                                .custom-animated-bell {
                                    width: 21px !important;
                                    height: 21px !important;
                                }
                                .nav-user .rounded-circle {
                                    width: 32px !important;
                                    height: 32px !important;
                                }
                            }
                        </style>
                        <?php }?>
                    </div>
                </div>
            </header>
            <!-- Topbar End -->
 <div class="sidenav-menu">
    <!-- Brand Logo -->
    <a href="/" class="logo">
        <span class="logo logo-light">
            <span class="logo-lg"><img src="<?=$bentancoder['logo'];?>" alt="logo" /></span>
            <span class="logo-sm"><img src="<?=$bentancoder['favicon'];?>" alt="small logo" /></span>
        </span>

        <span class="logo logo-dark">
            <span class="logo-lg"><img src="<?=$bentancoder['logo_dark'];?>" alt="dark logo" /></span>
            <span class="logo-sm"><img src="<?=$bentancoder['favicon'];?>" alt="small logo" /></span>
        </span>
    </a>

    <!-- Sidebar Hover Menu Toggle Button -->
    <button class="button-on-hover">
        <span class="btn-on-hover-icon"></span>
    </button>

    <!-- Full Sidebar Menu Close Button -->
    <button class="button-close-offcanvas">
        <i class="ti ti-menu-4 align-middle"></i>
    </button>

    <div class="scrollbar" data-simplebar="">
        <div class="sidenav-user px-3 py-2 mb-2">
            <div class="d-flex align-items-center justify-content-between">
                <a href="/profile" class="link-reset d-flex align-items-center gap-2 overflow-hidden text-decoration-none">
                    <img src="https://ui-avatars.com/api/?background=random&name=<?=$username;?>" alt="user-image" class="rounded-circle flex-shrink-0" width="38" height="38" style="border: 2px solid rgba(255,255,255,0.2);" />
                    <div class="overflow-hidden">
                        <span class="sidenav-user-name fw-bold d-block text-truncate text-white" style="font-size: 13.5px; line-height: 1.2;"><?=$username;?></span>
                        <span class="fs-12 fw-semibold d-block text-truncate text-warning mt-1" data-lang="user-role" style="font-size: 12px; line-height: 1.2;">Số Dư: <?=number_format($user['money']);?>đ</span>
                    </div>
                </a>
                <div class="dropdown flex-shrink-0 ms-2">
                    <a class="dropdown-toggle drop-arrow-none link-reset sidenav-user-set-icon d-flex align-items-center justify-content-center" data-bs-toggle="dropdown" href="#!" aria-haspopup="false" aria-expanded="false" title="Cài đặt">
                        <i class="ti ti-settings fs-20 align-middle"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-end shadow border-0 py-1" style="min-width: 170px;">
                        <div class="dropdown-header noti-title pb-1">
                            <h6 class="text-overflow m-0 fs-12 fw-bold text-muted">TÀI KHOẢN</h6>
                        </div>
                        <a href="/profile" class="dropdown-item py-1 px-3 d-flex align-items-center gap-2">
                            <i class="ti ti-user-circle fs-16 text-primary"></i>
                            <span class="align-middle">Profile</span>
                        </a>
                        <a href="/profile" class="dropdown-item py-1 px-3 d-flex align-items-center gap-2">
                            <i class="ti ti-settings-2 fs-16 text-warning"></i>
                            <span class="align-middle">Đổi mật khẩu</span>
                        </a>
                        <a href="/gio-hang" class="dropdown-item py-1 px-3 d-flex align-items-center gap-2">
                            <i class="ti ti-shopping-cart fs-16 text-info"></i>
                            <span class="align-middle">Giỏ hàng</span>
                        </a>
                        <div class="dropdown-divider my-1"></div>
                        <a href="/logout" class="dropdown-item py-1 px-3 text-danger fw-semibold d-flex align-items-center gap-2">
                            <i class="ti ti-logout fs-16"></i>
                            <span class="align-middle">Log Out</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!--- Sidenav Menu -->
        <div id="sidenav-menu">
<ul class="side-nav">

<li class="side-nav-title mt-2">Main</li>

<li class="side-nav-item">
<a href="/" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-dashboard"></i></span>
<span class="menu-text">Dashboard</span>
</a>
</li>

<li class="side-nav-title mt-2">Tài chính</li>

<li class="side-nav-item">
<a href="/napthe" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-credit-card"></i></span>
<span class="menu-text">Nạp thẻ cào</span>
</a>
</li>

<li class="side-nav-item">
<a href="/nap-ngan-hang" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-building-bank"></i></span>
<span class="menu-text">Nạp ngân hàng</span>
</a>
</li>

<li class="side-nav-item">
<a href="/chuyentien" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-transfer"></i></span>
<span class="menu-text">Chuyển tiền</span>
</a>
</li>
<li class="side-nav-item">
  <a href="/affiliate" class="side-nav-link">
    <span class="menu-icon"><i class="ti ti-link"></i></span>
    <span class="menu-text">Affiliate</span>
  </a>
</li>
<li class="side-nav-title mt-2">Dịch vụ</li>

<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#shopgame" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-device-gamepad-2"></i></span>
<span class="menu-text">Tạo Shop Game</span>
<span class="menu-arrow"></span>
</a>

<div class="collapse" id="shopgame">
<ul class="sub-menu">

<li class="side-nav-item">
<a href="/kho-giao-dien" class="side-nav-link">
<span class="menu-text">Kho giao diện</span>
</a>
</li>

<li class="side-nav-item">
<a href="/lich-su-taowebsite" class="side-nav-link">
<span class="menu-text">Quản lý website</span>
</a>
</li>

</ul>
</div>
</li>


<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sourcecode" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-code"></i></span>
<span class="menu-text">Mua Source Code</span>
<span class="menu-arrow"></span>
</a>

<div class="collapse" id="sourcecode">
<ul class="sub-menu">

<li class="side-nav-item">
<a href="/kho-web-code" class="side-nav-link">
<span class="menu-text">Kho mã nguồn</span>
</a>
</li>

<li class="side-nav-item">
<a href="/lich-su-mua-webgame" class="side-nav-link">
<span class="menu-text">Mã nguồn đã mua</span>
</a>
</li>

</ul>
</div>
</li>


<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#menu_domain" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-world"></i></span>
<span class="menu-text">Tên miền</span>
<span class="menu-arrow"></span>
</a>

<div class="collapse" id="menu_domain">
<ul class="sub-menu">

<li class="side-nav-item">
<a href="/kiem-tra-mien" class="side-nav-link">
<span class="menu-text">Mua tên miền</span>
</a>
</li>

<li class="side-nav-item">
<a href="/quan-ly-domain" class="side-nav-link">
<span class="menu-text">Quản lý tên miền</span>
</a>
</li>

</ul>
</div>
</li>


<div class="collapse" id="hosting">
<ul class="sub-menu">

<?php
// Lấy dữ liệu từ API
$hostingApiFile = $_SERVER['DOCUMENT_ROOT'] . '/api/hosting/hostingapi.php';
$serverGroups = [];

if (file_exists($hostingApiFile)) {
    require_once $hostingApiFile;
    $api = new HostingAPI();
    $packages = $api->getAllPackages();

    // Group packages theo server
    if (!isset($packages['status'])) {
        foreach ($packages as $pkg) {
            $server = $pkg['server'] ?? 'unknown';
            if (!isset($serverGroups[$server])) {
                $serverGroups[$server] = [];
            }
            $serverGroups[$server][] = $pkg;
        }
    }
}

// Hiển thị các server từ API
foreach ($serverGroups as $serverName => $pkgs) {
    // Lấy tên server từ packageName (ví dụ: "VIETNAM #PREMIUM1")
    $displayName = $pkgs[0]['packageName'] ?? $serverName;
    // Cắt lấy phần trước # nếu có
    $displayName = explode('#', $displayName)[0];
    $displayName = trim($displayName);
?>

<li class="side-nav-item">
<a href="/hosting?server=<?=urlencode($serverName);?>" class="side-nav-link">
<span class="menu-text"><?=$displayName;?></span>
</a>
</li>

<?php } ?>

<li class="side-nav-item">
<a href="/my-hosting" class="side-nav-link">
<span class="menu-text">Quản lý Hosting</span>
</a>
</li>

</ul>
</div>

</li>

<!-- RESELLER -->

<li class="side-nav-item">

<a data-bs-toggle="collapse" href="#reseller" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-server-2"></i></span>
<span class="menu-text">Reseller Hosting</span>
<span class="menu-arrow"></span>
</a>

<div class="collapse" id="reseller">
<ul class="sub-menu">

<?php
$result = mysqli_query($ketnoi,"SELECT * FROM `ds_server` 
WHERE `status`='ON' AND `loai`='reseller' ORDER BY id DESC");
while($row = mysqli_fetch_assoc($result)){
?>

<li class="side-nav-item">
<a href="/bang-gia-reseller/<?=$row['server'];?>" class="side-nav-link">
<span class="menu-text"><?=$row['ten'];?></span>
</a>
</li>

<?php } ?>

<li class="side-nav-item">
<a href="/quan-ly-reseller" class="side-nav-link">
<span class="menu-text">Quản lý Reseller</span>
</a>
</li>

</ul>
</div>

</li>
<!-- CRONJOB -->

<li class="side-nav-item">

<a data-bs-toggle="collapse" href="#cronjob" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-clock-code"></i></span>
<span class="menu-text">Thuê Cronjob</span>
<span class="menu-arrow"></span>
</a>

<div class="collapse" id="cronjob">
<ul class="sub-menu">

<li class="side-nav-item">
<a href="/thue-cron" class="side-nav-link">
<span class="menu-text">Thuê Cron</span>
</a>
</li>

<li class="side-nav-item">
<a href="/quan-ly-cronjob" class="side-nav-link">
<span class="menu-text">Quản lý Cron</span>
</a>
</li>

</ul>
</div>

</li>


<li class="side-nav-title mt-2">Khác</li>

<li class="side-nav-item">
<a href="/bai-viet" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-article"></i></span>
<span class="menu-text">Bài viết</span>
</a>
</li>

<li class="side-nav-item">
<a href="/ban-quyen" class="side-nav-link">
<span class="menu-icon"><i class="ti ti-shield-check"></i></span>
<span class="menu-text">Bản quyền</span>
</a>
</li>

</ul>
</div>
                        </ul>
                    </div>
                </li>
                <li class="side-nav-item">
                    <a href="#" class="side-nav-link disabled">
                        <span class="menu-icon"><i class="ti ti-ban"></i></span>
                        <span class="menu-text" data-lang="disabled-menu">Disabled Menu</span>
                    </a>
                </li>
                <li class="side-nav-item">
                    <a href="#" class="side-nav-link special-menu">
                        <span class="menu-icon"><i class="ti ti-star"></i></span>
                        <span class="menu-text" data-lang="special-menu">Special Menu</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Sidenav Menu End -->

chỉnh sửa lỗi 
