<?php
// Lấy thông tin user nếu đã đăng nhập
$isLoggedIn = isset($_SESSION['session']) && !empty($_SESSION['session']);
$isAdmin = $isLoggedIn && isset($user['level']) && $user['level'] == '9';
$displayName = $isLoggedIn && !empty($username) ? htmlspecialchars($username) : 'Khách';
$userMoney = $isLoggedIn && isset($user['money']) ? tien($user['money']) : '0';
$userEmail = $isLoggedIn && !empty($user['email']) ? htmlspecialchars($user['email']) : 'Đăng nhập để trải nghiệm';
$userAvatar = !empty($user['avatar']) ? htmlspecialchars($user['avatar']) : 'https://i.imgur.com/IXvIW8G.png';
?>

<!--begin::Header-->
<div id="kt_app_header" class="app-header" data-kt-sticky="true" data-kt-sticky-name="app-header-minimize" data-kt-sticky-offset="{default: '200px', lg: '0'}" data-kt-sticky-animation="false">
    <!--begin::Header container-->
    <div class="app-container container-fluid d-flex align-items-stretch justify-content-between" id="kt_app_header_container">

        <!--begin::Sidebar mobile toggle-->
        <div class="d-flex align-items-center d-lg-none ms-n3 me-1 me-md-2" title="Hiển thị menu sidebar">
            <div class="btn btn-icon btn-active-color-primary w-35px h-35px position-relative overflow-hidden" id="kt_app_sidebar_mobile_toggle">
                <div class="menu-toggle-icon">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
        <!--end::Sidebar mobile toggle-->

        <!--begin::Mobile logo-->
        <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
            <a href="/" class="d-lg-none logo-mobile-wrapper">
                <img alt="Logo" src="<?= htmlspecialchars($lxtdev['logo'] ?? '/assets/media/logos/default.svg') ?>" class="h-30px logo-mobile">
            </a>
        </div>
        <!--end::Mobile logo-->

        <!--begin::Header wrapper-->
        <div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1" id="kt_app_header_wrapper">

            <!--begin::Menu wrapper-->
            <div class="app-header-menu app-header-mobile-drawer align-items-stretch" 
                 data-kt-drawer="true" 
                 data-kt-drawer-name="app-header-menu" 
                 data-kt-drawer-activate="{default: true, lg: false}" 
                 data-kt-drawer-overlay="true" 
                 data-kt-drawer-width="280px" 
                 data-kt-drawer-direction="end" 
                 data-kt-drawer-toggle="#kt_app_header_menu_toggle" 
                 data-kt-swapper="true" 
                 data-kt-swapper-mode="{default: 'append', lg: 'prepend'}" 
                 data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}">

                <!--begin::Menu-->
                <div class="menu menu-rounded menu-column menu-lg-row my-5 my-lg-0 align-items-stretch fw-semibold px-2 px-lg-0" id="kt_app_header_menu" data-kt-menu="true">

                    <!-- Trang chủ -->
                    <div class="menu-item here show me-0 me-lg-2 nav-item-animated">
                        <a href="/" class="menu-link nav-link-animated">
                            <span class="menu-icon">
                                <i class="ki-duotone ki-element-11 fs-2 nav-icon-animated">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                    <span class="path4"></span>
                                </i>
                            </span>
                            <span class="menu-title">Trang chủ</span>
                        </a>
                    </div>

                    <!-- Dịch vụ (Mega Menu) -->
                    <div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" 
                         data-kt-menu-placement="bottom-start" 
                         class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2 nav-item-animated">
                        <span class="menu-link nav-link-animated">
                            <span class="menu-icon">
                                <i class="ki-duotone ki-rocket fs-2 nav-icon-animated">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                            </span>
                            <span class="menu-title">Dịch vụ</span>
                            <span class="menu-arrow d-lg-none"></span>
                            <span class="menu-badge menu-badge-circle badge badge-light-success">Hot</span>
                        </span>

                        <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown px-lg-2 py-lg-4 w-lg-250px mega-menu-animated">
                            <div class="menu-item">
                                <a class="menu-link menu-link-animated" href="/services/social">
                                    <span class="menu-icon">
                                        <i class="ki-duotone ki-people fs-2 text-primary">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title">Tăng tương tác MXH</span>
                                    <span class="menu-arrow"></span>
                                </a>
                            </div>
                            <div class="menu-item">
                                <a class="menu-link menu-link-animated" href="/services/website">
                                    <span class="menu-icon">
                                        <i class="ki-duotone ki-monitor fs-2 text-info">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title">Dịch vụ Website</span>
                                </a>
                            </div>
                            <div class="menu-item">
                                <a class="menu-link menu-link-animated" href="/services/marketing">
                                    <span class="menu-icon">
                                        <i class="ki-duotone ki-chart-line-up fs-2 text-success">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title">Marketing Online</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Liên Hệ Trợ Giúp (Dropdown) -->
                    <div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" 
                         data-kt-menu-placement="bottom-start" 
                         class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2 nav-item-animated">
                        <span class="menu-link nav-link-animated">
                            <span class="menu-icon">
                                <i class="ki-duotone ki-message-text-2 fs-2 nav-icon-animated">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                </i>
                            </span>
                            <span class="menu-title">Liên Hệ Trợ Giúp</span>
                            <span class="menu-arrow d-lg-none"></span>
                        </span>

                        <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown px-lg-2 py-lg-4 w-lg-225px dropdown-animated">
                            <div class="menu-item">
                                <a class="menu-link menu-link-animated" href="<?= htmlspecialchars($lxtdev['fb_admin'] ?? '#') ?>" target="_blank">
                                    <span class="menu-icon">
                                        <i class="ki-duotone ki-facebook fs-2 text-primary social-icon-animated">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title">Kết nối Facebook</span>
                                </a>
                            </div>
                            <div class="menu-item">
                                <a class="menu-link menu-link-animated" href="https://zalo.me/<?= htmlspecialchars($lxtdev['sdt_admin'] ?? '') ?>" target="_blank">
                                    <span class="menu-icon">
                                        <i class="ki-duotone ki-phone fs-2 text-success social-icon-animated">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title">Trò chuyện qua Zalo</span>
                                </a>
                            </div>
                            <div class="menu-item">
                                <a class="menu-link menu-link-animated" href="/" target="_blank">
                                    <span class="menu-icon">
                                        <i class="ki-duotone ki-telegram fs-2 text-info social-icon-animated">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title">Cộng đồng Telegram</span>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
                <!--end::Menu-->
            </div>
            <!--end::Menu wrapper-->

            <!--begin::Navbar-->
            <div class="app-navbar flex-shrink-0">

                <!--begin::Chat Trực Tuyến-->
                <div class="app-navbar-item ms-1 ms-md-3">
                    <div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-30px h-30px w-md-40px h-md-40px position-relative chat-btn-animated" id="kt_drawer_chat_toggle" title="Chat trực tuyến">
                        <i class="ki-duotone ki-message-text-2 fs-2 fs-lg-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                            <span class="path3"></span>
                        </i>
                        <span class="bullet bullet-dot bg-success h-6px w-6px position-absolute translate-middle top-0 start-50 animation-blink chat-indicator"></span>
                    </div>
                </div>
                <!--end::Chat-->

                <!--begin::Theme Mode (Light/Dark/System)-->
                <div class="app-navbar-item ms-1 ms-md-3">
                    <a href="#" class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-30px h-30px w-md-40px h-md-40px theme-toggle-animated" 
                       data-kt-menu-trigger="{default:'click', lg: 'hover'}" 
                       data-kt-menu-attach="parent" 
                       data-kt-menu-placement="bottom-end"
                       title="Chế độ giao diện">
                        <i class="ki-duotone ki-night-day theme-light-show fs-2 fs-lg-1 theme-icon-animated">
                            <span class="path1"></span>
                            <span class="path2"></span>
                            <span class="path3"></span>
                            <span class="path4"></span>
                            <span class="path5"></span>
                            <span class="path6"></span>
                            <span class="path7"></span>
                            <span class="path8"></span>
                            <span class="path9"></span>
                            <span class="path10"></span>
                        </i>
                        <i class="ki-duotone ki-moon theme-dark-show fs-2 fs-lg-1 theme-icon-animated">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </a>
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px theme-menu-animated" data-kt-menu="true" data-kt-element="theme-mode-menu">
                        <div class="menu-item px-3 my-0">
                            <a href="#" class="menu-link px-3 py-2 active" data-kt-element="mode" data-kt-value="light">
                                <span class="menu-icon" data-kt-element="icon">
                                    <i class="ki-duotone ki-night-day fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                        <span class="path5"></span>
                                        <span class="path6"></span>
                                        <span class="path7"></span>
                                        <span class="path8"></span>
                                        <span class="path9"></span>
                                        <span class="path10"></span>
                                    </i>
                                </span>
                                <span class="menu-title">Sáng</span>
                            </a>
                        </div>
                        <div class="menu-item px-3 my-0">
                            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                                <span class="menu-icon" data-kt-element="icon">
                                    <i class="ki-duotone ki-moon fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                </span>
                                <span class="menu-title">Tối</span>
                            </a>
                        </div>
                        <div class="menu-item px-3 my-0">
                            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
                                <span class="menu-icon" data-kt-element="icon">
                                    <i class="ki-duotone ki-screen fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                    </i>
                                </span>
                                <span class="menu-title">Hệ thống</span>
                            </a>
                        </div>
                    </div>
                </div>
                <!--end::Theme mode-->

                <!--begin::User menu-->
                <div class="app-navbar-item ms-1 ms-md-3" id="kt_header_user_menu_toggle">
                    <div class="cursor-pointer symbol symbol-30px symbol-md-40px user-avatar-animated" 
                         data-kt-menu-trigger="{default: 'click', lg: 'hover'}" 
                         data-kt-menu-attach="parent" 
                         data-kt-menu-placement="bottom-end">
                        <img src="<?= $userAvatar ?>" class="rounded-3" alt="user" loading="lazy">
                        <?php if($isLoggedIn): ?>
                        <span class="symbol-badge badge badge-circle bg-success start-100 top-100 border-2 h-8px w-8px position-absolute online-indicator"></span>
                        <?php endif; ?>
                    </div>

                    <!--begin::User account menu-->
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px user-menu-animated" data-kt-menu="true">

                        <!-- Thông tin user tổng quan -->
                        <div class="menu-item px-3">
                            <div class="menu-content d-flex align-items-center px-3">
                                <div class="symbol symbol-50px me-5 user-avatar-large-animated">
                                    <img alt="Logo" src="<?= $userAvatar ?>" class="rounded-3" loading="lazy">
                                </div>
                                <div class="d-flex flex-column">
                                    <div class="fw-bold d-flex align-items-center fs-5 user-name-animated">
                                        <?= $displayName ?>
                                        <span class="badge badge-light-success fw-bolder fs-8 px-2 py-1 ms-2 money-badge-animated">
                                            <?= $userMoney ?>đ
                                        </span>
                                    </div>
                                    <span class="fw-semibold text-muted fs-7 text-truncate w-150px user-email-animated"><?= $userEmail ?></span>
                                </div>
                            </div>
                        </div>

                        <div class="separator my-2 separator-animated"></div>

                        <!-- Menu điều hướng trạng thái Đã Đăng Nhập -->
                        <?php if($isLoggedIn): ?>

                            <?php if($isAdmin): ?>
                            <div class="menu-item px-5 admin-item-animated">
                                <a href="/admin" class="menu-link px-5 text-danger fw-bold admin-link-animated">
                                    <span class="menu-icon me-2">
                                        <i class="ki-duotone ki-shield-tick fs-2 text-danger">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-text">QUẢN TRỊ VIÊN</span>
                                    <span class="badge badge-light-danger ms-auto">Admin</span>
                                </a>
                            </div>
                            <?php endif; ?>

                            <div class="menu-item px-5 nav-item-user-animated">
                                <a href="/profile" class="menu-link px-5 user-link-animated">
                                    <span class="menu-icon me-2">
                                        <i class="ki-duotone ki-user fs-2 text-primary">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    Thông Tin Tài Khoản
                                </a>
                            </div>

                            <div class="menu-item px-5" data-kt-menu-trigger="hover" data-kt-menu-placement="left-start">
                                <a href="#" class="menu-link px-5 language-link-animated">
                                    <span class="menu-icon me-2">
                                        <i class="ki-duotone ki-translate fs-2 text-info">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    <span class="menu-title position-relative">Ngôn ngữ
                                        <span class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0 language-badge-animated">
                                            Tiếng Việt
                                            <img class="w-15px h-15px rounded-1 ms-2" src="/assets/media/flags/vietnam.svg" alt="vietnam" />
                                        </span>
                                    </span>
                                </a>
                                <div class="menu-sub menu-sub-dropdown w-175px py-4 language-submenu-animated">
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link d-flex px-5 active">
                                            <span class="symbol symbol-20px me-4">
                                                <img class="rounded-1" src="/assets/media/flags/vietnam.svg" alt="vietnam" />
                                            </span>
                                            Tiếng Việt
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="separator my-2 separator-animated"></div>

                            <div class="menu-item px-5 logout-item-animated">
                                <a href="/auth/logout" class="menu-link px-5 text-hover-danger logout-link-animated">
                                    <span class="menu-icon me-2">
                                        <i class="ki-duotone ki-exit-right fs-2 text-danger">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    Đăng xuất
                                </a>
                            </div>

                        <!-- Menu điều hướng trạng thái Chưa Đăng Nhập -->
                        <?php else: ?>
                            <div class="menu-item px-5 login-item-animated">
                                <a href="/auth/login" class="menu-link px-5 text-primary fw-bold login-link-animated">
                                    <span class="menu-icon me-2">
                                        <i class="ki-duotone ki-login fs-2 text-primary">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    Đăng Nhập
                                </a>
                            </div>
                            <div class="menu-item px-5 register-item-animated">
                                <a href="/auth/register" class="menu-link px-5 register-link-animated">
                                    <span class="menu-icon me-2">
                                        <i class="ki-duotone ki-user-add fs-2 text-success">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </span>
                                    Đăng Ký Thành Viên
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                    <!--end::User account menu-->
                </div>
                <!--end::User menu-->

            </div>
            <!--end::Navbar-->
        </div>
        <!--end::Header wrapper-->
    </div>
    <!--end::Header container-->
