:root {
        --bg-main: #0B1220;
        --bg-surface: #0f172a;
        --bg-card: #0f172a;
        --border-color: rgba(148, 163, 184, 0.12);
        --border-subtle: rgba(255, 255, 255, 0.06);
        --border-focus: #6366f1;

        --text-main: #f8fafc;
        --text-sub: #94a3b8;
        --text-muted: #64748b;

        --primary: #4f46e5;
        --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
        --primary-glow: rgba(99, 102, 241, 0.28);

        /* 1. MÀU ĐỎ: DÀNH CHO BỊ BAN (Đỏ hồng lì, dịu mắt, không chói) */
        --ban-bg: rgba(225, 29, 72, 0.15);
        --ban-bg-hover: rgba(225, 29, 72, 0.24);
        --ban-border: #f43f5e;
        --ban-text: #fecdd3;

        --success-base: #10b981;
      }

      html {
        height: 100%;
        scroll-behavior: auto;
        -webkit-text-size-adjust: 100%;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family:
          "Plus Jakarta Sans",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        -webkit-tap-highlight-color: transparent;
      }

      body {
        background-color: var(--bg-main);
        background-image:
          radial-gradient(
            circle at 50% 0%,
            rgba(99, 102, 241, 0.12) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 90% 100%,
            rgba(124, 58, 237, 0.08) 0%,
            transparent 40%
          );
        color: var(--text-main);
        padding: 22px 18px 0;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        overflow-x: hidden;
        max-width: 100vw;
      }

      /* THANH CUỘN MƯỢT MÀ, TINH TẾ CHUẨN ESPORTS */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.7);
      }
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(
          180deg,
          rgba(56, 189, 248, 0.4),
          rgba(168, 85, 247, 0.5)
        );
        border-radius: 999px;
        border: 2px solid rgba(15, 23, 42, 0.7);
        transition: all 0.25s ease;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #38bdf8, #a855f7);
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
      }

      .app-layout {
        width: 100%;
        max-width: 1650px;
        margin: 0 auto;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }

      #display-area {
        flex: 1 0 auto;
        min-height: 48vh;
      }

      /* TOPBAR HEADER (KHÔNG ĐÓNG KHUNG, THOÁNG ĐÃNG TRÊN VÀ DƯỚI) */
      .app-layout > header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 20px;
        margin-top: 8px;
        margin-bottom: 42px;
        padding: 12px 0 24px;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        box-shadow: none;
      }

      .header-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
      }

      /* PHẦN TRUNG TÂM THƯƠNG HIỆU: XẾP DỌC CĂN GIỮA (LOGO TRÊN -> TÊN devsepa -> SỐ LƯỢNG ACC) */
      .header-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        padding: 4px 8px;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .header-brand:hover {
        transform: translateY(-1px);
      }

      .logo-box {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #020617;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.25rem;
        box-shadow:
          0 0 22px rgba(56, 189, 248, 0.5),
          0 4px 14px rgba(0, 0, 0, 0.5);
        flex-shrink: 0;
        overflow: hidden;
        border: 2.2px solid #38bdf8;
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
        margin: 0 auto;
      }
      .logo-box:hover {
        transform: scale(1.08);
        box-shadow:
          0 0 28px rgba(56, 189, 248, 0.7),
          0 6px 20px rgba(0, 0, 0, 0.6);
      }

      .logo-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .header-brand-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        width: 100%;
      }

      header h1 {
        font-size: 1.5rem;
        font-weight: 900;
        color: #fff;
        line-height: 1.25;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        white-space: nowrap;
        letter-spacing: 0.3px;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
        text-align: center;
        margin: 0;
      }

      .typewriter-cursor {
        margin-left: 3px;
        color: #38bdf8;
        font-weight: 400;
        font-size: 1.35rem;
        animation: typewriterBlink 0.9s infinite;
        user-select: none;
      }

      @keyframes typewriterBlink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }

      .header-sub {
        font-size: 0.92rem;
        color: var(--text-sub);
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
      }

      .header-sub .stats-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.92rem;
        background: rgba(2, 6, 23, 0.65);
        padding: 4px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      }

      .header-sub #stat-count {
        font-size: 0.96rem;
        font-weight: 900;
        color: #ffffff;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 6px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        display: inline-block;
      }
      .header-sub #stat-count:hover {
        color: #38bdf8;
        background: rgba(56, 189, 248, 0.15);
        transform: scale(1.08);
      }

      .header-sub #stat-active {
        font-size: 0.92rem;
        font-weight: 800;
        color: #10b981;
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
        display: inline-flex;
        align-items: center;
      }

      .header-sub #stat-ban {
        font-size: 0.92rem;
        font-weight: 800;
        color: #f43f5e;
        text-shadow: 0 0 10px rgba(244, 63, 94, 0.55);
        display: inline-flex;
        align-items: center;
      }

      .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        display: inline-block;
      }

      .header-action-group {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
      }

      /* NÚT THAO TÁC */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1px solid transparent;
        font-weight: 700;
        font-size: 0.82rem;
        cursor: pointer;
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        white-space: nowrap;
      }

      .btn:hover {
        transform: translateY(-2px);
      }

      .btn:active {
        transform: scale(0.96) translateY(0);
      }

      .btn-primary {
        color: #fff;
        box-shadow: 0 4px 14px var(--primary-glow);
        border: none;
      }

      .btn-primary:hover {
        box-shadow: 0 6px 20px var(--primary-glow);
        filter: brightness(1.1);
      }

      .btn-cloud {
        background: rgba(99, 102, 241, 0.15);
        border: 1px solid rgba(99, 102, 241, 0.35);
        color: #c7d2fe;
      }

      .btn-cloud:hover {
        background: rgba(99, 102, 241, 0.28);
        color: #fff;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
      }

      .btn-tele {
        background: rgba(30, 41, 59, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
      }

      .btn-tele:hover {
        background: rgba(51, 65, 85, 0.95);
        color: #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      }

      /* ========================================================
         HAMBURGER OPTION MENU (MENU 3 GẠCH GỌN GÀNG HIỆN ĐẠI)
         ======================================================== */
      .header-menu-container {
        position: relative;
        display: inline-block;
      }

      .btn-hamburger-menu {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        font-size: 0.84rem;
        font-weight: 800;
        border-radius: 11px;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
        border: 1.5px solid rgba(56, 189, 248, 0.35);
        color: #f1f5f9;
        cursor: pointer;
        position: relative;
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        user-select: none;
      }

      .btn-hamburger-menu:hover,
      .btn-hamburger-menu.is-active {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.3));
        border-color: #38bdf8;
        color: #fff;
        box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
        transform: translateY(-1px);
      }

      .hamburger-bars {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3.5px;
        width: 16px;
        height: 14px;
      }

      .hamburger-bars span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #38bdf8;
        border-radius: 2px;
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .btn-hamburger-menu.is-active .hamburger-bars span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg);
      }
      .btn-hamburger-menu.is-active .hamburger-bars span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .btn-hamburger-menu.is-active .hamburger-bars span:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg);
      }

      .menu-notify-dot {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #f43f5e;
        border: 2px solid #0f172a;
        box-shadow: 0 0 8px #f43f5e;
        animation: timerDotPulse 1.4s infinite;
      }

      /* DROPDOWN FLYOUT PANEL */
      .option-menu-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 320px;
        max-width: 92vw;
        background: rgba(15, 23, 42, 0.96);
        border: 1.5px solid rgba(56, 189, 248, 0.35);
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 12px;
        display: none;
        flex-direction: column;
        gap: 6px;
        z-index: 999999;
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
      }

      .option-menu-dropdown.show {
        display: flex;
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .option-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 6px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 4px;
      }

      .option-menu-title {
        font-size: 0.86rem;
        font-weight: 800;
        color: #38bdf8;
        display: flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0.3px;
      }

      .option-menu-close {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
        border-radius: 6px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.18s ease;
      }

      .option-menu-close:hover {
        background: rgba(239, 68, 68, 0.2);
        color: #fff;
        border-color: #ef4444;
      }

      .option-menu-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .option-menu-item {
        width: 100%;
        padding: 10px 12px;
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #f1f5f9;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-sizing: border-box;
      }

      .option-menu-item:hover {
        background: rgba(56, 189, 248, 0.12);
        border-color: rgba(56, 189, 248, 0.35);
        transform: translateX(3px);
      }

      .option-item-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .opt-icon-analytics {
        background: rgba(168, 85, 247, 0.15);
        border-color: rgba(168, 85, 247, 0.35);
      }

      .opt-icon-cloud {
        background: rgba(16, 185, 129, 0.15);
        border-color: rgba(16, 185, 129, 0.35);
      }

      .opt-icon-tele {
        background: rgba(14, 165, 233, 0.15);
        border-color: rgba(14, 165, 233, 0.35);
      }

      .opt-icon-devices {
        background: rgba(234, 179, 8, 0.15);
        border-color: rgba(234, 179, 8, 0.35);
      }

      .opt-icon-emergency {
        background: rgba(239, 68, 68, 0.18);
        border-color: rgba(239, 68, 68, 0.4);
      }

      .option-item-content {
        flex: 1;
        min-width: 0;
      }

      .option-item-title {
        font-size: 0.86rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.3;
      }

      .option-item-sub {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .option-item-arrow {
        font-size: 1.15rem;
        color: #64748b;
        font-weight: 700;
        transition: transform 0.2s ease, color 0.2s ease;
      }

      .option-menu-item:hover .option-item-arrow {
        color: #38bdf8;
        transform: translateX(2px);
      }

      .option-menu-item.btn-emergency.is-locked {
        background: rgba(239, 68, 68, 0.16) !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
      }
      .option-menu-item.btn-emergency.is-locked .option-item-title {
        color: #fca5a5 !important;
      }

      /* ========================================================
         KHU VỰC 1: QUẢN TRỊ & THÊM TÀI KHOẢN (VÒNG KHUNG DUY NHẤT)
         ======================================================== */
      .add-box,
      .add-box.admin-unified-card {
        background: linear-gradient(
          160deg,
          rgba(30, 20, 65, 0.6) 0%,
          rgba(15, 23, 42, 0.85) 100%
        );
        border: 1px solid rgba(168, 85, 247, 0.32);
        border-radius: 18px;
        margin: 16px 0 20px;
        overflow: hidden;
        box-shadow:
          0 10px 30px rgba(0, 0, 0, 0.45),
          0 0 24px rgba(168, 85, 247, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition:
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .add-box:hover,
      .add-box.admin-unified-card:hover {
        border-color: rgba(168, 85, 247, 0.48);
        box-shadow:
          0 12px 36px rgba(0, 0, 0, 0.5),
          0 0 28px rgba(168, 85, 247, 0.15);
      }

      .admin-card-header {
        padding: 13px 18px;
        background: linear-gradient(
          90deg,
          rgba(99, 102, 241, 0.14) 0%,
          rgba(15, 23, 42, 0.5) 100%
        );
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        user-select: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .admin-card-title-group {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .admin-card-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .admin-card-title {
        font-size: 0.94rem;
        font-weight: 900;
        color: #ffffff;
        letter-spacing: 0.3px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .admin-card-subtitle {
        font-size: 0.74rem;
        color: #94a3b8;
        margin: 0;
        font-weight: 500;
      }

      .btn-card-collapse {
        background: rgba(30, 41, 59, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 9px;
        padding: 6px 14px;
        color: #cbd5e1;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .btn-card-collapse:hover {
        background: rgba(51, 65, 85, 0.8);
        border-color: rgba(56, 189, 248, 0.4);
        color: #ffffff;
        transform: translateY(-1px);
      }

      .collapse-arrow {
        white-space: nowrap;
        font-size: 0.76rem;
        color: #c4b5fd;
        font-weight: 700;
      }

      /* THANH ĐIỀU HƯỚNG KHO TÀI KHOẢN (KHO RANK & SỰ KIỆN CHUNG SỨC) */
      .storage-switcher-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 14px 0 16px;
      }

      .storage-tab-btn {
        background: linear-gradient(
          145deg,
          rgba(15, 23, 42, 0.8) 0%,
          rgba(30, 41, 59, 0.65) 100%
        );
        border: 1.5px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: left;
        user-select: none;
      }

      .storage-tab-btn:hover {
        border-color: rgba(56, 189, 248, 0.45);
        background: linear-gradient(
          145deg,
          rgba(15, 23, 42, 0.95) 0%,
          rgba(30, 41, 59, 0.85) 100%
        );
        transform: translateY(-2px);
      }

      .storage-tab-btn.active {
        background: linear-gradient(
          145deg,
          rgba(14, 165, 233, 0.22) 0%,
          rgba(99, 102, 241, 0.28) 100%
        );
        border-color: #38bdf8;
        box-shadow:
          0 4px 20px rgba(14, 165, 233, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
      }

      .storage-tab-btn.active#storage-tab-chungsuc {
        background: linear-gradient(
          145deg,
          rgba(245, 158, 11, 0.22) 0%,
          rgba(239, 68, 68, 0.22) 100%
        );
        border-color: #f59e0b;
        box-shadow:
          0 4px 20px rgba(245, 158, 11, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
      }

      .storage-tab-icon {
        font-size: 1.65rem;
        line-height: 1;
        flex-shrink: 0;
      }

      .storage-tab-text-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
      }

      .storage-tab-title {
        font-size: 0.94rem;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: 0.3px;
      }

      .storage-tab-btn.active .storage-tab-title {
        color: #38bdf8;
      }

      .storage-tab-btn.active#storage-tab-chungsuc .storage-tab-title {
        color: #fbbf24;
      }

      .storage-tab-sub {
        font-size: 0.72rem;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .storage-tab-pill {
        font-size: 0.75rem;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.4);
        color: #94a3b8;
        border: 1px solid rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
      }

      .storage-tab-btn.active .storage-tab-pill {
        background: rgba(56, 189, 248, 0.25);
        color: #ffffff;
        border-color: rgba(56, 189, 248, 0.6);
      }

      .storage-tab-btn.active#storage-tab-chungsuc .storage-tab-pill {
        background: rgba(245, 158, 11, 0.25);
        color: #ffffff;
        border-color: rgba(245, 158, 11, 0.6);
      }

      /* HÀNG ĐIỀU KHIỂN: CHỌN KHO & DÁN NHANH TRÊN FORM THÊM ACC */
      .add-control-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }

      .add-target-selector {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .add-target-label {
        font-size: 0.84rem;
        font-weight: 800;
        color: #cbd5e1;
        letter-spacing: 0.2px;
      }

      .add-target-pill-group {
        display: inline-flex;
        align-items: center;
        background: rgba(2, 6, 23, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 3px;
        border-radius: 12px;
        gap: 4px;
      }

      .btn-target-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 9px;
        font-size: 0.8rem;
        font-weight: 700;
        color: #94a3b8;
        background: transparent;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        user-select: none;
        white-space: nowrap;
      }
      .btn-target-pill:hover {
        color: #ffffff;
      }

      /* Nút Kho Rank được chọn */
      .btn-target-pill#btn-add-store-rank.active {
        background: rgba(6, 182, 212, 0.2);
        border-color: rgba(6, 182, 212, 0.45);
        color: #22d3ee;
        font-weight: 800;
        box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
      }

      /* Nút Chung Sức được chọn */
      .btn-target-pill#btn-add-store-chungsuc.active {
        background: rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.45);
        color: #fbbf24;
        font-weight: 800;
        box-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
      }

      /* NÚT DÁN NHANH TỪ CLIPBOARD (MÀU TÍM GỌN GÀNG) */
      .btn-quick-paste-purple {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 16px;
        border-radius: 10px;
        background: rgba(147, 51, 234, 0.18);
        border: 1px solid rgba(168, 85, 247, 0.4);
        color: #d8b4fe;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.2px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        white-space: nowrap;
        user-select: none;
      }
      .btn-quick-paste-purple:hover {
        background: rgba(147, 51, 234, 0.32);
        border-color: #c084fc;
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
        transform: translateY(-1px);
      }
      .btn-quick-paste-purple:active {
        transform: scale(0.96);
      }

      .badge-chungsuc-tag {
        background: linear-gradient(
          135deg,
          rgba(245, 158, 11, 0.25),
          rgba(239, 68, 68, 0.25)
        );
        color: #fde68a;
        border: 1px solid rgba(245, 158, 11, 0.5);
        padding: 2px 7px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .add-box-content {
        padding: 16px 18px 18px;
        display: block;
      }

      .add-box-content.hidden {
        display: none;
      }

      /* BỐ CỤC FORM THÊM ACC MỚI (PHẲNG, THOÁNG ĐÃNG) */
      .add-form-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .field-wrap-textarea {
        width: 100%;
      }
      .field-wrap-textarea > .btn-quick-paste-purple {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
      }

      .field-wrap-textarea textarea {
        width: 100%;
        min-height: 72px;
        padding: 11px 14px !important;
        border-radius: 12px;
        font-size: 0.88rem;
        line-height: 1.5;
        font-family: "JetBrains Mono", monospace;
        background: rgba(2, 6, 23, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #f1f5f9;
        resize: vertical;
        transition: all 0.2s ease;
        box-sizing: border-box;
      }
      .field-wrap-textarea textarea:focus {
        border-color: #38bdf8;
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
        background: rgba(2, 6, 23, 0.95);
        outline: none;
      }

      /* HÀNG CÁC TRƯỜNG PHỤ: MỞ BAN, RANK, UY TÍN & NÚT SUBMIT */
      .add-fields-row {
        display: grid;
        grid-template-columns: 1fr 1fr 0.8fr auto;
        gap: 12px;
        align-items: end;
      }

      /* KHI Ở CHẾ ĐỘ SỰ KIỆN CHUNG SỨC: CHỈ CÒN TEXTAREA VÀ NÚT SUBMIT PHẢI */
      .add-form-grid.mode-chungsuc .add-fields-row {
        display: flex;
        justify-content: flex-end;
      }

      .add-form-grid.mode-chungsuc #field-wrap-unlock,
      .add-form-grid.mode-chungsuc #field-wrap-rank,
      .add-form-grid.mode-chungsuc #field-wrap-uytin {
        display: none !important;
      }

      .add-form-grid.mode-chungsuc #btn-add {
        height: 44px !important;
        min-width: 220px;
        font-size: 0.88rem !important;
        border-radius: 11px !important;
        padding: 0 22px !important;
        background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
        box-shadow: 0 4px 0 #78350f, 0 8px 20px rgba(245, 158, 11, 0.45) !important;
      }

      .add-fields-row label {
        font-size: 0.76rem;
        font-weight: 700;
        color: #cbd5e1;
        display: block;
        margin-bottom: 5px;
      }

      .add-fields-row input {
        height: 40px;
        background: rgba(2, 6, 23, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9px;
        padding: 0 12px;
        color: #ffffff;
        font-size: 0.84rem;
        width: 100%;
        box-sizing: border-box;
        transition: all 0.2s ease;
      }

      .add-fields-row input:focus {
        border-color: #38bdf8;
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
        background: rgba(2, 6, 23, 0.95);
        outline: none;
      }

      @media (max-width: 768px) {
        .admin-card-header {
          padding: 12px 14px;
        }
        .add-box-content {
          padding: 14px 14px 16px;
        }
        .add-control-row {
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
        }
        .add-target-selector {
          justify-content: space-between;
          width: 100%;
        }
        .add-target-pill-group {
          flex: 1;
        }
        .btn-target-pill {
          flex: 1;
          justify-content: center;
          padding: 6px 10px;
          font-size: 0.76rem;
        }
        .btn-quick-paste-purple {
          width: 100%;
          justify-content: center;
          padding: 9px 12px;
        }
        .add-fields-row {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .field-wrap-action {
          grid-column: 1 / -1;
        }
        #btn-add {
          width: 100% !important;
          height: 44px !important;
        }
      }

      /* ẨN CÁC CHIP RANK (BK, KC, TA...) KHI Ở KHO CHUNG SỨC */
      body.storage-mode-chungsuc .quick-rank-nav .rank-tier-chip {
        display: none !important;
      }

      /* BẢNG MOBILE Ở CHẾ ĐỘ CHUNG SỨC: NÚT COPY TRẢI RỘNG THOẢI MÁI */
      .m-action-row.mode-chungsuc {
        grid-template-columns: 1fr 38px !important;
      }
      .m-action-row.mode-chungsuc.no-admin {
        grid-template-columns: 1fr !important;
      }

      .add-form-grid label {
        font-size: 0.76rem;
        font-weight: 700;
        color: #ddd6fe;
        display: block;
        margin-bottom: 5px;
      }

      .add-box input,
      .add-box textarea {
        background: rgba(10, 15, 30, 0.75);
        border: 1px solid rgba(168, 85, 247, 0.25);
      }

      .add-box input:focus,
      .add-box textarea:focus {
        border-color: #a855f7;
        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
        background: rgba(15, 12, 35, 0.95);
      }

      /* NÚT THÊM TÀI KHOẢN: HIỆU ỨNG 3D HIỆN ĐẠI & ĐẸP MẮT (MODERN 3D TACTILE BUTTON) */
      #btn-add {
        position: relative;
        overflow: hidden;
        background: linear-gradient(
          180deg,
          #6366f1 0%,
          #4f46e5 50%,
          #4338ca 100%
        ) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.45) !important;
        border-radius: 10px !important;
        box-shadow:
          0 4px 0 #312e81,
          0 8px 20px rgba(79, 70, 229, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.45),
          inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 0.84rem !important;
        letter-spacing: 0.6px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        cursor: pointer;
        transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
        isolation: isolate;
        transform: translateY(0);
      }

      #btn-add .btn-text-glossy {
        position: relative;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-weight: 800;
        color: #ffffff;
      }

      /* LỚP PHỦ ÁNH SÁNG NỬA TRÊN 3D */
      #btn-add::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 48%;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.35) 0%,
          rgba(255, 255, 255, 0.05) 100%
        );
        border-radius: 9px 9px 40px 40px / 9px 9px 12px 12px;
        pointer-events: none;
        z-index: 1;
      }

      /* DẢI ÁNH SÁNG TRÁNG GƯƠNG LƯỚT QUA CHẬM RÃI & MƯỢT MÀ */
      #btn-add::after {
        content: "";
        position: absolute;
        top: -60%;
        left: -130%;
        width: 50%;
        height: 220%;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.08) 20%,
          rgba(255, 255, 255, 0.65) 50%,
          rgba(255, 255, 255, 0.08) 80%,
          transparent 100%
        );
        transform: rotate(25deg);
        pointer-events: none;
        z-index: 2;
        animation: btnGlossySweep 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }

      @keyframes btnGlossySweep {
        0% {
          left: -130%;
          opacity: 0;
        }
        8% {
          opacity: 1;
        }
        38% {
          left: 230%;
          opacity: 1;
        }
        39%,
        100% {
          left: 230%;
          opacity: 0;
        }
      }

      #btn-add:hover {
        filter: brightness(1.1) !important;
        transform: translateY(-1px);
        box-shadow:
          0 5px 0 #312e81,
          0 10px 24px rgba(99, 102, 241, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.55),
          inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
      }

      #btn-add:active {
        transform: translateY(3px) !important;
        box-shadow:
          0 1px 0 #312e81,
          0 3px 8px rgba(79, 70, 229, 0.35),
          inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        filter: brightness(0.96) !important;
      }

      /* HIỆU ỨNG TUYẾT/LÁ RƠI MỜ ẢO TRONG NÚT THÊM TÀI KHOẢN */
      .btn-snow-track {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: inherit;
        z-index: 2;
      }
      .btn-snow-drop {
        position: absolute;
        top: -14px;
        font-size: 8px;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        user-select: none;
        will-change: transform, opacity;
        color: rgba(255, 255, 255, 0.9);
      }
      .btn-snow-drop.s1 {
        left: 6%;
        animation: btnSnowFall 4s ease-in-out -0.8s infinite;
      }
      .btn-snow-drop.s2 {
        left: 20%;
        animation: btnSnowFall 3.6s ease-in-out -2.3s infinite;
        font-size: 6px;
      }
      .btn-snow-drop.s3 {
        left: 37%;
        animation: btnSnowFall 4.4s ease-in-out -1.1s infinite;
      }
      .btn-snow-drop.s4 {
        left: 54%;
        animation: btnSnowFall 3.8s ease-in-out -3s infinite;
        font-size: 6px;
      }
      .btn-snow-drop.s5 {
        left: 70%;
        animation: btnSnowFall 4.2s ease-in-out -1.7s infinite;
      }
      .btn-snow-drop.s6 {
        left: 85%;
        animation: btnSnowFall 3.5s ease-in-out -0.3s infinite;
        font-size: 6px;
      }
      .btn-snow-drop.s7 {
        left: 46%;
        animation: btnSnowFall 4.8s ease-in-out -2.8s infinite;
        font-size: 7px;
      }

      @keyframes btnSnowFall {
        0% {
          top: -14px;
          opacity: 0;
          transform: translateX(0px) rotate(0deg);
        }
        12% {
          opacity: 0.3;
        }
        45% {
          opacity: 0.22;
          transform: translateX(4px) rotate(25deg);
        }
        78% {
          opacity: 0.18;
          transform: translateX(-4px) rotate(-15deg);
        }
        100% {
          top: calc(100% + 6px);
          opacity: 0;
          transform: translateX(2px) rotate(10deg);
        }
      }

      /* HIỆU ỨNG PHÁT SÁNG NHẤP NHÁY CHẬM RÃI, RÕ RÀNG 3 LẦN CHO TÀI KHOẢN VỪA TẠO */
      @keyframes rowNewlyAddedGlow {
        0% {
          background-color: transparent;
          box-shadow: none;
          outline-color: transparent;
          border-color: rgba(255, 255, 255, 0.08);
        }
        /* Nhịp 1: Bừng sáng rõ nét, giữ sáng rồi dịu dần */
        10% {
          background-color: rgba(16, 185, 129, 0.45);
          box-shadow:
            0 0 35px rgba(16, 185, 129, 0.95),
            inset 0 0 18px rgba(16, 185, 129, 0.5);
          outline-color: #10b981;
          border-color: #10b981;
        }
        20% {
          background-color: rgba(16, 185, 129, 0.45);
          box-shadow:
            0 0 35px rgba(16, 185, 129, 0.95),
            inset 0 0 18px rgba(16, 185, 129, 0.5);
          outline-color: #10b981;
          border-color: #10b981;
        }
        30% {
          background-color: transparent;
          box-shadow: none;
          outline-color: transparent;
          border-color: rgba(255, 255, 255, 0.08);
        }
        /* Nhịp 2: Bừng sáng rõ nét lần 2 */
        43% {
          background-color: rgba(16, 185, 129, 0.45);
          box-shadow:
            0 0 35px rgba(16, 185, 129, 0.95),
            inset 0 0 18px rgba(16, 185, 129, 0.5);
          outline-color: #10b981;
          border-color: #10b981;
        }
        53% {
          background-color: rgba(16, 185, 129, 0.45);
          box-shadow:
            0 0 35px rgba(16, 185, 129, 0.95),
            inset 0 0 18px rgba(16, 185, 129, 0.5);
          outline-color: #10b981;
          border-color: #10b981;
        }
        63% {
          background-color: transparent;
          box-shadow: none;
          outline-color: transparent;
          border-color: rgba(255, 255, 255, 0.08);
        }
        /* Nhịp 3: Bừng sáng rõ nét lần 3 */
        76% {
          background-color: rgba(16, 185, 129, 0.45);
          box-shadow:
            0 0 35px rgba(16, 185, 129, 0.95),
            inset 0 0 18px rgba(16, 185, 129, 0.5);
          outline-color: #10b981;
          border-color: #10b981;
        }
        86% {
          background-color: rgba(16, 185, 129, 0.45);
          box-shadow:
            0 0 35px rgba(16, 185, 129, 0.95),
            inset 0 0 18px rgba(16, 185, 129, 0.5);
          outline-color: #10b981;
          border-color: #10b981;
        }
        100% {
          background-color: transparent;
          box-shadow: none;
          outline-color: transparent;
          border-color: rgba(255, 255, 255, 0.08);
        }
      }

      .row-newly-added-glow {
        animation: rowNewlyAddedGlow 5.2s ease-in-out forwards !important;
        outline: 3px solid transparent !important;
        outline-offset: -2px;
        position: relative;
        z-index: 10 !important;
      }

      .m-row-card.row-newly-added-glow {
        border-color: #10b981 !important;
        border-radius: 12px !important;
        transform: scale(1.02);
      }

      @media (max-width: 820px) {
        .add-form-grid {
          grid-template-columns: 1fr;
        }
      }

      textarea,
      input[type="text"],
      input[type="password"],
      select {
        width: 100%;
        padding: 9px 12px;
        background: rgba(2, 6, 23, 0.7);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 10px;
        color: #fff;
        font-size: 0.88rem;
        outline: none;
        transition: all 0.15s ease;
      }

      textarea {
        resize: vertical;
        min-height: 64px;
        font-family: "JetBrains Mono", monospace;
        line-height: 1.45;
      }

      textarea:focus,
      input:focus,
      select:focus {
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        background: #020617;
      }

      /* THANH TÌM KIẾM TÀI KHOẢN HIỆN ĐẠI (SEARCH BAR) */
      .search-bar-wrap {
        margin-top: 6px;
        margin-bottom: 12px;
        width: 100%;
      }

      .search-bar-inner {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 12px;
        padding: 0 14px;
        box-shadow:
          0 4px 16px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .search-bar-inner:hover {
        border-color: rgba(56, 189, 248, 0.35);
        background: rgba(15, 23, 42, 0.85);
      }

      .search-bar-inner:focus-within {
        border-color: #38bdf8;
        box-shadow:
          0 0 0 3px rgba(56, 189, 248, 0.2),
          0 6px 20px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        background: rgba(2, 6, 23, 0.95);
      }

      .search-bar-icon {
        font-size: 1rem;
        color: #94a3b8;
        margin-right: 10px;
        flex-shrink: 0;
        user-select: none;
        display: flex;
        align-items: center;
      }

      .search-bar-input {
        width: 100%;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        padding: 10px 0 !important;
        font-family: "JetBrains Mono", monospace;
      }

      .search-bar-input::placeholder {
        color: #64748b;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 500;
        font-size: 0.86rem;
      }

      .btn-clear-search {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #cbd5e1;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 8px;
        transition: all 0.15s ease;
      }

      .btn-clear-search:hover {
        background: rgba(239, 68, 68, 0.35);
        color: #ffffff;
        border-color: #ef4444;
        transform: scale(1.1);
      }

      /* THANH ĐIỀU HƯỚNG RANK CUỘN NGANG (FRAMELESS & AIRY) */
      .toolbar {
        position: sticky;
        top: 10px;
        z-index: 1000;
        display: flex;
        align-items: center;
        margin-top: 14px;
        margin-bottom: 22px;
        background: transparent;
        padding: 6px 0;
        border: none;
      }

      /* THANH TAB RANK CUỘN NGANG LƯỚT CHỌN NHANH TRÊN MOBILE & PC */
      .quick-rank-nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
      }
      .quick-rank-nav::-webkit-scrollbar {
        display: none;
      }

      .rank-nav-chip {
        flex-shrink: 0;
        padding: 6px 13px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 700;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        white-space: nowrap;
        user-select: none;
      }
      .rank-nav-chip:hover {
        background: rgba(30, 41, 59, 0.85);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
      }
      .rank-nav-chip.active {
        background: var(--primary-gradient);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 3px 12px var(--primary-glow);
        transform: translateY(-1px);
      }

      .rank-nav-chip.chip-created-history {
        border-color: rgba(168, 85, 247, 0.45);
        color: #c084fc;
        background: rgba(168, 85, 247, 0.1);
      }
      .rank-nav-chip.chip-created-history:hover {
        background: rgba(168, 85, 247, 0.22);
        color: #e9d5ff;
        border-color: rgba(168, 85, 247, 0.65);
      }
      .rank-nav-chip.chip-created-history.active {
        background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 3px 14px rgba(168, 85, 247, 0.55) !important;
      }

      /* MENU CHỌN RANK NHANH (DROPDOWN PICKER) KHI CLICK Ô RANK */
      .rank-popover {
        position: fixed;
        background: #1a233a;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75);
        padding: 6px;
        z-index: 9999999;
        display: none;
        width: 175px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: scale(0.95);
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .rank-popover.show {
        display: block;
        transform: scale(1);
      }
      .rank-opt-btn {
        width: 100%;
        text-align: left;
        padding: 7px 10px;
        border-radius: 8px;
        background: transparent;
        border: none;
        color: #e2e8f0;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.15s ease;
      }
      .rank-opt-btn:hover {
        background: rgba(99, 102, 241, 0.28);
        color: #fff;
        transform: translateX(3px);
      }

      /* NÚT CUỘN LÊN ĐẦU TRANG */
      #btn-back-top {
        right: 20px;
        background: var(--primary-gradient);
        color: #fff;
        border: none;
        font-size: 1.25rem;
        font-weight: 800;
        box-shadow: 0 6px 20px var(--primary-glow);
        transform: translateY(16px) scale(0.9);
        transition:
          opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.25s ease;
      }
      #btn-back-top:hover {
        transform: translateY(-4px) scale(1.08);
        box-shadow: 0 10px 26px var(--primary-glow);
      }
      #btn-back-top:active {
        transform: translateY(0) scale(0.94);
      }

      .stats-badge {
        font-size: 0.82rem;
        color: var(--text-sub);
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }

      /* NÚT XEM PASS TRONG TỪNG DÒNG */
      .btn-toggle-row-eye {
        position: absolute;
        right: 6px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.85rem;
        padding: 4px;
        opacity: 0.65;
        transition:
          opacity 0.2s,
          transform 0.15s;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
      }
      .btn-toggle-row-eye:hover {
        opacity: 1;
        transform: scale(1.15);
        color: #fff;
      }

      /* NÚT ADMIN & ÂM THANH TRÊN HEADER */
      .btn-admin-glow {
        background: linear-gradient(
          135deg,
          rgba(234, 179, 8, 0.2),
          rgba(245, 158, 11, 0.25)
        ) !important;
        border: 1px solid #eab308 !important;
        color: #fde047 !important;
        box-shadow: 0 0 12px rgba(234, 179, 8, 0.25);
      }
      .btn-guest-glow {
        background: rgba(2, 6, 23, 0.6) !important;
        border: 1px solid rgba(148, 163, 184, 0.2) !important;
        color: #94a3b8 !important;
      }
      /* NÚT KHÓA KHẨN CẤP */
      .btn-emergency {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.45);
        color: #fca5a5;
        border-radius: 10px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .btn-emergency:hover {
        background: rgba(239, 68, 68, 0.3);
        border-color: #ef4444;
        color: #fff;
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
      }
      .btn-emergency.is-locked {
        background: linear-gradient(135deg, #dc2626, #991b1b) !important;
        border-color: #f87171 !important;
        color: #fff !important;
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.6) !important;
        animation: emergencyLockPulse 1.8s ease-in-out infinite;
      }
      @keyframes emergencyLockPulse {
        0%,
        100% {
          box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
          filter: brightness(1);
        }
        50% {
          box-shadow:
            0 0 20px rgba(239, 68, 68, 0.95),
            0 0 35px rgba(239, 68, 68, 0.4);
          filter: brightness(1.2);
        }
      }

      /* BANNER CẢNH BÁO KHÓA KHẨN CẤP */
      .emergency-banner {
        background: linear-gradient(
          90deg,
          rgba(220, 38, 38, 0.22) 0%,
          rgba(15, 23, 42, 0.92) 100%
        );
        border: 1px solid rgba(239, 68, 68, 0.45);
        border-left: 4px solid #ef4444;
        border-radius: 12px;
        padding: 11px 16px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 4px 18px rgba(220, 38, 38, 0.22);
        animation: emergencyGlow 3s ease-in-out infinite;
      }
      @keyframes emergencyGlow {
        0%,
        100% {
          border-color: rgba(239, 68, 68, 0.45);
        }
        50% {
          border-color: rgba(239, 68, 68, 0.85);
          box-shadow: 0 0 22px rgba(239, 68, 68, 0.35);
        }
      }

      /* ========================================================
         BẢNG MÁY TÍNH (> 820px) - MẪU 1 VỚI CÁCH DÒNG NHỎ (ROW SPACING)
         ======================================================== */
      .desktop-table-wrap {
        display: block;
        border: none;
        overflow-x: auto;
        box-shadow: none;
        padding-bottom: 8px;
      }

      .acc-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 7px; /* Cách dòng 7px tạo khoảng hở phân biệt rõ ràng giữa các Acc */
        text-align: left;
        font-size: 0.9rem;
      }

      .acc-table th {
        background: transparent;
        color: #94a3b8;
        font-weight: 800;
        padding: 9px 12px;
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        white-space: nowrap;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
      }

      /* DÒNG TIÊU ĐỀ NHÓM RANK: PHÁT SÁNG THỞ ĐỒNG BỘ CÙNG MÀU RANK */
      .acc-table tbody tr.acc-group-header-row td {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        animation: rankGlowBreath 4.2s ease-in-out infinite;
        transition:
          box-shadow 0.3s ease,
          filter 0.3s ease;
      }

      .rank-group-banner {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        animation: rankGlowBreath 4.2s ease-in-out infinite;
        transition:
          box-shadow 0.3s ease,
          filter 0.3s ease;
      }

      /* HIỆU ỨNG THỞ NHẤP NHÁY PHÁT SÁNG ĐỒNG BỘ THEO MÀU RANK (4.2s) */
      @keyframes rankGlowBreath {
        0%,
        100% {
          box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.35),
            0 0 0 rgba(255, 255, 255, 0);
          filter: brightness(0.97);
        }
        50% {
          box-shadow:
            0 6px 24px rgba(0, 0, 0, 0.45),
            0 0 16px var(--rank-accent, rgba(56, 189, 248, 0.5));
          filter: brightness(1.1);
        }
      }

      /* Đảm bảo nội dung chữ luôn nổi bật, KHÔNG đè lên track hiệu ứng tuyết rơi */
      .acc-table tbody tr.acc-group-header-row td > *:not(.rank-weather-track),
      .rank-group-banner > *:not(.rank-weather-track) {
        position: relative;
        z-index: 4;
      }

      /* CHỮ TIÊU ĐỀ NHÓM RANK: NHẤP NHÁY ĐỒNG BỘ CHUNG VỚI MÀU CỦA DÒNG */
      .rank-title-text {
        font-weight: 800;
        display: inline-block;
        animation: rankTitleColorSync 4.2s ease-in-out infinite;
      }

      @keyframes rankTitleColorSync {
        0%,
        100% {
          color: #f8fafc;
          text-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
          opacity: 0.92;
        }
        50% {
          color: var(--rank-accent, #38bdf8);
          text-shadow:
            0 0 10px var(--rank-accent, #38bdf8),
            0 0 20px var(--rank-accent, #38bdf8);
          opacity: 1;
        }
      }

      /* HUY HIỆU RANK: NHẤP NHÁY THỞ ĐỒNG BỘ CHUNG VỚI MÀU CỦA DÒNG */
      .acc-group-header-row .badge,
      .rank-group-banner .badge {
        font-size: 0.8rem;
        padding: 4px 10px;
        letter-spacing: 0.3px;
        animation: rankBadgeColorSync 4.2s ease-in-out infinite;
        transition: all 0.3s ease;
      }

      @keyframes rankBadgeColorSync {
        0%,
        100% {
          filter: brightness(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
          box-shadow: 0 0 0 rgba(255, 255, 255, 0);
          transform: scale(1);
        }
        50% {
          filter: brightness(1.3)
            drop-shadow(0 0 8px var(--rank-accent, currentColor));
          box-shadow: 0 0 14px var(--rank-accent, currentColor);
          transform: scale(1.03);
        }
      }

      /* ========================================================
         HIỆU ỨNG LÁ RƠI MỜ ẢO NHẸ NHÀNG (GENTLE FALLING LEAVES)
         ======================================================== */
      .rank-weather-track {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        overflow: hidden !important;
        z-index: 1 !important;
        display: block !important;
      }

      /* LÁ RƠI: MỜ MỜ, ÊM Ả, THOANG THOẢNG Ở HẬU CẢNH */
      .rank-drop {
        position: absolute;
        top: -14px;
        pointer-events: none;
        user-select: none;
        font-size: 13px;
        line-height: 1;
        opacity: 0.35;
        filter: opacity(0.38) brightness(1.1)
          drop-shadow(0 0 3px var(--rank-accent, rgba(255, 255, 255, 0.25)));
        will-change: transform, opacity;
      }

      /* PHÂN BỐ THƯA THỚT (CHỈ 7 LÁ ĐỀU KHẮP DẢI) VÀ RƠI CHẬM RÃI 6.5s - 8.5s */
      .rank-drop.d1 {
        left: 7%;
        font-size: 12px;
        animation: rankLeafFall1 7.2s ease-in-out -1.5s infinite;
      }
      .rank-drop.d2 {
        left: 22%;
        font-size: 14px;
        animation: rankLeafFall2 8s ease-in-out -4s infinite;
      }
      .rank-drop.d3 {
        left: 37%;
        font-size: 11px;
        animation: rankLeafFall1 6.8s ease-in-out -2.2s infinite;
      }
      .rank-drop.d4 {
        left: 51%;
        font-size: 13px;
        animation: rankLeafFall2 8.5s ease-in-out -5.5s infinite;
      }
      .rank-drop.d5 {
        left: 66%;
        font-size: 12px;
        animation: rankLeafFall1 7.6s ease-in-out -0.8s infinite;
      }
      .rank-drop.d6 {
        left: 81%;
        font-size: 14px;
        animation: rankLeafFall2 8.2s ease-in-out -3.3s infinite;
      }
      .rank-drop.d7 {
        left: 93%;
        font-size: 12px;
        animation: rankLeafFall1 7s ease-in-out -6.1s infinite;
      }

      /* QUỸ ĐẠO LÁ RƠI 1: LẮC LƯ NHẸ NHÀNG, MỜ MỜ ÊM DỊU */
      @keyframes rankLeafFall1 {
        0% {
          top: -14px;
          transform: translateX(0) rotate(0deg);
          opacity: 0;
        }
        20% {
          opacity: 0.3;
        }
        50% {
          transform: translateX(12px) rotate(22deg);
          opacity: 0.4;
        }
        80% {
          opacity: 0.3;
        }
        100% {
          top: calc(100% + 4px);
          transform: translateX(-8px) rotate(-15deg);
          opacity: 0;
        }
      }

      /* QUỸ ĐẠO LÁ RƠI 2: ĐU ĐƯA CHẬM RÃI SANG PHẢI RỒI TRÁI */
      @keyframes rankLeafFall2 {
        0% {
          top: -14px;
          transform: translateX(0) rotate(0deg);
          opacity: 0;
        }
        20% {
          opacity: 0.28;
        }
        50% {
          transform: translateX(-14px) rotate(-25deg);
          opacity: 0.38;
        }
        80% {
          opacity: 0.28;
        }
        100% {
          top: calc(100% + 4px);
          transform: translateX(10px) rotate(18deg);
          opacity: 0;
        }
      }

      .acc-table tbody tr.acc-row-item {
        background: rgba(15, 23, 42, 0.62);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
        opacity: 0.88;
        transform: translateY(8px);
        transition:
          transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
          background 0.2s ease,
          box-shadow 0.22s ease;
        will-change: transform, opacity;
      }

      .acc-table tbody tr.acc-row-item.row-scrolled-in {
        opacity: 1;
        transform: translateY(0);
      }

      .acc-table tbody tr.acc-row-item:hover {
        background: rgba(30, 41, 59, 0.88) !important;
        transform: translateY(-2.5px) scale(1.002) !important;
        box-shadow:
          0 6px 20px rgba(0, 0, 0, 0.45),
          0 0 14px var(--rank-accent, rgba(56, 189, 248, 0.22)) !important;
      }

      /* QUÁN TÍNH UYỂN CHUYỂN KHI LĂN CUỘN LÊN / XUỐNG: CÁC DÒNG LƯỚT NHẸ DỊU DÀNG */
      body.is-page-scrolling-down
        .acc-table
        tbody
        tr.acc-row-item.row-scrolled-in {
        transform: translateY(-2px);
      }
      body.is-page-scrolling-up
        .acc-table
        tbody
        tr.acc-row-item.row-scrolled-in {
        transform: translateY(2px);
      }
      body.is-page-scrolling-down .acc-row-item:hover,
      body.is-page-scrolling-up .acc-row-item:hover {
        pointer-events: none;
      }

      .acc-table td {
        padding: 8px 12px;
        vertical-align: middle;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-left: none;
        border-right: none;
        transition: background 0.15s;
      }

      .acc-table tbody tr.acc-row-item td:first-child {
        border-top-left-radius: 9px;
        border-bottom-left-radius: 9px;
        border-left: 4px solid var(--rank-accent, rgba(255, 255, 255, 0.15)) !important;
      }

      .acc-table tbody tr.acc-row-item td:last-child {
        border-top-right-radius: 9px;
        border-bottom-right-radius: 9px;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
      }

      /* VIỀN NHẬN DIỆN MÀU THEO RANK (MỖI RANK 1 MÀU CHUẨN 4PX RÕ RÀNG) */
      .rank-border-bk td:first-child {
        border-left: 4px solid #e2e8f0 !important;
      }
      .rank-border-kc td:first-child {
        border-left: 4px solid #00d2ff !important;
      }
      .rank-border-ta td:first-child {
        border-left: 4px solid #c084fc !important;
      }
      .rank-border-ct td:first-child {
        border-left: 4px solid #f97316 !important;
      }
      .rank-border-dct td:first-child {
        border-left: 4px solid #eab308 !important;
      }
      .rank-border-khac td:first-child {
        border-left: 4px solid #64748b !important;
      }
      .rank-border-recent td:first-child {
        border-left: 4px solid #6366f1 !important;
      }

      /* ĐỔ MÀU DỊU NHẸ KHI BỊ BAN */
      .acc-table tr.is-banned {
        background: rgba(220, 38, 38, 0.08) !important;
      }
      .acc-table tr.is-banned:hover {
        background: rgba(220, 38, 38, 0.15) !important;
      }
      .acc-table tr.is-banned td:first-child {
        border-left: 3px solid #ef4444 !important;
      }
      .acc-table tr.is-banned td {
        border-top-color: rgba(244, 63, 94, 0.12);
        border-bottom-color: rgba(244, 63, 94, 0.12);
      }
      .acc-table tr.is-banned .tbl-input {
        background: transparent !important;
        border-color: transparent !important;
        color: #fca5a5 !important;
      }
      .acc-table tr.is-banned .tbl-input:hover {
        background: rgba(239, 68, 68, 0.1) !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
      }

      /* Ô DỮ LIỆU BẢNG GHOST (KHÔNG ĐÓNG KHUNG, CHỮ TỰ NHIÊN, HIỆN VIỀN KHI DI CHUỘT / EDIT) */
      .tbl-input {
        padding: 6px 8px !important;
        font-size: 0.88rem !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        color: #f1f5f9 !important;
        font-family: "JetBrains Mono", monospace !important;
        width: 100% !important;
        outline: none !important;
        box-shadow: none !important;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
      }

      .tbl-input:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
      }

      .tbl-input:focus {
        border-color: #38bdf8 !important;
        background: rgba(2, 6, 23, 0.9) !important;
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
      }

      .badge {
        font-size: 0.72rem;
        font-weight: 800;
        padding: 5px 8px;
        border-radius: 6px;
        text-transform: uppercase;
        display: inline-block;
        white-space: nowrap;
      }

      .badge-banned {
        background: #b91c1c;
        color: #ffffff;
        border: 1px solid #ef4444;
        box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
      }

      .badge-active {
        background: rgba(16, 185, 129, 0.15);
        color: #34d399;
        border: 1px solid rgba(16, 185, 129, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        vertical-align: middle;
      }

      /* HUY HIỆU & HIỆU ỨNG TÀI KHOẢN VỪA MỞ BAN */
      .badge-just-unbanned {
        background: linear-gradient(
          135deg,
          rgba(16, 185, 129, 0.28) 0%,
          rgba(56, 189, 248, 0.22) 100%
        );
        color: #6ee7b7;
        border: 1.5px solid #10b981;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
        font-weight: 800;
        letter-spacing: 0.3px;
        animation: justUnbanGlow 2.4s ease-in-out infinite;
        cursor: pointer;
      }

      @keyframes justUnbanGlow {
        0%,
        100% {
          box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
          filter: brightness(1);
        }
        50% {
          box-shadow:
            0 0 16px rgba(16, 185, 129, 0.8),
            0 0 22px rgba(56, 189, 248, 0.5);
          filter: brightness(1.15);
        }
      }

      .acc-table tr.is-just-unbanned {
        background: rgba(16, 185, 129, 0.08) !important;
      }
      .acc-table tr.is-just-unbanned:hover {
        background: rgba(16, 185, 129, 0.14) !important;
      }
      .acc-table tr.is-just-unbanned td:first-child {
        border-left: 4px solid #10b981 !important;
      }
      .m-row-card.is-just-unbanned {
        border-left: 4px solid #10b981 !important;
        background: rgba(16, 185, 129, 0.08) !important;
      }

      /* CHẤM XANH NHẤP NHÁY PHÁT SÁNG (PULSING ACTIVE DOT) */
      .status-dot-active {
        width: 7.5px;
        height: 7.5px;
        background-color: #10b981;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        flex-shrink: 0;
        box-shadow: 0 0 8px #10b981;
        animation: statusDotGlow 1.8s ease-in-out infinite;
      }

      .status-dot-active::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.6);
        animation: statusDotRipple 1.8s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
        pointer-events: none;
      }

      @keyframes statusDotGlow {
        0%,
        100% {
          background-color: #10b981;
          box-shadow: 0 0 6px #10b981;
          opacity: 0.85;
          transform: scale(0.95);
        }
        50% {
          background-color: #34d399;
          box-shadow:
            0 0 12px #34d399,
            0 0 18px rgba(52, 211, 153, 0.6);
          opacity: 1;
          transform: scale(1.2);
        }
      }

      @keyframes statusDotRipple {
        0% {
          transform: scale(0.8);
          opacity: 0.85;
        }
        70% {
          transform: scale(2.3);
          opacity: 0;
        }
        100% {
          transform: scale(2.5);
          opacity: 0;
        }
      }

      /* HUY HIỆU RANK MẪU 1 CHUẨN MÀU PHÂN BIỆT RÕ RÀNG */
      .badge-rank-bk {
        background: rgba(226, 232, 240, 0.15);
        color: #f1f5f9;
        border: 1px solid rgba(226, 232, 240, 0.45);
        box-shadow: 0 0 8px rgba(226, 232, 240, 0.2);
      }
      .badge-rank-kc {
        background: rgba(0, 210, 255, 0.15);
        color: #00d2ff;
        border: 1px solid rgba(0, 210, 255, 0.45);
        box-shadow: 0 0 8px rgba(0, 210, 255, 0.25);
      }
      .badge-rank-ta {
        background: rgba(168, 85, 247, 0.18);
        color: #d8b4fe;
        border: 1px solid rgba(168, 85, 247, 0.45);
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);
      }
      .badge-rank-ct {
        background: rgba(249, 115, 22, 0.18);
        color: #fdba74;
        border: 1px solid rgba(249, 115, 22, 0.45);
        box-shadow: 0 0 8px rgba(249, 115, 22, 0.25);
      }
      .badge-rank-dct {
        background: rgba(234, 179, 8, 0.2);
        color: #fef08a;
        border: 1px solid rgba(234, 179, 8, 0.55);
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
      }
      .badge-rank-khac {
        background: rgba(100, 116, 139, 0.15);
        color: #cbd5e1;
        border: 1px solid rgba(100, 116, 139, 0.35);
      }

      /* KHỐI TIÊU ĐỀ PHÂN NHÓM THEO RANK (MOBILE) */
      .rank-group-banner {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        margin: 18px 0 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 4px solid var(--primary);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
      }
      .rank-group-banner:first-child {
        margin-top: 4px;
      }
      .rank-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 0.92rem;
        color: #fff;
      }
      .rank-group-count {
        font-size: 0.78rem;
        color: var(--text-muted);
        background: rgba(0, 0, 0, 0.3);
        padding: 3px 9px;
        border-radius: 10px;
        font-weight: 700;
      }

      /* NÚT SAO CHÉP MẪU MỚI: NỔI BẬT, DỄ NHÌN, CHỮ TRẮNG RÕ NÉT */
      .btn-copy-action {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.22);
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .btn-copy-action:hover {
        filter: brightness(1.18);
        border-color: rgba(255, 255, 255, 0.45);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
      }
      .btn-copy-action:active {
        transform: scale(0.96);
      }
      .btn-copy-action.btn-copy-locked {
        color: #fca5a5 !important;
        text-shadow: none !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
      }
      .btn-copy-action.copied {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: #fff !important;
        border-color: #10b981 !important;
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.5) !important;
        transform: scale(1.02);
      }

      .btn-del-action {
        background: transparent;
        color: #64748b;
        border: none;
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.18s ease;
      }
      .btn-del-action:hover {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        transform: scale(1.1);
      }
      .btn-del-action:active {
        transform: scale(0.95);
      }

      .btn-reset-tag {
        background: rgba(51, 65, 85, 0.8);
        color: #cbd5e1;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 3px 8px;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s ease;
      }
      .btn-reset-tag:hover {
        background: #dc2626;
        color: #fff;
        transform: translateY(-1px);
      }

      .btn-remove-recent {
        background: rgba(244, 63, 94, 0.12);
        color: #fb7185;
        border: 1px solid rgba(244, 63, 94, 0.25);
        border-radius: 8px;
        padding: 7px 11px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .btn-remove-recent:hover {
        background: rgba(244, 63, 94, 0.28);
        color: #fff;
        border-color: #f43f5e;
        transform: translateY(-2px);
      }
      .btn-remove-recent:active {
        transform: scale(0.95);
      }

      /* ========================================================
         GIAO DIỆN MOBILE - MẪU 1 VỚI VIỀN MÀU THEO RANK
         ======================================================== */
      .mobile-card-list {
        display: none;
        flex-direction: column;
        gap: 12px;
      }

      .m-row-card {
        background: rgba(15, 23, 42, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 13px;
        display: flex;
        flex-direction: column;
        gap: 9px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0.88;
        transform: translateY(8px);
        transition:
          transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
          background 0.2s ease,
          box-shadow 0.2s ease,
          border-color 0.2s ease;
        will-change: transform, opacity;
      }

      .m-row-card.row-scrolled-in {
        opacity: 1;
        transform: translateY(0);
      }

      body.is-page-scrolling-down .m-row-card.row-scrolled-in {
        transform: translateY(-2px);
      }
      body.is-page-scrolling-up .m-row-card.row-scrolled-in {
        transform: translateY(2px);
      }

      .m-row-card:active {
        transform: scale(0.985);
      }

      /* VIỀN MOBILE THEO RANK PHÂN BIỆT RÕ RÀNG */
      .m-row-card.rank-border-bk {
        border-left: 3px solid #e2e8f0 !important;
      }
      .m-row-card.rank-border-kc {
        border-left: 3px solid #00d2ff !important;
      }
      .m-row-card.rank-border-ta {
        border-left: 3px solid #c084fc !important;
      }
      .m-row-card.rank-border-ct {
        border-left: 3px solid #f97316 !important;
      }
      .m-row-card.rank-border-dct {
        border-left: 3px solid #eab308 !important;
      }
      .m-row-card.rank-border-khac {
        border-left: 3px solid #64748b !important;
      }
      .m-row-card.rank-border-recent {
        border-left: 3px solid #6366f1 !important;
      }

      .m-row-card.is-banned {
        background: rgba(220, 38, 38, 0.08) !important;
        border: 1px solid rgba(239, 68, 68, 0.2) !important;
        border-left: 3px solid #ef4444 !important;
      }

      .m-card-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
      }

      .m-stt-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }

      .m-stt {
        font-size: 0.8rem;
        font-weight: 800;
        color: var(--text-muted);
        background: rgba(0, 0, 0, 0.35);
        padding: 2px 7px;
        border-radius: 5px;
      }

      .m-history-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.04);
        padding: 5px 8px;
        border-radius: 6px;
        font-size: 0.75rem;
      }

      .m-creds-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .m-creds-row .tbl-input,
      .m-action-row .tbl-input {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
      }
      .m-creds-row .tbl-input:focus,
      .m-action-row .tbl-input:focus {
        background: rgba(2, 6, 23, 0.95) !important;
        border-color: #38bdf8 !important;
      }

      .m-action-row {
        display: grid;
        grid-template-columns: 65px 65px 75px 1fr 38px;
        gap: 6px;
        align-items: center;
      }

      .m-btn-copy {
        width: 100%;
        padding: 8px 12px;
        font-size: 0.82rem;
        font-weight: 800;
        background: var(--primary-gradient);
        color: #fff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        white-space: nowrap;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .m-btn-copy.btn-copy-locked {
        color: #fca5a5 !important;
        text-shadow: none !important;
      }
      .m-btn-copy:active {
        transform: scale(0.95);
      }
      .m-btn-copy.copied {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.6) !important;
      }

      .m-btn-del {
        width: 100%;
        height: 100%;
        min-height: 34px;
        background: transparent;
        color: #64748b;
        border: none;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.18s ease;
      }
      .m-btn-del:hover {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
      }
      .m-btn-del:active {
        transform: scale(0.95);
      }

      .m-btn-remove-recent {
        width: 100%;
        height: 100%;
        min-height: 38px;
        background: rgba(244, 63, 94, 0.18);
        color: #fb7185;
        border: 1px solid rgba(244, 63, 94, 0.35);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s ease;
      }
      .m-btn-remove-recent:hover {
        background: #f43f5e;
        color: #fff;
      }
      .m-btn-remove-recent:active {
        transform: scale(0.95);
      }

      /* ========================================================
         THU GỌN / MỞ RỘNG NHÓM RANK (COLLAPSIBLE ACCORDION GROUPS)
         ======================================================== */
      .clickable-group-header {
        cursor: pointer !important;
        user-select: none !important;
        transition:
          filter 0.2s ease,
          transform 0.18s ease;
      }
      .clickable-group-header:hover {
        filter: brightness(1.15);
      }
      .clickable-group-header.is-collapsed {
        filter: brightness(0.9);
      }
      .clickable-group-header.is-collapsed:hover {
        filter: brightness(1.1);
      }
      .clickable-group-header .group-collapse-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.35);
        font-size: 0.72rem;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .clickable-group-header.is-collapsed .group-collapse-icon {
        transform: rotate(-90deg);
      }

      .clickable-group-banner {
        cursor: pointer !important;
        user-select: none !important;
        transition: filter 0.2s ease;
      }
      .clickable-group-banner:hover {
        filter: brightness(1.15);
      }
      .clickable-group-banner.is-collapsed {
        filter: brightness(0.9);
      }
      .clickable-group-banner.is-collapsed:hover {
        filter: brightness(1.1);
      }
      .clickable-group-banner .group-collapse-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.35);
        font-size: 0.68rem;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .clickable-group-banner.is-collapsed .group-collapse-icon {
        transform: rotate(-90deg);
      }

      .btn-toggle-all-rank-groups {
        flex-shrink: 0;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .btn-toggle-all-rank-groups:hover {
        background: rgba(14, 165, 233, 0.25) !important;
        color: #38bdf8 !important;
        border-color: #38bdf8 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
      }
      .btn-toggle-all-rank-groups:active {
        transform: scale(0.95);
      }

      /* BANNER PHẢN HỒI THÊM ACC THÀNH CÔNG TẠI FORM */
      #add-success-banner {
        margin-top: 10px;
        padding: 9px 14px;
        border-radius: 10px;
        background: linear-gradient(
          90deg,
          rgba(16, 185, 129, 0.16) 0%,
          rgba(15, 23, 42, 0.85) 100%
        );
        border: 1px solid rgba(16, 185, 129, 0.38);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        animation: notiPanelFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      .btn-jump-added {
        padding: 5px 12px;
        border-radius: 7px;
        background: linear-gradient(
          135deg,
          rgba(14, 165, 233, 0.22),
          rgba(99, 102, 241, 0.25)
        );
        border: 1px solid rgba(56, 189, 248, 0.45);
        color: #38bdf8;
        font-size: 0.76rem;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
      }
      .btn-jump-added:hover {
        background: linear-gradient(135deg, #0284c7, #6366f1);
        color: #ffffff;
        border-color: transparent;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
      }

      /* NÚT HÀNH ĐỘNG TRONG TOAST GIỮA MÀN HÌNH */
      .toast-center-action-btn {
        margin-top: 8px;
        padding: 7px 18px;
        border-radius: 9px;
        background: linear-gradient(135deg, #0284c7, #38bdf8);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #ffffff;
        font-size: 0.82rem;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
      }
      .toast-center-action-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.12);
        box-shadow: 0 6px 18px rgba(56, 189, 248, 0.55);
      }
      .toast-center-action-btn:active {
        transform: scale(0.96);
      }

      /* RESPONSIVE MOBILE & TỐI ƯU HIỆU NĂNG CHỐNG NÓNG MÁY */
      @media (max-width: 820px) {
        /* 1. TỐI ƯU GPU & CPU: TẮT HIỆU ỨNG RƠI LÁ & BLUR NẶNG ĐỂ MÁY MÁT LẠNH */
        .rank-weather-track {
          display: none !important; /* Tắt chuyển động lá rơi liên tục trên mobile */
        }

        .m-row-card {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          background: rgba(
            15,
            23,
            42,
            0.95
          ) !important; /* Dùng nền đặc nhẹ nhàng, triệt tiêu gánh nặng GPU */
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
        }

        .acc-group-header-row td,
        .rank-group-banner {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          animation: none !important; /* Tắt animation thở lặp lại vô tận */
        }

        /* 2. THANH CHUYỂN KHO TÀI KHOẢN TRÊN MOBILE */
        .storage-switcher-bar {
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin: 10px 0 14px;
        }

        .storage-tab-btn {
          padding: 10px 10px;
          gap: 8px;
          border-radius: 12px;
        }

        .storage-tab-icon {
          font-size: 1.35rem;
        }

        .storage-tab-title {
          font-size: 0.82rem;
        }

        .storage-tab-sub {
          display: none; /* Ẩn dòng chú thích phụ trên mobile để cực kỳ gọn gàng */
        }

        .storage-tab-pill {
          font-size: 0.7rem;
          padding: 2px 6px;
        }

        body {
          padding: 10px 8px 0;
          max-width: 100vw;
          overflow-x: hidden;
        }

        .app-layout {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
          box-sizing: border-box;
        }

        .desktop-table-wrap {
          display: none !important;
        }

        .mobile-card-list {
          display: flex !important;
        }

        .app-layout > header {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          grid-template-areas:
            "left action"
            "brand brand" !important;
          padding: 10px 0 18px !important;
          align-items: center !important;
          gap: 14px 0 !important;
          background: transparent !important;
          border: none !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
          margin-top: 6px !important;
          margin-bottom: 28px !important;
          box-shadow: none !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }

        .header-left {
          grid-area: left !important;
          width: 100% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          gap: 8px !important;
        }
        .header-left .btn {
          width: auto !important;
          padding: 8px 12px !important;
          font-size: 0.8rem !important;
          justify-content: center !important;
        }

        .header-action-group {
          grid-area: action !important;
          width: 100% !important;
          display: flex !important;
          justify-content: flex-end !important;
          align-items: center !important;
          gap: 8px !important;
          margin-top: 0 !important;
        }

        /* KHỐI BRAND HERO TRÊN MOBILE: XẾP DỌC CĂN GIỮA CHUẨN XÁC 100% MÀN HÌNH */
        .header-brand {
          grid-area: brand !important;
          grid-column: 1 / -1 !important;
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          padding: 6px 0 !important;
          margin: 0 auto !important;
          background: transparent !important;
          border: none !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 7px !important;
          text-align: center !important;
          overflow: visible !important;
        }

        .header-brand-info,
        .header-brand > div:last-child {
          min-width: 0 !important;
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
          gap: 4px !important;
          overflow: visible !important;
          margin: 0 auto !important;
        }

        .header-brand .logo-box {
          width: 48px !important;
          height: 48px !important;
          border-radius: 50% !important;
          border: 2px solid #38bdf8 !important;
          box-shadow:
            0 0 14px rgba(56, 189, 248, 0.5),
            0 2px 8px rgba(0, 0, 0, 0.5) !important;
          flex-shrink: 0 !important;
          margin: 0 auto !important;
        }

        .header-brand h1 {
          font-size: 1.12rem !important;
          font-weight: 900 !important;
          letter-spacing: 0.2px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          flex-wrap: nowrap !important;
          gap: 4px !important;
          line-height: 1.25 !important;
          min-height: auto !important;
          max-width: 100% !important;
          white-space: nowrap !important;
          text-align: center !important;
          margin: 0 auto !important;
        }

        .header-brand h1 #brand-typewriter-text {
          font-size: 1.12rem !important;
          font-weight: 900 !important;
          color: #ffffff !important;
        }

        .header-brand h1 #brand-typewriter-text span {
          font-size: 0.92rem !important;
          color: #38bdf8 !important;
          font-weight: 800 !important;
          text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
        }

        .header-brand h1 .typewriter-cursor {
          font-size: 1.15rem !important;
          margin-left: 2px !important;
        }

        .header-brand .verified-tick-badge {
          margin-left: 3px !important;
          width: 20px !important;
          height: 20px !important;
          box-shadow: 0 0 10px rgba(14, 165, 233, 0.7) !important;
          flex-shrink: 0 !important;
        }

        .header-sub {
          margin-top: 3px !important;
          width: 100% !important;
          max-width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }

        .header-sub .stats-badge {
          display: inline-flex !important;
          flex-wrap: wrap !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 4px 10px !important;
          font-size: 0.78rem !important;
          background: rgba(2, 6, 23, 0.7) !important;
          padding: 4px 14px !important;
          border-radius: 999px !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          text-align: center !important;
          margin: 0 auto !important;
          width: fit-content !important;
        }

        .header-sub #stat-count {
          font-size: 0.82rem !important;
          font-weight: 800 !important;
          color: #fff !important;
          white-space: nowrap !important;
        }

        .header-sub #stat-active {
          font-size: 0.78rem !important;
          font-weight: 800 !important;
          color: #34d399 !important;
          text-shadow: 0 0 8px rgba(16, 185, 129, 0.45) !important;
          display: inline-flex !important;
          align-items: center !important;
          white-space: nowrap !important;
        }

        .header-sub #stat-ban {
          font-size: 0.78rem !important;
          font-weight: 800 !important;
          color: #fb7185 !important;
          text-shadow: 0 0 8px rgba(244, 63, 94, 0.45) !important;
          display: inline-flex !important;
          align-items: center !important;
          white-space: nowrap !important;
        }

        .option-menu-dropdown {
          width: 295px !important;
          right: 0 !important;
        }

        .toolbar {
          padding: 8px 0;
          margin-top: 10px;
          margin-bottom: 18px;
        }
      }

      /* MODAL POPUP */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 99999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .modal-overlay.show {
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      .modal-card {
        background: #161e31;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        width: 100%;
        max-width: 380px;
        padding: 24px 20px;
        text-align: center;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
        transform: scale(0.9) translateY(16px);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .modal-overlay.show .modal-card {
        transform: scale(1) translateY(0);
      }

      .modal-icon {
        font-size: 2.6rem;
        margin-bottom: 8px;
        animation: pulseIcon 1.5s infinite;
      }
      @keyframes pulseIcon {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
      }
      .modal-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 6px;
      }
      .modal-msg {
        font-size: 0.88rem;
        color: #cbd5e1;
        line-height: 1.5;
        margin-bottom: 22px;
      }
      .modal-btns {
        display: flex;
        gap: 10px;
      }

      .modal-btn-act {
        flex: 1;
        padding: 10px 14px;
        border-radius: 10px;
        border: none;
        font-weight: 700;
        font-size: 0.88rem;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .modal-btn-act:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
      }
      .modal-btn-act:active {
        transform: scale(0.96);
      }

      .btn-m-confirm {
        background: var(--primary-gradient);
        color: #fff;
        box-shadow: 0 4px 14px var(--primary-glow);
      }
      .btn-m-danger {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: #fff;
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
      }
      .btn-m-cancel {
        background: #334155;
        color: #e2e8f0;
      }

      /* TOAST THÔNG BÁO HIỆN ĐẠI CÓ TICK XANH & FADE OUT */
      #toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.85);
        background: rgba(15, 23, 42, 0.96);
        border: 1.5px solid rgba(16, 185, 129, 0.6);
        color: #fff;
        padding: 24px 34px;
        border-radius: 20px;
        box-shadow:
          0 24px 60px rgba(0, 0, 0, 0.8),
          0 0 35px rgba(16, 185, 129, 0.35);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        opacity: 0;
        pointer-events: none;
        transition:
          transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 9999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
        min-width: 250px;
        max-width: 90vw;
        user-select: none;
      }

      #toast.show {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
      }

      /* HIỆU ỨNG ĐỘNG NÚT TICK DONE (ANIMATED CHECKMARK SVG) */
      .tick-done-circle {
        width: 58px;
        height: 58px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
      }

      .tick-done-svg {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: block;
        stroke-width: 3.5;
        stroke: #10b981;
        stroke-miterlimit: 10;
        animation:
          tickDoneFill 0.4s ease-in-out 0.4s forwards,
          tickDoneScale 0.35s ease-in-out 0.8s both;
      }

      .tick-done-circle-bg {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 3.5;
        stroke-miterlimit: 10;
        stroke: #10b981;
        fill: none;
        animation: tickDoneStroke 0.55s cubic-bezier(0.65, 0, 0.45, 1) forwards;
      }

      .tick-done-check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        stroke-linecap: round;
        stroke-linejoin: round;
        animation: tickDoneStrokeCheck 0.38s cubic-bezier(0.65, 0, 0.45, 1)
          0.42s forwards;
      }

      @keyframes tickDoneStroke {
        100% {
          stroke-dashoffset: 0;
        }
      }

      @keyframes tickDoneStrokeCheck {
        100% {
          stroke-dashoffset: 0;
        }
      }

      @keyframes tickDoneScale {
        0%,
        100% {
          transform: none;
        }
        50% {
          transform: scale3d(1.15, 1.15, 1);
        }
      }

      @keyframes tickDoneFill {
        100% {
          box-shadow: inset 0 0 0 35px rgba(16, 185, 129, 0.16);
        }
      }

      .toast-center-title {
        font-size: 1.12rem;
        font-weight: 900;
        color: #ffffff;
        letter-spacing: 0.6px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
      }

      .toast-center-sub {
        font-size: 0.85rem;
        color: #a7f3d0;
        font-weight: 700;
        max-width: 300px;
        line-height: 1.4;
      }

      .toast-msg-body {
        font-size: 0.95rem;
        font-weight: 800;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
      }

      /* DẤU TICK XANH XÁC MINH (VERIFIED BADGE) Ở TIÊU ĐỀ */
      .verified-tick-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg, #0284c7, #0ea5e9);
        color: #ffffff;
        border-radius: 50%;
        margin-left: 8px;
        box-shadow: 0 0 14px rgba(14, 165, 233, 0.85);
        flex-shrink: 0;
        vertical-align: middle;
        transition: transform 0.2s ease;
      }
      .verified-tick-badge:hover {
        transform: scale(1.15);
      }

      /* NÚT CUỘN LÊN ĐẦU TRANG MƯỢT MÀ (FLOATING BACK-TO-TOP) */
      #btn-back-top {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(15, 23, 42, 0.92),
          rgba(30, 27, 75, 0.95)
        );
        border: 1.5px solid rgba(56, 189, 248, 0.45);
        color: #38bdf8;
        font-size: 1.15rem;
        font-weight: 900;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 8px 24px rgba(0, 0, 0, 0.5),
          0 0 16px rgba(56, 189, 248, 0.35);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px) scale(0.85);
        transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 9999;
      }
      #btn-back-top.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }
      #btn-back-top:hover {
        background: linear-gradient(135deg, #0284c7, #6366f1);
        color: #fff;
        border-color: #38bdf8;
        box-shadow: 0 10px 30px rgba(56, 189, 248, 0.65);
        transform: translateY(-3px) scale(1.08);
      }
      #btn-back-top:active {
        transform: scale(0.92);
      }

      /* ========================================================
         POPUP CHÀO MỪNG GIỮA MÀN HÌNH (LÀM MỜ NỀN BACKDROP)
         ======================================================== */
      .welcome-banner-overlay {
        position: fixed;
        inset: 0;
        background: rgba(4, 7, 15, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 9999999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        opacity: 0;
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .welcome-banner-overlay.show {
        display: flex;
        opacity: 1;
        pointer-events: auto;
      }

      .welcome-banner-overlay.hide {
        opacity: 0;
        pointer-events: none;
      }

      .welcome-banner-card {
        position: relative;
        width: 560px;
        max-width: 100%;
        background:
          radial-gradient(
            circle at 50% 0%,
            rgba(99, 102, 241, 0.22) 0%,
            rgba(15, 23, 42, 0.98) 75%
          ),
          linear-gradient(
            180deg,
            rgba(30, 27, 75, 0.6) 0%,
            rgba(15, 23, 42, 0.98) 100%
          );
        border: 1px solid rgba(168, 85, 247, 0.45);
        border-radius: 22px;
        box-shadow:
          0 25px 75px rgba(0, 0, 0, 0.9),
          0 0 50px rgba(139, 92, 246, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
        overflow: hidden;
        transform: scale(0.9) translateY(20px);
        opacity: 0;
        transition:
          transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.38s ease,
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }

      .welcome-banner-overlay.show .welcome-banner-card {
        transform: scale(1) translateY(0);
        opacity: 1;
      }

      .welcome-banner-overlay.hide .welcome-banner-card {
        transform: scale(0.92) translateY(12px);
        opacity: 0;
      }

      .welcome-banner-card:hover {
        border-color: rgba(56, 189, 248, 0.65);
        box-shadow:
          0 30px 85px rgba(0, 0, 0, 0.95),
          0 0 65px rgba(56, 189, 248, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }

      .welcome-close-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #94a3b8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
      }

      .welcome-close-btn:hover {
        background: rgba(239, 68, 68, 0.25);
        color: #fff;
        border-color: #ef4444;
        transform: scale(1.1);
      }

      .welcome-banner-content {
        padding: 26px 26px 20px;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      /* HERO HEADER TRUNG TÂM */
      .welcome-hero-header {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .welcome-icon-box {
        position: relative;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #020617;
        border: 2.2px solid #38bdf8;
        box-shadow:
          0 0 26px rgba(56, 189, 248, 0.65),
          0 0 45px rgba(168, 85, 247, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.85rem;
        margin-bottom: 12px;
        overflow: hidden;
        flex-shrink: 0;
        animation: welcomeIconFloat 3.5s ease-in-out infinite;
      }

      .welcome-icon-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

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

      .welcome-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-bottom: 6px;
        letter-spacing: 0.2px;
        line-height: 1.35;
      }

      .welcome-brand-name {
        background: linear-gradient(
          135deg,
          #38bdf8 0%,
          #a855f7 50%,
          #ec4899 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
      }

      .welcome-desc {
        font-size: 0.82rem;
        color: #94a3b8;
        line-height: 1.5;
        font-weight: 500;
        max-width: 480px;
        margin: 0 auto;
      }

      /* LƯỚI 2 CỘT THÔNG TIN ĐỐI XỨNG CÂN ĐỐI */
      .welcome-credit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .welcome-info-card {
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 14px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        transition: all 0.2s ease;
      }

      .welcome-info-card:hover {
        border-color: rgba(168, 85, 247, 0.45);
        background: rgba(30, 41, 59, 0.65);
        transform: translateY(-1px);
      }

      .welcome-tag-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        width: fit-content;
      }

      .welcome-tag-badge.author-badge {
        background: rgba(168, 85, 247, 0.18);
        color: #c084fc;
        border: 1px solid rgba(168, 85, 247, 0.35);
      }

      .welcome-tag-badge.tele-badge {
        background: rgba(14, 165, 233, 0.18);
        color: #38bdf8;
        border: 1px solid rgba(14, 165, 233, 0.35);
      }

      .welcome-info-body {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        min-height: 32px;
      }

      .welcome-author-name {
        font-weight: 800;
        font-size: 0.95rem;
        color: #ffffff;
      }

      .welcome-author-sub {
        font-size: 0.8rem;
        color: #94a3b8;
      }

      .welcome-tele-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 9px;
        background: linear-gradient(
          135deg,
          rgba(14, 165, 233, 0.2),
          rgba(99, 102, 241, 0.25)
        );
        border: 1px solid rgba(56, 189, 248, 0.4);
        color: #38bdf8;
        font-weight: 800;
        font-size: 0.84rem;
        text-decoration: none;
        transition: all 0.2s ease;
      }

      .welcome-tele-btn:hover {
        background: linear-gradient(135deg, #0284c7, #6366f1);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45);
        transform: translateY(-1px);
      }

      .welcome-tele-btn .tele-svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
      }

      .welcome-tele-btn .tele-arrow {
        font-size: 0.78rem;
        opacity: 0.8;
      }

      /* FOOTER CÂN ĐỐI 2 BÊN */
      .welcome-action-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
      }

      .welcome-timer-hint {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.76rem;
        color: #94a3b8;
        font-weight: 600;
      }

      .welcome-timer-hint .timer-dot {
        width: 6.5px;
        height: 6.5px;
        border-radius: 50%;
        background-color: #38bdf8;
        box-shadow: 0 0 8px #38bdf8;
        animation: timerDotPulse 1.5s infinite;
      }

      @keyframes timerDotPulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.35;
          transform: scale(0.85);
        }
      }

      .welcome-btn-confirm {
        background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
        color: #ffffff;
        border: none;
        border-radius: 11px;
        padding: 9px 22px;
        font-weight: 800;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.45);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .welcome-btn-confirm:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 22px rgba(139, 92, 246, 0.65);
        filter: brightness(1.1);
      }

      .welcome-btn-confirm:active {
        transform: scale(0.97);
      }

      /* THANH TIẾN TRÌNH ĐẾM NGƯỢC THỜI GIAN TỰ ẨN */
      .welcome-progress-track {
        position: relative;
        width: 100%;
        height: 3px;
        background: rgba(255, 255, 255, 0.08);
      }

      .welcome-progress-bar {
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, #38bdf8, #818cf8, #a855f7, #10b981);
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
      }

      @media (max-width: 600px) {
        .welcome-banner-card {
          border-radius: 18px;
          width: 95%;
        }
        .welcome-banner-content {
          padding: 22px 16px 16px;
          gap: 12px;
        }
        .welcome-icon-box {
          width: 54px;
          height: 54px;
          font-size: 1.55rem;
          margin-bottom: 8px;
        }
        .welcome-title {
          font-size: 1.05rem;
        }
        .welcome-desc {
          font-size: 0.76rem;
        }
        .welcome-credit-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .welcome-action-footer {
          flex-direction: column-reverse;
          gap: 10px;
        }
        .welcome-btn-confirm {
          width: 100%;
          justify-content: center;
          padding: 10px;
        }
      }

      /* ========================================================
         THANH CHÀO MỪNG NGƯỜI DÙNG Ở TRANG CHỦ & BANNER
         ======================================================== */
      .user-greeting-bar {
        background: linear-gradient(
          135deg,
          rgba(15, 23, 42, 0.7) 0%,
          rgba(30, 27, 75, 0.35) 50%,
          rgba(15, 23, 42, 0.75) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 10px 16px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
      }
      .user-greeting-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, #38bdf8, #a855f7);
      }
      .user-greeting-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .user-greeting-avatar {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: linear-gradient(
          135deg,
          rgba(56, 189, 248, 0.2),
          rgba(168, 85, 247, 0.3)
        );
        border: 1px solid rgba(168, 85, 247, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
        box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
      }
      .user-greeting-text-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .user-greeting-main {
        font-size: 0.94rem;
        font-weight: 800;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .user-greeting-name {
        background: linear-gradient(135deg, #38bdf8, #c084fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
      }
      .user-greeting-badge {
        font-size: 0.68rem;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 6px;
        background: rgba(16, 185, 129, 0.15);
        color: #34d399;
        border: 1px solid rgba(16, 185, 129, 0.35);
        text-transform: uppercase;
      }
      .user-greeting-badge.admin {
        background: rgba(234, 179, 8, 0.18);
        color: #fde047;
        border-color: rgba(234, 179, 8, 0.45);
      }
      .user-greeting-sub {
        font-size: 0.77rem;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .btn-change-user-name {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #cbd5e1;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .btn-change-user-name:hover {
        background: rgba(56, 189, 248, 0.2);
        color: #38bdf8;
        border-color: rgba(56, 189, 248, 0.45);
        transform: translateY(-1px);
      }
      .welcome-name-card {
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid rgba(56, 189, 248, 0.35);
        border-radius: 14px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      }
      .welcome-name-title {
        font-size: 0.82rem;
        font-weight: 800;
        color: #38bdf8;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .welcome-name-row {
        display: flex;
        gap: 8px;
      }
      .welcome-name-input {
        flex: 1;
        background: rgba(2, 6, 23, 0.85);
        border: 1px solid rgba(148, 163, 184, 0.25);
        border-radius: 9px;
        padding: 8px 12px;
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 700;
        outline: none;
      }
      .welcome-name-input:focus {
        border-color: #38bdf8;
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
      }
      .btn-save-welcome-name {
        background: linear-gradient(135deg, #0284c7, #38bdf8);
        border: none;
        border-radius: 9px;
        color: #ffffff;
        font-weight: 800;
        font-size: 0.8rem;
        padding: 0 14px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
      }
      .btn-save-welcome-name:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
      }
      .welcome-name-sub {
        font-size: 0.72rem;
        color: #94a3b8;
        line-height: 1.35;
      }
      @keyframes gateLockPulse {
        0%,
        100% {
          transform: scale(1);
          filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
        }
        50% {
          transform: scale(1.12);
          filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.8));
        }
      }
      .welcome-user-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 10px;
        border-radius: 999px;
        background: linear-gradient(
          135deg,
          rgba(56, 189, 248, 0.2),
          rgba(168, 85, 247, 0.25)
        );
        border: 1px solid rgba(56, 189, 248, 0.45);
        color: #38bdf8;
        font-weight: 900;
        font-size: 0.88rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .welcome-user-pill:hover {
        background: linear-gradient(135deg, #0284c7, #6366f1);
        color: #ffffff;
        transform: translateY(-1px);
      }

      /* ========================================================
         FOOTER HIỆN ĐẠI, THOÁNG ĐÃNG (KHÔNG ĐÓNG KHUNG CARD)
         ======================================================== */
      .app-footer {
        margin-top: auto !important;
        position: relative;
        background: linear-gradient(
          180deg,
          rgba(15, 23, 42, 0.25) 0%,
          rgba(2, 6, 23, 0.85) 100%
        );
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        width: 100%;
      }

      .app-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(56, 189, 248, 0.5) 50%,
          transparent 100%
        );
      }

      .footer-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px 20px 18px;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .footer-top-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .65fr);
        align-items: center;
        gap: clamp(16px, 2vw, 28px);
      }

      /* CỘT THƯƠNG HIỆU & TÁC GIẢ (BÊN TRÁI) */
      .footer-brand-side {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 620px;
        min-width: 0;
      }

      .footer-brand-header {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .footer-logo-box {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #020617;
        border: 2px solid #38bdf8;
        box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
      }

      .footer-logo-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .footer-brand-text {
        min-width: 0;
        overflow-wrap: anywhere;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .footer-brand-title {
        font-size: 1.1rem;
        font-weight: 900;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .footer-brand-title .brand-sub {
        font-size: 0.85rem;
        color: #38bdf8;
        font-weight: 800;
      }

      .footer-desc {
        font-size: 0.84rem;
        color: #94a3b8;
        line-height: 1.55;
        margin: 0;
      }

      .footer-author-card {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.35);
        border-radius: 10px;
        font-size: 0.8rem;
        color: #cbd5e1;
        width: fit-content;
        max-width: 100%;
        flex-wrap: wrap;
      }

      .footer-author-card b {
        color: #c084fc;
      }

      /* KHỐI HÀNH ĐỘNG & LIÊN HỆ (BÊN PHẢI) */
      .footer-action-side {
        min-width: 0;
        max-width: 100%;
        justify-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
      }

      .footer-tele-cta {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 18px;
        border-radius: 12px;
        background: linear-gradient(
          135deg,
          rgba(14, 165, 233, 0.18) 0%,
          rgba(99, 102, 241, 0.25) 100%
        );
        border: 1px solid rgba(56, 189, 248, 0.45);
        color: #38bdf8;
        text-decoration: none;
        font-weight: 800;
        font-size: 0.88rem;
        transition: all 0.22s ease;
      }

      .footer-tele-cta:hover {
        background: linear-gradient(135deg, #0284c7, #6366f1);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
        transform: translateY(-2px);
      }

      .footer-btn-top {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .footer-btn-top:hover {
        background: rgba(56, 189, 248, 0.18);
        border-color: #38bdf8;
        color: #38bdf8;
        transform: translateY(-1px);
      }

      /* DÒNG BẢN QUYỀN ĐÁY */
      .footer-bottom-row {
        padding-top: 14px;
        padding-bottom: 2px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.78rem;
        color: #64748b;
        font-weight: 500;
      }

      @media (max-width: 1100px) {
        .footer-top-row {
          grid-template-columns: minmax(0, 1fr);
          align-items: start;
          gap: 20px;
        }
        .footer-action-side {
          align-items: stretch;
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 10px;
        }
        .footer-tele-cta {
          flex: 1 1 180px;
          justify-content: center;
        }
        .footer-bottom-row {
          justify-content: center;
          text-align: center;
        }
      }

      /* ========================================================
         BANNER PHÂN CHIA KHU VỰC TRỰC QUAN (ZONE DIVIDERS)
         ======================================================== */
      .zone-divider-header {
        margin: 18px 0 10px;
        padding: 9px 14px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        user-select: none;
      }
      .zone-admin-divider {
        background: linear-gradient(
          90deg,
          rgba(99, 102, 241, 0.16) 0%,
          rgba(15, 23, 42, 0.6) 100%
        );
        border: 1px dashed rgba(99, 102, 241, 0.45);
        border-left: 4px solid #6366f1;
      }
      .zone-player-divider {
        background: linear-gradient(
          90deg,
          rgba(16, 185, 129, 0.12) 0%,
          rgba(15, 23, 42, 0.6) 100%
        );
        border: 1px solid rgba(16, 185, 129, 0.22);
        border-radius: 12px;
      }
      .zone-divider-left {
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
      }
      .zone-badge {
        font-size: 0.68rem;
        font-weight: 800;
        padding: 3px 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        line-height: 1;
      }
      .zone-badge-admin {
        background: rgba(99, 102, 241, 0.25);
        color: #a5b4fc;
        border: 1px solid rgba(99, 102, 241, 0.4);
      }
      .zone-badge-player {
        background: rgba(16, 185, 129, 0.22);
        color: #34d399;
        border: 1px solid rgba(16, 185, 129, 0.45);
      }
      .zone-title-text {
        font-size: 0.86rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        color: #ffffff;
      }
      .zone-desc-text {
        font-size: 0.74rem;
        color: #94a3b8;
      }

      /* QUẢN LÝ THIẾT BỊ (DEVICE MANAGEMENT CSS) */
      .btn-device-mgr {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(56, 189, 248, 0.12);
        border: 1px solid rgba(56, 189, 248, 0.35);
        color: #38bdf8;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .btn-device-mgr:hover {
        background: rgba(56, 189, 248, 0.22);
        border-color: #38bdf8;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
      }
      .device-pending-counter {
        background: #ef4444;
        color: #fff;
        font-size: 0.65rem;
        font-weight: 800;
        padding: 2px 6px;
        border-radius: 999px;
        line-height: 1;
        animation: gateLockPulse 2s infinite;
      }

      /* MÀN HÌNH CHỜ PHÊ DUYỆT THIẾT BỊ (DEVICE WAITING OVERLAY) */
      .device-gate-overlay {
        position: fixed;
        inset: 0;
        background: rgba(9, 13, 22, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .device-gate-overlay.show {
        display: flex;
      }
      .device-gate-card {
        background: #0f172a;
        border: 1.5px solid rgba(99, 102, 241, 0.4);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
        border-radius: 18px;
        max-width: 480px;
        width: 100%;
        padding: 28px 24px;
        text-align: center;
        position: relative;
        animation: welcomeZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .device-gate-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        border-radius: 16px;
        background: rgba(99, 102, 241, 0.15);
        border: 1px solid rgba(99, 102, 241, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
      }
      .device-gate-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 8px;
      }
      .device-gate-desc {
        font-size: 0.85rem;
        color: #94a3b8;
        line-height: 1.5;
        margin-bottom: 18px;
      }
      .device-info-pill {
        background: rgba(15, 23, 42, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.8rem;
        color: #cbd5e1;
        margin-bottom: 20px;
        text-align: left;
      }
      .device-info-pill div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
      }
      .device-info-pill div:last-child {
        margin-bottom: 0;
      }

      /* ========================================================
         NÚT CHUÔNG THÔNG BÁO & FLYOUT DROPDOWN LỊCH SỬ THÊM ACC
         ======================================================== */
      .noti-bell-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .btn-noti-bell {
        position: relative;
        padding: 8px 12px !important;
        font-size: 0.95rem;
        font-weight: 700;
        gap: 6px;
        border-radius: 10px;
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .btn-noti-bell:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35);
      }

      .btn-noti-bell.has-unread #noti-bell-icon {
        display: inline-block;
        animation: bellSwing 1.8s ease-in-out infinite;
        transform-origin: top center;
      }

      @keyframes bellSwing {
        0%,
        100% {
          transform: rotate(0deg);
        }
        10%,
        30% {
          transform: rotate(14deg);
        }
        20%,
        40% {
          transform: rotate(-14deg);
        }
        50% {
          transform: rotate(8deg);
        }
        60% {
          transform: rotate(-8deg);
        }
        70% {
          transform: rotate(0deg);
        }
      }

      .noti-badge-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: linear-gradient(135deg, #ef4444, #f43f5e);
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 900;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.85);
        border: 1.5px solid #0f172a;
        pointer-events: none;
        animation: pulseBadge 1.8s infinite;
      }

      @keyframes pulseBadge {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
          box-shadow: 0 0 14px rgba(239, 68, 68, 1);
        }
      }

      .noti-flyout-panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 360px;
        max-width: 90vw;
        background: linear-gradient(
          180deg,
          rgba(15, 23, 42, 0.98) 0%,
          rgba(20, 24, 46, 0.98) 100%
        );
        border: 1px solid rgba(56, 189, 248, 0.35);
        border-radius: 16px;
        box-shadow:
          0 18px 45px rgba(0, 0, 0, 0.8),
          0 0 25px rgba(56, 189, 248, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 10000;
        display: none;
        flex-direction: column;
        overflow: hidden;
        animation: notiPanelFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      .noti-flyout-panel.show {
        display: flex;
      }

      @keyframes notiPanelFadeIn {
        from {
          opacity: 0;
          transform: translateY(-8px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .noti-flyout-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        background: rgba(30, 41, 59, 0.6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .noti-flyout-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.88rem;
        font-weight: 800;
        color: #ffffff;
      }

      .btn-noti-clear {
        padding: 4px 8px;
        border-radius: 6px;
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.35);
        color: #fca5a5;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .btn-noti-clear:hover {
        background: rgba(239, 68, 68, 0.3);
        color: #fff;
      }

      .btn-noti-close {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #94a3b8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .btn-noti-close:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
      }

      .noti-flyout-list {
        max-height: 380px;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .noti-item-card {
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(148, 163, 184, 0.16);
        display: flex;
        gap: 10px;
        align-items: flex-start;
        transition: all 0.2s ease;
        position: relative;
      }

      .noti-item-card:hover {
        background: rgba(30, 41, 59, 0.65);
        border-color: rgba(56, 189, 248, 0.4);
        transform: translateX(2px);
      }

      .noti-item-card.is-chungsuc {
        border-left: 3px solid #f59e0b;
      }

      .noti-item-card.is-rank {
        border-left: 3px solid #38bdf8;
      }

      .noti-item-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        background: rgba(56, 189, 248, 0.15);
        border: 1px solid rgba(56, 189, 248, 0.3);
      }

      .noti-item-card.is-chungsuc .noti-item-avatar {
        background: rgba(245, 158, 11, 0.18);
        border-color: rgba(245, 158, 11, 0.35);
      }

      .noti-item-content {
        flex: 1;
        min-width: 0;
      }

      .noti-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 3px;
      }

      .noti-item-user {
        font-weight: 800;
        font-size: 0.85rem;
        color: #38bdf8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .noti-item-time {
        font-size: 0.72rem;
        color: #94a3b8;
        font-weight: 600;
        white-space: nowrap;
      }

      .noti-item-del-btn {
        width: 19px;
        height: 19px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #94a3b8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        cursor: pointer;
        transition: all 0.18s ease;
        padding: 0;
        line-height: 1;
        flex-shrink: 0;
      }

      .noti-item-del-btn:hover {
        background: rgba(239, 68, 68, 0.25);
        border-color: rgba(239, 68, 68, 0.5);
        color: #fca5a5;
        transform: scale(1.1);
      }

      .noti-item-desc {
        font-size: 0.8rem;
        color: #e2e8f0;
        line-height: 1.4;
      }

      .noti-item-badge-cat {
        font-size: 0.68rem;
        font-weight: 800;
        padding: 1px 6px;
        border-radius: 4px;
        display: inline-block;
      }

      .badge-cat-rank {
        background: rgba(56, 189, 248, 0.15);
        color: #38bdf8;
        border: 1px solid rgba(56, 189, 248, 0.3);
      }

      .badge-cat-chungsuc {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
      }

      .noti-empty-state {
        padding: 24px 16px;
        text-align: center;
        color: #94a3b8;
        font-size: 0.84rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }

      /* ========================================================
         TAG NOTI / MESSAGE GÓC DƯỚI BÊN TRÁI KHI THÊM ACC MỚI
         ======================================================== */
      .activity-toast-container {
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 9999998;
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;
        max-width: 380px;
        width: calc(100% - 48px);
        pointer-events: none;
      }

      .activity-toast-item {
        pointer-events: auto;
        position: relative;
        overflow: hidden;
        background: linear-gradient(
          135deg,
          rgba(15, 23, 42, 0.98) 0%,
          rgba(24, 28, 56, 0.96) 100%
        );
        border: 1px solid rgba(56, 189, 248, 0.45);
        border-radius: 14px;
        padding: 12px 14px 14px;
        box-shadow:
          0 14px 35px rgba(0, 0, 0, 0.75),
          0 0 25px rgba(56, 189, 248, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        display: flex;
        flex-direction: column;
        gap: 6px;
        animation: toastSlideInLeft 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        transition:
          transform 0.25s ease,
          opacity 0.25s ease;
      }

      .activity-toast-item.is-chungsuc {
        border-color: rgba(245, 158, 11, 0.55);
        box-shadow:
          0 14px 35px rgba(0, 0, 0, 0.75),
          0 0 25px rgba(245, 158, 11, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
      }

      .activity-toast-item.hide {
        opacity: 0;
        transform: translateX(-40px) scale(0.92);
      }

      @keyframes toastSlideInLeft {
        from {
          opacity: 0;
          transform: translateX(-60px) scale(0.88);
        }
        to {
          opacity: 1;
          transform: translateX(0) scale(1);
        }
      }

      .activity-toast-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .activity-toast-badge {
        font-size: 0.72rem;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .activity-toast-badge.is-rank {
        background: rgba(56, 189, 248, 0.2);
        color: #38bdf8;
        border: 1px solid rgba(56, 189, 248, 0.4);
      }

      .activity-toast-badge.is-chungsuc {
        background: rgba(245, 158, 11, 0.2);
        color: #fbbf24;
        border: 1px solid rgba(245, 158, 11, 0.4);
      }

      .activity-toast-close {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #94a3b8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .activity-toast-close:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
      }

      .activity-toast-body {
        font-size: 0.86rem;
        color: #f1f5f9;
        line-height: 1.45;
        font-weight: 600;
      }

      .activity-toast-user {
        font-weight: 900;
        background: linear-gradient(135deg, #38bdf8, #c084fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .activity-toast-target {
        font-weight: 800;
        color: #fcd34d;
      }

      .activity-toast-item.is-rank .activity-toast-target {
        color: #7dd3fc;
      }

      .activity-toast-acc-preview {
        font-size: 0.76rem;
        color: #94a3b8;
        background: rgba(0, 0, 0, 0.35);
        padding: 3px 8px;
        border-radius: 6px;
        font-family: monospace;
        margin-top: 2px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      .activity-toast-progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, #38bdf8, #818cf8);
        width: 100%;
        transform-origin: left;
        animation: toastProgress 6s linear forwards;
      }

      .activity-toast-item.is-chungsuc .activity-toast-progress-bar {
        background: linear-gradient(90deg, #f59e0b, #ef4444);
      }

      @keyframes toastProgress {
        from {
          transform: scaleX(1);
        }
        to {
          transform: scaleX(0);
        }
      }

      @media (max-width: 768px) {
        .activity-toast-container {
          bottom: 16px;
          left: 14px;
          width: calc(100% - 28px);
        }
        .noti-flyout-panel {
          position: fixed;
          top: 60px;
          left: 14px;
          right: 14px;
          width: auto;
          max-width: none;
        }
      }

      /* ========================================================
         MODAL ANALYTICS THỐNG KÊ & PHÂN TÍCH DỮ LIỆU CHUYÊN SÂU
         ======================================================== */
      .btn-analytics {
        background: linear-gradient(
          135deg,
          rgba(168, 85, 247, 0.22) 0%,
          rgba(59, 130, 246, 0.25) 100%
        );
        border: 1px solid rgba(168, 85, 247, 0.45);
        color: #c084fc;
        padding: 8px 14px;
        font-size: 0.82rem;
        font-weight: 700;
        gap: 6px;
        border-radius: 10px;
        transition: all 0.22s ease;
      }
      .btn-analytics:hover {
        background: linear-gradient(135deg, #a855f7, #3b82f6);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 4px 18px rgba(168, 85, 247, 0.45);
        transform: translateY(-1px);
      }

      .modal-card-analytics {
        background: linear-gradient(
          180deg,
          rgba(15, 23, 42, 0.98) 0%,
          rgba(20, 24, 46, 0.99) 100%
        );
        border: 1.5px solid rgba(168, 85, 247, 0.45);
        border-radius: 20px;
        width: 980px;
        max-width: 96vw;
        height: 88vh;
        max-height: 820px;
        padding: 0;
        text-align: left;
        box-shadow:
          0 25px 75px rgba(0, 0, 0, 0.9),
          0 0 40px rgba(168, 85, 247, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: scale(0.92) translateY(14px);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .modal-overlay.show .modal-card-analytics {
        transform: scale(1) translateY(0);
      }

      .analytics-header {
        padding: 16px 20px;
        background: rgba(30, 41, 59, 0.6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-shrink: 0;
      }

      .analytics-title-group {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .analytics-icon-badge {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(
          135deg,
          rgba(168, 85, 247, 0.25),
          rgba(56, 189, 248, 0.25)
        );
        border: 1px solid rgba(168, 85, 247, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
        flex-shrink: 0;
      }

      .analytics-title-main {
        font-size: 1.1rem;
        font-weight: 900;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.3px;
      }

      .analytics-title-sub {
        font-size: 0.78rem;
        color: #94a3b8;
        margin-top: 2px;
      }

      .analytics-close-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #94a3b8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
      }

      .analytics-close-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
      }

      .analytics-body {
        flex: 1;
        overflow-y: auto;
        padding: 18px 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      /* HÀNG 4 KPI CARDS */
      .analytics-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }

      .analytics-kpi-card {
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 14px;
        padding: 14px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: all 0.2s ease;
      }

      .analytics-kpi-card:hover {
        border-color: rgba(56, 189, 248, 0.4);
        background: rgba(30, 41, 59, 0.6);
        transform: translateY(-2px);
      }

      .analytics-kpi-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
      }

      .analytics-kpi-val {
        font-size: 1.45rem;
        font-weight: 900;
        color: #ffffff;
        line-height: 1.1;
      }

      .analytics-kpi-lbl {
        font-size: 0.76rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-top: 3px;
      }

      .analytics-kpi-sub {
        font-size: 0.72rem;
        color: #64748b;
        margin-top: 4px;
      }

      /* NAV TABS TRONG ANALYTICS */
      .analytics-tab-bar {
        display: flex;
        gap: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 4px;
        overflow-x: auto;
      }

      .analytics-tab-btn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #94a3b8;
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        white-space: nowrap;
      }

      .analytics-tab-btn:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
      }

      .analytics-tab-btn.active {
        background: linear-gradient(
          135deg,
          rgba(168, 85, 247, 0.25),
          rgba(56, 189, 248, 0.25)
        );
        border-color: rgba(168, 85, 247, 0.5);
        color: #38bdf8;
        box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
      }

      /* CÁC PHÂN ĐOẠN NỘI DUNG */
      .analytics-section-card {
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(148, 163, 184, 0.15);
        border-radius: 16px;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .analytics-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }

      .analytics-section-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .analytics-bar-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 12px;
      }

      .analytics-bar-item:last-child {
        margin-bottom: 0;
      }

      .analytics-bar-labels {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        font-weight: 700;
      }

      .analytics-bar-track {
        height: 10px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 5px;
        overflow: hidden;
        position: relative;
      }

      .analytics-bar-fill {
        height: 100%;
        border-radius: 5px;
        transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* BẢNG XẾP HẠNG VÀ DANH SÁCH */
      .analytics-table-wrap {
        overflow-x: auto;
      }

      .analytics-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
      }

      .analytics-table th {
        text-align: left;
        padding: 9px 12px;
        color: #94a3b8;
        font-weight: 800;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.5px;
      }

      .analytics-table td {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #e2e8f0;
      }

      .analytics-table tr:hover td {
        background: rgba(255, 255, 255, 0.03);
      }

      .analytics-filter-chip {
        background: transparent;
        border: none;
        color: #94a3b8;
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 0.74rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s ease;
      }
      .analytics-filter-chip:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
      }
      .analytics-filter-chip.active {
        background: linear-gradient(135deg, #0284c7, #38bdf8);
        color: #fff;
        box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
      }

      /* BIỂU ĐỒ CỘT THEO NGÀY (DAILY BAR CHART) */
      .daily-chart-container {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        height: 165px;
        padding: 16px 12px 10px;
        background: rgba(0, 0, 0, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        overflow-x: auto;
      }
      .daily-chart-col {
        flex: 1;
        min-width: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: 100%;
        justify-content: flex-end;
        cursor: pointer;
        transition: transform 0.2s ease;
      }
      .daily-chart-col:hover {
        transform: translateY(-3px);
      }
      .daily-chart-val {
        font-size: 0.72rem;
        font-weight: 800;
        color: #38bdf8;
      }
      .daily-chart-bar-wrap {
        width: 100%;
        max-width: 32px;
        height: 100%;
        display: flex;
        align-items: flex-end;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 6px;
        overflow: hidden;
      }
      .daily-chart-bar-fill {
        width: 100%;
        border-radius: 6px;
        background: linear-gradient(180deg, #38bdf8 0%, #6366f1 100%);
        transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        min-height: 4px;
      }
      .daily-chart-col.is-today .daily-chart-bar-fill {
        background: linear-gradient(180deg, #34d399 0%, #059669 100%);
        box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
      }
      .daily-chart-label {
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 700;
        white-space: nowrap;
      }
      .daily-chart-col.is-today .daily-chart-label {
        color: #34d399;
        font-weight: 900;
      }

      /* THẺ CHỈ SỐ NHANH HÔM NAY */
      .daily-pulse-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .daily-pulse-card {
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .daily-pulse-val {
        font-size: 1.25rem;
        font-weight: 900;
        color: #fff;
        line-height: 1.1;
      }
      .daily-pulse-lbl {
        font-size: 0.75rem;
        font-weight: 700;
        color: #cbd5e1;
        margin-top: 3px;
      }
      .daily-pulse-sub {
        font-size: 0.68rem;
        color: #94a3b8;
        margin-top: 2px;
      }

      @media (max-width: 768px) {
        .modal-card-analytics {
          width: 96vw;
          height: 92vh;
        }
        .analytics-kpi-grid {
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }
        .daily-pulse-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .analytics-header {
          padding: 12px 14px;
        }
        .analytics-body {
          padding: 12px 14px 20px;
          gap: 14px;
        }
      }