@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;700&family=Quicksand:wght@400;700&family=Comfortaa:wght@400;700&display=swap');

/* Định nghĩa bảng màu mới: */
/* Vàng nhạt: #FFEBCC (Pale Yellow) */
/* Xanh dương nhạt: #B3E0FF (Light Blue) */
/* Hồng ĐẬM HƠN: #FF69B4 (Hot Pink) */
/* Nền tối: #0A0A1F (Dark Blue/Purple) */
/* Nền tối (nhẹ hơn): #1B1A30 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Quicksand', sans-serif;
    background: #0A0A1F; /* Nền tối mới */
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* --- BẮT ĐẦU: Logic Mobile-First cho Header (Mặc định là Mobile) --- */

/* 1. Ẩn các liên kết nav chính trên mobile */
.nav-links .mobile-hidden-nav-item {
    display: none !important;
}

/* 2. Hiển thị các liên kết nav trong dropdown trên mobile */
.user-dropdown-menu .mobile-visible-dropdown-item {
    display: block;
}

/* 3. Ẩn số dư trên thanh nav chính trên mobile */
.desktop-only-balance {
    display: none !important;
}

/* 4. Hiển thị số dư trong dropdown trên mobile */
.mobile-only-balance {
    display: block !important;
    padding: 12px 20px 0;
    color: #FFEBCC;
    font-weight: 600;
    font-size: 0.95rem;
}

.mobile-only-balance #mobileVndBalanceDisplay {
    font-weight: 700;
    color: #66ff66;
}

/* 5. Hiển thị dải phân cách chỉ trên mobile */
.mobile-only-divider {
    display: block !important;
}

/* --- KẾT THÚC: Logic Mobile-First cho Header --- */


/* Animated background particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #B3E0FF; /* Xanh dương nhạt */
    border-radius: 50%;
    animation: float 10s infinite linear;
    opacity: 0.7;
}

@keyframes float {
    0% { transform: translateY(100vh) translateX(0px); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(-100px) translateX(100px); opacity: 0; }
}

/* Header/Navigation */
.header {
    position: fixed;
    top: 20px;
    left: 50%; 
    max-width: 1400px;
    transform: translateX(-50%);
    
    width: 95%;
    background: rgba(10, 10, 31, 0.6); /* Nền tối trong suốt */
    backdrop-filter: blur(20px);
    border-bottom: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 40px;
    box-shadow: 0 10px 35px rgba(179, 224, 255, 0.3); /* Bóng xanh dương nhạt */
    z-index: 1000;
    padding: 0.3rem 0;
    transition: all 0.4s ease;
}

.nav-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
}

.logo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    color: #B3E0FF; /* Xanh dương nhạt */
    text-shadow: 0 0 20px #B3E0FF, 0 0 30px rgba(179, 224, 255, 0.5);
    flex-shrink: 0;
}

