/* ==============================================================
   HỆ THỐNG GIAO DIỆN CHUẨN (MASTER UI) - 99K.VN
   ============================================================== */

/* ==============================================================
   1. INPUT FORM CHUYÊN NGHIỆP (TÍM NHẠT THÔNG MINH)
   ============================================================== */
.input-premium { 
    width: 100%; box-sizing: border-box; 
    background-color: #ffffff; 
    border: 1.5px solid #cbd5e1; /* Viền xám mặc định */
    border-radius: 0.75rem; font-size: 0.9rem; padding: 0.75rem 1rem; 
    transition: all 0.25s ease; outline: none; 
}
.input-premium:hover { border-color: #a855f7 !important; } /* Di chuột: Tím đậm */
.input-premium.has-data { 
    border-color: #d8b4fe; /* Có dữ liệu: Viền tím nhạt */
    background-color: #faf5ff; font-weight: 700; color: #4c1d95;
}
.input-premium:focus { 
    border-color: #9333ea !important; /* Đang nhập: Tím rực rỡ */
    box-shadow: 0 0 0 4px rgba(147,51,234,0.15) !important; background-color: #ffffff !important; 
}
.input-premium:disabled, .input-premium[readonly] { cursor: not-allowed; opacity: 0.7; background-color: #f1f5f9; border-color: #e2e8f0 !important; }

/* 2. FIX FULL CHIỀU RỘNG CHO INTL-TEL-INPUT (SĐT) */
.iti { width: 100%; } 

/* 3. TÙY CHỈNH THANH CUỘN CHUNG (SCROLLBAR) */
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 4. THANH CUỘN NGANG XỊN XÒ CHO BẢNG DỮ LIỆU */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.table-scroll::-webkit-scrollbar { height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; border-radius: 8px; margin: 0 10px; }
.table-scroll::-webkit-scrollbar-thumb { background-color: #d8b4fe; border-radius: 8px; border: 2px solid #ffffff; }
.table-scroll::-webkit-scrollbar-thumb:hover { background-color: #a855f7; }

/* ==============================================================
   5. HIỆU ỨNG VIỀN LED CHẠY ANIMATION
   ============================================================== */
@keyframes spin-slow { 100% { transform: rotate(360deg); } }
.animated-border-wrapper { position: relative; border-radius: 1.5rem; padding: 2px; overflow: hidden; background: #f1f5f9; }
.animated-border-wrapper::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #9333ea, #6366f1, transparent);
    animation: spin-slow 4s linear infinite; z-index: 0;
    pointer-events: none; /* QUAN TRỌNG: Xuyên thấu click chuột, chống liệt nút & checkbox */
}
.animated-border-inner { position: relative; background: #ffffff; border-radius: calc(1.5rem - 2px); z-index: 1; height: 100%; overflow: hidden; }


/* 6. HIỆU ỨNG HOVER DÒNG TRONG BẢNG (SOFT ROW) */
.hover-soft-row { transition: all 0.2s ease; }
.hover-soft-row:hover td {
    background-color: #f3e8ff !important; 
    border-color: #f3e8ff !important; 
}

/* 7. HIỆU ỨNG VIỀN LED CẢNH BÁO (WARNING/NOTICE BOX) */
.animated-warning-wrapper {
    position: relative;
    border-radius: 1.25rem; /* Bo góc 20px gọn gàng hơn */
    padding: 2px;
    overflow: hidden;
    background: #fffbeb; /* Nền dự phòng màu vàng nhạt */
}
.animated-warning-wrapper::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    /* Dải LED xoay: Trong suốt kết hợp Vàng Amber & Cam đậm */
    background: conic-gradient(transparent, transparent, transparent, #f59e0b, #ea580c, transparent);
    animation: spin-slow 3s linear infinite; /* Chạy nhanh hơn viền Tím 1 chút để thu hút sự chú ý */
    z-index: 0;
}
.animated-warning-inner {
    position: relative;
    background: #ffffff;
    border-radius: calc(1.25rem - 2px);
    z-index: 1;
    height: 100%;
    overflow: hidden;
}

/* ==============================================================
   8. SWEETALERT PREMIUM (POPUP VIỀN LED CHẠY)
   ============================================================== */
.swal-animated-purple {
    position: relative !important;
    border-radius: 1.5rem !important; /* Bo góc 24px */
    padding: 0 !important; /* Xóa padding mặc định để làm viền */
    overflow: hidden !important;
    background: transparent !important;
}
/* Tạo dải LED xoay */
.swal-animated-purple::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #9333ea, #6366f1, transparent);
    animation: spin-slow 4s linear infinite;
    z-index: -2;
    pointer-events: none;
}
/* Tạo nền trắng bên trong, cách viền 2px */
.swal-animated-purple::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: #ffffff;
    border-radius: calc(1.5rem - 2px);
    z-index: -1;
    pointer-events: none;
}
/* Phục hồi khoảng cách (Padding) cho nội dung bên trong */
.swal-animated-purple > * { position: relative; z-index: 1; }
.swal-animated-purple .swal2-title { padding-top: 2.5rem !important; margin: 0 !important; }
.swal-animated-purple .swal2-html-container { padding: 1.5rem 2rem !important; margin: 0 !important; overflow: visible !important; }
.swal-animated-purple .swal2-actions { padding-bottom: 2.5rem !important; margin-top: 0 !important; }

/* ==============================================================
   9. MA TRẬN GIAO DIỆN 10x10 (NỀN NHẠT TÔN VIỀN LED)
   ============================================================== */
.badge-animated-wrap { position: relative; display: inline-flex; border-radius: 0.5rem; overflow: hidden; z-index: 1; margin-top: 6px; margin-right: 6px; }
.badge-animated-wrap::before { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; animation: spin-slow 3.5s linear infinite; z-index: -1; }
.badge-inner { position: relative; z-index: 2; padding: 0.35rem 0.85rem; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; width: 100%; height: 100%; }

/* ĐỘ DÀY VIỀN & ĐƯỜNG RAY THEO TIER */
.tier-s, .tier-a { padding: 1.5px; background-color: #e2e8f0; } /* Viền dày 1.5px */
.tier-s .badge-inner, .tier-a .badge-inner { border-radius: calc(0.5rem - 1.5px); }
.tier-s::before { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); } 
.tier-a::before { opacity: 0.8; }

.tier-b, .tier-c { padding: 1px; background-color: #f1f5f9; } /* Viền mỏng 1px */
.tier-b .badge-inner, .tier-c .badge-inner { border-radius: calc(0.5rem - 1px); }
.tier-b::before { opacity: 0.6; }
.tier-c::before { opacity: 0.4; }

/* HỆ THỐNG MÀU TIA SÁNG LED (Đậm rực rỡ) */
.badge-animated-wrap.theme-0::before { background: conic-gradient(transparent, transparent, transparent, #475569, #cbd5e1, transparent); }
.badge-animated-wrap.theme-1::before { background: conic-gradient(transparent, transparent, transparent, #2563eb, #60a5fa, transparent); }
.badge-animated-wrap.theme-2::before { background: conic-gradient(transparent, transparent, transparent, #059669, #34d399, transparent); }
.badge-animated-wrap.theme-3::before { background: conic-gradient(transparent, transparent, transparent, #ea580c, #fb923c, transparent); }
.badge-animated-wrap.theme-4::before { background: conic-gradient(transparent, transparent, transparent, #e11d48, #fb7185, transparent); }
.badge-animated-wrap.theme-5::before { background: conic-gradient(transparent, transparent, transparent, #9333ea, #d8b4fe, transparent); }
.badge-animated-wrap.theme-6::before { background: conic-gradient(transparent, transparent, transparent, #d97706, #fcd34d, transparent); }
.badge-animated-wrap.theme-7::before { background: conic-gradient(transparent, transparent, transparent, #0891b2, #67e8f9, transparent); }
.badge-animated-wrap.theme-8::before { background: conic-gradient(transparent, transparent, transparent, #db2777, #f9a8d4, transparent); }
.badge-animated-wrap.theme-9::before { background: conic-gradient(transparent, transparent, transparent, #f59e0b, #fef08a, transparent); }

/* MÀU NỀN TRONG (CỰC NHẠT) VÀ CHỮ ĐẬM */
/* Tier S (Nền trắng tinh khiết, bóng nội bên trong) */
.tier-s .badge-inner { background: #ffffff; box-shadow: inset 0 0 10px rgba(0,0,0,0.02); }
.theme-0.tier-s .badge-inner { color: #334155; } .theme-1.tier-s .badge-inner { color: #1d4ed8; }
.theme-2.tier-s .badge-inner { color: #047857; } .theme-3.tier-s .badge-inner { color: #c2410c; }
.theme-4.tier-s .badge-inner { color: #be123c; } .theme-5.tier-s .badge-inner { color: #7e22ce; }
.theme-6.tier-s .badge-inner { color: #b45309; } .theme-7.tier-s .badge-inner { color: #0e7490; }
.theme-8.tier-s .badge-inner { color: #be185d; } .theme-9.tier-s .badge-inner { background: #0f172a; color: #fbbf24; } /* Riêng GOD giữ màu tối quyền lực */

/* Tier A, B, C (Nền Gradient Pastel nhạt bừng sáng) */
.theme-0 .badge-inner { background: linear-gradient(to right, #f8fafc, #f1f5f9); color: #475569; }
.theme-1 .badge-inner { background: linear-gradient(to right, #eff6ff, #dbeafe); color: #1e40af; }
.theme-2 .badge-inner { background: linear-gradient(to right, #ecfdf5, #d1fae5); color: #065f46; }
.theme-3 .badge-inner { background: linear-gradient(to right, #fff7ed, #ffedd5); color: #9a3412; }
.theme-4 .badge-inner { background: linear-gradient(to right, #fff1f2, #ffe4e6); color: #9f1239; }
.theme-5 .badge-inner { background: linear-gradient(to right, #faf5ff, #f3e8ff); color: #581c87; }
.theme-6 .badge-inner { background: linear-gradient(to right, #fffbeb, #fef3c7); color: #92400e; }
.theme-7 .badge-inner { background: linear-gradient(to right, #ecfeff, #cffafe); color: #155e75; }
.theme-8 .badge-inner { background: linear-gradient(to right, #fdf2f8, #fbcfe8); color: #9d174d; }

/* ==============================================================
   10. FLOATING ICON (ĐỘI THỤT VÀO TRONG, TRÁNH CẮT TRÊN MOBILE)
   ============================================================== */
.floating-icon {
    position: absolute;
    top: -5px;      
    right: -4px;    
    z-index: 20;
    font-size: 13px;
    transform: rotate(15deg); 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
    transition: all 0.3s ease;
    user-select: none;
    animation: icon-catch-light 3.5s linear infinite;
}

.icon-lvl-0 { font-size: 16px; top: -8px; right: -5px; } 
.icon-lvl-9 { font-size: 11px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)); opacity: 0.8; }

@keyframes icon-catch-light {
    0%, 30%, 100% { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)) brightness(1); transform: rotate(15deg) scale(1); }
    10%, 16% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)) brightness(1.3); transform: rotate(8deg) scale(1.15); }
}

/* ==============================================================
   11. HIỆU ỨNG CHỮ CHẠY MÀU (ANIMATED TEXT GRADIENT)
   ============================================================== */
.text-gradient-animated {
    background: linear-gradient(-45deg, #9333ea, #4f46e5, #ec4899, #9333ea);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shine 4s linear infinite;
}
@keyframes text-shine { 
    0% { background-position: 0% 50%; } 
    100% { background-position: 100% 50%; } 
}

/* ==============================================================
   12. AVATAR VIỀN LED CHẠY (ĐỔI MÀU THEO TRẠNG THÁI)
   ============================================================== */
.avatar-led-wrap {
    position: relative;
    border-radius: 50%;
    padding: 2.5px; /* Độ dày viền LED của Avatar */
    overflow: hidden;
    z-index: 1;
    display: inline-block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.avatar-led-wrap::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    animation: spin-slow 3s linear infinite; z-index: -1;
}

/* Các dải màu LED theo trạng thái */
.avatar-led-wrap.led-active::before { background: conic-gradient(transparent, transparent, transparent, #a855f7, #ec4899, transparent); }
.avatar-led-wrap.led-locked::before { background: conic-gradient(transparent, transparent, transparent, #f59e0b, #ea580c, transparent); }
.avatar-led-wrap.led-deleted::before { background: conic-gradient(transparent, transparent, transparent, #ef4444, #be123c, transparent); }

.avatar-led-wrap img {
    position: relative; z-index: 2;
    border: 2px solid #ffffff; 
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* ==============================================================
   13. HIỆU ỨNG NỀN TRẠNG THÁI (SỌC CẢNH BÁO)
   ============================================================== */
/* Nền sọc Vàng Cam cho tài khoản Tạm Khóa */
.row-locked {
    background-image: repeating-linear-gradient(45deg, rgba(245,158,11,0.03), rgba(245,158,11,0.03) 10px, rgba(245,158,11,0.08) 10px, rgba(245,158,11,0.08) 20px) !important;
}
/* Nền sọc Đỏ cho tài khoản Đợi Xóa */
.row-deleted {
    background-image: repeating-linear-gradient(45deg, rgba(239,68,68,0.03), rgba(239,68,68,0.03) 10px, rgba(239,68,68,0.08) 10px, rgba(239,68,68,0.08) 20px) !important;
}

/* ==============================================================
   14. LỖI BẢO MẬT PIN (RUNG LẮC & ĐỎ)
   ============================================================== */
.pin-error {
    border-color: #ef4444 !important; color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
    animation: shake-pin 0.4s 1;
}
@keyframes shake-pin { 
    0%, 100% {transform: translateX(0);} 
    25%, 75% {transform: translateX(-5px);} 
    50% {transform: translateX(5px);} 
}

/* ==============================================================
   15. HIỆU ỨNG CHỮ CHỨC VỤ CHẠY MÀU THEO TIER
   ============================================================== */
.text-theme-gradient {
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shine 3s linear infinite;
    display: inline-block;
}
.text-theme-0 { background-image: linear-gradient(-45deg, #475569, #94a3b8, #475569); }
.text-theme-1 { background-image: linear-gradient(-45deg, #2563eb, #60a5fa, #2563eb); }
.text-theme-2 { background-image: linear-gradient(-45deg, #059669, #34d399, #059669); }
.text-theme-3 { background-image: linear-gradient(-45deg, #ea580c, #fb923c, #ea580c); }
.text-theme-4 { background-image: linear-gradient(-45deg, #e11d48, #fb7185, #e11d48); }
.text-theme-5 { background-image: linear-gradient(-45deg, #7e22ce, #c084fc, #7e22ce); }
.text-theme-6 { background-image: linear-gradient(-45deg, #d97706, #fcd34d, #d97706); }
.text-theme-7 { background-image: linear-gradient(-45deg, #0891b2, #67e8f9, #0891b2); }
.text-theme-8 { background-image: linear-gradient(-45deg, #db2777, #f9a8d4, #db2777); }
.text-theme-9 { background-image: linear-gradient(-45deg, #f59e0b, #fef08a, #f59e0b); }

/* ==============================================================
   16. HỆ SINH THÁI THÔNG BÁO CHUẨN (MASTER ALERTS)
   ============================================================== */

/* --- TEXT CHẠY MÀU CHO TIÊU ĐỀ MODAL --- */
.title-gradient-purple {
    background: linear-gradient(-45deg, #9333ea, #4f46e5, #ec4899, #9333ea);
    background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: text-shine 4s linear infinite;
}
.title-gradient-red {
    background: linear-gradient(-45deg, #ef4444, #f97316, #e11d48, #ef4444);
    background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: text-shine 4s linear infinite;
}

/* --- MẪU 1: THÀNH CÔNG (VIỀN CẦU VỒNG, NỀN TRẮNG) --- */
.swal-master-success { position: relative !important; border-radius: 1.5rem !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; }
.swal-master-success::before { 
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; 
    /* Dải viền Cầu Vồng (Rainbow) rực rỡ xoay vòng */
    background: conic-gradient(#ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000); 
    animation: spin-slow 3s linear infinite; z-index: -2; pointer-events: none; 
}
.swal-master-success::after { 
    content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; /* Viền dày 3px để thấy rõ cầu vồng */
    background: #ffffff; /* Nền trắng tinh khiết */
    border-radius: calc(1.5rem - 3px); z-index: -1; pointer-events: none; 
}
.swal-master-success > * { position: relative; z-index: 1; }
.swal-master-success .swal2-title { padding-top: 2.5rem !important; margin: 0 !important; }
.swal-master-success .swal2-html-container { padding: 1.5rem 2rem !important; margin: 0 !important; overflow: visible !important; }
.swal-master-success .swal2-actions { padding-bottom: 2.5rem !important; margin-top: 0 !important; }

/* --- MẪU 2: CẢNH BÁO / THẤT BẠI (VIỀN LỬA CAM ĐỎ, NỀN CAM NHẠT) --- */
.swal-master-error { position: relative !important; border-radius: 1.5rem !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; }
.swal-master-error::before { 
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; 
    /* Dải viền Lửa (Đỏ - Cam - Vàng) */
    background: conic-gradient(#f59e0b, #ea580c, #ef4444, #be123c, #ea580c, #f59e0b); 
    animation: spin-slow 2s linear infinite; z-index: -2; pointer-events: none; 
}
.swal-master-error::after { 
    content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; 
    background: #fff7ed; /* Nền màu Cam nhạt (Pastel Orange) */
    border-radius: calc(1.5rem - 3px); z-index: -1; pointer-events: none; 
}
.swal-master-error > * { position: relative; z-index: 1; }
.swal-master-error .swal2-title { padding-top: 2.5rem !important; margin: 0 !important; }
.swal-master-error .swal2-html-container { padding: 1.5rem 2rem !important; margin: 0 !important; overflow: visible !important; }
.swal-master-error .swal2-actions { padding-bottom: 2.5rem !important; margin-top: 0 !important; }

/* Vòng xoáy LED quét radar cực đẹp cho Nút bấm */
.spinner-led-btn {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: conic-gradient(transparent 10%, rgba(255,255,255,0.3) 70%, #ffffff 100%);
    animation: spin-fast 0.7s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 40%, black 41%);
    mask: radial-gradient(circle, transparent 40%, black 41%);
    filter: drop-shadow(0 0 4px rgba(255,255,255,1));
}
@keyframes spin-fast { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==============================================================
   17. GLOBAL LAYOUT & SIDEBAR CHUẨN MỰC
   ============================================================== */
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; -webkit-tap-highlight-color: transparent; }
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { padding-right: 0 !important; }
.swal2-pin-input:focus { border-color: #9333ea !important; box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.1) !important; background-color: white !important;}

@media (min-width: 768px) { .desktop-sidebar-collapsed { margin-left: -280px !important; } }

/* ==============================================================
   18. NÚT ASSISTIVE BONG BÓNG LÕI (KÉO THẢ & LED)
   ============================================================== */
.led-menu-btn {
    position: relative; width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; box-shadow: 0 4px 15px rgba(147, 51, 234, 0.4);
    touch-action: none; background: #fff;
}
.led-menu-btn::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000 80%, #ffffff 90%, #ff0000 100%);
    animation: spin-fast 2.5s linear infinite; z-index: 0; pointer-events: none;
}
.led-menu-btn::after {
    content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: #ffffff; border-radius: 50%; z-index: 1; pointer-events: none;
}

.text-99k-anim {
    position: relative; z-index: 2; user-select: none; pointer-events: none;
    font-size: 15px; font-weight: 900; letter-spacing: -0.5px;
    background: linear-gradient(135deg, #9333ea, #4f46e5);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: pop-breath-slow 3.5s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes pop-breath-slow {
    0%   { transform: scale(0); opacity: 0; }
    10%  { transform: scale(0.6); opacity: 1; }
    70%  { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 2px 4px rgba(147,51,234,0.3)); }
    85%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(0); opacity: 0; }
}

.comet-particle {
    position: fixed; pointer-events: none; z-index: 999998;
    width: 24px; height: 24px; border-radius: 50%;
    transform: translate(-50%, -50%) scale(1); opacity: 0.9;
    transition: transform 0.4s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.4s ease-out;
}
.comet-light-bg {
    background: radial-gradient(circle, rgba(147,51,234,0.8) 0%, rgba(236,72,153,0.5) 40%, transparent 70%);
    mix-blend-mode: multiply;
}
.comet-dark-bg {
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(253,186,116,0.6) 40%, transparent 70%);
    mix-blend-mode: screen;
}

.assistive-floating {
    position: fixed; z-index: 999999; cursor: grab;
    transition: transform 0.15s ease, left 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: left, top, transform;
}
.assistive-floating:active { cursor: grabbing; transform: scale(0.92); }

/* ==============================================================
   19. CSS DÙNG CHUNG CHO CÁC MODULE (TIN NHẮN, HỒ SƠ)
   ============================================================== */
/* Custom Scroll cho Chat */
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.chat-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Trạng thái lỗi Form nhập liệu */
.input-error { border-color: #ef4444 !important; background-color: #fef2f2 !important; }
.error-text { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; display: none; }
.error-text.show { display: block; }
input::-ms-reveal, input::-ms-clear { display: none; }

/* ==============================================================
   20. PREMIUM LOGO 99K.VN (ĐẲNG CẤP XỊN SÒ)
   ============================================================== */
/* Khối Icon Tia sét với hiệu ứng vệt sáng kim loại quét qua */
.logo-premium-icon {
    position: relative;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.logo-premium-icon::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-25deg);
    animation: logo-sweep-shine 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes logo-sweep-shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

/* Chữ 99K.vn lấp lánh trên nền Đen (Sidebar) */
.logo-premium-text-dark {
    background: linear-gradient(to right, #ffffff, #d8b4fe, #ffffff, #a855f7);
    background-size: 200% auto; color: #fff;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: text-shine-logo 4s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(216, 180, 254, 0.2));
}

/* Chữ 99K.vn sắc nét, sang trọng trên nền Trắng (Header PC) */
.logo-premium-text-light {
    background: linear-gradient(to right, #4c1d95, #9333ea, #4f46e5, #4c1d95);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: text-shine-logo 4s linear infinite;
}
@keyframes text-shine-logo { to { background-position: 200% center; } }

/* ==============================================================
   21. MODULE KHO & NHẬP HÀNG (UI PRO MAX)
   ============================================================== */

/* Layout & Box */
.nhap-hang-layout { display: flex; flex-direction: column; gap: 1.5rem; min-height: calc(100vh - 100px); padding-bottom: 3rem; }
@media (min-width: 1024px) { .nhap-hang-layout { flex-direction: row; align-items: stretch; } }
.box-panel { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; }
.box-body { padding: 1.25rem; }

/* Bảng Dữ Liệu Co Giãn Đều */
.table-responsive-wrapper { overflow-x: auto; width: 100%; padding-bottom: 8px; }
.table-responsive-wrapper::-webkit-scrollbar { height: 8px; }
.table-responsive-wrapper::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
.table-nhap-hang { width: 100%; text-align: left; } 
.table-nhap-hang th { background: #ffffff; text-transform: uppercase; font-size: 10px; font-weight: 800; color: #64748b; padding: 0.75rem 0.5rem; border-bottom: 2px solid #e2e8f0; }
.table-nhap-hang td { padding: 0.5rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-weight: 600; color: #334155; }
.hover-soft-row:hover td { background-color: #f8fafc; }

/* Ô Input trong bảng */
.input-cell-qty, .input-cell-bh { 
    width: 55px; text-align: center; height: 30px; 
    border-radius: 0.5rem; border: 1px solid #cbd5e1; font-weight: 800; margin: 0 auto; display: block; font-size: 13px;
    background: #f8fafc; color: #475569 !important; transition: all 0.2s; 
}
.price-input { 
    min-width: 85px; width: 100%; max-width: 120px; text-align: right; color: #047857; background: #ecfdf5; 
    border: 1px solid #a7f3d0; font-size: 13px; height: 30px; border-radius: 0.5rem; padding: 0 0.5rem; font-weight: 800; margin: 0 auto; display: block; transition: all 0.2s;
}
.input-cell-qty:focus, .input-cell-bh:focus, .price-input:focus { border-color: #9333ea; background: #ffffff; box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15); outline: none; }

/* Nút Serial Thông Minh */
.btn-serial { font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: 0.2s; margin-top: 4px; }

/* ====================================
   🔥 ĐÃ FIX: TAB UI MÀU TÍM PRO MAX (KHÔNG DÙNG LED ẢO)
   ==================================== */
/* Đường viền chân Tab tạo cảm giác thư mục thật */
.tab-container { display: flex; gap: 4px; align-items: flex-end; border-bottom: 1px solid #e2e8f0; padding-bottom: 0; position: relative; z-index: 10; }

/* Tab chưa chọn: Nền xám nhạt, chữ xám đậm */
.erp-tab-item { 
    padding: 10px 18px; background: #f8fafc; color: #64748b; font-weight: 700; font-size: 13px; 
    border-radius: 12px 12px 0 0; cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: all 0.2s; border: 1px solid #e2e8f0; border-bottom: none; position: relative; white-space: nowrap; margin-bottom: -1px;
}
.erp-tab-item:hover { background: #f1f5f9; color: #334155; }

/* Tab Đang chọn: Nền TÍM, Chữ TRẮNG (Thiết kế khối phẳng, cắt đứt đường viền đáy) */
.erp-tab-item.active { 
    background: #9333ea !important; 
    color: #ffffff !important; 
    border-color: #9333ea !important;
    box-shadow: 0 -4px 10px rgba(147, 51, 234, 0.2);
    z-index: 20; 
    padding-top: 12px; /* Đẩy tab active cao lên một chút */
}

/* Nút tắt Tab */
.tab-close { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: 0.2s; }
.erp-tab-item.active .tab-close { color: #e9d5ff; }
.erp-tab-item.active .tab-close:hover { background: rgba(255,255,255,0.25); color: #ffffff; }
.erp-tab-item:not(.active) .tab-close:hover { background: #fee2e2; color: #ef4444; }

/* ====================================
   TIỆN ÍCH KHÁC
   ==================================== */
/* Dropdown Tìm Kiếm */
.erp-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); z-index: 9999; max-height: 350px; overflow-y: auto; display: none; padding: 4px; }
.search-item { padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; transition: 0.2s; border-bottom: 1px solid transparent; margin-bottom: 2px;}
.search-item:hover, .search-item.active { background: #faf5ff; border-color: #f3e8ff; }
.tagify-serial { width: 100%; border: 1px solid #cbd5e1; border-radius: 0.5rem; background: #f8fafc; padding: 0.5rem; min-height: 120px; align-items: flex-start; }
.tagify-serial.tagify--focus { border-color: #8b5cf6; background: #ffffff; }

/* Overlay & Smart Input */
.overlay-deleted { position: absolute; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); z-index: 50; flex-direction: column; align-items: center; justify-content: center; display: none; }
.smart-input-wrap { position: relative; display: flex; align-items: center; }
.smart-input-btn { background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px dashed #cbd5e1; }
.smart-input-btn:hover { background: #e2e8f0; color: #334155; border-style: solid; }
.smart-input-field { display: none; align-items: center; gap: 6px; }
.smart-input-wrap.active .smart-input-btn { display: none; }
.smart-input-wrap.active .smart-input-field { display: flex; }

/* ==========================================================
   BỔ SUNG: 99K PREMIUM PURPLE THEME & LED EFFECT
   ========================================================== */

.text-gradient {
    background: linear-gradient(135deg, #7c3aed 30%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.title-gradient-purple {
    background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-premium-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

.glow-shadow-purple {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

/* Hiệu ứng LED viền chạy xung quanh */
.pricing-card-led {
    position: relative;
    overflow: hidden;
    padding: 2px;
    border-radius: 2rem;
}

.pricing-card-led::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, transparent, #a78bfa, transparent, transparent, #f472b6, transparent);
    animation: led-rotate 4s linear infinite;
    z-index: 0;
}

.tier-pro.pricing-card-led::before {
    background: conic-gradient(transparent, transparent, #ec4899, transparent, transparent, #8b5cf6, transparent);
    animation: led-rotate 3s linear infinite;
}

.pricing-card-led-inner {
    position: relative;
    background: #ffffff;
    border-radius: calc(2rem - 2px);
    z-index: 1;
}

@keyframes led-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes glowpulse {
    0%, 100% { box-shadow: 0 0 10px rgba(124, 58, 237, 0.3); }
    50% { box-shadow: 0 0 25px rgba(124, 58, 237, 0.6); }
}

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

/* Buttons Premium */
.btn-premium {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.4);
    transition: all 0.3s ease;
    border: none;
}

.btn-premium:hover {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.7);
    transform: translateY(-2px);
}

/* Thẻ tính năng */
.feature-card-premium {
    background: white;
    border-radius: 2rem;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.5s ease;
}

.feature-card-premium:hover {
    border-color: #a78bfa;
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.1);
    transform: translateY(-5px);
}

/* ==========================================================
   BỔ SUNG: RUY BĂNG CHÉO & TEM GIẢM GIÁ (BẢNG GIÁ)
   ========================================================== */

/* Ruy băng góc chéo (Cho gói 0đ) */
.corner-ribbon-wrap {
    position: absolute; top: -10px; right: -10px;
    width: 120px; height: 120px; overflow: hidden; z-index: 10;
}
.corner-ribbon {
    position: absolute; top: 28px; right: -35px; width: 160px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #ec4899, #8b5cf6); /* Gradient Tím Hồng */
    color: white; text-align: center; font-size: 11px; font-weight: 900;
    letter-spacing: 1.5px; padding: 6px 0;
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4); text-transform: uppercase;
}
/* Hiệu ứng gập góc 3D cho Ruy băng */
.corner-ribbon::before, .corner-ribbon::after {
    content: ''; position: absolute; bottom: -3px; border: 3px solid transparent;
}
.corner-ribbon::before { left: 0; border-top-color: #be185d; border-right-color: #be185d; }
.corner-ribbon::after { right: 0; border-top-color: #5b21b6; border-left-color: #5b21b6; }

/* Tem giảm giá % đỏ rực rỡ */
.discount-badge {
    background: #fef2f2; color: #ef4444; border: 1px solid #fecaca;
    padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 900;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1); display: inline-block;
}