</div>
<!--end::Header-->

<!-- CSS Hiệu ứng nâng cao -->
<style>
/* ==================== BASE ANIMATIONS ==================== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--kt-primary-rgb), 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(var(--kt-primary-rgb), 0.2); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounce-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ==================== HEADER STYLES ==================== */
.app-header {
    animation: fadeInDown 0.6s ease-out;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==================== MOBILE TOGGLE (Hamburger Animation) ==================== */
.menu-toggle-icon {
    width: 20px;
    height: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-toggle-icon .bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--kt-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

#kt_app_sidebar_mobile_toggle.active .menu-toggle-icon .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#kt_app_sidebar_mobile_toggle.active .menu-toggle-icon .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#kt_app_sidebar_mobile_toggle.active .menu-toggle-icon .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

#kt_app_sidebar_mobile_toggle:hover .bar {
    background-color: var(--kt-primary-active);
}

/* ==================== LOGO ==================== */
.logo-mobile-wrapper {
    transition: transform 0.3s ease;
}

.logo-mobile-wrapper:hover {
    transform: scale(1.05);
}

.logo-mobile {
    transition: filter 0.3s ease, transform 0.3s ease;
}

.logo-mobile-wrapper:hover .logo-mobile {
    filter: drop-shadow(0 4px 8px rgba(var(--kt-primary-rgb), 0.3));
}

/* ==================== NAV ITEMS ==================== */
.nav-item-animated {
    position: relative;
    animation: fadeInDown 0.5s ease-out backwards;
}

.nav-item-animated:nth-child(1) { animation-delay: 0.1s; }
.nav-item-animated:nth-child(2) { animation-delay: 0.2s; }
.nav-item-animated:nth-child(3) { animation-delay: 0.3s; }

.nav-link-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link-animated::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--kt-primary), transparent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link-animated:hover::before {
    width: 80%;
}

