Help
RSS
API
Feed
Maltego
Contact
Domain > cloudcheap.asia
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2026-02-07
104.21.77.10
(
ClassC
)
Port 80
HTTP/1.1 200 OKDate: Sat, 07 Feb 2026 07:28:30 GMTContent-Type: text/html; charsetutf-8Transfer-Encoding: chunkedConnection: keep-aliveCache-Control: no-cache, no-storecontent-language: enpermissions-policy: geolocation(), microphone(), camera()pragma: no-cachereferrer-policy: strict-origin-when-cross-originServer: cloudflareSet-Cookie: .AspNetCore.Antiforgery.KmeuYQLxn4sCfDJ8EBnaoU3OXxKsde0sNJ0XUabCtIOSuJONxPlpm_H-bHeiFzvunRUYYOJxIeFkpuGsxkvYqeXZEIvVZJJXp1Kp6gZ1VOI0dUwzvoeeoVAtaUQl3YgKU29X17rH0Xi6HI5Oqt48pqpsDUKglmMQIKp9Wc; path/; samesitestrict; httponlySet-Cookie: .AspNetCore.Mvc.CookieTempDataProvider; expiresThu, 01 Jan 1970 00:00:00 GMT; path/; samesitelax; httponlyx-content-type-options: nosniffx-frame-options: SAMEORIGINx-xss-protection: 1; modeblockcf-cache-status: DYNAMICNel: {report_to:cf-nel,success_fraction:0.0,max_age:604800}Report-To: {group:cf-nel,max_age:604800,endpoints:{url:https://a.nel.cloudflare.com/report/v4?sVBKi6XrKwvz2bpaYL8lRRABnM78%2BgWcNdWK5YkxWYrYYG1qtAOxxD%2BtDpJFSk0S6VyBotfzHIEfMA68qOkBtMhoVj7JxLX%2FBPW47nMKlHg%3D%3D}}CF-RAY: 9ca12bb3896d97a5-PDXalt-svc: h3:443; ma86400 !DOCTYPE html>html langen>head> meta charsetutf-8/> meta nameviewport contentwidthdevice-width, initial-scale1.0/> !-- Email removed from meta tag for security --> title>Home - Cheap Minecraft & Discord Bot Hosting - CheapCloud/title> meta namedescription contentCloudCheap offers top-tier Web Hosting, Minecraft Hosting and Discord Bot Hosting in Vietnam. 99.9% Uptime, 24/7 technical support, instant activation. /> meta namekeywords contentminecraft hosting, discord bot hosting, cheap web hosting, vietnam vps, create game server, trusted hosting /> meta propertyog:title contentHome - Cheap Minecraft & Discord Bot Hosting - CheapCloud /> meta propertyog:type contentwebsite /> meta propertyog:url contenthttp://cloudcheap.asia/ /> meta propertyog:image content/images/og-image.png /> link relicon typeimage/png href/uploads/shinellord-kali.png> script typeapplication/ld+json> { @context: https://schema.org, @type: Organization, name: CloudCheap, url: http://cloudcheap.asia, logo: http://cloudcheap.asia/images/website_logo.png, sameAs: https://facebook.com/cheapclouds, https://discord.gg/pDDfWVbWgK } /script> !-- Ads removed as requested --> !-- Bootstrap Icons --> link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css> !-- Inter Font from Google Fonts (DiHoaCloud style) --> link relpreconnect hrefhttps://fonts.googleapis.com> link relpreconnect hrefhttps://fonts.gstatic.com crossorigin> link hrefhttps://fonts.googleapis.com/css2?familyInter:wght@300;400;500;600;700;800;900&displayswap relstylesheet> !-- Tailwind CSS CDN --> script srchttps://cdn.tailwindcss.com>/script> script> tailwind.config { darkMode: class, theme: { extend: { fontFamily: { sans: Inter, system-ui, sans-serif, }, colors: { background: hsl(var(--background)), foreground: hsl(var(--foreground)), card: hsl(var(--card)), card-foreground: hsl(var(--card-foreground)), popover: hsl(var(--popover)), popover-foreground: hsl(var(--popover-foreground)), primary: hsl(var(--primary)), primary-foreground: hsl(var(--primary-foreground)), secondary: hsl(var(--secondary)), secondary-foreground: hsl(var(--secondary-foreground)), muted: hsl(var(--muted)), muted-foreground: hsl(var(--muted-foreground)), accent: hsl(var(--accent)), accent-foreground: hsl(var(--accent-foreground)), destructive: hsl(var(--destructive)), destructive-foreground: hsl(var(--destructive-foreground)), border: hsl(var(--border)), input: hsl(var(--input)), ring: hsl(var(--ring)), }, borderRadius: { lg: 0.75rem, }, animation: { pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite, ping-slow: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite, fade-in: fadeIn 0.6s ease-out, slide-up: slideUp 0.6s ease-out, float: float 3s ease-in-out infinite, }, keyframes: { fadeIn: { 0%: { opacity: 0, transform: translateY(10px) }, 100%: { opacity: 1, transform: translateY(0) }, }, slideUp: { 0%: { opacity: 0, transform: translateY(20px) }, 100%: { opacity: 1, transform: translateY(0) }, }, float: { 0%, 100%: { transform: translateY(0px) }, 50%: { transform: translateY(-10px) }, }, } } } } /script> script> // Force dark mode to always be active (DiHoaCloud style) (function() { document.documentElement.classList.add(dark); // Store preference as dark localStorage.setItem(theme, dark); })(); /script> link relstylesheet href/css/site.css?vXEsoifTKfrTD3VCCzXIkcJWh1TE0Ac26pA_1BNiF_zo /> !-- AOS Animation --> link hrefhttps://unpkg.com/aos@2.3.1/dist/aos.css relstylesheet> style> @keyframes fadeIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeIn 1s ease-out; } /* User dropdown animation on scroll */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .user-dropdown-enter { animation: slideDown 0.3s ease-out; } .user-dropdown-leave { animation: slideUp 0.2s ease-in; } /* Pulse effect for user indicator */ @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .user-indicator { animation: pulse-soft 2s ease-in-out infinite; } /* Toast notification animations */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .toast-enter { animation: slideInRight 0.3s ease-out; } .toast-exit { animation: slideOutRight 0.3s ease-in; } /style>/head>body classbg-background text-foreground antialiased font-sans> !-- Global Anime Background Decorations - DiHoaCloud Enhanced --> div b-8ysii5ym8s classfixed inset-0 -z-50 overflow-hidden pointer-events-none> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-blue top-20% left-10% w-64 h-64>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-slate bottom-32 right-20% w-80 h-80>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-pink top-60% left-5% w-48 h-48 opacity-20>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-blue top-40% right-8% w-56 h-56 opacity-30>/div> !-- Extra sparse bubbles for depth --> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-blue bottom-10% left-25% w-40 h-40 opacity-10 styleanimation-delay: 3s>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-slate top-15% right-30% w-32 h-32 opacity-10 styleanimation-delay: 1.5s>/div> /div>!-- Navigation Header - DiHoaCloud Glassmorphism -->nav b-8ysii5ym8s idmainNav classfixed top-0 left-0 right-0 z-50 glass backdrop-blur-xl border-b border-border/30 shadow-sm transition-all duration-300 ease-in-out> div b-8ysii5ym8s classcontainer mx-auto px-4> div b-8ysii5ym8s classflex items-center justify-between h-16> !-- Logo with gradient --> a classblock hover:scale-105 transition-transform shrink-0 href/> img src/images/website_logo.png altCloudCheap classh-16 md:h-20 w-auto object-contain /> /a> !-- Right-side container --> div b-8ysii5ym8s classflex items-center gap-2 sm:gap-4 ml-auto> !-- Desktop Navigation Links --> nav b-8ysii5ym8s classhidden md:flex items-center gap-1> a classpx-3 py-2 text-11px font-bold text-muted-foreground hover:text-blue-600 uppercase transition-colors href/> Home /a> !-- Services --> div b-8ysii5ym8s classrelative group/nav> button b-8ysii5ym8s classflex items-center gap-1 px-3 py-2 text-11px font-bold text-muted-foreground hover:text-blue-600 uppercase transition-colors> Services i b-8ysii5ym8s classbi bi-chevron-down text-8px>/i> /button> div b-8ysii5ym8s classabsolute top-full right-0 w-450px pt-2 opacity-0 invisible group-hover/nav:opacity-100 group-hover/nav:visible transition-all duration-200 z-50> div b-8ysii5ym8s classbg-card rounded-2xl shadow-2xl border border-border/50 p-4 grid grid-cols-2 gap-6> !-- Minecraft Column --> div b-8ysii5ym8s> div b-8ysii5ym8s classtext-10px font-black text-blue-600 uppercase tracking-widest px-3 mb-2 flex items-center gap-2> i b-8ysii5ym8s classbi bi-box-fill>/i> Hosting Minecraft /div> div b-8ysii5ym8s classspace-y-1> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Hosting Game - Ryzen/div> div b-8ysii5ym8s classtext-9px text-muted-foreground font-medium tracking-tight>Cực phẩm hiệu năng cao/div> /a> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Hosting Game - Xeon/div> div b-8ysii5ym8s classtext-9px text-muted-foreground font-medium tracking-tight>Ổn định & Tiết kiệm/div> /a> /div> /div> !-- Others Column --> div b-8ysii5ym8s> div b-8ysii5ym8s classtext-10px font-black text-blue-600 uppercase tracking-widest px-3 mb-2 flex items-center gap-2> i b-8ysii5ym8s classbi bi-app-indicator>/i> Apps & Web /div> div b-8ysii5ym8s classspace-y-1> a b-8ysii5ym8s href/hosting-bot-discord#pricing classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Bot Discord/div> div b-8ysii5ym8s classtext-9px text-blue-500 font-black uppercase>Gói Hosting/div> /a> a classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item href/#pricing> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Web Hosting/div> div b-8ysii5ym8s classtext-9px text-blue-500 font-black uppercase>Gói Hosting/div> /a> div b-8ysii5ym8s classmy-2 border-t border-border/50>/div> /div> /div> /div> /div> /div> !-- More --> div b-8ysii5ym8s classrelative group/nav> button b-8ysii5ym8s classflex items-center gap-1 px-3 py-2 text-11px font-bold text-muted-foreground hover:text-blue-600 uppercase transition-colors> Community i b-8ysii5ym8s classbi bi-chevron-down text-8px>/i> /button> div b-8ysii5ym8s classabsolute top-full right-0 w-48 pt-2 opacity-0 invisible group-hover/nav:opacity-100 group-hover/nav:visible transition-all duration-200 z-50> div b-8ysii5ym8s classbg-card rounded-2xl shadow-2xl border border-border/50 p-2> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/Blog>Blog/a> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/nhan-vien>Staff/a> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/#reviews>Reviews/a> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/about>About/a> /div> /div> /div> a b-8ysii5ym8s href/Support/CreateTicket classml-2 px-4 py-2 bg-blue-600 text-white rounded-xl text-10px font-black hover:bg-blue-700 transition-all uppercase> SUPPORT /a> /nav> !-- Auth & Language --> div b-8ysii5ym8s classflex items-center gap-2 border-l border-border/50 pl-4 ml-2> !-- Language --> div b-8ysii5ym8s classflex items-center> form methodpost classinline action/Home/SetLanguage> input b-8ysii5ym8s typehidden namereturnUrl value/ /> button b-8ysii5ym8s typesubmit nameculture valuevi classw-8 h-8 flex items-center justify-center rounded-lg hover:bg-muted transition-colors > span b-8ysii5ym8s classtext-xs>🇻🇳/span> /button> input name__RequestVerificationToken typehidden valueCfDJ8EBnaoU3OXxKsde0sNJ0XUZlNOFw3Fg8ILgpiK3Vq__t5Olyt_HUyXKa_feJZrk6zMG6YGxMSkdE2ZA6_vhcchFQHyCQw0PIvlxJBh6bNG7F7PxhFxTNQnC_9u_8E0T6vBJYlVw9XLzfTAsn-JjcLUw />/form> form methodpost classinline action/Home/SetLanguage> input b-8ysii5ym8s typehidden namereturnUrl value/ /> button b-8ysii5ym8s typesubmit nameculture valueen classw-8 h-8 flex items-center justify-center rounded-lg hover:bg-muted transition-colors bg-muted> span b-8ysii5ym8s classtext-xs>🇬🇧/span> /button> input name__RequestVerificationToken typehidden valueCfDJ8EBnaoU3OXxKsde0sNJ0XUZlNOFw3Fg8ILgpiK3Vq__t5Olyt_HUyXKa_feJZrk6zMG6YGxMSkdE2ZA6_vhcchFQHyCQw0PIvlxJBh6bNG7F7PxhFxTNQnC_9u_8E0T6vBJYlVw9XLzfTAsn-JjcLUw />/form> /div> a classhidden sm:inline-block text-11px font-bold text-muted-foreground hover:text-primary href/Auth/Login>Login/a> a classpx-4 py-2 bg-primary shadow-lg text-primary-foreground rounded-xl text-10px font-black hover:bg-primary/90 transition-all uppercase href/Auth/Register>SIGN UP/a> /div> !-- Mobile menu toggle --> button b-8ysii5ym8s idmobileMenuBtn classmd:hidden p-2 text-muted-foreground hover:text-primary transition-colors> i b-8ysii5ym8s idmenuIcon classbi bi-list text-2xl>/i> i b-8ysii5ym8s idcloseIcon classbi bi-x-lg text-xl hidden>/i> /button> /div> /div> /div>/nav> !-- Mobile Menu --> div b-8ysii5ym8s idmobileMenu classhidden md:hidden fixed inset-x-0 top-16 bg-card border-b border-border shadow-lg z-40 max-h-calc(100vh-4rem) overflow-y-auto> div b-8ysii5ym8s classcontainer mx-auto px-4 py-4 space-y-2> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors href/> Home /a> div b-8ysii5ym8s classpx-4 py-2 text-10px font-black text-blue-600 uppercase tracking-widest border-t border-border/50 mt-2>Hosting Minecraft/div> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8> Hosting Game - Ryzen /a> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8> Hosting Game - Xeon /a> div b-8ysii5ym8s classpx-4 py-2 text-10px font-black text-blue-600 uppercase tracking-widest border-t border-border/50 mt-2>Bot & Web/div> a b-8ysii5ym8s href/hosting-bot-discord#pricing classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8 flex justify-between items-center> span b-8ysii5ym8s>Bot Discord/span> span b-8ysii5ym8s classtext-9px bg-blue-500/10 text-blue-600 px-2 py-0.5 rounded-full font-black>GÓI HOSTING/span> /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8 flex justify-between items-center href/#pricing> span b-8ysii5ym8s>Web Hosting/span> span b-8ysii5ym8s classtext-9px bg-blue-500/10 text-blue-600 px-2 py-0.5 rounded-full font-black>GÓI HOSTING/span> /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/#partners> Partners /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/nhan-vien> Staff /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/Blog> Blog /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/about> About /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/Home/FAQ> FAQ /a> a b-8ysii5ym8s href/Support/CreateTicket classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200> Support /a> div b-8ysii5ym8s classpt-4 border-t border-border space-y-2> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 text-center href/Auth/Login> Login /a> a classblock px-4 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 transition-all duration-300 text-center font-medium href/Auth/Register> Register /a> /div> /div> /div>!-- Toast Notification Container -->div b-8ysii5ym8s idtoastContainer classfixed top-20 right-4 z-50 space-y-2 max-w-sm w-full>/div>!-- Main Content with padding for fixed navbar -->main b-8ysii5ym8s classpt-16> div classmin-h-screen> !-- Hero Section - Unique CloudCheap Layout with Benchmark Cards -->section classrelative min-h-screen flex items-center justify-center overflow-hidden py-20 data-aosfade-up> div classcontainer relative z-10 px-4 mx-auto> !-- Main Hero Content - Centered --> div classmax-w-4xl mx-auto text-center space-y-8 mb-16 data-aosfade-down> !-- Top Badge --> div classinline-block> span classinline-flex items-center gap-2 px-4 py-2 rounded-full glass border text-primary text-sm font-bold uppercase tracking-wider> i classbi bi-star-fill animate-pulse>/i> span classbg-gradient-to-r from-primary to-blue-400 bg-clip-text text-transparent> Professional Solutions /span> /span> /div> !-- Main Heading with Gradient --> h1 classtext-5xl md:text-6xl lg:text-7xl font-black leading-tight> span classtext-foreground> Professional /span> br/> span classbg-gradient-to-r from-primary to-blue-400 bg-clip-text text-transparent> Hosting & Coding /span> br/> span classbg-gradient-gold bg-clip-text text-transparent> Solutions /span> /h1> !-- Description --> p classtext-lg md:text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto> ✨ Join our Discord community and experience high-performance hosting services with modern technology solutions /p> !-- CTA Buttons --> div classflex flex-col sm:flex-row gap-4 justify-center items-center pt-4> a hrefhttps://discord.gg/pDDfWVbWgK target_blank classgroup relative inline-flex items-center justify-center px-8 py-4 text-base font-black uppercase bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-full shadow-glow-strong hover:shadow-glow-strong hover:scale-105 transition-all duration-300> i classbi bi-discord mr-2>/i> span iddiscordBtnText>Join Discord/span> span iddiscordCount classml-2 hidden text-xs bg-black/20 px-2 py-0.5 rounded-full flex items-center gap-1> span classw-2 h-2 rounded-full bg-green-400 animate-pulse>/span> span idonlineCount>0/span> Online /span> /a> script> document.addEventListener(DOMContentLoaded, function() { const guildId 1434620809858515017; // CloudCheap.asia const apiUrl `https://discord.com/api/guilds/${guildId}/widget.json`; fetch(apiUrl) .then(response > response.json()) .then(data > { if (data && data.presence_count) { const countElement document.getElementById(onlineCount); const badgeElement document.getElementById(discordCount); if (countElement && badgeElement) { countElement.innerText data.presence_count; badgeElement.classList.remove(hidden); // Optional: Change button text slightly to emphasize community // document.getElementById(discordBtnText).innerText Discord Community; } } }) .catch(err > console.error(Error fetching Discord widget:, err)); }); /script> a href#services classgroup inline-flex items-center justify-center px-8 py-4 text-base font-black uppercase glass-card text-foreground rounded-full hover:shadow-glow transition-all duration-300> span>Explore Services/span> i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> !-- Benchmark Comparison Cards - Unique CloudCheap Layout --> div classmax-w-6xl mx-auto> div classtext-center mb-8 data-aosfade-up> h2 classtext-3xl md:text-4xl font-black text-foreground mb-2> span classbg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent>Benchmark/span> /h2> p classtext-muted-foreground>Real-world performance comparison/p> /div> div classgrid grid-cols-1 lg:grid-cols-2 gap-6 data-aosfade-up data-aos-delay100> !-- Intel Xeon Card --> div classglass-card rounded-3xl p-8 space-y-6 relative overflow-hidden hover-glow group> !-- Accent gradient overlay --> div classabsolute inset-0 bg-gradient-to-br from-cyan-500/5 to-blue-600/5 pointer-events-none>/div> div classrelative z-10> !-- Card Header --> div classmb-6> div classflex items-center justify-between mb-2> span classtext-xs uppercase tracking-wider font-black text-cyan-400>Enterprise/span> i classbi bi-cpu text-2xl text-cyan-400>/i> /div> h3 classtext-2xl font-black text-foreground mb-1>Intel Xeon E5-2686V4/h3> p classtext-sm text-muted-foreground font-medium>Enterprise Stability | 3.0GHz/p> /div> !-- Benchmark Scores --> div classspace-y-4 mb-6> !-- PassMark --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>PassMark Single Thread/span> span classtext-lg font-black text-cyan-400>1,804/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full stylewidth: 49%>/div> /div> p classtext-xs text-muted-foreground italic>Industry Standard Rating/p> /div> !-- Cinebench --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>Cinebench R23 (Single-Core)/span> span classtext-lg font-black text-cyan-400>830/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full stylewidth: 50%>/div> /div> p classtext-xs text-muted-foreground italic>Pure IPC Performance/p> /div> /div> !-- Use Case --> div classpt-4 border-t border-border/50> p classtext-sm text-muted-foreground leading-relaxed> Hiệu năng ổn định cho server Survival 1.12.2 hoặc server ít người chơi với mức giá rẻ nhất. /p> /div> /div> /div> !-- AMD Ryzen Card --> div classglass-card rounded-3xl p-8 space-y-6 relative overflow-hidden hover-glow group> !-- Accent gradient overlay --> div classabsolute inset-0 bg-gradient-to-br from-orange-500/5 to-red-600/5 pointer-events-none>/div> div classrelative z-10> !-- Card Header with Badge --> div classmb-6> div classflex items-center justify-between mb-2> span classtext-xs uppercase tracking-wider font-black text-orange-400>High Tech Node/span> i classbi bi-lightning-charge-fill text-2xl text-orange-400>/i> /div> h3 classtext-2xl font-black text-foreground mb-1>AMD Ryzen 9 5950X/h3> p classtext-sm text-muted-foreground font-medium>Zen 3 High-End | 4.9GHz/p> /div> !-- Benchmark Scores --> div classspace-y-4 mb-6> !-- PassMark --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>PassMark Single Thread/span> span classtext-lg font-black text-orange-400>3,693/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-orange-500 to-red-500 rounded-full animate-pulse stylewidth: 100%>/div> /div> p classtext-xs text-muted-foreground italic>Industry Standard Rating/p> /div> !-- Cinebench --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>Cinebench R23 (Single-Core)/span> span classtext-lg font-black text-orange-400>1,644/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-orange-500 to-red-500 rounded-full stylewidth: 100%>/div> /div> p classtext-xs text-muted-foreground italic>Pure IPC Performance/p> /div> /div> !-- Use Case --> div classpt-4 border-t border-border/50> p classtext-sm text-muted-foreground leading-relaxed> Sức mạnh vượt trội cho các phiên bản 1.20+, 1.21+ và các cụm server Modpack nặng nhất. /p> /div> /div> /div> /div> /div> /div>/section> !-- Plugin Integration Showcase - Anime Style --> section classpy-24 relative overflow-hidden> div classcontainer relative z-10 px-4 mx-auto> div classflex flex-col lg:flex-row items-center gap-16> !-- Text Content --> div classw-full lg:w-1/2 data-aosfade-right> div classinline-flex items-center px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-500 font-bold text-sm mb-6> i classbi bi-stars me-2>/i> Exclusive Feature /div> h2 classtext-4xl md:text-6xl font-black mb-6 leading-tight> Plugin Integration br /> span classtext-blue-500>simple with 1-click/span> /h2> p classtext-xl text-muted-foreground mb-8 leading-relaxed> Discover a massive plugin library and install instantly with just one click. Save management time, focus on player experience. /p> div classflex flex-wrap gap-4> div classflex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border p-4 rounded-2xl> i classbi bi-zap-fill text-yellow-500 text-xl>/i> span classfont-bold>Lightning Fast/span> /div> div classflex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border p-4 rounded-2xl> i classbi bi-shield-check text-green-500 text-xl>/i> span classfont-bold>Safe & Stable/span> /div> /div> /div> !-- Image Showcase --> div classw-full lg:w-1/2 relative data-aosfade-left> div classrelative z-10 anime-card bg-gradient-to-br from-blue-500/10 to-purple-500/10 p-2 rounded-2.5rem border border-white/20 shadow-2xl overflow-hidden group> img src/uploads/Screenshot 2026-02-05 at 02.38.28.png altPlugin Panel classrounded-2rem w-full shadow-lg transition-transform duration-700 group-hover:scale-105 /> !-- Decorative Elements --> div classabsolute -top-10 -right-10 w-40 h-40 bg-blue-500/20 blur-3xl rounded-full>/div> div classabsolute -bottom-10 -left-10 w-40 h-40 bg-purple-500/20 blur-3xl rounded-full>/div> /div> !-- Floating Badge --> div classabsolute -bottom-6 -right-6 lg:-right-12 z-20 bg-card/90 backdrop-blur-xl border border-blue-500/30 p-6 rounded-3xl shadow-2xl animate-bounce-slight> div classflex items-center gap-4> div classw-12 h-12 rounded-2xl bg-blue-500 flex items-center justify-center text-white text-2xl> i classbi bi-cursor-fill>/i> /div> div> div classtext-sm text-muted-foreground font-bold>Installer/div> div classtext-lg font-black text-blue-500>1-Click Plugin/div> /div> /div> /div> /div> /div> /div> /section> !-- Comprehensive Product Showcase --> !-- Comprehensive Hosting Packages Section -->section classpy-20 relative overflow-hidden> div classcontainer mx-auto px-4> !-- Section Title --> div classtext-center mb-12 data-aosfade-up> h2 classtext-4xl md:text-5xl font-black mb-4> span classbg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600 bg-clip-text text-transparent> Các gói hosting Minecraft - Bot Discord /span> /h2> p classtext-lg text-muted-foreground> Chọn gói phù hợp với nhu cầu của bạn /p> /div> !-- Horizontal Scrollable Cards with Fading Masks --> div classrelative group/carousel data-aosfade-up data-aos-delay100> !-- Left scroll button --> button onclickscrollCarousel(-1) classhidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 items-center justify-center rounded-full bg-primary/20 backdrop-blur-md border border-primary/30 text-white hover:bg-primary/40 transition-all duration-300 opacity-0 group-hover/carousel:opacity-100 cursor-pointer> i classbi bi-chevron-left text-xl>/i> /button> !-- Side masks for smooth edges --> div classabsolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-background to-transparent z-20 pointer-events-none>/div> div classabsolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-background to-transparent z-20 pointer-events-none>/div> !-- Scrollable container --> div idplansCarousel classflex gap-6 overflow-x-auto scrollbar-hide scroll-smooth py-8 px-12 stylescrollbar-width: none; -ms-overflow-style: none;> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/50 text-blue-400 text-xs font-black uppercase> DISCORD BOT /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Discord Bot - mini/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Entry-level Node.js/Python hosting/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>2GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>10GB Disk/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>Node.js/Python/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>24/7 Support/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent> 20.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-bot-discord#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Spark/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>2GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>10GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 20.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Blaze/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>4GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>30GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 115.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/50 text-blue-400 text-xs font-black uppercase> DISCORD BOT /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Discord Bot - Plus/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho nhóm bot Discord vừa, website doanh nghiệp nhỏ, traffic vừa phải, Teamspeak 3./p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>400% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>4GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>10GB Disk/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>Node.js/Python/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>24/7 Support/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent> 40.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-bot-discord#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Leaf/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>4GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>20GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 50.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Vine/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>300% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>6GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>30GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 140.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/50 text-blue-400 text-xs font-black uppercase> DISCORD BOT /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Discord Bot - Large/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho bot Discord nhiều người dùng, website thương mại, traffic cao, Teamspeak 3. /p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>4% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>8GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>20GB Disk/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>Node.js/Python/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>24/7 Support/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent> 80.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-bot-discord#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Fortress/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>400% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>8GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>30GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 110.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Citadel/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>400% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>8GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>40GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 200.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Titan/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>800% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>16GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>50GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 220.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Hyperion/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>800% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>16GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>50GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 380.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> /div> !-- Right scroll button --> button onclickscrollCarousel(1) classhidden md:flex absolute right-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 items-center justify-center rounded-full bg-primary/20 backdrop-blur-md border border-primary/30 text-white hover:bg-primary/40 transition-all duration-300 opacity-0 group-hover/carousel:opacity-100 cursor-pointer> i classbi bi-chevron-right text-xl>/i> /button> /div> !-- See More Button --> div classtext-center mt-12 data-aosfade-up data-aos-delay200> a href/hosting-minecraft-gia-re#pricing classinline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-lg hover:shadow-glow-strong transition-all duration-300 group> Xem thêm gói hosting i classbi bi-arrow-right group-hover:translate-x-1 transition-transform duration-300>/i> /a> /div> /div>/section>style> /* Hide scrollbar */ .scrollbar-hide::-webkit-scrollbar { display: none; }/style>script> function scrollCarousel(direction) { const carousel document.getElementById(plansCarousel); const scrollAmount 350; // Width of card + gap carousel.scrollBy({ left: direction * scrollAmount, behavior: smooth }); }/script> section classpy-24 relative idservices> div classcontainer relative z-10 px-4 mx-auto> div classtext-center mb-16 space-y-4 animate-fade-in> h2 classtext-4xl md:text-5xl font-black> span classtext-primary animate-pulse> Our Services /span> /h2> p classtext-xl text-muted-foreground max-w-2xl mx-auto font-medium> span classinline-block animate-bounce-slight>✨/span> Complete solutions for all your hosting and development needs /p> /div> div classgrid md:grid-cols-3 gap-8> !-- Hosting Service --> div classanime-card group relative bg-card/80 backdrop-blur-xl border border-blue-500/10 dark:border-blue-500/30 rounded-3xl p-8 overflow-hidden hover:border-blue-500/50 transition-all duration-300> div classabsolute -right-10 -top-10 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl group-hover:bg-blue-500/20 transition-all duration-300>/div> div classrelative z-10> div classmb-6 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-500/10 dark:bg-blue-500/20 text-blue-500 animate-bounce-slight> i classbi bi-hdd-network-fill text-3xl>/i> /div> h3 classtext-2xl font-bold mb-3 text-foreground>Hosting Services/h3> p classtext-base text-muted-foreground mb-6 leading-relaxed> Stable hosting solutions, high speed with 99.9% uptime. Suitable for all project sizes. /p> ul classspace-y-3 mb-8> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-check-circle-fill text-blue-500>/i> span>Hosting/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-shield-check-fill text-blue-500>/i> span>Free SSL Certificate/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-cloud-arrow-up-fill text-blue-500>/i> span>Automatic Backup/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-headset text-blue-500>/i> span>24/7 Support/span> /li> /ul> a classanime-badge inline-flex items-center justify-center w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all duration-300 href/Home/HostingServices> View Details i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> !-- Coding Service --> div classanime-card group relative bg-card/80 backdrop-blur-xl border border-pink-500/10 dark:border-pink-500/30 rounded-3xl p-8 overflow-hidden hover:border-pink-500/50 transition-all duration-300> div classabsolute -right-10 -top-10 w-32 h-32 bg-pink-500/10 rounded-full blur-2xl group-hover:bg-pink-500/20 transition-all duration-300>/div> div classrelative z-10> div classmb-6 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-pink-500/10 dark:bg-pink-500/20 text-pink-500 animate-bounce-slight styleanimation-delay: 0.5s> i classbi bi-code-slash text-3xl>/i> /div> h3 classtext-2xl font-bold mb-3 text-foreground>Coding Services/h3> p classtext-base text-muted-foreground mb-6 leading-relaxed> Professional programming services from web, app to automation. Clean code, optimized, easy to maintain. /p> ul classspace-y-3 mb-8> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-check-circle-fill text-pink-500>/i> span>Web Development/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-robot text-pink-500>/i> span>Bot Development/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-file-earmark-code-fill text-pink-500>/i> span>Custom Scripts/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-puzzle-fill text-pink-500>/i> span>API Integration/span> /li> /ul> a classanime-badge inline-flex items-center justify-center w-full px-6 py-3 bg-pink-500 hover:bg-pink-600 text-white rounded-xl font-bold shadow-lg shadow-pink-500/30 transition-all duration-300 href/Home/CodingServices> View Details i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> !-- Support Service --> div classanime-card group relative bg-card/80 backdrop-blur-xl border border-purple-500/10 dark:border-purple-500/30 rounded-3xl p-8 overflow-hidden hover:border-purple-500/50 transition-all duration-300> div classabsolute -right-10 -top-10 w-32 h-32 bg-purple-500/10 rounded-full blur-2xl group-hover:bg-purple-500/20 transition-all duration-300>/div> div classrelative z-10> div classmb-6 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-500/10 dark:bg-purple-500/20 text-purple-500 animate-bounce-slight styleanimation-delay: 1s> i classbi bi-chat-heart-fill text-3xl>/i> /div> h3 classtext-2xl font-bold mb-3 text-foreground>Consulting & Support/h3> p classtext-base text-muted-foreground mb-6 leading-relaxed> Experienced technical team ready to advise and support you in all projects. /p> ul classspace-y-3 mb-8> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-check-circle-fill text-purple-500>/i> span>Free Consultation/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-tools text-purple-500>/i> span>Technical Support/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-clipboard-data-fill text-purple-500>/i> span>Project Planning/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-lightbulb-fill text-purple-500>/i> span>Problem Solving/span> /li> /ul> a classanime-badge inline-flex items-center justify-center w-full px-6 py-3 bg-purple-500 hover:bg-purple-600 text-white rounded-xl font-bold shadow-lg shadow-purple-500/30 transition-all duration-300 href/Home/ConsultingServices> View Details i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> /div> /div>/section> section idreviews classpy-24 relative overflow-hidden bg-background/30 backdrop-blur-sm border-y border-border/50> !-- Anime-style Background Elements --> div classabsolute top-20 left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none animate-pulse-slow>/div> div classabsolute bottom-20 right-10 w-80 h-80 bg-primary/5 rounded-full blur-3xl pointer-events-none animate-pulse-slow styleanimation-delay: 1.5s>/div> div classcontainer mx-auto px-4 relative z-10> !-- Header --> div classmax-w-3xl mx-auto text-center mb-16 data-aosfade-up> div classinline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-500 text-xs font-black uppercase tracking-widest mb-4> i classbi bi-chat-heart-fill>/i> Customer Testimonials /div> h2 classtext-4xl md:text-6xl font-black text-foreground mb-6 tracking-tight> Customer Reviews /h2> p classtext-lg text-muted-foreground font-medium> We always strive to bring the best experience to the community. /p> /div> !-- Strictly 4-Column Grid for 1-1-1-1 Row Layout --> div classreviews-grid-new data-aosfade-up> style> .reviews-grid-new { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; max-width: 1440px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 768px) { .reviews-grid-new { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .review-card-modern { height: 100%; background: rgba(var(--card), 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(var(--border), 0.5); padding: 1.5rem; border-radius: 2rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .review-card-modern:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); border-bottom: 4px solid #3b82f6; } /style> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/3.png altdattruong_158 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>dattruong_158/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> Siêu thích mấy bạn, các bạn tư vấn oke mong sever và các bạn luôn giữ lửa trong công việc /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 07/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/3.png altfrostngoo classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>frostngoo/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> Lần đầu dùng host discord bot, mình bất ngờ anh em dev nhiệt tình giúp đỡ mình chạy cho em nó hoạt động và mình rất là vui <3 Cảm ơn anh em dev cheapasia rất nhiều. /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 04/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png althunterzpotchari classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>hunterzpotchari/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> nhiệt tình /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 04/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png alttnnguyen1912 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>tnnguyen1912/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> dùng ok lắm nha, tốc độ load khá nhanh rcm mọi người dùng thử vì giá rẻ mà chất lượng quá oke /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 03/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png altmeomeoo05 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>meomeoo05/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> tư vấn nhiệt tình, làm việc nhanh gọn và làm hài lòng 1 ng khó tính như mình🩶 /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 03/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/2.png althabitat_ classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>habitat_/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> tui thấy múp như em ghẹ loli /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 28/01/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png altquangluuminh2812 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>quangluuminh2812/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> Staff oke quá gọi đúng 5p rep ngay 🤡tết giàu nâng cấp sv /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 27/01/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/3.png altflorencewm classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>florencewm/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> toi yeu mit bel /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 27/01/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> /div> !-- View All Button --> div classmt-20 text-center data-aosfade-up> a href/Reviews/All classinline-flex items-center gap-3 px-10 py-5 bg-foreground text-background rounded-3xl font-black text-lg transition-all duration-300 hover:scale-105 hover:bg-blue-600 hover:text-white shadow-xl hover:shadow-blue-500/20 active:scale-95 group> View All Reviews i classbi bi-arrow-right-circle text-2xl group-hover:translate-x-2 transition-transform>/i> /a> /div> /div>/section> section idstaff classpy-24 relative overflow-hidden> !-- Background Elements --> div classabsolute inset-0 -z-10> div classabsolute top-0 right-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2>/div> div classabsolute bottom-0 left-0 w-96 h-96 bg-slate-500/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2>/div> /div> div classcontainer mx-auto px-4 relative> div classtext-center max-w-3xl mx-auto mb-16> h2 classtext-4xl md:text-5xl font-black mb-6 data-aosfade-up> Our Team /h2> div classw-20 h-1.5 bg-slate-500 mx-auto rounded-full mb-6 data-aosfade-up data-aos-delay100>/div> p classtext-muted-foreground text-lg font-medium data-aosfade-up data-aos-delay200> Dedicated experts ready to support you 24/7. /p> /div> div classgrid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8> div classgroup data-aosfade-up> div classbg-card rounded-2rem p-8 border border-border/50 shadow-lg shadow-black/5 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 hover:-translate-y-2 relative overflow-hidden> !-- Anime-style Decoration --> div classabsolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-slate-500/10 to-transparent rounded-bl-3rem -z-0>/div> div classrelative z-10 text-center> div classw-32 h-32 mx-auto mb-6 relative> div classabsolute inset-0 bg-blue-600 rounded-full rotate-6 group-hover:rotate-12 transition-transform duration-500>/div> div classabsolute inset-0.5 bg-card rounded-full z-10 overflow-hidden> img src/uploads/staff/e028119f-f600-4c9b-985c-da111a05f761.webp altAns classw-full h-full object-cover> /div> !-- Role Badge --> div classabsolute -bottom-2 right-0 bg-blue-600 text-white text-10px font-black py-1 px-3 rounded-full shadow-lg border-2 border-card z-20 uppercase tracking-tighter> Developer & Technical Owner /div> /div> h3 classtext-xl font-black text-foreground mb-1>Ans/h3> p classtext-muted-foreground text-sm font-medium leading-relaxed italic>Responsible for system architecture, product development, and direct technical support./p> /div> /div> /div> div classgroup data-aosfade-up> div classbg-card rounded-2rem p-8 border border-border/50 shadow-lg shadow-black/5 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 hover:-translate-y-2 relative overflow-hidden> !-- Anime-style Decoration --> div classabsolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-slate-500/10 to-transparent rounded-bl-3rem -z-0>/div> div classrelative z-10 text-center> div classw-32 h-32 mx-auto mb-6 relative> div classabsolute inset-0 bg-blue-600 rounded-full rotate-6 group-hover:rotate-12 transition-transform duration-500>/div> div classabsolute inset-0.5 bg-card rounded-full z-10 overflow-hidden> img src/uploads/staff/8d5a6aed-327a-4895-8d99-98b43eaf13ec.jpg altmizznotfound classw-full h-full object-cover> /div> !-- Role Badge --> div classabsolute -bottom-2 right-0 bg-blue-600 text-white text-10px font-black py-1 px-3 rounded-full shadow-lg border-2 border-card z-20 uppercase tracking-tighter> Developer & Technical Support /div> /div> h3 classtext-xl font-black text-foreground mb-1>mizznotfound/h3> p classtext-muted-foreground text-sm font-medium leading-relaxed italic>Chịu trách nhiệm phát triển, vận hành và hỗ trợ kỹ thuật plugin Minecraft & hosting./p> /div> /div> /div> div classgroup data-aosfade-up> div classbg-card rounded-2rem p-8 border border-border/50 shadow-lg shadow-black/5 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 hover:-translate-y-2 relative overflow-hidden> !-- Anime-style Decoration --> div classabsolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-slate-500/10 to-transparent rounded-bl-3rem -z-0>/div> div classrelative z-10 text-center> div classw-32 h-32 mx-auto mb-6 relative> div classabsolute inset-0 bg-blue-600 rounded-full rotate-6 group-hover:rotate-12 transition-transform duration-500>/div> div classabsolute inset-0.5 bg-card rounded-full z-10 overflow-hidden> img src/uploads/staff/82bf82ba-67f6-4867-8f3a-9010f3ad3c97.png altdemu®e classw-full h-full object-cover> /div> !-- Role Badge --> div classabsolute -bottom-2 right-0 bg-blue-600 text-white text-10px font-black py-1 px-3 rounded-full shadow-lg border-2 border-card z-20 uppercase tracking-tighter> Discord Bot Developer & Minecraft Support /div> /div> h3 classtext-xl font-black text-foreground mb-1>demu®e/h3> p classtext-muted-foreground text-sm font-medium leading-relaxed italic>Responsible for developing Discord bots and handling Minecraft technical support./p> /div> /div> /div> /div> /div> /section>/div>/main>footer classrelative border-t border-border/50 py-12 overflow-hidden bg-card> !-- Subtle gradient --> div classabsolute inset-0 bg-gradient-to-t from-blue-500/5 to-transparent>/div> div classcontainer relative z-10 px-4 mx-auto> div classgrid grid-cols-2 lg:grid-cols-5 gap-8 mb-8> !-- Brand --> div classspace-y-4> a classblock href/> img src/images/website_logo.png altCloudCheap classh-16 md:h-20 w-auto object-contain /> /a> p classtext-sm text-muted-foreground> Professional hosting and coding solutions for all needs /p> /div> !-- Services --> div classspace-y-4> h4 classfont-semibold text-foreground>Services/h4> ul classspace-y-2 text-sm> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/HostingServices> Hosting Services /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/CodingServices> Coding Services /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/about> About Us /a> /li> /ul> /div> !-- Solutions (Popular Services) --> div classspace-y-4> h4 classfont-semibold text-foreground>Popular Services/h4> ul classspace-y-2 text-sm> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 font-medium href/hosting-minecraft-gia-re> Cheap Minecraft Hosting /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 font-medium href/hosting-bot-discord> Discord Bot Hosting /a> /li> /ul> /div> !-- Community --> div classspace-y-4> h4 classfont-semibold text-foreground>Community/h4> ul classspace-y-2 text-sm> li> a hrefhttps://discord.gg/pDDfWVbWgK target_blank relnoopener noreferrer classtext-muted-foreground hover:text-primary transition-colors duration-200> Discord Server /a> /li> li> a href/recruitment classtext-muted-foreground hover:text-primary transition-colors duration-200> Recruitment /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Blog> Blog /a> /li> /ul> /div> !-- Contact --> div classspace-y-4> h4 classfont-semibold text-foreground>Contact/h4> ul classspace-y-2 text-sm> li> a hrefhttps://discord.gg/pDDfWVbWgK target_blank relnoopener noreferrer classtext-muted-foreground hover:text-primary transition-colors duration-200> Discord: Cloudcheap Server /a> /li> li> a hrefhttps://www.facebook.com/cheapclouds target_blank relnoopener noreferrer classtext-muted-foreground hover:text-primary transition-colors duration-200> Facebook Fanpage /a> /li> /ul> /div> /div> !-- Bottom --> div classpt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center gap-4> p classtext-sm text-muted-foreground> © 2024 Cloudcheap. All rights reserved. /p> div classflex gap-6 text-sm> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/FAQ> FAQ /a> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/TOS> Terms of Service /a> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/Privacy> Privacy /a> /div> /div> /div>/footer>script src/lib/jquery/dist/jquery.min.js>/script>script src/js/site.js?vrjbDN1_eYKB1gyxDxfLPgj1Jbd0RnbpFgcIrUNhHv6A>/script>!-- Mobile Menu & Dropdown Script -->script> (function() { // Mobile Menu Toggle const mobileMenuBtn document.getElementById(mobileMenuBtn); const mobileMenu document.getElementById(mobileMenu); const menuIcon document.getElementById(menuIcon); const closeIcon document.getElementById(closeIcon); if (mobileMenuBtn && mobileMenu) { mobileMenuBtn.addEventListener(click, () > { const isHidden mobileMenu.classList.contains(hidden); if (isHidden) { mobileMenu.classList.remove(hidden); menuIcon.classList.add(hidden); closeIcon.classList.remove(hidden); } else { mobileMenu.classList.add(hidden); menuIcon.classList.remove(hidden); closeIcon.classList.add(hidden); } }); // Close mobile menu when clicking on a link mobileMenu.querySelectorAll(a).forEach(link > { link.addEventListener(click, () > { mobileMenu.classList.add(hidden); menuIcon.classList.remove(hidden); closeIcon.classList.add(hidden); }); }); } // User Dropdown Toggle (Mobile) const userDropdownBtn document.getElementById(userDropdownBtn); const userDropdown document.getElementById(userDropdown); const userDropdownIcon document.getElementById(userDropdownIcon); const userDropdownContainer document.getElementById(userDropdownContainer); // Function to show dropdown (desktop only) function showUserDropdown() { if (userDropdown && window.innerWidth > 768) { userDropdown.classList.remove(opacity-0, invisible, translate-y-2); userDropdown.classList.add(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(180deg); } } } // Function to hide dropdown function hideUserDropdown() { if (userDropdown && window.innerWidth > 768) { userDropdown.classList.remove(opacity-100, visible, translate-y-0); userDropdown.classList.add(opacity-0, invisible, translate-y-2); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } } if (userDropdownBtn && userDropdown) { // Check if mobile const isMobile window.innerWidth 768; userDropdownBtn.addEventListener(click, (e) > { if (window.innerWidth 768) { e.stopPropagation(); const isHidden userDropdown.classList.contains(opacity-0) || userDropdown.classList.contains(invisible); if (isHidden) { userDropdown.classList.remove(opacity-0, invisible, translate-y-2); userDropdown.classList.add(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(180deg); } } else { userDropdown.classList.add(opacity-0, invisible, translate-y-2); userDropdown.classList.remove(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } } }); // Close dropdown when clicking outside document.addEventListener(click, (e) > { if (window.innerWidth 768 && userDropdownContainer && !userDropdownContainer.contains(e.target)) { userDropdown.classList.add(opacity-0, invisible, translate-y-2); userDropdown.classList.remove(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } }); // Handle window resize window.addEventListener(resize, () > { if (window.innerWidth > 768) { // Reset mobile state on desktop userDropdown.classList.add(opacity-0, invisible, translate-y-2); userDropdown.classList.remove(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } }); } // Notification Dropdown Toggle (Mobile) const notificationBtn document.getElementById(notificationBtn); const notificationDropdown document.getElementById(notificationDropdown); if (notificationBtn && notificationDropdown) { notificationBtn.addEventListener(click, (e) > { if (window.innerWidth 768) { e.stopPropagation(); notificationDropdown.classList.toggle(hidden); } }); // Close notification dropdown when clicking outside document.addEventListener(click, (e) > { if (window.innerWidth 768 && !notificationBtn.contains(e.target) && !notificationDropdown.contains(e.target)) { notificationDropdown.classList.add(hidden); } }); } // Expose functions globally window.showUserDropdown showUserDropdown; window.hideUserDropdown hideUserDropdown; })();/script>!-- Scroll Animation Script -->script> (function() { let lastScrollTop 0; const nav document.getElementById(mainNav); const userDropdown document.getElementById(userDropdownContainer); const userIndicator userDropdown?.querySelector(#userDropdownIcon); let ticking false; let scrollDirection none; function updateNav() { const scrollTop window.pageYOffset || document.documentElement.scrollTop; const currentDirection scrollTop > lastScrollTop ? down : up; if (scrollTop > 100) { // Add shadow and increase opacity when scrolled nav.classList.add(shadow-md); // Animate user dropdown on scroll direction change if (currentDirection ! scrollDirection && scrollTop > 50) { if (userDropdown) { userDropdown.classList.add(user-dropdown-enter); setTimeout(() > { userDropdown.classList.remove(user-dropdown-enter); }, 300); } // Animate indicator icon if (userIndicator) { if (currentDirection down) { userIndicator.style.transform rotate(0deg); } else { userIndicator.style.transform rotate(180deg); } } scrollDirection currentDirection; } // Hide/show on scroll direction if (scrollTop > lastScrollTop && scrollTop > 200) { // Scrolling down - hide navbar nav.style.transform translateY(-100%); nav.style.opacity 0; } else { // Scrolling up - show navbar nav.style.transform translateY(0); nav.style.opacity 1; } } else { // Top of page - reset styles nav.classList.remove(shadow-xl, shadow-md); nav.style.transform translateY(0); nav.style.opacity 1; // Reset user indicator if (userIndicator) { userIndicator.style.transform rotate(0deg); } scrollDirection none; } lastScrollTop scrollTop; ticking false; } function requestTick() { if (!ticking) { window.requestAnimationFrame(updateNav); ticking true; } } window.addEventListener(scroll, requestTick, { passive: true }); // Initial state updateNav(); // Add hover animation to user dropdown if (userDropdown) { userDropdown.addEventListener(mouseenter, function() { const dropdown this.querySelector(.absolute); if (dropdown) { dropdown.style.transform translateY(0); dropdown.style.opacity 1; dropdown.style.visibility visible; } const icon this.querySelector(svg); if (icon) { icon.style.transform rotate(180deg); } }); userDropdown.addEventListener(mouseleave, function() { const icon this.querySelector(svg); if (icon) { icon.style.transform rotate(0deg); } }); } })();/script>!-- Toast Notification Script -->script> (function() { // Toast notification function function showToast(message, type success) { const container document.getElementById(toastContainer); if (!container) return; const toast document.createElement(div); const toastId toast- + Date.now(); toast.id toastId; const bgColor type success ? bg-green-500/20 border-green-500/50 : type error ? bg-red-500/20 border-red-500/50 : type warning ? bg-yellow-500/20 border-yellow-500/50 : bg-blue-500/20 border-blue-500/50; const textColor type success ? text-green-400 : type error ? text-red-400 : type warning ? text-yellow-400 : text-blue-400; const icon type success ? i classbi bi-check-circle-fill>/i> : type error ? i classbi bi-x-circle-fill>/i> : type warning ? i classbi bi-exclamation-triangle-fill>/i> : i classbi bi-info-circle-fill>/i>; toast.className `${bgColor} ${textColor} border rounded-lg p-4 shadow-xl backdrop-blur-sm flex items-start gap-3 toast-enter`; toast.innerHTML ` span classtext-xl>${icon}/span> div classflex-1> p classtext-sm font-medium>${message}/p> /div> button onclickcloseToast(${toastId}) classtext-muted-foreground hover:text-foreground transition-colors> i classbi bi-x-lg>/i> /button> `; container.appendChild(toast); // Auto remove after 5 seconds setTimeout(() > { closeToast(toastId); }, 5000); } function closeToast(toastId) { const toast document.getElementById(toastId); if (toast) { toast.classList.remove(toast-enter); toast.classList.add(toast-exit); setTimeout(() > { toast.remove(); }, 300); } } // Make functions globally available window.showToast showToast; window.closeToast closeToast; // Check for TempData messages })();/script>!-- Notification System -->script srchttps://cdn.jsdelivr.net/npm/@microsoft/signalr@7/dist/browser/signalr.min.js>/script>script> (async function() { // Security: Email is stored in session server-side, not exposed in client JavaScript const isAdmin false; const isSupporter false; const isVietnamese en vi; // Check authentication via session (server-side check) const isAuthenticated false; if (!isAuthenticated) return; // Skip if not logged in let notifications ; let unreadCount 0; const notificationBtn document.getElementById(notificationBtn); const notificationBadge document.getElementById(notificationBadge); const notificationDropdown document.getElementById(notificationDropdown); const notificationList document.getElementById(notificationList); const markAllReadBtn document.getElementById(markAllReadBtn); if (!notificationBtn || !notificationBadge || !notificationDropdown || !notificationList) return; // Toggle notification dropdown notificationBtn.addEventListener(click, (e) > { e.stopPropagation(); notificationDropdown.classList.toggle(hidden); }); // Close dropdown when clicking outside document.addEventListener(click, (e) > { if (!notificationDropdown.contains(e.target) && !notificationBtn.contains(e.target)) { notificationDropdown.classList.add(hidden); } }); // Load notifications from database async function loadNotifications() { try { const response await fetch(/api/Support/notifications); if (response.ok) { const data await response.json(); notifications data.map(n > ({ id: n.id, type: n.type || info, title: n.title || , message: n.message || , link: n.link || null, timestamp: n.createdAt, read: n.isRead || false })); unreadCount notifications.filter(n > !n.read).length; updateBadge(); renderNotifications(); } } catch (err) { // Error loading notifications } } // Load unread count async function loadUnreadCount() { try { const response await fetch(/api/Support/notifications/unread-count); if (response.ok) { const data await response.json(); unreadCount data.count || 0; updateBadge(); } } catch (err) { // Error loading unread count } } // Mark all as read if (markAllReadBtn) { markAllReadBtn.addEventListener(click, async () > { try { const response await fetch(/api/Support/notifications/mark-all-read, { method: POST }); if (response.ok) { notifications.forEach(n > n.read true); unreadCount 0; updateBadge(); renderNotifications(); } } catch (err) { // Error marking all as read } }); } // Mark single notification as read window.markAsRead async function(notificationId) { const notif notifications.find(n > n.id notificationId); if (notif && !notif.read) { try { const response await fetch(`/api/Support/notifications/${notificationId}/read`, { method: PATCH }); if (response.ok) { notif.read true; unreadCount Math.max(0, unreadCount - 1); updateBadge(); renderNotifications(); } } catch (err) { // Error marking as read } } }; function addNotification(notification) { // Add to local array for immediate display notifications.unshift({ id: notification.id || Date.now(), type: notification.type || info, title: notification.title || , message: notification.message || , link: notification.link || null, timestamp: notification.timestamp || new Date(), read: notification.read || false }); if (notifications.length > 50) { notifications notifications.slice(0, 50); } if (!notification.read) { unreadCount++; } updateBadge(); renderNotifications(); showToast(notification); } function updateBadge() { if (unreadCount > 0) { notificationBadge.textContent unreadCount > 99 ? 99+ : unreadCount; notificationBadge.classList.remove(hidden); } else { notificationBadge.classList.add(hidden); } } function renderNotifications() { if (notifications.length 0) { notificationList.innerHTML ` div classp-4 text-center text-muted-foreground text-sm> ${isVietnamese ? Không có thông báo : No notifications} /div> `; return; } notificationList.innerHTML notifications.map(notif > { const date new Date(notif.timestamp || notif.createdAt); const timeStr date.toLocaleString(isVietnamese ? vi-VN : en-US, { month: short, day: numeric, hour: 2-digit, minute: 2-digit }); const isRead notif.read || notif.isRead || false; const bgClass isRead ? bg-card : bg-primary/10; const clickHandler notif.link ? `onclickmarkAsRead(${notif.id}); setTimeout(() > window.location.href${notif.link}, 100)` : `onclickmarkAsRead(${notif.id})`; return ` div classp-4 border-b border-border ${bgClass} cursor-pointer hover:bg-secondary/50 transition-colors ${clickHandler}> div classflex items-start gap-3> div classflex-1> p classfont-semibold text-sm text-foreground>${notif.title}/p> p classtext-sm text-muted-foreground mt-1>${notif.message}/p> p classtext-xs text-muted-foreground mt-2>${timeStr}/p> /div> ${!isRead ? div classw-2 h-2 bg-primary rounded-full mt-1>/div> : } /div> /div> `; }).join(); } function showToast(notification) { const toast document.createElement(div); toast.className toast-enter bg-card border border-border rounded-lg p-4 shadow-2xl mb-2; toast.innerHTML ` div classflex items-start gap-3> div classflex-1> p classfont-semibold text-sm text-foreground>${notification.title}/p> p classtext-sm text-muted-foreground mt-1>${notification.message}/p> /div> button onclickthis.parentElement.parentElement.remove() classtext-muted-foreground hover:text-foreground> svg classw-5 h-5 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM6 18L18 6M6 6l12 12>/path> /svg> /button> /div> `; const container document.getElementById(toastContainer); if (container) { container.appendChild(toast); setTimeout(() > { toast.classList.add(toast-exit); setTimeout(() > toast.remove(), 300); }, 5000); } } // Setup SignalR const connection new signalR.HubConnectionBuilder() .withUrl(/hubs/support) .withAutomaticReconnect() .build(); connection.start() .then(() > { // Email retrieved from session server-side, not passed from client connection.invoke(JoinUserGroup); if (isAdmin || isSupporter) { connection.invoke(JoinSupportStaff); } }) .catch(err > { // SignalR connection error }); // Listen for new support message (for users) connection.on(NewSupportMessage, (data) > { // Reload notifications from database loadNotifications(); loadUnreadCount(); }); // Listen for new user message (for support staff) if (isAdmin || isSupporter) { connection.on(NewUserMessage, (data) > { // Reload notifications from database loadNotifications(); loadUnreadCount(); }); connection.on(NewTicket, (data) > { // Reload notifications from database loadNotifications(); loadUnreadCount(); }); } // Initial load await loadNotifications(); await loadUnreadCount(); // Refresh notifications every 30 seconds setInterval(async () > { await loadNotifications(); await loadUnreadCount(); }, 30000); })();/script>!-- Support Ticket Widget removed -->script srchttps://unpkg.com/aos@2.3.1/dist/aos.js>/script>script> AOS.init({ duration: 1000, once: true, offset: 100, easing: ease-out-cubic });/script>/body>/html>
Port 443
HTTP/1.1 200 OKDate: Sat, 07 Feb 2026 07:28:31 GMTContent-Type: text/html; charsetutf-8Transfer-Encoding: chunkedConnection: keep-aliveCache-Control: no-cache, no-storecontent-language: enpermissions-policy: geolocation(), microphone(), camera()pragma: no-cachereferrer-policy: strict-origin-when-cross-originServer: cloudflareSet-Cookie: .AspNetCore.Antiforgery.KmeuYQLxn4sCfDJ8EBnaoU3OXxKsde0sNJ0XUZ0xVMeowvOpEac9EnKS4w0RaWqEBUOIMmrdsM3dFwXUK_obA4b7Mc-QcXvKfNGrpXqOGvOwycg2sOecyMleO2-Wq47gVg_9eIGYc9o-sj69gXPQ-tKKU5NVwHdRtvjL5c; path/; samesitestrict; httponlySet-Cookie: .AspNetCore.Mvc.CookieTempDataProvider; expiresThu, 01 Jan 1970 00:00:00 GMT; path/; samesitelax; httponlyx-content-type-options: nosniffx-frame-options: SAMEORIGINx-xss-protection: 1; modeblockcf-cache-status: DYNAMICNel: {report_to:cf-nel,success_fraction:0.0,max_age:604800}Report-To: {group:cf-nel,max_age:604800,endpoints:{url:https://a.nel.cloudflare.com/report/v4?ssag2Ib3RArkKVHDgx8ukRfJyY60nkBBB36ORarXR%2FMX18GvZAxiXS7GLiKOe7iwqXixMDuC5hAxiMGX6Oz7%2FyG9Iren%2Fmsmw7r2WAiZUMg%3D%3D}}CF-RAY: 9ca12bbfcb1f3d49-PDXalt-svc: h3:443; ma86400 !DOCTYPE html>html langen>head> meta charsetutf-8/> meta nameviewport contentwidthdevice-width, initial-scale1.0/> !-- Email removed from meta tag for security --> title>Home - Cheap Minecraft & Discord Bot Hosting - CheapCloud/title> meta namedescription contentCloudCheap offers top-tier Web Hosting, Minecraft Hosting and Discord Bot Hosting in Vietnam. 99.9% Uptime, 24/7 technical support, instant activation. /> meta namekeywords contentminecraft hosting, discord bot hosting, cheap web hosting, vietnam vps, create game server, trusted hosting /> meta propertyog:title contentHome - Cheap Minecraft & Discord Bot Hosting - CheapCloud /> meta propertyog:type contentwebsite /> meta propertyog:url contenthttp://cloudcheap.asia/ /> meta propertyog:image content/images/og-image.png /> link relicon typeimage/png href/uploads/shinellord-kali.png> script typeapplication/ld+json> { @context: https://schema.org, @type: Organization, name: CloudCheap, url: http://cloudcheap.asia, logo: http://cloudcheap.asia/images/website_logo.png, sameAs: https://facebook.com/cheapclouds, https://discord.gg/pDDfWVbWgK } /script> !-- Ads removed as requested --> !-- Bootstrap Icons --> link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css> !-- Inter Font from Google Fonts (DiHoaCloud style) --> link relpreconnect hrefhttps://fonts.googleapis.com> link relpreconnect hrefhttps://fonts.gstatic.com crossorigin> link hrefhttps://fonts.googleapis.com/css2?familyInter:wght@300;400;500;600;700;800;900&displayswap relstylesheet> !-- Tailwind CSS CDN --> script srchttps://cdn.tailwindcss.com>/script> script> tailwind.config { darkMode: class, theme: { extend: { fontFamily: { sans: Inter, system-ui, sans-serif, }, colors: { background: hsl(var(--background)), foreground: hsl(var(--foreground)), card: hsl(var(--card)), card-foreground: hsl(var(--card-foreground)), popover: hsl(var(--popover)), popover-foreground: hsl(var(--popover-foreground)), primary: hsl(var(--primary)), primary-foreground: hsl(var(--primary-foreground)), secondary: hsl(var(--secondary)), secondary-foreground: hsl(var(--secondary-foreground)), muted: hsl(var(--muted)), muted-foreground: hsl(var(--muted-foreground)), accent: hsl(var(--accent)), accent-foreground: hsl(var(--accent-foreground)), destructive: hsl(var(--destructive)), destructive-foreground: hsl(var(--destructive-foreground)), border: hsl(var(--border)), input: hsl(var(--input)), ring: hsl(var(--ring)), }, borderRadius: { lg: 0.75rem, }, animation: { pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite, ping-slow: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite, fade-in: fadeIn 0.6s ease-out, slide-up: slideUp 0.6s ease-out, float: float 3s ease-in-out infinite, }, keyframes: { fadeIn: { 0%: { opacity: 0, transform: translateY(10px) }, 100%: { opacity: 1, transform: translateY(0) }, }, slideUp: { 0%: { opacity: 0, transform: translateY(20px) }, 100%: { opacity: 1, transform: translateY(0) }, }, float: { 0%, 100%: { transform: translateY(0px) }, 50%: { transform: translateY(-10px) }, }, } } } } /script> script> // Force dark mode to always be active (DiHoaCloud style) (function() { document.documentElement.classList.add(dark); // Store preference as dark localStorage.setItem(theme, dark); })(); /script> link relstylesheet href/css/site.css?vXEsoifTKfrTD3VCCzXIkcJWh1TE0Ac26pA_1BNiF_zo /> !-- AOS Animation --> link hrefhttps://unpkg.com/aos@2.3.1/dist/aos.css relstylesheet> style> @keyframes fadeIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeIn 1s ease-out; } /* User dropdown animation on scroll */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .user-dropdown-enter { animation: slideDown 0.3s ease-out; } .user-dropdown-leave { animation: slideUp 0.2s ease-in; } /* Pulse effect for user indicator */ @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .user-indicator { animation: pulse-soft 2s ease-in-out infinite; } /* Toast notification animations */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .toast-enter { animation: slideInRight 0.3s ease-out; } .toast-exit { animation: slideOutRight 0.3s ease-in; } /style>/head>body classbg-background text-foreground antialiased font-sans> !-- Global Anime Background Decorations - DiHoaCloud Enhanced --> div b-8ysii5ym8s classfixed inset-0 -z-50 overflow-hidden pointer-events-none> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-blue top-20% left-10% w-64 h-64>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-slate bottom-32 right-20% w-80 h-80>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-pink top-60% left-5% w-48 h-48 opacity-20>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-blue top-40% right-8% w-56 h-56 opacity-30>/div> !-- Extra sparse bubbles for depth --> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-blue bottom-10% left-25% w-40 h-40 opacity-10 styleanimation-delay: 3s>/div> div b-8ysii5ym8s classanime-bg-bubble anime-bubble-slate top-15% right-30% w-32 h-32 opacity-10 styleanimation-delay: 1.5s>/div> /div>!-- Navigation Header - DiHoaCloud Glassmorphism -->nav b-8ysii5ym8s idmainNav classfixed top-0 left-0 right-0 z-50 glass backdrop-blur-xl border-b border-border/30 shadow-sm transition-all duration-300 ease-in-out> div b-8ysii5ym8s classcontainer mx-auto px-4> div b-8ysii5ym8s classflex items-center justify-between h-16> !-- Logo with gradient --> a classblock hover:scale-105 transition-transform shrink-0 href/> img src/images/website_logo.png altCloudCheap classh-16 md:h-20 w-auto object-contain /> /a> !-- Right-side container --> div b-8ysii5ym8s classflex items-center gap-2 sm:gap-4 ml-auto> !-- Desktop Navigation Links --> nav b-8ysii5ym8s classhidden md:flex items-center gap-1> a classpx-3 py-2 text-11px font-bold text-muted-foreground hover:text-blue-600 uppercase transition-colors href/> Home /a> !-- Services --> div b-8ysii5ym8s classrelative group/nav> button b-8ysii5ym8s classflex items-center gap-1 px-3 py-2 text-11px font-bold text-muted-foreground hover:text-blue-600 uppercase transition-colors> Services i b-8ysii5ym8s classbi bi-chevron-down text-8px>/i> /button> div b-8ysii5ym8s classabsolute top-full right-0 w-450px pt-2 opacity-0 invisible group-hover/nav:opacity-100 group-hover/nav:visible transition-all duration-200 z-50> div b-8ysii5ym8s classbg-card rounded-2xl shadow-2xl border border-border/50 p-4 grid grid-cols-2 gap-6> !-- Minecraft Column --> div b-8ysii5ym8s> div b-8ysii5ym8s classtext-10px font-black text-blue-600 uppercase tracking-widest px-3 mb-2 flex items-center gap-2> i b-8ysii5ym8s classbi bi-box-fill>/i> Hosting Minecraft /div> div b-8ysii5ym8s classspace-y-1> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Hosting Game - Ryzen/div> div b-8ysii5ym8s classtext-9px text-muted-foreground font-medium tracking-tight>Cực phẩm hiệu năng cao/div> /a> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Hosting Game - Xeon/div> div b-8ysii5ym8s classtext-9px text-muted-foreground font-medium tracking-tight>Ổn định & Tiết kiệm/div> /a> /div> /div> !-- Others Column --> div b-8ysii5ym8s> div b-8ysii5ym8s classtext-10px font-black text-blue-600 uppercase tracking-widest px-3 mb-2 flex items-center gap-2> i b-8ysii5ym8s classbi bi-app-indicator>/i> Apps & Web /div> div b-8ysii5ym8s classspace-y-1> a b-8ysii5ym8s href/hosting-bot-discord#pricing classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Bot Discord/div> div b-8ysii5ym8s classtext-9px text-blue-500 font-black uppercase>Gói Hosting/div> /a> a classblock px-3 py-2 hover:bg-muted rounded-xl transition-colors group/item href/#pricing> div b-8ysii5ym8s classtext-xs font-bold text-foreground/80 group-hover/item:text-blue-600>Web Hosting/div> div b-8ysii5ym8s classtext-9px text-blue-500 font-black uppercase>Gói Hosting/div> /a> div b-8ysii5ym8s classmy-2 border-t border-border/50>/div> /div> /div> /div> /div> /div> !-- More --> div b-8ysii5ym8s classrelative group/nav> button b-8ysii5ym8s classflex items-center gap-1 px-3 py-2 text-11px font-bold text-muted-foreground hover:text-blue-600 uppercase transition-colors> Community i b-8ysii5ym8s classbi bi-chevron-down text-8px>/i> /button> div b-8ysii5ym8s classabsolute top-full right-0 w-48 pt-2 opacity-0 invisible group-hover/nav:opacity-100 group-hover/nav:visible transition-all duration-200 z-50> div b-8ysii5ym8s classbg-card rounded-2xl shadow-2xl border border-border/50 p-2> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/Blog>Blog/a> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/nhan-vien>Staff/a> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/#reviews>Reviews/a> a classblock px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg flex items-center gap-2 href/about>About/a> /div> /div> /div> a b-8ysii5ym8s href/Support/CreateTicket classml-2 px-4 py-2 bg-blue-600 text-white rounded-xl text-10px font-black hover:bg-blue-700 transition-all uppercase> SUPPORT /a> /nav> !-- Auth & Language --> div b-8ysii5ym8s classflex items-center gap-2 border-l border-border/50 pl-4 ml-2> !-- Language --> div b-8ysii5ym8s classflex items-center> form methodpost classinline action/Home/SetLanguage> input b-8ysii5ym8s typehidden namereturnUrl value/ /> button b-8ysii5ym8s typesubmit nameculture valuevi classw-8 h-8 flex items-center justify-center rounded-lg hover:bg-muted transition-colors > span b-8ysii5ym8s classtext-xs>🇻🇳/span> /button> input name__RequestVerificationToken typehidden valueCfDJ8EBnaoU3OXxKsde0sNJ0XUY_Vp2UW_W_6Kj5LwMdnplPt8wttpRvHBR3_X42mHFMv2U1FPfNdtCeOdUR3Nj24HyyPaKnGGdYdz5AdaBiWs_BvGm5nUV4DsEqc9V6zN29a7-8QafDKSNPvx3BiM7tQJk />/form> form methodpost classinline action/Home/SetLanguage> input b-8ysii5ym8s typehidden namereturnUrl value/ /> button b-8ysii5ym8s typesubmit nameculture valueen classw-8 h-8 flex items-center justify-center rounded-lg hover:bg-muted transition-colors bg-muted> span b-8ysii5ym8s classtext-xs>🇬🇧/span> /button> input name__RequestVerificationToken typehidden valueCfDJ8EBnaoU3OXxKsde0sNJ0XUY_Vp2UW_W_6Kj5LwMdnplPt8wttpRvHBR3_X42mHFMv2U1FPfNdtCeOdUR3Nj24HyyPaKnGGdYdz5AdaBiWs_BvGm5nUV4DsEqc9V6zN29a7-8QafDKSNPvx3BiM7tQJk />/form> /div> a classhidden sm:inline-block text-11px font-bold text-muted-foreground hover:text-primary href/Auth/Login>Login/a> a classpx-4 py-2 bg-primary shadow-lg text-primary-foreground rounded-xl text-10px font-black hover:bg-primary/90 transition-all uppercase href/Auth/Register>SIGN UP/a> /div> !-- Mobile menu toggle --> button b-8ysii5ym8s idmobileMenuBtn classmd:hidden p-2 text-muted-foreground hover:text-primary transition-colors> i b-8ysii5ym8s idmenuIcon classbi bi-list text-2xl>/i> i b-8ysii5ym8s idcloseIcon classbi bi-x-lg text-xl hidden>/i> /button> /div> /div> /div>/nav> !-- Mobile Menu --> div b-8ysii5ym8s idmobileMenu classhidden md:hidden fixed inset-x-0 top-16 bg-card border-b border-border shadow-lg z-40 max-h-calc(100vh-4rem) overflow-y-auto> div b-8ysii5ym8s classcontainer mx-auto px-4 py-4 space-y-2> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors href/> Home /a> div b-8ysii5ym8s classpx-4 py-2 text-10px font-black text-blue-600 uppercase tracking-widest border-t border-border/50 mt-2>Hosting Minecraft/div> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8> Hosting Game - Ryzen /a> a b-8ysii5ym8s href/hosting-minecraft-gia-re#pricing classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8> Hosting Game - Xeon /a> div b-8ysii5ym8s classpx-4 py-2 text-10px font-black text-blue-600 uppercase tracking-widest border-t border-border/50 mt-2>Bot & Web/div> a b-8ysii5ym8s href/hosting-bot-discord#pricing classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8 flex justify-between items-center> span b-8ysii5ym8s>Bot Discord/span> span b-8ysii5ym8s classtext-9px bg-blue-500/10 text-blue-600 px-2 py-0.5 rounded-full font-black>GÓI HOSTING/span> /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-blue-600 hover:bg-blue-500/10 transition-colors pl-8 flex justify-between items-center href/#pricing> span b-8ysii5ym8s>Web Hosting/span> span b-8ysii5ym8s classtext-9px bg-blue-500/10 text-blue-600 px-2 py-0.5 rounded-full font-black>GÓI HOSTING/span> /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/#partners> Partners /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/nhan-vien> Staff /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/Blog> Blog /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/about> About /a> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 href/Home/FAQ> FAQ /a> a b-8ysii5ym8s href/Support/CreateTicket classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200> Support /a> div b-8ysii5ym8s classpt-4 border-t border-border space-y-2> a classblock px-4 py-3 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors duration-200 text-center href/Auth/Login> Login /a> a classblock px-4 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 transition-all duration-300 text-center font-medium href/Auth/Register> Register /a> /div> /div> /div>!-- Toast Notification Container -->div b-8ysii5ym8s idtoastContainer classfixed top-20 right-4 z-50 space-y-2 max-w-sm w-full>/div>!-- Main Content with padding for fixed navbar -->main b-8ysii5ym8s classpt-16> div classmin-h-screen> !-- Hero Section - Unique CloudCheap Layout with Benchmark Cards -->section classrelative min-h-screen flex items-center justify-center overflow-hidden py-20 data-aosfade-up> div classcontainer relative z-10 px-4 mx-auto> !-- Main Hero Content - Centered --> div classmax-w-4xl mx-auto text-center space-y-8 mb-16 data-aosfade-down> !-- Top Badge --> div classinline-block> span classinline-flex items-center gap-2 px-4 py-2 rounded-full glass border text-primary text-sm font-bold uppercase tracking-wider> i classbi bi-star-fill animate-pulse>/i> span classbg-gradient-to-r from-primary to-blue-400 bg-clip-text text-transparent> Professional Solutions /span> /span> /div> !-- Main Heading with Gradient --> h1 classtext-5xl md:text-6xl lg:text-7xl font-black leading-tight> span classtext-foreground> Professional /span> br/> span classbg-gradient-to-r from-primary to-blue-400 bg-clip-text text-transparent> Hosting & Coding /span> br/> span classbg-gradient-gold bg-clip-text text-transparent> Solutions /span> /h1> !-- Description --> p classtext-lg md:text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto> ✨ Join our Discord community and experience high-performance hosting services with modern technology solutions /p> !-- CTA Buttons --> div classflex flex-col sm:flex-row gap-4 justify-center items-center pt-4> a hrefhttps://discord.gg/pDDfWVbWgK target_blank classgroup relative inline-flex items-center justify-center px-8 py-4 text-base font-black uppercase bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-full shadow-glow-strong hover:shadow-glow-strong hover:scale-105 transition-all duration-300> i classbi bi-discord mr-2>/i> span iddiscordBtnText>Join Discord/span> span iddiscordCount classml-2 hidden text-xs bg-black/20 px-2 py-0.5 rounded-full flex items-center gap-1> span classw-2 h-2 rounded-full bg-green-400 animate-pulse>/span> span idonlineCount>0/span> Online /span> /a> script> document.addEventListener(DOMContentLoaded, function() { const guildId 1434620809858515017; // CloudCheap.asia const apiUrl `https://discord.com/api/guilds/${guildId}/widget.json`; fetch(apiUrl) .then(response > response.json()) .then(data > { if (data && data.presence_count) { const countElement document.getElementById(onlineCount); const badgeElement document.getElementById(discordCount); if (countElement && badgeElement) { countElement.innerText data.presence_count; badgeElement.classList.remove(hidden); // Optional: Change button text slightly to emphasize community // document.getElementById(discordBtnText).innerText Discord Community; } } }) .catch(err > console.error(Error fetching Discord widget:, err)); }); /script> a href#services classgroup inline-flex items-center justify-center px-8 py-4 text-base font-black uppercase glass-card text-foreground rounded-full hover:shadow-glow transition-all duration-300> span>Explore Services/span> i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> !-- Benchmark Comparison Cards - Unique CloudCheap Layout --> div classmax-w-6xl mx-auto> div classtext-center mb-8 data-aosfade-up> h2 classtext-3xl md:text-4xl font-black text-foreground mb-2> span classbg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent>Benchmark/span> /h2> p classtext-muted-foreground>Real-world performance comparison/p> /div> div classgrid grid-cols-1 lg:grid-cols-2 gap-6 data-aosfade-up data-aos-delay100> !-- Intel Xeon Card --> div classglass-card rounded-3xl p-8 space-y-6 relative overflow-hidden hover-glow group> !-- Accent gradient overlay --> div classabsolute inset-0 bg-gradient-to-br from-cyan-500/5 to-blue-600/5 pointer-events-none>/div> div classrelative z-10> !-- Card Header --> div classmb-6> div classflex items-center justify-between mb-2> span classtext-xs uppercase tracking-wider font-black text-cyan-400>Enterprise/span> i classbi bi-cpu text-2xl text-cyan-400>/i> /div> h3 classtext-2xl font-black text-foreground mb-1>Intel Xeon E5-2686V4/h3> p classtext-sm text-muted-foreground font-medium>Enterprise Stability | 3.0GHz/p> /div> !-- Benchmark Scores --> div classspace-y-4 mb-6> !-- PassMark --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>PassMark Single Thread/span> span classtext-lg font-black text-cyan-400>1,804/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full stylewidth: 49%>/div> /div> p classtext-xs text-muted-foreground italic>Industry Standard Rating/p> /div> !-- Cinebench --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>Cinebench R23 (Single-Core)/span> span classtext-lg font-black text-cyan-400>830/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full stylewidth: 50%>/div> /div> p classtext-xs text-muted-foreground italic>Pure IPC Performance/p> /div> /div> !-- Use Case --> div classpt-4 border-t border-border/50> p classtext-sm text-muted-foreground leading-relaxed> Hiệu năng ổn định cho server Survival 1.12.2 hoặc server ít người chơi với mức giá rẻ nhất. /p> /div> /div> /div> !-- AMD Ryzen Card --> div classglass-card rounded-3xl p-8 space-y-6 relative overflow-hidden hover-glow group> !-- Accent gradient overlay --> div classabsolute inset-0 bg-gradient-to-br from-orange-500/5 to-red-600/5 pointer-events-none>/div> div classrelative z-10> !-- Card Header with Badge --> div classmb-6> div classflex items-center justify-between mb-2> span classtext-xs uppercase tracking-wider font-black text-orange-400>High Tech Node/span> i classbi bi-lightning-charge-fill text-2xl text-orange-400>/i> /div> h3 classtext-2xl font-black text-foreground mb-1>AMD Ryzen 9 5950X/h3> p classtext-sm text-muted-foreground font-medium>Zen 3 High-End | 4.9GHz/p> /div> !-- Benchmark Scores --> div classspace-y-4 mb-6> !-- PassMark --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>PassMark Single Thread/span> span classtext-lg font-black text-orange-400>3,693/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-orange-500 to-red-500 rounded-full animate-pulse stylewidth: 100%>/div> /div> p classtext-xs text-muted-foreground italic>Industry Standard Rating/p> /div> !-- Cinebench --> div classspace-y-2> div classflex justify-between items-center> span classtext-xs text-muted-foreground uppercase tracking-wider font-bold>Cinebench R23 (Single-Core)/span> span classtext-lg font-black text-orange-400>1,644/span> /div> div classw-full bg-muted/30 rounded-full h-2 overflow-hidden> div classh-full bg-gradient-to-r from-orange-500 to-red-500 rounded-full stylewidth: 100%>/div> /div> p classtext-xs text-muted-foreground italic>Pure IPC Performance/p> /div> /div> !-- Use Case --> div classpt-4 border-t border-border/50> p classtext-sm text-muted-foreground leading-relaxed> Sức mạnh vượt trội cho các phiên bản 1.20+, 1.21+ và các cụm server Modpack nặng nhất. /p> /div> /div> /div> /div> /div> /div>/section> !-- Plugin Integration Showcase - Anime Style --> section classpy-24 relative overflow-hidden> div classcontainer relative z-10 px-4 mx-auto> div classflex flex-col lg:flex-row items-center gap-16> !-- Text Content --> div classw-full lg:w-1/2 data-aosfade-right> div classinline-flex items-center px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-500 font-bold text-sm mb-6> i classbi bi-stars me-2>/i> Exclusive Feature /div> h2 classtext-4xl md:text-6xl font-black mb-6 leading-tight> Plugin Integration br /> span classtext-blue-500>simple with 1-click/span> /h2> p classtext-xl text-muted-foreground mb-8 leading-relaxed> Discover a massive plugin library and install instantly with just one click. Save management time, focus on player experience. /p> div classflex flex-wrap gap-4> div classflex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border p-4 rounded-2xl> i classbi bi-zap-fill text-yellow-500 text-xl>/i> span classfont-bold>Lightning Fast/span> /div> div classflex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border p-4 rounded-2xl> i classbi bi-shield-check text-green-500 text-xl>/i> span classfont-bold>Safe & Stable/span> /div> /div> /div> !-- Image Showcase --> div classw-full lg:w-1/2 relative data-aosfade-left> div classrelative z-10 anime-card bg-gradient-to-br from-blue-500/10 to-purple-500/10 p-2 rounded-2.5rem border border-white/20 shadow-2xl overflow-hidden group> img src/uploads/Screenshot 2026-02-05 at 02.38.28.png altPlugin Panel classrounded-2rem w-full shadow-lg transition-transform duration-700 group-hover:scale-105 /> !-- Decorative Elements --> div classabsolute -top-10 -right-10 w-40 h-40 bg-blue-500/20 blur-3xl rounded-full>/div> div classabsolute -bottom-10 -left-10 w-40 h-40 bg-purple-500/20 blur-3xl rounded-full>/div> /div> !-- Floating Badge --> div classabsolute -bottom-6 -right-6 lg:-right-12 z-20 bg-card/90 backdrop-blur-xl border border-blue-500/30 p-6 rounded-3xl shadow-2xl animate-bounce-slight> div classflex items-center gap-4> div classw-12 h-12 rounded-2xl bg-blue-500 flex items-center justify-center text-white text-2xl> i classbi bi-cursor-fill>/i> /div> div> div classtext-sm text-muted-foreground font-bold>Installer/div> div classtext-lg font-black text-blue-500>1-Click Plugin/div> /div> /div> /div> /div> /div> /div> /section> !-- Comprehensive Product Showcase --> !-- Comprehensive Hosting Packages Section -->section classpy-20 relative overflow-hidden> div classcontainer mx-auto px-4> !-- Section Title --> div classtext-center mb-12 data-aosfade-up> h2 classtext-4xl md:text-5xl font-black mb-4> span classbg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600 bg-clip-text text-transparent> Các gói hosting Minecraft - Bot Discord /span> /h2> p classtext-lg text-muted-foreground> Chọn gói phù hợp với nhu cầu của bạn /p> /div> !-- Horizontal Scrollable Cards with Fading Masks --> div classrelative group/carousel data-aosfade-up data-aos-delay100> !-- Left scroll button --> button onclickscrollCarousel(-1) classhidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 items-center justify-center rounded-full bg-primary/20 backdrop-blur-md border border-primary/30 text-white hover:bg-primary/40 transition-all duration-300 opacity-0 group-hover/carousel:opacity-100 cursor-pointer> i classbi bi-chevron-left text-xl>/i> /button> !-- Side masks for smooth edges --> div classabsolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-background to-transparent z-20 pointer-events-none>/div> div classabsolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-background to-transparent z-20 pointer-events-none>/div> !-- Scrollable container --> div idplansCarousel classflex gap-6 overflow-x-auto scrollbar-hide scroll-smooth py-8 px-12 stylescrollbar-width: none; -ms-overflow-style: none;> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/50 text-blue-400 text-xs font-black uppercase> DISCORD BOT /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Discord Bot - mini/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Entry-level Node.js/Python hosting/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>2GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>10GB Disk/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>Node.js/Python/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>24/7 Support/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent> 20.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-bot-discord#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Spark/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>2GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>10GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 20.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Blaze/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>4GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>30GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 115.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/50 text-blue-400 text-xs font-black uppercase> DISCORD BOT /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Discord Bot - Plus/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho nhóm bot Discord vừa, website doanh nghiệp nhỏ, traffic vừa phải, Teamspeak 3./p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>400% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>4GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>10GB Disk/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>Node.js/Python/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>24/7 Support/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent> 40.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-bot-discord#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Leaf/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>200% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>4GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>20GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 50.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Vine/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>300% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>6GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>30GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 140.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/50 text-blue-400 text-xs font-black uppercase> DISCORD BOT /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Discord Bot - Large/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho bot Discord nhiều người dùng, website thương mại, traffic cao, Teamspeak 3. /p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>4% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>8GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>20GB Disk/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>Node.js/Python/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>24/7 Support/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent> 80.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-bot-discord#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Fortress/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>400% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>8GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>30GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 110.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Citadel/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>400% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>8GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>40GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 200.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-strong transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs font-black uppercase> BEST SELLER /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Premium - Titan/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Phù hợp cho server nhỏ/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span classtruncate>Intel® Xeon® E5-2686 v4/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>800% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>16GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-primary text-xs>/i> span>50GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-green-400 to-emerald-500 bg-clip-text text-transparent> 220.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> div classflex-shrink-0 w-80 glass-card group hover:shadow-glow-purple transition-all duration-300 p-6 rounded-2xl border border-border/50 hover:-translate-y-2> div classspace-y-4> !-- Badge --> div> span classinline-block px-3 py-1 rounded-full bg-purple-500/20 border border-purple-500/50 text-purple-400 text-xs font-black uppercase> HIGH PERFORMANCE /span> /div> !-- Title --> h3 classtext-2xl font-black text-foreground>Ryzen - Hyperion/h3> !-- Description --> p classtext-sm text-muted-foreground line-clamp-2 h-10>Hiệu năng khủng/p> !-- Specifications --> div classspace-y-2 text-sm> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span classtruncate>AMD® Ryzen™ 9 5950X (4.9Ghz)/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>800% CPU/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>16GB RAM/span> /div> div classflex items-center gap-2 text-foreground/90> i classbi bi-check-circle-fill text-purple text-xs>/i> span>50GB SSD NVMe/span> /div> /div> !-- Pricing --> div classpt-4 border-t border-border/50> div classflex items-baseline gap-2 mb-4> span classtext-sm text-muted-foreground>Chỉ từ/span> /div> div classflex items-baseline gap-2> span classtext-3xl font-black bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent> 380.000 /span> span classtext-lg text-muted-foreground>VNĐ/span> /div> /div> !-- CTA Button --> a href/hosting-minecraft-gia-re#pricing classblock w-full px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-center hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2> Xem chi tiết i classbi bi-arrow-right>/i> /a> /div> /div> /div> !-- Right scroll button --> button onclickscrollCarousel(1) classhidden md:flex absolute right-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 items-center justify-center rounded-full bg-primary/20 backdrop-blur-md border border-primary/30 text-white hover:bg-primary/40 transition-all duration-300 opacity-0 group-hover/carousel:opacity-100 cursor-pointer> i classbi bi-chevron-right text-xl>/i> /button> /div> !-- See More Button --> div classtext-center mt-12 data-aosfade-up data-aos-delay200> a href/hosting-minecraft-gia-re#pricing classinline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-lg hover:shadow-glow-strong transition-all duration-300 group> Xem thêm gói hosting i classbi bi-arrow-right group-hover:translate-x-1 transition-transform duration-300>/i> /a> /div> /div>/section>style> /* Hide scrollbar */ .scrollbar-hide::-webkit-scrollbar { display: none; }/style>script> function scrollCarousel(direction) { const carousel document.getElementById(plansCarousel); const scrollAmount 350; // Width of card + gap carousel.scrollBy({ left: direction * scrollAmount, behavior: smooth }); }/script> section classpy-24 relative idservices> div classcontainer relative z-10 px-4 mx-auto> div classtext-center mb-16 space-y-4 animate-fade-in> h2 classtext-4xl md:text-5xl font-black> span classtext-primary animate-pulse> Our Services /span> /h2> p classtext-xl text-muted-foreground max-w-2xl mx-auto font-medium> span classinline-block animate-bounce-slight>✨/span> Complete solutions for all your hosting and development needs /p> /div> div classgrid md:grid-cols-3 gap-8> !-- Hosting Service --> div classanime-card group relative bg-card/80 backdrop-blur-xl border border-blue-500/10 dark:border-blue-500/30 rounded-3xl p-8 overflow-hidden hover:border-blue-500/50 transition-all duration-300> div classabsolute -right-10 -top-10 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl group-hover:bg-blue-500/20 transition-all duration-300>/div> div classrelative z-10> div classmb-6 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-500/10 dark:bg-blue-500/20 text-blue-500 animate-bounce-slight> i classbi bi-hdd-network-fill text-3xl>/i> /div> h3 classtext-2xl font-bold mb-3 text-foreground>Hosting Services/h3> p classtext-base text-muted-foreground mb-6 leading-relaxed> Stable hosting solutions, high speed with 99.9% uptime. Suitable for all project sizes. /p> ul classspace-y-3 mb-8> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-check-circle-fill text-blue-500>/i> span>Hosting/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-shield-check-fill text-blue-500>/i> span>Free SSL Certificate/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-cloud-arrow-up-fill text-blue-500>/i> span>Automatic Backup/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-headset text-blue-500>/i> span>24/7 Support/span> /li> /ul> a classanime-badge inline-flex items-center justify-center w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all duration-300 href/Home/HostingServices> View Details i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> !-- Coding Service --> div classanime-card group relative bg-card/80 backdrop-blur-xl border border-pink-500/10 dark:border-pink-500/30 rounded-3xl p-8 overflow-hidden hover:border-pink-500/50 transition-all duration-300> div classabsolute -right-10 -top-10 w-32 h-32 bg-pink-500/10 rounded-full blur-2xl group-hover:bg-pink-500/20 transition-all duration-300>/div> div classrelative z-10> div classmb-6 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-pink-500/10 dark:bg-pink-500/20 text-pink-500 animate-bounce-slight styleanimation-delay: 0.5s> i classbi bi-code-slash text-3xl>/i> /div> h3 classtext-2xl font-bold mb-3 text-foreground>Coding Services/h3> p classtext-base text-muted-foreground mb-6 leading-relaxed> Professional programming services from web, app to automation. Clean code, optimized, easy to maintain. /p> ul classspace-y-3 mb-8> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-check-circle-fill text-pink-500>/i> span>Web Development/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-robot text-pink-500>/i> span>Bot Development/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-file-earmark-code-fill text-pink-500>/i> span>Custom Scripts/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-puzzle-fill text-pink-500>/i> span>API Integration/span> /li> /ul> a classanime-badge inline-flex items-center justify-center w-full px-6 py-3 bg-pink-500 hover:bg-pink-600 text-white rounded-xl font-bold shadow-lg shadow-pink-500/30 transition-all duration-300 href/Home/CodingServices> View Details i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> !-- Support Service --> div classanime-card group relative bg-card/80 backdrop-blur-xl border border-purple-500/10 dark:border-purple-500/30 rounded-3xl p-8 overflow-hidden hover:border-purple-500/50 transition-all duration-300> div classabsolute -right-10 -top-10 w-32 h-32 bg-purple-500/10 rounded-full blur-2xl group-hover:bg-purple-500/20 transition-all duration-300>/div> div classrelative z-10> div classmb-6 inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-500/10 dark:bg-purple-500/20 text-purple-500 animate-bounce-slight styleanimation-delay: 1s> i classbi bi-chat-heart-fill text-3xl>/i> /div> h3 classtext-2xl font-bold mb-3 text-foreground>Consulting & Support/h3> p classtext-base text-muted-foreground mb-6 leading-relaxed> Experienced technical team ready to advise and support you in all projects. /p> ul classspace-y-3 mb-8> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-check-circle-fill text-purple-500>/i> span>Free Consultation/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-tools text-purple-500>/i> span>Technical Support/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-clipboard-data-fill text-purple-500>/i> span>Project Planning/span> /li> li classflex items-center gap-3 text-sm font-medium text-muted-foreground> i classbi bi-lightbulb-fill text-purple-500>/i> span>Problem Solving/span> /li> /ul> a classanime-badge inline-flex items-center justify-center w-full px-6 py-3 bg-purple-500 hover:bg-purple-600 text-white rounded-xl font-bold shadow-lg shadow-purple-500/30 transition-all duration-300 href/Home/ConsultingServices> View Details i classbi bi-arrow-right ml-2 group-hover:translate-x-1 transition-transform>/i> /a> /div> /div> /div> /div>/section> section idreviews classpy-24 relative overflow-hidden bg-background/30 backdrop-blur-sm border-y border-border/50> !-- Anime-style Background Elements --> div classabsolute top-20 left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none animate-pulse-slow>/div> div classabsolute bottom-20 right-10 w-80 h-80 bg-primary/5 rounded-full blur-3xl pointer-events-none animate-pulse-slow styleanimation-delay: 1.5s>/div> div classcontainer mx-auto px-4 relative z-10> !-- Header --> div classmax-w-3xl mx-auto text-center mb-16 data-aosfade-up> div classinline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-500 text-xs font-black uppercase tracking-widest mb-4> i classbi bi-chat-heart-fill>/i> Customer Testimonials /div> h2 classtext-4xl md:text-6xl font-black text-foreground mb-6 tracking-tight> Customer Reviews /h2> p classtext-lg text-muted-foreground font-medium> We always strive to bring the best experience to the community. /p> /div> !-- Strictly 4-Column Grid for 1-1-1-1 Row Layout --> div classreviews-grid-new data-aosfade-up> style> .reviews-grid-new { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; max-width: 1440px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 768px) { .reviews-grid-new { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .review-card-modern { height: 100%; background: rgba(var(--card), 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(var(--border), 0.5); padding: 1.5rem; border-radius: 2rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .review-card-modern:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); border-bottom: 4px solid #3b82f6; } /style> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/3.png altdattruong_158 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>dattruong_158/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> Siêu thích mấy bạn, các bạn tư vấn oke mong sever và các bạn luôn giữ lửa trong công việc /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 07/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/3.png altfrostngoo classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>frostngoo/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> Lần đầu dùng host discord bot, mình bất ngờ anh em dev nhiệt tình giúp đỡ mình chạy cho em nó hoạt động và mình rất là vui <3 Cảm ơn anh em dev cheapasia rất nhiều. /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 04/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png althunterzpotchari classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>hunterzpotchari/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> nhiệt tình /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 04/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png alttnnguyen1912 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>tnnguyen1912/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> dùng ok lắm nha, tốc độ load khá nhanh rcm mọi người dùng thử vì giá rẻ mà chất lượng quá oke /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 03/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png altmeomeoo05 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>meomeoo05/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> tư vấn nhiệt tình, làm việc nhanh gọn và làm hài lòng 1 ng khó tính như mình🩶 /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 03/02/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/2.png althabitat_ classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>habitat_/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> tui thấy múp như em ghẹ loli /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 28/01/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/1.png altquangluuminh2812 classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>quangluuminh2812/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> Staff oke quá gọi đúng 5p rep ngay 🤡tết giàu nâng cấp sv /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 27/01/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> div classreview-card-modern> div classflex flex-col h-full> div classflex justify-between items-start mb-4> div classflex items-center gap-3> div classw-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 p-0.5> div classw-full h-full rounded-lg bg-card flex items-center justify-center overflow-hidden border border-border/50> img srchttps://cdn.discordapp.com/embed/avatars/3.png altflorencewm classw-full h-full object-cover> /div> /div> div classmin-w-0> h4 classfont-bold text-foreground text-sm truncate>florencewm/h4> div classflex items-center gap-1 mt-0.5> span classw-1.5 h-1.5 rounded-full bg-green-400 animate-pulse>/span> span classtext-10px text-muted-foreground font-bold uppercase>Buyer/span> /div> /div> /div> div classflex gap-0.5 bg-yellow-500/10 px-2 py-0.5 rounded-full border border-yellow-500/20> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> i classbi bi-star-fill text-10px text-yellow-400>/i> /div> /div> div classflex-grow> p classtext-foreground/80 text-sm italic leading-relaxed> toi yeu mit bel /p> /div> div classmt-4 pt-4 border-t border-border/40 flex items-center justify-between> span classtext-muted-foreground text-10px font-bold> 27/01/2026 /span> div classflex -space-x-1.5> div classw-6 h-6 rounded-full border border-card bg-primary/10 flex items-center justify-center text-7px font-bold text-primary>CC/div> div classw-6 h-6 rounded-full border border-card bg-primary/20 flex items-center justify-center text-7px font-bold text-primary>QC/div> /div> /div> /div> /div> /div> !-- View All Button --> div classmt-20 text-center data-aosfade-up> a href/Reviews/All classinline-flex items-center gap-3 px-10 py-5 bg-foreground text-background rounded-3xl font-black text-lg transition-all duration-300 hover:scale-105 hover:bg-blue-600 hover:text-white shadow-xl hover:shadow-blue-500/20 active:scale-95 group> View All Reviews i classbi bi-arrow-right-circle text-2xl group-hover:translate-x-2 transition-transform>/i> /a> /div> /div>/section> section idstaff classpy-24 relative overflow-hidden> !-- Background Elements --> div classabsolute inset-0 -z-10> div classabsolute top-0 right-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2>/div> div classabsolute bottom-0 left-0 w-96 h-96 bg-slate-500/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2>/div> /div> div classcontainer mx-auto px-4 relative> div classtext-center max-w-3xl mx-auto mb-16> h2 classtext-4xl md:text-5xl font-black mb-6 data-aosfade-up> Our Team /h2> div classw-20 h-1.5 bg-slate-500 mx-auto rounded-full mb-6 data-aosfade-up data-aos-delay100>/div> p classtext-muted-foreground text-lg font-medium data-aosfade-up data-aos-delay200> Dedicated experts ready to support you 24/7. /p> /div> div classgrid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8> div classgroup data-aosfade-up> div classbg-card rounded-2rem p-8 border border-border/50 shadow-lg shadow-black/5 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 hover:-translate-y-2 relative overflow-hidden> !-- Anime-style Decoration --> div classabsolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-slate-500/10 to-transparent rounded-bl-3rem -z-0>/div> div classrelative z-10 text-center> div classw-32 h-32 mx-auto mb-6 relative> div classabsolute inset-0 bg-blue-600 rounded-full rotate-6 group-hover:rotate-12 transition-transform duration-500>/div> div classabsolute inset-0.5 bg-card rounded-full z-10 overflow-hidden> img src/uploads/staff/e028119f-f600-4c9b-985c-da111a05f761.webp altAns classw-full h-full object-cover> /div> !-- Role Badge --> div classabsolute -bottom-2 right-0 bg-blue-600 text-white text-10px font-black py-1 px-3 rounded-full shadow-lg border-2 border-card z-20 uppercase tracking-tighter> Developer & Technical Owner /div> /div> h3 classtext-xl font-black text-foreground mb-1>Ans/h3> p classtext-muted-foreground text-sm font-medium leading-relaxed italic>Responsible for system architecture, product development, and direct technical support./p> /div> /div> /div> div classgroup data-aosfade-up> div classbg-card rounded-2rem p-8 border border-border/50 shadow-lg shadow-black/5 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 hover:-translate-y-2 relative overflow-hidden> !-- Anime-style Decoration --> div classabsolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-slate-500/10 to-transparent rounded-bl-3rem -z-0>/div> div classrelative z-10 text-center> div classw-32 h-32 mx-auto mb-6 relative> div classabsolute inset-0 bg-blue-600 rounded-full rotate-6 group-hover:rotate-12 transition-transform duration-500>/div> div classabsolute inset-0.5 bg-card rounded-full z-10 overflow-hidden> img src/uploads/staff/8d5a6aed-327a-4895-8d99-98b43eaf13ec.jpg altmizznotfound classw-full h-full object-cover> /div> !-- Role Badge --> div classabsolute -bottom-2 right-0 bg-blue-600 text-white text-10px font-black py-1 px-3 rounded-full shadow-lg border-2 border-card z-20 uppercase tracking-tighter> Developer & Technical Support /div> /div> h3 classtext-xl font-black text-foreground mb-1>mizznotfound/h3> p classtext-muted-foreground text-sm font-medium leading-relaxed italic>Chịu trách nhiệm phát triển, vận hành và hỗ trợ kỹ thuật plugin Minecraft & hosting./p> /div> /div> /div> div classgroup data-aosfade-up> div classbg-card rounded-2rem p-8 border border-border/50 shadow-lg shadow-black/5 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 hover:-translate-y-2 relative overflow-hidden> !-- Anime-style Decoration --> div classabsolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-slate-500/10 to-transparent rounded-bl-3rem -z-0>/div> div classrelative z-10 text-center> div classw-32 h-32 mx-auto mb-6 relative> div classabsolute inset-0 bg-blue-600 rounded-full rotate-6 group-hover:rotate-12 transition-transform duration-500>/div> div classabsolute inset-0.5 bg-card rounded-full z-10 overflow-hidden> img src/uploads/staff/82bf82ba-67f6-4867-8f3a-9010f3ad3c97.png altdemu®e classw-full h-full object-cover> /div> !-- Role Badge --> div classabsolute -bottom-2 right-0 bg-blue-600 text-white text-10px font-black py-1 px-3 rounded-full shadow-lg border-2 border-card z-20 uppercase tracking-tighter> Discord Bot Developer & Minecraft Support /div> /div> h3 classtext-xl font-black text-foreground mb-1>demu®e/h3> p classtext-muted-foreground text-sm font-medium leading-relaxed italic>Responsible for developing Discord bots and handling Minecraft technical support./p> /div> /div> /div> /div> /div> /section>/div>/main>footer classrelative border-t border-border/50 py-12 overflow-hidden bg-card> !-- Subtle gradient --> div classabsolute inset-0 bg-gradient-to-t from-blue-500/5 to-transparent>/div> div classcontainer relative z-10 px-4 mx-auto> div classgrid grid-cols-2 lg:grid-cols-5 gap-8 mb-8> !-- Brand --> div classspace-y-4> a classblock href/> img src/images/website_logo.png altCloudCheap classh-16 md:h-20 w-auto object-contain /> /a> p classtext-sm text-muted-foreground> Professional hosting and coding solutions for all needs /p> /div> !-- Services --> div classspace-y-4> h4 classfont-semibold text-foreground>Services/h4> ul classspace-y-2 text-sm> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/HostingServices> Hosting Services /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/CodingServices> Coding Services /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/about> About Us /a> /li> /ul> /div> !-- Solutions (Popular Services) --> div classspace-y-4> h4 classfont-semibold text-foreground>Popular Services/h4> ul classspace-y-2 text-sm> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 font-medium href/hosting-minecraft-gia-re> Cheap Minecraft Hosting /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 font-medium href/hosting-bot-discord> Discord Bot Hosting /a> /li> /ul> /div> !-- Community --> div classspace-y-4> h4 classfont-semibold text-foreground>Community/h4> ul classspace-y-2 text-sm> li> a hrefhttps://discord.gg/pDDfWVbWgK target_blank relnoopener noreferrer classtext-muted-foreground hover:text-primary transition-colors duration-200> Discord Server /a> /li> li> a href/recruitment classtext-muted-foreground hover:text-primary transition-colors duration-200> Recruitment /a> /li> li> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Blog> Blog /a> /li> /ul> /div> !-- Contact --> div classspace-y-4> h4 classfont-semibold text-foreground>Contact/h4> ul classspace-y-2 text-sm> li> a hrefhttps://discord.gg/pDDfWVbWgK target_blank relnoopener noreferrer classtext-muted-foreground hover:text-primary transition-colors duration-200> Discord: Cloudcheap Server /a> /li> li> a hrefhttps://www.facebook.com/cheapclouds target_blank relnoopener noreferrer classtext-muted-foreground hover:text-primary transition-colors duration-200> Facebook Fanpage /a> /li> /ul> /div> /div> !-- Bottom --> div classpt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center gap-4> p classtext-sm text-muted-foreground> © 2024 Cloudcheap. All rights reserved. /p> div classflex gap-6 text-sm> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/FAQ> FAQ /a> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/TOS> Terms of Service /a> a classtext-muted-foreground hover:text-primary transition-colors duration-200 href/Home/Privacy> Privacy /a> /div> /div> /div>/footer>script src/lib/jquery/dist/jquery.min.js>/script>script src/js/site.js?vrjbDN1_eYKB1gyxDxfLPgj1Jbd0RnbpFgcIrUNhHv6A>/script>!-- Mobile Menu & Dropdown Script -->script> (function() { // Mobile Menu Toggle const mobileMenuBtn document.getElementById(mobileMenuBtn); const mobileMenu document.getElementById(mobileMenu); const menuIcon document.getElementById(menuIcon); const closeIcon document.getElementById(closeIcon); if (mobileMenuBtn && mobileMenu) { mobileMenuBtn.addEventListener(click, () > { const isHidden mobileMenu.classList.contains(hidden); if (isHidden) { mobileMenu.classList.remove(hidden); menuIcon.classList.add(hidden); closeIcon.classList.remove(hidden); } else { mobileMenu.classList.add(hidden); menuIcon.classList.remove(hidden); closeIcon.classList.add(hidden); } }); // Close mobile menu when clicking on a link mobileMenu.querySelectorAll(a).forEach(link > { link.addEventListener(click, () > { mobileMenu.classList.add(hidden); menuIcon.classList.remove(hidden); closeIcon.classList.add(hidden); }); }); } // User Dropdown Toggle (Mobile) const userDropdownBtn document.getElementById(userDropdownBtn); const userDropdown document.getElementById(userDropdown); const userDropdownIcon document.getElementById(userDropdownIcon); const userDropdownContainer document.getElementById(userDropdownContainer); // Function to show dropdown (desktop only) function showUserDropdown() { if (userDropdown && window.innerWidth > 768) { userDropdown.classList.remove(opacity-0, invisible, translate-y-2); userDropdown.classList.add(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(180deg); } } } // Function to hide dropdown function hideUserDropdown() { if (userDropdown && window.innerWidth > 768) { userDropdown.classList.remove(opacity-100, visible, translate-y-0); userDropdown.classList.add(opacity-0, invisible, translate-y-2); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } } if (userDropdownBtn && userDropdown) { // Check if mobile const isMobile window.innerWidth 768; userDropdownBtn.addEventListener(click, (e) > { if (window.innerWidth 768) { e.stopPropagation(); const isHidden userDropdown.classList.contains(opacity-0) || userDropdown.classList.contains(invisible); if (isHidden) { userDropdown.classList.remove(opacity-0, invisible, translate-y-2); userDropdown.classList.add(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(180deg); } } else { userDropdown.classList.add(opacity-0, invisible, translate-y-2); userDropdown.classList.remove(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } } }); // Close dropdown when clicking outside document.addEventListener(click, (e) > { if (window.innerWidth 768 && userDropdownContainer && !userDropdownContainer.contains(e.target)) { userDropdown.classList.add(opacity-0, invisible, translate-y-2); userDropdown.classList.remove(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } }); // Handle window resize window.addEventListener(resize, () > { if (window.innerWidth > 768) { // Reset mobile state on desktop userDropdown.classList.add(opacity-0, invisible, translate-y-2); userDropdown.classList.remove(opacity-100, visible, translate-y-0); if (userDropdownIcon) { userDropdownIcon.style.transform rotate(0deg); } } }); } // Notification Dropdown Toggle (Mobile) const notificationBtn document.getElementById(notificationBtn); const notificationDropdown document.getElementById(notificationDropdown); if (notificationBtn && notificationDropdown) { notificationBtn.addEventListener(click, (e) > { if (window.innerWidth 768) { e.stopPropagation(); notificationDropdown.classList.toggle(hidden); } }); // Close notification dropdown when clicking outside document.addEventListener(click, (e) > { if (window.innerWidth 768 && !notificationBtn.contains(e.target) && !notificationDropdown.contains(e.target)) { notificationDropdown.classList.add(hidden); } }); } // Expose functions globally window.showUserDropdown showUserDropdown; window.hideUserDropdown hideUserDropdown; })();/script>!-- Scroll Animation Script -->script> (function() { let lastScrollTop 0; const nav document.getElementById(mainNav); const userDropdown document.getElementById(userDropdownContainer); const userIndicator userDropdown?.querySelector(#userDropdownIcon); let ticking false; let scrollDirection none; function updateNav() { const scrollTop window.pageYOffset || document.documentElement.scrollTop; const currentDirection scrollTop > lastScrollTop ? down : up; if (scrollTop > 100) { // Add shadow and increase opacity when scrolled nav.classList.add(shadow-md); // Animate user dropdown on scroll direction change if (currentDirection ! scrollDirection && scrollTop > 50) { if (userDropdown) { userDropdown.classList.add(user-dropdown-enter); setTimeout(() > { userDropdown.classList.remove(user-dropdown-enter); }, 300); } // Animate indicator icon if (userIndicator) { if (currentDirection down) { userIndicator.style.transform rotate(0deg); } else { userIndicator.style.transform rotate(180deg); } } scrollDirection currentDirection; } // Hide/show on scroll direction if (scrollTop > lastScrollTop && scrollTop > 200) { // Scrolling down - hide navbar nav.style.transform translateY(-100%); nav.style.opacity 0; } else { // Scrolling up - show navbar nav.style.transform translateY(0); nav.style.opacity 1; } } else { // Top of page - reset styles nav.classList.remove(shadow-xl, shadow-md); nav.style.transform translateY(0); nav.style.opacity 1; // Reset user indicator if (userIndicator) { userIndicator.style.transform rotate(0deg); } scrollDirection none; } lastScrollTop scrollTop; ticking false; } function requestTick() { if (!ticking) { window.requestAnimationFrame(updateNav); ticking true; } } window.addEventListener(scroll, requestTick, { passive: true }); // Initial state updateNav(); // Add hover animation to user dropdown if (userDropdown) { userDropdown.addEventListener(mouseenter, function() { const dropdown this.querySelector(.absolute); if (dropdown) { dropdown.style.transform translateY(0); dropdown.style.opacity 1; dropdown.style.visibility visible; } const icon this.querySelector(svg); if (icon) { icon.style.transform rotate(180deg); } }); userDropdown.addEventListener(mouseleave, function() { const icon this.querySelector(svg); if (icon) { icon.style.transform rotate(0deg); } }); } })();/script>!-- Toast Notification Script -->script> (function() { // Toast notification function function showToast(message, type success) { const container document.getElementById(toastContainer); if (!container) return; const toast document.createElement(div); const toastId toast- + Date.now(); toast.id toastId; const bgColor type success ? bg-green-500/20 border-green-500/50 : type error ? bg-red-500/20 border-red-500/50 : type warning ? bg-yellow-500/20 border-yellow-500/50 : bg-blue-500/20 border-blue-500/50; const textColor type success ? text-green-400 : type error ? text-red-400 : type warning ? text-yellow-400 : text-blue-400; const icon type success ? i classbi bi-check-circle-fill>/i> : type error ? i classbi bi-x-circle-fill>/i> : type warning ? i classbi bi-exclamation-triangle-fill>/i> : i classbi bi-info-circle-fill>/i>; toast.className `${bgColor} ${textColor} border rounded-lg p-4 shadow-xl backdrop-blur-sm flex items-start gap-3 toast-enter`; toast.innerHTML ` span classtext-xl>${icon}/span> div classflex-1> p classtext-sm font-medium>${message}/p> /div> button onclickcloseToast(${toastId}) classtext-muted-foreground hover:text-foreground transition-colors> i classbi bi-x-lg>/i> /button> `; container.appendChild(toast); // Auto remove after 5 seconds setTimeout(() > { closeToast(toastId); }, 5000); } function closeToast(toastId) { const toast document.getElementById(toastId); if (toast) { toast.classList.remove(toast-enter); toast.classList.add(toast-exit); setTimeout(() > { toast.remove(); }, 300); } } // Make functions globally available window.showToast showToast; window.closeToast closeToast; // Check for TempData messages })();/script>!-- Notification System -->script srchttps://cdn.jsdelivr.net/npm/@microsoft/signalr@7/dist/browser/signalr.min.js>/script>script> (async function() { // Security: Email is stored in session server-side, not exposed in client JavaScript const isAdmin false; const isSupporter false; const isVietnamese en vi; // Check authentication via session (server-side check) const isAuthenticated false; if (!isAuthenticated) return; // Skip if not logged in let notifications ; let unreadCount 0; const notificationBtn document.getElementById(notificationBtn); const notificationBadge document.getElementById(notificationBadge); const notificationDropdown document.getElementById(notificationDropdown); const notificationList document.getElementById(notificationList); const markAllReadBtn document.getElementById(markAllReadBtn); if (!notificationBtn || !notificationBadge || !notificationDropdown || !notificationList) return; // Toggle notification dropdown notificationBtn.addEventListener(click, (e) > { e.stopPropagation(); notificationDropdown.classList.toggle(hidden); }); // Close dropdown when clicking outside document.addEventListener(click, (e) > { if (!notificationDropdown.contains(e.target) && !notificationBtn.contains(e.target)) { notificationDropdown.classList.add(hidden); } }); // Load notifications from database async function loadNotifications() { try { const response await fetch(/api/Support/notifications); if (response.ok) { const data await response.json(); notifications data.map(n > ({ id: n.id, type: n.type || info, title: n.title || , message: n.message || , link: n.link || null, timestamp: n.createdAt, read: n.isRead || false })); unreadCount notifications.filter(n > !n.read).length; updateBadge(); renderNotifications(); } } catch (err) { // Error loading notifications } } // Load unread count async function loadUnreadCount() { try { const response await fetch(/api/Support/notifications/unread-count); if (response.ok) { const data await response.json(); unreadCount data.count || 0; updateBadge(); } } catch (err) { // Error loading unread count } } // Mark all as read if (markAllReadBtn) { markAllReadBtn.addEventListener(click, async () > { try { const response await fetch(/api/Support/notifications/mark-all-read, { method: POST }); if (response.ok) { notifications.forEach(n > n.read true); unreadCount 0; updateBadge(); renderNotifications(); } } catch (err) { // Error marking all as read } }); } // Mark single notification as read window.markAsRead async function(notificationId) { const notif notifications.find(n > n.id notificationId); if (notif && !notif.read) { try { const response await fetch(`/api/Support/notifications/${notificationId}/read`, { method: PATCH }); if (response.ok) { notif.read true; unreadCount Math.max(0, unreadCount - 1); updateBadge(); renderNotifications(); } } catch (err) { // Error marking as read } } }; function addNotification(notification) { // Add to local array for immediate display notifications.unshift({ id: notification.id || Date.now(), type: notification.type || info, title: notification.title || , message: notification.message || , link: notification.link || null, timestamp: notification.timestamp || new Date(), read: notification.read || false }); if (notifications.length > 50) { notifications notifications.slice(0, 50); } if (!notification.read) { unreadCount++; } updateBadge(); renderNotifications(); showToast(notification); } function updateBadge() { if (unreadCount > 0) { notificationBadge.textContent unreadCount > 99 ? 99+ : unreadCount; notificationBadge.classList.remove(hidden); } else { notificationBadge.classList.add(hidden); } } function renderNotifications() { if (notifications.length 0) { notificationList.innerHTML ` div classp-4 text-center text-muted-foreground text-sm> ${isVietnamese ? Không có thông báo : No notifications} /div> `; return; } notificationList.innerHTML notifications.map(notif > { const date new Date(notif.timestamp || notif.createdAt); const timeStr date.toLocaleString(isVietnamese ? vi-VN : en-US, { month: short, day: numeric, hour: 2-digit, minute: 2-digit }); const isRead notif.read || notif.isRead || false; const bgClass isRead ? bg-card : bg-primary/10; const clickHandler notif.link ? `onclickmarkAsRead(${notif.id}); setTimeout(() > window.location.href${notif.link}, 100)` : `onclickmarkAsRead(${notif.id})`; return ` div classp-4 border-b border-border ${bgClass} cursor-pointer hover:bg-secondary/50 transition-colors ${clickHandler}> div classflex items-start gap-3> div classflex-1> p classfont-semibold text-sm text-foreground>${notif.title}/p> p classtext-sm text-muted-foreground mt-1>${notif.message}/p> p classtext-xs text-muted-foreground mt-2>${timeStr}/p> /div> ${!isRead ? div classw-2 h-2 bg-primary rounded-full mt-1>/div> : } /div> /div> `; }).join(); } function showToast(notification) { const toast document.createElement(div); toast.className toast-enter bg-card border border-border rounded-lg p-4 shadow-2xl mb-2; toast.innerHTML ` div classflex items-start gap-3> div classflex-1> p classfont-semibold text-sm text-foreground>${notification.title}/p> p classtext-sm text-muted-foreground mt-1>${notification.message}/p> /div> button onclickthis.parentElement.parentElement.remove() classtext-muted-foreground hover:text-foreground> svg classw-5 h-5 fillnone strokecurrentColor viewBox0 0 24 24> path stroke-linecapround stroke-linejoinround stroke-width2 dM6 18L18 6M6 6l12 12>/path> /svg> /button> /div> `; const container document.getElementById(toastContainer); if (container) { container.appendChild(toast); setTimeout(() > { toast.classList.add(toast-exit); setTimeout(() > toast.remove(), 300); }, 5000); } } // Setup SignalR const connection new signalR.HubConnectionBuilder() .withUrl(/hubs/support) .withAutomaticReconnect() .build(); connection.start() .then(() > { // Email retrieved from session server-side, not passed from client connection.invoke(JoinUserGroup); if (isAdmin || isSupporter) { connection.invoke(JoinSupportStaff); } }) .catch(err > { // SignalR connection error }); // Listen for new support message (for users) connection.on(NewSupportMessage, (data) > { // Reload notifications from database loadNotifications(); loadUnreadCount(); }); // Listen for new user message (for support staff) if (isAdmin || isSupporter) { connection.on(NewUserMessage, (data) > { // Reload notifications from database loadNotifications(); loadUnreadCount(); }); connection.on(NewTicket, (data) > { // Reload notifications from database loadNotifications(); loadUnreadCount(); }); } // Initial load await loadNotifications(); await loadUnreadCount(); // Refresh notifications every 30 seconds setInterval(async () > { await loadNotifications(); await loadUnreadCount(); }, 30000); })();/script>!-- Support Ticket Widget removed -->script srchttps://unpkg.com/aos@2.3.1/dist/aos.js>/script>script> AOS.init({ duration: 1000, once: true, offset: 100, easing: ease-out-cubic });/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]