.logo.custom-logo {
    background-image: url('/image/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 62px;
    height: 62px;
    text-indent: -9999px;
    overflow: hidden;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
    margin-left: auto;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.nav-links a:hover {
    color: #FF69B4; /* Hồng ĐẬM HƠN */
    text-shadow: 0 0 10px #FF69B4;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #FF69B4, #B3E0FF); /* Gradient Hồng Đậm -> Xanh */
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Discord Login button */
.discord-nav-btn {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    color: #0A0A1F; /* Màu chữ tối để tương phản */
    padding: 0.8rem 1.7rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(179, 224, 255, 0.3); /* Bóng xanh dương nhạt */
}

.discord-nav-btn:hover {
    background: linear-gradient(45deg, #FF69B4, #FFEBCC); /* Đảo ngược gradient khi hover */
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.5); /* Bóng hồng ĐẬM nổi bật hơn */
}
.discord-button-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Mobile menu toggle */
.mobile-menu {
    display: none !important; /* Đã ẩn hoàn toàn */
    flex-direction: column;
    cursor: pointer;
}

.mobile-menu span {
    width: 30px;
    height: 4px;
    background: #FF69B4; /* Màu hồng ĐẬM hơn */
    margin: 4px 0;
    border-radius: 2px;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 10;
    background:
        linear-gradient(135deg, rgba(10, 10, 31, 0.85) 0%, rgba(15, 15, 35, 0.85) 50%, rgba(20, 20, 40, 0.85) 100%),
        url('/image/background.jpg') center center / cover no-repeat fixed;
}

.hero-content {
    max-width: 800px;
    padding: 0 2rem;
}

.hero h1 {
    font-family: 'Quicksand', sans-serif;
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    background: linear-gradient(45deg, #FFEBCC, #B3E0FF, #FF69B4); /* Gradient Vàng -> Xanh -> Hồng Đậm */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { filter: drop-shadow(0 0 20px #FFEBCC); } /* Vàng nhạt */
    to { filter: drop-shadow(0 0 30px #B3E0FF); } /* Xanh dương nhạt */
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    color: #e0e0e0;
    font-weight: 500;
}

.cta-button {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    background: linear-gradient(45deg, #FFEBCC, #B3E0FF); /* Gradient Vàng -> Xanh */
    color: #0A0A1F; /* Màu chữ tối để tương phản */
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-size: 1.2rem;
    box-shadow: 0 8px 25px rgba(255, 235, 204, 0.4); /* Bóng vàng nhạt */
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(179, 224, 255, 0.5); /* Bóng xanh dương mạnh hơn */
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Thêm styles cho Owner Info Section */
.owner-info-section {
    padding: 6rem 0;
    /* Xóa nền ảnh và màu nền hiện tại, thay bằng gradient chuyển màu từ tối xuống sáng */
    background: #0A0A1F; /* Màu nền dự phòng */
    /* Thêm dải màu tối đến sáng từ trên xuống dưới */
    background-image: linear-gradient(to bottom, #0A0A1F 0%, #1B1A30 50%, #0A0A1F 100%); 
    text-align: center;
    position: relative;
    z-index: 10;
}

.owner-info-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #B3E0FF; /* Xanh dương nhạt */
    text-shadow: 0 0 15px rgba(179, 224, 255, 0.5);
}

.owner-card {
    background-color: #B3E0FF;
    border: 3px solid #FF69B4; /* Viền nổi bật */
    border-radius: 20px;
    padding: 3rem 2rem;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(179, 224, 255, 0.5);
    transition: all 0.4s ease;
}

.owner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(255, 105, 180, 0.3);
}

.owner-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #FF69B4; /* Hồng ĐẬM */
    box-shadow: 0 0 20px #FF69B4;
    margin-bottom: 1.5rem;
}

.owner-name {
    font-size: 2rem;
    font-weight: 700;
    color: #0A0A1F;
    text-shadow: 0 0 10px #ffffff;
    margin-bottom: 0.5rem;
}

.owner-title {
    font-size: 1.1rem;
    color: #0A0A1F;
    margin-bottom: 2rem;
    font-style: italic;
    font-weight: 600;
}

.contact-methods, .bot-links {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-link, .topgg-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.email-link {
    background: linear-gradient(45deg, #3498db, #2980b9); /* Màu Xanh email */
    color: #ffffff;
}

.email-link:hover {
    background: #FF69B4; /* Hồng ĐẬM */
    transform: scale(1.05);
}

.discord-link {
    background: linear-gradient(45deg, #7289da, #99aab5); /* Màu Discord */
    color: #ffffff;
}

.discord-link:hover {
    background: #B3E0FF; /* Xanh dương nhạt */
    color: #0A0A1F;
    transform: scale(1.05);
}

.topgg-link {
    background: linear-gradient(45deg, #ffebcc, #ffd700); /* Màu Vàng Top.gg */
    color: #0A0A1F;
    margin-top: 25px;
    box-shadow: 0 5px 20px rgba(255, 235, 204, 0.4);
}

.topgg-link:hover {
    background: #FF69B4;
    color: #ffffff;
    transform: scale(1.05);
}

.topgg-link img {
    width: 24px;
    height: 24px;
}
/* KẾT THÚC SỬA ĐỔI: Thêm styles cho Owner Info Section */


/* Pricing Section */
.pricing {
    padding: 4rem 0;
    background: linear-gradient(135deg, #0A0A1F 0%, #1B1A30 100%); /* Gradient tối mới */
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* THÊM DÒNG NÀY ĐỂ CĂN GIỮA TIÊU ĐỀ PRICING */
.pricing .container .section-title {
    text-align: center;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem; 
    width: 100%;
    max-width: 1200px; 
    height: 700px; /* Chiều cao cố định */
    margin: 4rem auto;
    padding: 2rem 0;
    perspective: 1500px;
    border-radius: 20px;
    overflow: hidden; /* Giữ các phần tử bên trong */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    background: #1B1A30;
}

/* Cột trái: Bộ chọn/Buttons */
.pricing-selector {
    flex: 0 0 350px; /* Chiều rộng cố định cho cột chọn */
    height: 100%;
    background: linear-gradient(180deg, #1B1A30 0%, #25233F 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.selector-card {
    background: #1B1A30;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.selector-card:hover {
    background: #25233F;
    border-color: #B3E0FF;
    transform: translateY(-2px);
}

.selector-card.active {
    background: #25233F;
    border-color: #FF69B4;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
}

.selector-card .plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFEBCC;
    margin-bottom: 5px;
}
.selector-card.active .plan-name {
    color: #FF69B4;
}

.selector-card .plan-price-summary {
    font-size: 0.9rem;
    color: #B3E0FF;
}


/* Cột phải: Chi tiết/Form */
.pricing-detail {
    flex: 1;
    height: 100%;
    padding: 3rem;
    position: relative;
    overflow-y: auto;
}

/* Container chi tiết của mỗi gói */
.detail-content {
    display: none;
    animation: fadeIn 0.5s ease-out;
}

.detail-content.active {
    display: block;
}

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

.detail-header {
    text-align: center;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.detail-content .plan-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: #B3E0FF;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(179, 224, 255, 0.3);
}

.detail-content .plan-description {
    font-size: 1.1rem;
    color: #e0e0e0;
}

.detail-body {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: flex-start;
}

.left-section {
    flex: 1;
    min-width: 45%;
}

.right-section {
    flex: 1;
    min-width: 45%;
    text-align: center;
    padding: 2rem;
    background: #25233F;
    border-radius: 15px;
    border: 1px solid #FF69B4;
    box-shadow: 0 5px 20px rgba(255, 105, 180, 0.2);
}

.detail-content .plan-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.7rem;
}

.detail-content .plan-price span {
    font-size: 1.1rem;
    color: #cccccc;
    font-weight: 500;
}

.detail-content .plan-features {
    list-style: none;
    padding: 0;
    text-align: left;
}

.detail-content .plan-features li {
    padding: 0.6rem 0;
    color: #e0e0e0;
    position: relative;
    padding-left: 2.2rem;
    font-weight: 400;
}

.detail-content .plan-features li::before {
    content: '💖'; 
    position: absolute;
    left: 0;
    color: #FF69B4; 
    font-weight: bold;
    font-size: 1.2em;
}

.buy-options {
    margin-top: 2rem;
    text-align: left;
}
.buy-options label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #B3E0FF;
}

.plan-button {
    width: 100%;
    padding: 1.1rem;
    background: linear-gradient(45deg, #FFEBCC, #B3E0FF); 
    color: #0A0A1F;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(255, 235, 204, 0.4);
    margin-top: 1.5rem;
}

.plan-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(179, 224, 255, 0.5);
}

/* Định kiểu cho input Mcoin */
#detail-mcoin .right-section .form-group-input {
    margin-bottom: 20px;
}
#detail-mcoin .right-section .form-group-input label {
    color: #B3E0FF;
}
#detail-mcoin .right-section .server-id-input {
    margin: 8px 0;
}

.hidden {
    display: none !important;
}

/* Scrollbar cho khu vực detail */
.pricing-detail::-webkit-scrollbar {
    width: 8px;
}
.pricing-detail::-webkit-scrollbar-track {
    background: #1B1A30;
    border-radius: 10px;
}
.pricing-detail::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); 
    border-radius: 10px;
}


/* --- Menu Dropdown Separator (Dải phân cách) --- */
.dropdown-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15); /* Màu trắng trong suốt */
    margin: 5px 0;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1A1A2E;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    border-radius: 10px;
}

/* Loading animations */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Payment Modal Styling */
.payment-modal, .success-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
}

.payment-modal-content, .success-modal-content {
    background: linear-gradient(135deg, #25233F 0%, #1B1A30 100%); /* Gradient tối mới */
    margin: auto;
    padding: 45px;
    border: 2px solid #B3E0FF; /* Viền xanh dương nhạt */
    border-radius: 20px;
    width: 90%;
    max-width: 550px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(179, 224, 255, 0.4); /* Bóng xanh dương nhạt */
    animation: fadeInScale 0.4s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.payment-modal-content h2, .success-modal-content h2 {
    font-size: 2.2rem;
    color: #FFEBCC; /* Vàng nhạt */
    margin-bottom: 1.8rem;
    text-shadow: 0 0 18px #FFEBCC;
}

.payment-modal-content p, .success-modal-content p {
    color: #e0e0e0;
    margin-bottom: 1.2rem;
    font-size: 1.15rem;
}

.close-button {
    color: #FF69B4; 
    position: absolute; /* Đã có, đảm bảo nút X nằm trong container */
    top: 18px;
    right: 28px;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.close-button:hover,
.close-button:focus {
    color: #B3E0FF; /* Xanh dương nhạt */
    transform: rotate(90deg);
    text-decoration: none;
}

.qr-code-container {
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
    display: inline-block;
    margin: 1.8rem 0;
    box-shadow: 0 8px 30px rgba(179, 224, 255, 0.3); /* Bóng xanh dương */
}

.qr-code-image {
    width: 200px;
    height: 200px;
    display: block;
}

.payment-details {
    text-align: left;
    margin: 1.8rem 0;
    padding: 0 25px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    padding-top: 1.8rem;
}

.payment-details p {
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
    color: #f0f0f0;
}

.payment-details strong {
    color: #FFEBCC; /* Vàng nhạt */
}

.payment-details span {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #B3E0FF; /* Xanh dương nhạt */
}

.small-text {
    font-size: 0.9rem;
    color: #b0b0b0;
    margin-top: 1.2rem;
}

/* New styles for payment countdown */
#paymentCountdown {
    font-size: 1.3rem;
    font-weight: bold;
    color: #FFEBCC; /* Vàng nhạt */
    margin-top: 1.5rem;
    text-shadow: 0 0 10px #FFEBCC;
}

/* Success Modal Specific Styles */
.success-modal-content {
    border: 2px solid #33cc33; /* Giữ màu xanh lá cho thành công (phản hồi tốt) */
    box-shadow: 0 20px 50px rgba(51, 204, 51, 0.4);
}

.success-modal-content h2 {
    color: #66ff66;
    text-shadow: 0 0 18px #66ff66;
}

.server-id-input {
    width: 100%;
    padding: 12px;
    margin: 18px 0;
    border-radius: 10px;
    border: 1px solid #5a5a70;
    background-color: #1a1a2e;
    color: #f0f0f0;
    font-size: 1.05rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}
.server-id-input::placeholder {
    color: #a0a0b0;
}


.submit-server-id-button {
    background: linear-gradient(45deg, #33cc33, #66ff66); /* Gradient xanh lá cây */
    color: #0d0d1a;
    padding: 0.9rem 2rem;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(102, 255, 102, 0.3);
}

.submit-server-id-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(51, 204, 51, 0.5);
}

/* Styles for the logged-in user display container */
.user-info-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    color: #0A0A1F; /* Màu chữ tối */
    box-shadow: 0 5px 20px rgba(179, 224, 255, 0.3);
    transition: all 0.3s ease;
    cursor: default;
}

.user-info-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.4); /* Bóng hồng ĐẬM hơn */
}

.discord-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    object-fit: cover;
}