.nav-link-animated:hover {
    color: var(--kt-primary) !important;
    transform: translateY(-1px);
}

.nav-link-animated:hover .nav-icon-animated {
    animation: float 1s ease-in-out infinite;
}

/* Active state */
.menu-item.here .nav-link-animated::before {
    width: 80%;
    background: var(--kt-primary);
}

/* ==================== MENU BADGE ==================== */
.menu-badge {
    animation: pulse-glow 2s infinite;
    font-size: 0.65rem;
    padding: 0.15em 0.5em;
}

/* ==================== DROPDOWN MENUS ==================== */
.dropdown-animated,
.mega-menu-animated,
.language-submenu-animated {
    animation: scale-in 0.2s ease-out;
    transform-origin: top center;
}

.menu-sub-dropdown {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--kt-gray-200-rgb), 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.menu-link-animated {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    margin: 2px 8px;
}

.menu-link-animated:hover {
    background: linear-gradient(135deg, rgba(var(--kt-primary-rgb), 0.08) 0%, rgba(var(--kt-primary-rgb), 0.02) 100%);
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(var(--kt-primary-rgb), 0.1);
}

.menu-link-animated:hover .social-icon-animated {
    animation: bounce-soft 0.5s ease infinite;
}

/* ==================== CHAT BUTTON ==================== */
.chat-btn-animated {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important;
}

