/* Nền và font chữ chung */
body {
    background: linear-gradient(to bottom, #f8f9fa, #e2e2e2); /* Hiệu ứng chuyển từ trắng sáng đến xám nhạt */
    font-family: 'Arial', sans-serif;
    padding-top: 80px;
}

/* Header với hiệu ứng gradient */
.header-gradient {
    background: linear-gradient(90deg, #FF8C00, #FFD700);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Logo */
.logo img {
    max-height: 38px;
}

/* Nút trong header với hiệu ứng gradient và icon */
.btn-outline-light {
    border-color: #FFD700;
    color: #FFD700;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #FFD700;
    color: #2C3E50;
}

.btn-primary {
    background-color: #FFC107;
    border-color: #FFC107;
    font-weight: bold;
    color: #2C3E50;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #FFB300;
}

/* Tiêu đề với hiệu ứng gradient cho chữ */
.text-gradient {
    background: linear-gradient(90deg, #FF8C00, #FFD700);
    -webkit-background-clip: text;
    color: transparent;
}

/* Phần panel game */
.game-panel {
    background-color: #fff3cd;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Nút trong các panel chức năng */
.btn-warning {
    background-color: #FFC107;
    color: #333;
    font-weight: bold;
    transition: all 0.3s ease, box-shadow 0.3s ease;
}

.btn-warning:hover {
    background-color: #FFA000;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}
/* Footer với nền tối và các chi tiết hiện đại */
.footer-grand {
    background-color: #2C3E50;
    color: #ccc;
    padding: 30px 0;
}

/* Tiêu đề trong footer */
.footer-grand h5 {
    font-weight: bold;
    color: #FFD700;
}

/* Mô tả ngắn */
.footer-description {
    color: #aaa;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Liên kết trong footer */
.footer-link {
    color: #FFD700;
    display: block;
    margin: 5px 0;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Mạng xã hội */
.social-links {
    margin-top: 10px;
}

.footer-social-link {
    color: #FFD700;
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social-link:hover {
    color: #fff;
    transform: scale(1.2);
}

/* Đường phân cách trong footer */
.footer-divider {
    border-top: 1px solid #555;
    margin-top: 20px;
}

/* Bản quyền */
.footer-copyright {
    color: #777;
    font-size: 0.85rem;
}
/* Cố định header */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Z-index cao để header ở trên các phần tử khác */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bóng đổ */
}
/* Hình nền mờ */
.game-panel {
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9; /* Độ trong suốt */
    filter: blur(0.8px); /* Hiệu ứng mờ */
}

/* Nội dung text và nút Play */
.content {
    position: relative;
    z-index: 1;
}

.text-gradient {
    background: linear-gradient(90deg, #FF8C00, #FFD700);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    text-shadow: 0px 0px 8px rgba(255, 215, 0, 0.5);
}

/* Nút Play */
.btn-play {
    background-color: #FFD700;
    color: #333;
    border: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-play:hover {
    transform: scale(1.1); /* Hiệu ứng phóng to */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* Đổ bóng */
    background-color: #FFB300;
    color: #fff;
}
.custom-title-gradient {
    text-decoration: none;
    font-size: 1.25rem; /* Kích thước chữ */
    font-weight: bold; /* Chữ đậm */
    color: #FFD700; /* Màu vàng cho chữ */
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* Viền đen dày quanh chữ */
}
/* Hiệu ứng lấp lánh 7 màu */
@keyframes rainbowBlink {
    0% {
        text-shadow: 
            -1px -1px 0 #FF0000,  
            1px -1px 0 #FF7F00,
            -1px 1px 0 #FFFF00,
            1px 1px 0 #00FF00;
    }
    25% {
        text-shadow: 
            -1px -1px 0 #00FF00,  
            1px -1px 0 #0000FF,
            -1px 1px 0 #4B0082,
            1px 1px 0 #EE82EE;
    }
    50% {
        text-shadow: 
            -1px -1px 0 #EE82EE,  
            1px -1px 0 #4B0082,
            -1px 1px 0 #0000FF,
            1px 1px 0 #FF7F00;
    }
    75% {
        text-shadow: 
            -1px -1px 0 #FF7F00,  
            1px -1px 0 #FFFF00,
            -1px 1px 0 #FF0000,
            1px 1px 0 #00FF00;
    }
    100% {
        text-shadow: 
            -1px -1px 0 #FF0000,  
            1px -1px 0 #FF7F00,
            -1px 1px 0 #FFFF00,
            1px 1px 0 #00FF00;
    }
}

/* Áp dụng hiệu ứng lấp lánh */
.custom-title-gradient2 {
    text-decoration: none;
    color: #FFD700; /* Màu vàng cho chữ */
    text-shadow: 
        -1px -1px 0 #FF0000,  
        1px -1px 0 #FF7F00,
        -1px 1px 0 #FFFF00,
        1px 1px 0 #00FF00;
    animation: rainbowBlink 2s infinite ease-in-out; /* Áp dụng animation lấp lánh */
}

.game-title {
            font-family: 'Arial Black', sans-serif;
            font-weight: bold;
            color: #ffc107;
            text-shadow: 2px 2px 4px #333;
            text-transform: uppercase;
        }
        .tab-content h5 {
            font-family: 'Verdana', sans-serif;
            font-weight: bold;
            color: #ff5722;
        }
        .table th, .table td {
            font-family: 'Verdana', sans-serif;
            font-weight: 600;
            color: #212529;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(255, 224, 130, 0.3);
        }
        .table-striped tbody tr:hover {
            background-color: rgba(255, 152, 0, 0.3);
            cursor: pointer;
        }
        .card:hover {
            transform: scale(1.05); /* Phóng to nhẹ khi hover */
            transition: 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
        }
        .icon-circle {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%; /* Tạo hình tròn cho icon */
            margin: 0 auto 20px; /* Canh giữa và cách phần text */
        }
		
		
		
		/* Thêm giao diện và hiệu ứng cho popup thông báo */
.custom-popup {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

.custom-popup:hover {
  transform: scale(1.05);
}

/* Hiệu ứng cho nút Tắt thông báo */
.custom-btn {
  background: linear-gradient(90deg, #007bff, #00d2ff);
  border: none;
  border-radius: 8px;
  color: #fff;
  transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
}

.custom-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(90deg, #0056b3, #00a2ff);
}


/* Thêm Animation cho text-primary */
.text-primary {
    --mdb-text-opacity: 1;
    color: #0067ff !important;
    transition: transform 0.3s ease, text-shadow 0.3s ease; 
}

/* Hiệu ứng Hover với 7 màu lấp lánh */
.text-primary:hover {
    transform: scale(1.1); 
    text-shadow: 0 0 15px #FF0000, 0 0 15px #FF7F00, 0 0 15px #FFFF00, 
                 0 0 15px #00FF00, 0 0 15px #0000FF, 0 0 15px #4B0082, 
                 0 0 15px #EE82EE; /* Hiệu ứng lấp lánh 7 màu */
}

/* Thêm Animation nhấp nháy hiệu ứng 7 màu */
@keyframes rainbowPulse {
    0% {
        text-shadow: 0 0 15px #FF0000, 0 0 25px #FF7F00, 0 0 35px #FFFF00;
    }

    25% {
        text-shadow: 0 0 15px #00FF00, 0 0 25px #0000FF, 0 0 35px #4B0082;
    }

    50% {
        text-shadow: 0 0 15px #4B0082, 0 0 25px #EE82EE, 0 0 35px #FF7F00;
    }

    75% {
        text-shadow: 0 0 15px #EE82EE, 0 0 25px #FFFF00, 0 0 35px #FF0000;
    }

    100% {
        text-shadow: 0 0 15px #FF0000, 0 0 25px #FF7F00, 0 0 35px #FFFF00;
    }
}

/* Áp dụng animation pulsing */
.text-primary.animate {
    animation: rainbowPulse 2s ease-in-out infinite; /* Lặp animation lấp lánh */
}




.background-image1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lớp phủ mờ */
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Mờ tối với 40% màu đen */
}



/* Hiệu ứng nút play */
.btn-play {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-play:hover {
    background: #0056b3;
}