.username-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    font-size: 1rem;
}

/* Styles for the logout button */
.logout-btn {
    display: none;
    background-color: #ff478a;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 25px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 10px rgba(255, 71, 138, 0.3);
}

.logout-btn:hover {
    background-color: #cc396e;
    transform: scale(1.08);
    box-shadow: 0 5px 15px rgba(255, 71, 138, 0.5);
}

/* Ensure the original discord-nav-btn also looks good */
.discord-nav-btn {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    color: #0A0A1F;
    padding: 0.9rem 2rem;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(179, 224, 255, 0.3);
}

.discord-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.5);
}

.discord-nav-btn span {
    font-size: 1.3em;
}

.footer {
    background: linear-gradient(90deg, #1B1A30, #0A0A1F); /* Gradient tối mới */
    color: #eee;
    padding: 4rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.footer-content p {
    margin: 0;
    font-size: 1rem;
    color: #d0d0e0;
}

.footer-links {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: #FFEBCC; /* Vàng nhạt */
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.footer-links a:hover {
    color: #B3E0FF; /* Xanh dương nhạt */
    transform: translateY(-2px);
}
.mouse-heart-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.mouse-flying-heart {
    position: absolute;
    width: 25px;
    height: 25px;
    background-image: url('/image/Sakura.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: mouseFlyHeart 1.5s ease-out forwards;
    transform-origin: center;
}

@keyframes mouseFlyHeart {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--dx, 0px)),
            calc(-50% + var(--dy, 0px))
        )
        scale(1.2)
        rotate(var(--rotate, 0deg));
    }
}

/* Style cho khu vực chọn server trong Modal */
.form-group-select, .form-group-input {
    margin: 25px 0;
    text-align: left;
}