.chat-btn-animated:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 20px rgba(var(--kt-success-rgb), 0.3);
}

.chat-indicator {
    animation: pulse-glow 2s infinite;
}

/* ==================== THEME TOGGLE ==================== */
.theme-toggle-animated {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

.theme-toggle-animated:hover {
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 0 15px rgba(var(--kt-warning-rgb), 0.3);
}

.theme-toggle-animated:hover .theme-icon-animated {
    animation: rotate-slow 3s linear infinite;
}

.theme-menu-animated {
    animation: scale-in 0.2s ease-out;
}

/* ==================== USER AVATAR ==================== */
.user-avatar-animated {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.user-avatar-animated::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--kt-primary), var(--kt-info), var(--kt-success));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.user-avatar-animated:hover::after {
    opacity: 1;
}

.user-avatar-animated:hover {
    transform: scale(1.1);
}

.user-avatar-animated img {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.user-avatar-animated:hover img {
    border-color: var(--kt-primary);
}

.online-indicator {
    animation: pulse-glow 2s infinite;
    border: 2px solid var(--kt-body-bg);
}

/* ==================== USER MENU ==================== */
.user-menu-animated {
    animation: scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top right;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.user-avatar-large-animated {
    transition: all 0.3s ease;
}

.user-avatar-large-animated:hover {
    transform: scale(1.05);
}

.user-name-animated {
    animation: slideInRight 0.4s ease-out;
}

.money-badge-animated {
    animation: fadeInUp 0.5s ease-out 0.2s backwards;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    transition: all 0.3s ease;
}

.money-badge-animated:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(var(--kt-success-rgb), 0.3);
}

.user-email-animated {
    animation: fadeInUp 0.5s ease-out 0.3s backwards;
}

.separator-animated {
    background: linear-gradient(90deg, transparent, var(--kt-gray-300), transparent);
    height: 1px;
    opacity: 0.5;
}

/* Admin link */
.admin-item-animated {
    animation: slideInRight 0.3s ease-out;
}

.admin-link-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.admin-link-animated::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--kt-danger);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.admin-link-animated:hover::before {
    transform: scaleY(1);
}