.form-group-select label, .form-group-input label {
    display: block;
    margin-bottom: 10px;
    color: #FF69B4; /* Hồng ĐẬM HƠN */
    font-weight: 600;
}

/* Style cho menu <select> tiêu chuẩn */
.server-select {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif;
    color: #ffffff;
    background-color: #25233F; /* Nền tím đậm */
    border: 1px solid #B3E0FF; /* Viền xanh dương */
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.server-select:hover {
    border-color: #FF69B4;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
}

.server-select:focus {
    outline: none;
    border-color: #FFEBCC;
    box-shadow: 0 0 15px rgba(255, 235, 204, 0.5);
}
/* Styling cho dải băng SALE */
.sale-banner {
    position: absolute;
    top: 13px;
    right: -44px;
    width: 157px;
    padding: 10px 0;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transform: rotate(45deg);
    z-index: 10;
}

/* Màu cho từng loại SALE */
/* Đã điều chỉnh màu để phù hợp với tông màu mới nhưng vẫn giữ độ tương phản */
.sale-banner.sale-60 {
    background: linear-gradient(45deg, #ff416c, #ff4b2b); /* Giữ Đỏ cam cho giảm giá lớn */
}

.sale-banner.sale-30 {
    background: linear-gradient(45deg, #1d976c, #93f9b9); /* Giữ Xanh lá cho giảm giá vừa */
}

.hidden {
    display: none !important;
}

/* Màu cho dải băng SALE 20% mới */
.sale-banner.sale-20 {
    background: linear-gradient(45deg, #4e54c8, #8f94fb); /* Giữ Xanh tím cho giảm giá nhỏ */
}

.email-modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

.email-modal-content {
    background: linear-gradient(135deg, #25233F 0%, #1B1A30 100%);
    padding: 35px;
    border: 1px solid #FF69B4; /* Hồng ĐẬM hơn */
    border-radius: 15px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(255, 105, 180, 0.3);
    animation: fadeInScale 0.4s ease-out;
}

.email-modal-content h2 {
    font-size: 1.8rem;
    color: #FFEBCC; /* Vàng nhạt */
    margin-bottom: 15px;
}

.email-modal-content p {
    color: #e0e0e0;
    margin-bottom: 25px;
    font-size: 1rem;
}

.email-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #5a5a70;
    background-color: #1a1a2e;
    color: #f0f0f0;
    font-size: 1rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.submit-email-button {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    color: #0A0A1F;
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.submit-email-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.5);
}

.error-message {
    color: #ff4757;
    background-color: rgba(255, 71, 87, 0.1);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #ff4757;
    font-weight: 600;
}

.custom-alert-modal {
    display: none;
    position: fixed;
    z-index: 4000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.custom-alert-content {
    background: linear-gradient(135deg, #25233F 0%, #1B1A30 100%);
    padding: 30px 40px;
    border: 1px solid #FFEBCC; /* Vàng nhạt */
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(255, 235, 204, 0.3);
    animation: fadeInScale 0.3s ease-out;
}

.custom-alert-content p {
    color: #e0e0e0;
    margin: 0 0 25px 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.custom-alert-close-btn {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    color: #0A0A1F;
    padding: 10px 30px;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(179, 224, 255, 0.3);
}

.custom-alert-close-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.4);
}

/* Style cho số dư */
.vnd-balance-text {
    font-weight: 700;
    color: #FFEBCC; /* Vàng nhạt */
    margin-left: 10px;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

/* Container cho menu người dùng */
.user-menu-container {
    position: relative;
}

.user-info-container {
    cursor: pointer;
}

/* Menu thả xuống */
.user-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: linear-gradient(135deg, #25233F 0%, #1B1A30 100%);
    border: 1px solid #B3E0FF; /* Xanh dương nhạt */
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(179, 224, 255, 0.3);
    overflow: hidden;
    z-index: 1001;
    width: 200px;
    animation: fadeInScale 0.2s ease-out;
}

.user-dropdown-menu.active {
    display: block;
}

.user-dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
}

.user-dropdown-menu a:hover {
    background-color: rgba(179, 224, 255, 0.2);
}

/* Modal Nạp tiền */
.deposit-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.deposit-option-btn {
    background: linear-gradient(45deg, #B3E0FF, #FF69B4); /* Gradient Xanh -> Hồng Đậm */
    color: #0A0A1F;
    padding: 20px 30px;
    border-radius: 15px;
    border: none;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.deposit-option-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.5);
}

.deposit-option-btn img {
    width: 48px;
    height: 48px;
}

#cardPaymentSection .form-group {
    text-align: left;
    margin-bottom: 15px;
}

#cardPaymentSection .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #FF69B4; /* Hồng ĐẬM HƠN */
    font-weight: 600;
}

.back-to-choice-btn {
    position: absolute;
    top: 25px;
    left: 25px;
    color: #FF69B4; /* Hồng ĐẬM HƠN */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

.back-to-choice-btn:hover {
    color: #B3E0FF;
}

.logout-btn {
    display: none;
}

.image-viewer-modal {
    display: none;
    position: fixed;
    z-index: 3000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

/* Ảnh trong modal */
.modal-content-image {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1200px;
    transition: transform 0.2s ease-in-out;
    cursor: grab;
}

/* Nút đóng (dấu X) */
.close-viewer-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-viewer-btn:hover,
.close-viewer-btn:focus {
    color: #bbb;
    text-decoration: none;
}

/* Các nút điều khiển zoom */
.viewer-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(44, 47, 51, 0.8);
    border-radius: 25px;
    padding: 5px;
    display: flex;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.viewer-btn {
    background-color: #B3E0FF; /* Xanh dương nhạt */
    color: #0A0A1F;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.viewer-btn:hover {
    background-color: #FF69B4; /* Hồng ĐẬM HƠN */
    transform: scale(1.1);
}

/* Style cho tiêu đề lớn */
.acknowledgement-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 3.5rem !important; /* Lớn hơn bình thường */
    font-weight: 700;
    margin-bottom: 2rem !important;
    color: #FFEBCC !important; /* Vàng nhạt */
    text-shadow: 0 0 15px rgba(255, 235, 204, 0.7);
    text-transform: lowercase; /* Chữ thường */
}

/* Style chung cho card, làm cho nó nhẹ nhàng hơn */
.owner-card.acknowledgement-card {
    background-color: rgba(179, 224, 255, 0.1); /* Xanh dương nhạt trong suốt */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 25px;
    padding: 3rem 2rem;
    max-width: 650px; /* Mở rộng hơn */
    color: #ffffff;
    box-shadow: 0 10px 40px rgba(179, 224, 255, 0.3);    transition: all 0.4s ease;
}

/* Điều chỉnh avatar */
.acknowledgement-card .owner-avatar {
    width: 100px;
    height: 100px;
    border: 3px solid #FF69B4; /* Hồng ĐẬM */
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
    margin-bottom: 0.5rem;
}

/* Chữ "developed with to" */
.developed-with-text {
    font-size: 1.1rem;
    color: #B3E0FF; /* Xanh dương nhạt */
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-transform: lowercase; /* Chữ thường */
}

/* Tên owner (iara) */
.owner-name.iara-name {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #FF69B4 !important; /* Hồng ĐẬM HƠN */
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    margin-bottom: 3rem;
    text-transform: lowercase; /* Chữ thường */
}

/* Ẩn các phần không dùng đến từ style cũ */
.acknowledgement-card .owner-title,
.acknowledgement-card .contact-methods, 
.acknowledgement-card .bot-links {
    display: none;
}

/* Container cho Special Thanks */
.special-thanks-container {
    width: 100%;
    margin-top: 3rem;
    text-align: center;
}

.thanks-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #B3E0FF; /* Xanh dương nhạt */
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(179, 224, 255, 0.5);
    text-transform: lowercase; /* Chữ thường */
}

.thanks-item {
    margin-bottom: 2rem;
}

.thanks-name {
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFEBCC; /* Vàng nhạt */
    margin-bottom: 0.5rem;
    text-transform: lowercase; /* Chữ thường */
}

.thanks-description {
    font-size: 0.95rem;
    color: #c0c0c0;
    line-height: 1.4;
    font-style: italic;
}

.social-links-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: -10px; /* Di chuyển lên gần tên */
    margin-bottom: 30px; /* Tạo khoảng cách với phần Special Thanks */
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #0A0A1F; /* Màu chữ tối */
    font-size: 1.4rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-icon i {
    z-index: 2; /* Đảm bảo icon nằm trên hiệu ứng */
}

.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(255, 105, 180, 0.5); /* Bóng hồng nổi bật */
}

/* Màu sắc cụ thể cho từng icon */
.facebook-icon {
    background: linear-gradient(45deg, #1877F2, #4267B2);
}

.gmail-icon {
    background: linear-gradient(45deg, #DB4437, #C3281E);
    color: #ffffff; /* Màu chữ trắng cho Gmail */
}

.discord-icon {
    background: linear-gradient(45deg, #7289DA, #5865F2);
}

/* Style cho modal Thông tin người dùng */
.custom-alert-content.user-details-modal {
    max-width: 450px;
    padding: 30px;
    position: relative;
    background-color: rgba(10, 10, 31, 0.9);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    z-index: 1001; 
    color: #FFEBCC; 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

.user-details-title {
    font-size: 1.8rem;
    color: #FF69B4; /* Hồng ĐẬM HƠN */
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    font-weight: 700;
}

.user-details-body {
    text-align: center;
}

.modal-discord-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #B3E0FF; /* Xanh dương nhạt */
    object-fit: cover;
    margin-bottom: 15px;
}

.modal-username {
    font-size: 1.5rem;
    color: #FFEBCC; /* Vàng nhạt */
    margin-bottom: 20px;
}

.info-line {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    color: #e0e0e0;
}

.info-line strong {
    color: #B3E0FF; /* Xanh dương nhạt */
    font-weight: 600;
}

/* Container VIP */
.vip-info-container {
    margin-top: 20px;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.vip-info-container p {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.vip-info-container strong {
    color: #B3E0FF;
}

.vip-info-container span#modalVipLevelDisplay {
    font-weight: 700;
    color: #FF69B4; /* Hồng ĐẬM HƠN */
}

.progress-bar-container {
    margin-top: 10px;
}

.progress-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #c0c0c0;
    margin-bottom: 5px;
}

.progress-bar {
    background-color: #1B1A30;
    border-radius: 10px;
    height: 15px;
    overflow: hidden;
    border: 1px solid #444;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFEBCC, #FF69B4); /* Gradient Vàng -> Hồng */
    transition: width 0.5s ease-out;
    border-radius: 10px;
}

.modal-avatar-area {
    /* Container tạo ngữ cảnh, kích thước 128px (kích thước của trang trí) */
    position: relative; 
    width: 128px; 
    height: 128px; 
    margin: 10px auto 20px auto; /* Canh giữa và tạo khoảng cách */
}

.modal-discord-decoration {
    /* Trang trí - Lớp dưới */
    width: 128px; 
    height: 128px;
    object-fit: contain; /* Đảm bảo hình ảnh vừa vặn */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Lớp dưới (Decoration) */
    border: none !important; /* Xóa border mặc định */
}

.modal-discord-avatar {
    /* Avatar khi có trang trí - Lớp trên */
    width: 100px; /* Avatar nhỏ hơn trang trí một chút */
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Lớp trên (Avatar) */
    border: 0px solid #B3E0FF !important; /* Xóa hẳn border, chỉ giữ lại hiệu ứng trang trí */
}

.modal-discord-avatar-only {
    /* Avatar khi KHÔNG có trang trí (dùng style cũ nếu không có) */
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 10px auto 20px auto;
    border: 3px solid #B3E0FF !important; /* Giữ border khi không có trang trí */
}

.pending-upgrades-container {
    margin-top: 25px;
    padding: 15px;
    background-color: rgba(255, 105, 180, 0.1); /* Nền hồng nhạt */
    border: 1px solid #FF69B4; /* Viền hồng ĐẬM */
    border-radius: 10px;
}

.pending-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFEBCC; /* Vàng nhạt */
    margin-bottom: 10px;
    text-align: center;
}

.pending-item {
    padding: 10px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pending-item:first-child {
    border-top: none;
}

.pending-plan-name {
    font-size: 1rem;
    font-weight: 600;
    color: #B3E0FF; /* Xanh dương nhạt */
}

.pending-plan-amount {
    font-size: 0.9rem;
    color: #e0e0e0;
    margin-bottom: 8px;
}

.activate-btn {
    background: linear-gradient(45deg, #FF69B4, #FFEBCC); /* Gradient Hồng -> Vàng */
    color: #0A0A1F;
    padding: 8px 15px;
    border: none;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.activate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}

/* SỬA ĐỔI: Contact Section */
.contact {
    padding: 6rem 0;
    background: linear-gradient(45deg, #1B1A30, #0A0A1F); /* Gradient mới */
    text-align: center;
    position: relative;
    z-index: 10;
    /* THÊM HIỆU ỨNG TƯƠNG TỰ HERO CHO CÂN ĐỐI */
    /* border-top: 5px solid #FF69B4; 
    border-bottom: 5px solid #B3E0FF; */
}

.contact-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(27, 26, 48, 0.7); /* Nền tối nhẹ */
    box-shadow: 0 15px 40px rgba(179, 224, 255, 0.3); /* Bóng xanh dương nhạt */
}

.contact-content h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #FFEBCC; /* Vàng nhạt */
    text-shadow: 0 0 15px #FFEBCC;
}

.contact-content p {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 3rem;
}

/* SỬA ĐỔI: Nút Tham gia máy chủ (Đồng bộ với CTA khác) */
.join-server-btn {
    /* Kế thừa và ghi đè styles từ .cta-button */
    display: inline-flex; /* Đổi từ block sang inline-flex */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1.1rem 2.5rem;
    background: linear-gradient(45deg, #FFEBCC, #B3E0FF);
    color: #0A0A1F;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-size: 1.2rem;
    box-shadow: 0 8px 25px rgba(255, 235, 204, 0.4);
    border: none;
    cursor: pointer;
}

.join-server-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(179, 224, 255, 0.5);
}

upgrade-groups-main-container {
    display: flex; /* Bật Flexbox */
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap; 
    justify-content: center; 
}

/* Container chứa 4 thẻ nhóm lớn (cần buộc nằm trên 1 hàng) */
.upgrade-groups-main-container .upgrade-group-container {
    display: flex; /* Bật Flexbox cho container này */
    flex-direction: row; /* Đảm bảo nằm ngang */
    width: 100%; 
    gap: 10px;
    justify-content: center;
}

.vip-upgrade-card {
    background-color: #1B1A30;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-width: 120px; 
    flex: 1; /* **Quan trọng: Chia đều không gian** */
}

.vip-upgrade-card:hover:not(.active):not(.disabled) {
    background-color: #25233F;
    border-color: #B3E0FF;
}

.vip-upgrade-card.active {
    background: linear-gradient(135deg, #FF69B4 0%, #B3E0FF 100%); /* Gradient mới cho thẻ đang chọn */
    border-color: #FFEBCC;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
    transform: translateY(-5px);
}

.vip-upgrade-card.active h4 {
    color: #0A0A1F; /* Màu chữ tối trên nền sáng */
    text-shadow: none;
}

.vip-upgrade-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #0A0A1F;
    border-color: #5a5a70;
}

.vip-upgrade-card h4 {
    font-size: 1rem; /* Kích thước nhỏ hơn cho thẻ */
    color: #FFEBCC;
    margin: 0;
    font-weight: 700;
}

.vip-upgrade-card.disabled h4 {
    color: #5a5a70;
}

/* Ẩn select mini bên trong thẻ lớn */
.vip-upgrade-select-mini {
    display: none;
}

/* Container cho các gói con (nút) */
.upgrade-sub-packages-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: #1B1A30;
    justify-content: center;
}

/* Style cho nút gói con */
.sub-package-button {
    background-color: #25233F;
    color: #FFEBCC;
    border: 1px solid #B3E0FF;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 100px; /* Giảm min-width */
    flex: 1 1 auto; /* Cho phép co giãn và nằm trên một hàng (tối ưu hơn flex: 1) */
}

.sub-package-button:hover:not(.active) {
    background-color: #363456;
}

.sub-package-button.active {
    background-color: #FF69B4; /* Màu nổi bật khi được chọn */
    border-color: #FFEBCC;
    color: #0A0A1F;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.7);
    transform: translateY(-2px);
}

.package-price {
    font-size: 0.8rem;
    color: #B3E0FF;
}

.sub-package-button.active .package-price {
    color: #0A0A1F;
}

    .event-banner {
    position: fixed;
    top: 94px; 
    width: 60%; /* Giảm chiều rộng xuống 80% */
    left: 50%; /* Đặt điểm bắt đầu ở giữa màn hình */
    transform: translateX(-50%); /* Dịch chuyển 50% độ rộng của chính nó về bên trái */
    border-radius: 25px; /* Thêm bo tròn cho đẹp hơn */ 
    background: linear-gradient(90deg, #FF69B4, #B3E0FF, #FFEBCC, #FF69B4);
    background-size: 200% 100%; 
    color: #0A0A1F; 
    padding: 10px 0;
    z-index: 999; 
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    animation: gradientBG 5s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.event-text {
    display: inline-block;
    white-space: nowrap; /* Đảm bảo text không xuống dòng */
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    padding-left: 100%; /* Bắt đầu ngoài màn hình bên phải */
    /* Animation chạy chữ */
    animation: marquee 30s linear infinite;
}

/* Keyframes cho chữ chạy (marquee) */
@keyframes marquee {
    0%   { transform: translateX(0); }
    /* 100% chạy về -100% (chiều dài của chính nó) + -100vw (chiều rộng màn hình) 
       để đảm bảo chạy hết qua mép trái */
    100% { transform: translateX(calc(-100% - 100vw)); } 
}


/* ---Gộp Breakpoint Desktop (min-width: 1025px) --- */
@media (min-width: 1025px) {
    /* 1. Hiển thị lại các liên kết nav chính trên desktop */
    .nav-links .mobile-hidden-nav-item {
        display: list-item !important; 
    }
    
    /* 2. Ẩn các liên kết nav trong dropdown trên desktop */
    .user-dropdown-menu .mobile-visible-dropdown-item,
    .mobile-only-balance,
    .mobile-only-divider {
        display: none !important;
    }
    
    /* 3. Hiển thị lại số dư trên thanh nav chính trên desktop */
    .desktop-only-balance {
        display: inline-block !important; 
    }
}
/* --- Gộp Breakpoint Desktop --- */


/* --- Gộp Breakpoint Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
    /* Header & Nav */
    .header {
        /* SỬA ĐỔI: Cho header rộng hơn trên mobile/tablet */
        width: 98%; 
        padding: 0.2rem 0;
    }
    .nav-container {
        padding: 0 1.5rem; /* Giảm padding ngang trên mobile */
    }
    .nav-links {
        gap: 0;
        justify-content: flex-end;
        width: auto;
        padding: 0;
    }
    .event-banner {
        top: 80px; 
        width: 85%; /* 85% cho Mobile */
    }

    /* Pricing */
    .pricing-grid {
        flex-direction: column;
        height: auto;
        /* SỬA ĐỔI: Đảm bảo nó chiếm 100% chiều rộng của container */
        width: 100%; 
    }
    .pricing .container {
        /* SỬA ĐỔI: Giảm padding trên mobile để nội dung rộng hơn */
        padding: 0 1rem; 
    }
    
    .pricing-selector {
        flex: auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: row; /* Stack buttons horizontally */
        justify-content: space-around;
        padding: 1rem; /* Giảm padding */
    }
    .selector-card {
        flex: 1;
        text-align: center;
        padding: 1rem 0.5rem; /* Giảm padding thẻ chọn */
    }
    .selector-card .plan-name {
        font-size: 1.2rem; /* Giảm cỡ chữ */
    }

    .pricing-detail {
        padding: 2rem 1rem; /* Giảm padding chi tiết */
    }
    .detail-body {
        flex-direction: column;
        gap: 2rem;
    }
    .left-section, .right-section {
        min-width: 100%;
        padding: 0;
    }
    .right-section {
        padding: 1.5rem; /* Giữ padding cho khung mua hàng */
    }

    /* Event Banner Marquee */
    @keyframes marquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(calc(-100% - 100vw)); } 
    }
    .event-text {
         animation: marquee 15s linear infinite; /* Tăng tốc độ chạy trên mobile */
    }

    /* VIP Upgrade Cards */
    .upgrade-groups-main-container .upgrade-group-container {
        flex-direction: column; 
        gap: 8px;
    }
    .vip-upgrade-card {
        min-width: 100%;
        padding: 12px;
    }
    .sub-package-button {
        min-width: unset;
        flex: 1 1 calc(50% - 10px); /* 2 nút/dòng */
    }
    
    /* Responsive cho điện thoại */
    .pricing-detail .left-section {
        min-width: 100%; /* Đảm bảo chiếm đủ chiều rộng */
    }
}


/* --- Gộp Breakpoint Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    /* Header */
    .header {
        /* SỬA ĐỔI: Chiếm gần hết chiều rộng, giảm bo tròn cho đỡ thô */
        width: 98%;
        border-radius: 30px; 
        top: 10px; /* Giảm khoảng cách trên mobile */
    }
    .nav-container {
        padding: 0 1rem; /* Giảm padding thêm */
    }
    .logo.custom-logo {
        width: 50px; /* Giảm kích thước logo */
        height: 50px;
    }
    .user-info-container, .discord-nav-btn {
        padding: 6px 12px; /* Giảm padding nút user */
        gap: 8px;
    }
    .discord-avatar {
        width: 30px; /* Giảm avatar */
        height: 30px;
    }
    .username-text {
        max-width: 80px; /* Giảm max-width tên */
        font-size: 0.9rem;
    }

    /* Hero */
    .hero h1 {
        font-size: 2.8rem; /* Giảm cỡ chữ hero */
    }
    .hero p {
        font-size: 1.1rem;
    }

    /* Pricing (đã được xử lý ở 1024px, 768px chỉ tinh chỉnh thêm nếu cần) */
    .pricing .container {
        padding: 0 0.5rem; /* SỬA ĐỔI: Giảm padding container pricing tối đa */
    }
    .pricing-grid {
        /* SỬA ĐỔI: Xóa margin, padding mặc định để vừa 100% */
        margin: 2rem 0; 
        padding: 0;
    }
    .pricing-selector {
        padding: 0.5rem; /* Giảm padding khu chọn */
        gap: 5px;
    }
    .selector-card {
        padding: 0.8rem 0.3rem;
    }
    .selector-card .plan-name {
        font-size: 1rem; /* Giảm nữa */
    }
    .pricing-detail {
        padding: 1.5rem 0.5rem; /* Giảm padding chi tiết */
    }
    .right-section {
        padding: 1rem; /* Giảm padding khung mua hàng */
    }
    
    /* VIP Upgrade (đã xử lý ở 1024px, giữ nguyên) */

    /* Modals */
    .payment-modal-content, .success-modal-content {
        padding: 25px 15px; /* Giảm padding modal */
        width: 95%;
    }
    .payment-modal-content h2, .success-modal-content h2 {
        font-size: 1.8rem;
    }
    .qr-code-image {
        width: 160px;
        height: 160px;
    }
    .deposit-options {
        flex-direction: column;
        gap: 10px;
    }
    .deposit-option-btn {
        min-width: unset;
        width: 100%;
        padding: 15px;
    }
}

.vip-title-trigger {
    position: relative; 
    cursor: pointer;
    color: #FF69B4; /* Giữ màu hồng đậm */
    font-weight: bold; /* Đảm bảo nó nổi bật (thay cho gạch chân) */
    /* Đã xóa text-decoration (gạch chân) */
}

/* Container của tooltip */
.vip-title-tooltip {
    display: none; 
    position: fixed; /* Định vị cố định để nổi lên trên tất cả */
    z-index: 5000; 
    
    /* Kiểu dáng */
    background: linear-gradient(135deg, #25233F 0%, #1B1A30 100%);
    color: #e0e0e0;
    border: 1px solid #B3E0FF; /* Viền xanh dương nhạt */
    border-radius: 10px;
    padding: 15px;
    width: 300px;
    max-width: 90vw;
    box-shadow: 0 8px 25px rgba(179, 224, 255, 0.3);
    
    /* Hiệu ứng */
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none; /* Mặc định không thể tương tác */
}

.vip-title-tooltip.show {
    display: block;
    opacity: 1;
    pointer-events: auto; /* Cho phép tương tác khi hiển thị */
}

/* Nội dung bên trong tooltip */
#vipTitleTooltipContent {
    text-align: left;
}

#vipTitleTooltipContent h4 {
    color: #FF69B4; /* Hồng ĐẬM HƠN */
    font-size: 1.2rem;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

#vipTitleTooltipContent p {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #FFEBCC; /* Vàng nhạt */
}

/* Định dạng cho các dòng chi tiết (Cách nhận, Bonus...) */
#vipTitleTooltipContent p strong {
    color: #B3E0FF; /* Xanh dương nhạt */
    min-width: 100px; /* Đảm bảo các giá trị thẳng hàng */
    display: inline-block;
}

/* Mũi tên của tooltip */
.vip-title-tooltip-arrow {
    position: absolute;
    width: 0; 
    height: 0;
    
    /* Định vị ở giữa, dưới cùng của tooltip */
    bottom: -10px; 
    left: 50%;
    transform: translateX(-50%);
    
    /* Hình tam giác */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #B3E0FF; /* Màu mũi tên (giống màu viền) */
}

.vip-title-tooltip[data-tooltip-type="user"] #vipTitleTooltipContent {
    padding: 0; 
}

.user-tooltip-profile {
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa tất cả theo chiều ngang */
    gap: 10px;
    padding: 20px; /* Thêm padding */
    width: 220px; /* Tăng chiều rộng 1 chút cho 3 cột */
    margin-left: 25px;
}

.user-tooltip-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #FF69B4;
    object-fit: cover;
    flex-shrink: 0;
    margin-bottom: 5px;
}

.user-tooltip-info {
    display: flex;
    justify-content: center; /* Căn giữa tên */
    width: 100%;
}

.user-tooltip-username {
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFEBCC !important;
    margin: 0;
    line-height: 1; 
    text-align: center; /* Đảm bảo tên được căn giữa */
}

.user-tooltip-info .user-tooltip-dm-link {
    display: none; 
}

/* Đường kẻ ngang */
.user-tooltip-divider {
    width: 90%; /* Tăng chiều rộng đường kẻ */
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 5px 0;
}