.admin-link-animated:hover {
    background: rgba(var(--kt-danger-rgb), 0.08);
    padding-left: 20px !important;
}

/* User nav items */
.nav-item-user-animated,
.logout-item-animated,
.login-item-animated,
.register-item-animated {
    animation: fadeInUp 0.3s ease-out backwards;
}

.nav-item-user-animated { animation-delay: 0.1s; }
.logout-item-animated { animation-delay: 0.2s; }
.login-item-animated { animation-delay: 0.1s; }
.register-item-animated { animation-delay: 0.2s; }

.user-link-animated,
.logout-link-animated,
.login-link-animated,
.register-link-animated,
.language-link-animated {
    transition: all 0.25s ease;
    border-radius: 8px;
    margin: 2px 8px;
}

.user-link-animated:hover,
.register-link-animated:hover {
    background: rgba(var(--kt-primary-rgb), 0.08);
    transform: translateX(5px);
}

.logout-link-animated:hover {
    background: rgba(var(--kt-danger-rgb), 0.08);
    transform: translateX(5px);
}

.login-link-animated:hover {
    background: rgba(var(--kt-primary-rgb), 0.1);
    transform: translateX(5px);
    box-shadow: 0 2px 10px rgba(var(--kt-primary-rgb), 0.15);
}

.language-badge-animated {
    transition: all 0.3s ease;
}