/* Container cho 3 cột STATS */
.user-tooltip-stats {
    display: flex;
    justify-content: center; /* Đổi từ space-around sang center */
    gap: 20px; /* Thêm khoảng cách giữa các cột */
    align-items: flex-start; /* Căn đỉnh */
    width: 100%;
    margin-top: 10px;
}

/* Từng cột (Vip, Role, Info) */
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Khoảng cách giữa Tiêu đề và Nội dung */
    min-width: 60px; /* Đảm bảo các cột có chiều rộng */
    text-align: center;
}

/* Tiêu đề (Vip, Role, Info) */
.stat-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #B3E0FF; /* Xanh dương nhạt */
    text-transform: uppercase;
}

/* Nội dung (Emoji, Tên Role, Icon Discord) */
.stat-content {
    font-size: 1rem;
    font-weight: 700;
    color: #FFEBCC; /* Vàng nhạt */
    line-height: 1;
}

/* Style cho icon Discord trong cột Info */
.stat-box .user-tooltip-dm-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* Kích thước icon */
    color: #7289DA; /* Màu Discord */
    text-decoration: none;
    transition: all 0.3s ease;
}

.stat-box .user-tooltip-dm-link:hover {
    color: #5865F2;
    transform: scale(1.1);
}

/* Gỡ bỏ style cũ (đã bị thay thế) */
.user-tooltip-roles,
.user-tooltip-vip,
.user-tooltip-role {
    display: none;
}