.language-link-animated:hover .language-badge-animated {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 991.98px) {
    .app-header {
        min-height: 60px;
    }

    #kt_app_header_menu {
        padding: 1rem 0;
    }

    .menu-item {
        animation: slideInRight 0.4s ease-out backwards;
    }

    .menu-item:nth-child(1) { animation-delay: 0.05s; }
    .menu-item:nth-child(2) { animation-delay: 0.1s; }
    .menu-item:nth-child(3) { animation-delay: 0.15s; }
    .menu-item:nth-child(4) { animation-delay: 0.2s; }

    .nav-link-animated {
        padding: 0.75rem 1rem;
        border-radius: 10px;
        margin: 2px 0;
    }

    .nav-link-animated:hover {
        background: rgba(var(--kt-primary-rgb), 0.05);
        transform: translateX(8px);
    }

    .menu-sub-dropdown {
        border-radius: 12px;
        margin: 0.5rem;
    }

    .app-navbar-item {
        margin-left: 0.25rem !important;
    }

    .btn-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .user-menu-animated {
        width: 260px !important;
    }

    .chat-btn-animated:hover {
        transform: scale(1.05);
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .app-header {
        min-height: 55px;
    }

    .logo-mobile {
        height: 25px !important;
    }

    .app-navbar-item.ms-1 {
        margin-left: 0.15rem !important;
    }

    .btn-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .symbol-30px {
        width: 28px !important;
        height: 28px !important;
    }

    .user-menu-animated {
        width: 240px !important;
        font-size: 0.9rem !important;
    }

    .menu-content .symbol-50px {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ==================== TABLET ==================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .menu-link {
        padding: 0.65rem 0.8rem;
    }

    .menu-title {
        font-size: 0.9rem;
    }
}

/* ==================== LARGE SCREENS ==================== */
@media (min-width: 1400px) {
    .app-container {
        max-width: 1320px;
    }

    .nav-link-animated {
        padding: 0.75rem 1.25rem;
    }
}

/* ==================== SCROLLBAR STYLING ==================== */
.app-header-menu::-webkit-scrollbar {
    width: 4px;
}

.app-header-menu::-webkit-scrollbar-track {
    background: transparent;
}

.app-header-menu::-webkit-scrollbar-thumb {
    background: rgba(var(--kt-gray-400-rgb), 0.5);
    border-radius: 4px;
}

.app-header-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--kt-gray-500-rgb), 0.7);
}

/* ==================== DARK MODE ADAPTATIONS ==================== */
[data-kt-theme="dark"] .menu-sub-dropdown,
[data-kt-theme="dark"] .user-menu-animated {
    background: rgba(var(--kt-gray-800-rgb), 0.95);
    border-color: rgba(var(--kt-gray-700-rgb), 0.5);
}

[data-kt-theme="dark"] .separator-animated {
    background: linear-gradient(90deg, transparent, var(--kt-gray-700), transparent);
}

[data-kt-theme="dark"] .menu-link-animated:hover {
    background: rgba(var(--kt-primary-rgb), 0.15);
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== FOCUS STATES FOR ACCESSIBILITY ==================== */
.nav-link-animated:focus-visible,
.menu-link-animated:focus-visible,
.chat-btn-animated:focus-visible,
.theme-toggle-animated:focus-visible {
    outline: 2px solid var(--kt-primary);
    outline-offset: 2px;
    border-radius: 8px;
}
</style>

<!-- JavaScript cho hiệu ứng nâng cao -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Hamburger menu toggle animation
    const sidebarToggle = document.getElementById('kt_app_sidebar_mobile_toggle');
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            this.classList.toggle('active');
        });
    }

    // Stagger animation for menu items on mobile
    const menuItems = document.querySelectorAll('#kt_app_header_menu .menu-item');
    menuItems.forEach((item, index) => {
        item.style.animationDelay = `${index * 0.05}s`;
    });

    // Ripple effect on nav links
    const navLinks = document.querySelectorAll('.nav-link-animated, .menu-link-animated');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const ripple = document.createElement('span');
            ripple.style.cssText = `
                position: absolute;
                background: rgba(var(--kt-primary-rgb), 0.2);
                border-radius: 50%;
                transform: scale(0);
                animation: ripple 0.6s ease-out;
                pointer-events: none;
                left: ${x}px;
                top: ${y}px;
                width: 20px;
                height: 20px;
                margin-left: -10px;
                margin-top: -10px;
            `;

            this.style.position = 'relative';
            this.style.overflow = 'hidden';
            this.appendChild(ripple);

            setTimeout(() => ripple.remove(), 600);
        });
    });

    // Chat button pulse on new message (simulated)
    const chatBtn = document.getElementById('kt_drawer_chat_toggle');
    if (chatBtn) {
        chatBtn.addEventListener('mouseenter', function() {
            this.querySelector('.chat-indicator').style.animation = 'none';
            setTimeout(() => {
                this.querySelector('.chat-indicator').style.animation = '';
            }, 10);
        });
    }

    // User menu entrance animation
    const userMenuToggle = document.getElementById('kt_header_user_menu_toggle');
    if (userMenuToggle) {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.target.classList.contains('show')) {
                    const menuItems = mutation.target.querySelectorAll('.menu-item');
                    menuItems.forEach((item, index) => {
                        item.style.animation = `fadeInUp 0.3s ease-out ${index * 0.05}s backwards`;
                    });
                }
            });
        });

        const userMenu = userMenuToggle.querySelector('[data-kt-menu="true"]');
        if (userMenu) {
            observer.observe(userMenu, { attributes: true, attributeFilter: ['class'] });
        }
    }
});

// Ripple keyframe
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);
</script>