.custom-alert-content.user-details-modal {
    max-height: 90vh; /* Giới hạn chiều cao tổng thể của modal */
    display: flex; /* Sử dụng flex để body co giãn */
    flex-direction: column;
}

/* 2. Cho phép phần body cuộn */
.user-details-modal .user-details-body {
    overflow-y: auto; /* Bật cuộn dọc KHI CẦN */
    max-height: 70vh; /* Giới hạn chiều cao của riêng phần body (có thể điều chỉnh) */
    
    /* Kỹ thuật ẩn thanh cuộn */
    padding-right: 17px; /* Tạo không gian cho thanh cuộn (cho Windows) */
    box-sizing: content-box; /* Đảm bảo padding không ảnh hưởng đến layout */
    margin-right: -17px; /* Đẩy thanh cuộn ra ngoài vùng hiển thị */
}

/* 3. Ẩn thanh cuộn (cho Chrome, Safari, Edge) */
.user-details-modal .user-details-body::-webkit-scrollbar {
    width: 0;
    background: transparent; /* Ẩn hoàn toàn */
}

/* 4. Ẩn thanh cuộn (cho Firefox) */
.user-details-modal .user-details-body {
    scrollbar-width: none; /* "none" để ẩn */
    -ms-overflow-style: none; /* (Cho IE) */
}