/* Marquee quảng cáo dòng chữ =========================== */
 .quangcao-wrapper {
     background-color: #00000056;
     height: 32px;
     overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
     margin-top: 32px;
 }

 .quangcao-text {
     white-space: nowrap;
     position: absolute;
     right: -100%;
     animation: marquee 20s linear infinite;
     font-weight: bold;
     font-size: 16px;
     color: white;
 }


 @keyframes marquee {
     from {
         right: -100%;
     }

     to {
         right: 100%;
     }
 }

 /* Nền video background_genshin ============================*/
 .background-image {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../IMG/banner_genshin_1.jpg');
     background-size: cover;
     background-position: center;
     z-index: -1;
     opacity: 0.9;
 }


 /* Nền Menu Nav đầu trang web */
 .custom-navbar {
     background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 /* Nút button */
 .btn-filter {
     font-size: 0.75rem;
     border-radius: 20px;
     padding: 6px 16px;
 }

 .but {
     background-color: #ccc;
     transition: background-color 0.3s;
 }

 .active-but {
     background-color: #0d6efd !important;
     color: white !important;
 }

 /* Khung tìm kiếm */

 .search-group {
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 0 0 1px #ccc;
 }

 .search-group .form-control,
 .search-group .input-group-text {
     border: none;
     border-radius: 0;
 }

 /* Ảnh img tìm kiếm game */

 .zoom-img {
     transition: transform 0.3s ease;
 }

 .zoom-img:hover {
     transform: scale(1.05);
     cursor: pointer;
 }

 /* Liên hệ bên dưới web */
 /* Hộp hỗ trợ nổi */
 .support-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
     font-family: sans-serif;
 }

 /* Các icon liên hệ (ẩn mặc định) */
 .support-buttons {
     display: none;
     flex-direction: column;
     align-items: flex-end;
     margin-bottom: 10px;
 }

 .support-buttons a {
     background: white;
     color: #6f42c1;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
     text-decoration: none;
 }

 .support-buttons a:hover {
     transform: scale(1.1);
 }

 /* Nút chính */
 .support-toggle {
     display: flex;
     align-items: center;
     background: white;
     border-radius: 50px;
     padding: 5px 12px 5px 16px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     color: #d633ff;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s;
 }

 .support-toggle i {
     font-size: 20px;
     background: #d633ff;
     color: white;
     border-radius: 50%;
     padding: 6px;
     margin-left: 8px;
 }

 /* Hover: hiện các icon */
 .support-container:hover .support-buttons {
     display: flex;
 }

 /* Hiệu ứng trượt ra của liên hệ bên dưới web */
 .support-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
 }

 /* Nút Hỗ trợ chính */
 .support-toggle {
     display: flex;
     align-items: center;
     background: white;
     border-radius: 50px;
     padding: 5px 12px 5px 16px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     color: #d633ff;
     font-weight: bold;
     cursor: pointer;
 }

 .support-toggle i {
     font-size: 20px;
     background: #d633ff;
     color: white;
     border-radius: 50%;
     padding: 6px;
     margin-left: 8px;
 }

 /* Nhóm các nút trượt */
 .support-buttons {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     margin-bottom: 10px;
 }

 /* Mỗi nút liên hệ */
 .support-buttons a {
     background: white;
     color: #d633ff;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     opacity: 0;
     transform: translateY(20px);
     pointer-events: none;
     transition: all 0.3s ease;
 }

 /* Icon Zalo màu tím bằng filter */
 .icon-zalo {
     width: 40px;
     height: 40px;
     filter: brightness(0) saturate(100%) invert(16%) sepia(93%) saturate(4156%) hue-rotate(277deg) brightness(94%) contrast(100%);
 }

 /* Khi hover vào toàn bộ hộp: các icon sẽ trượt ra */
 .support-container:hover .support-buttons a {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 /* Delay hiệu ứng trượt từng cái */
 .support-buttons a:nth-child(1) {
     transition-delay: 0.05s;
 }

 .support-buttons a:nth-child(2) {
     transition-delay: 0.15s;
 }

 .support-buttons a:nth-child(3) {
     transition-delay: 0.25s;
 }

 /* Mặc định thẻ menu */
 .navbar-nav .nav-link {
     color: white;
     padding: 8px 16px;
     border-radius: 6px;
     transition: all 0.3s;
 }

 /* Khi hover hoặc đang chọn */
 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-item.active .nav-link {
     color: #ffffff;
     font-weight: bold;
 }

 /* Nổi bật */
 .blur-bg {
     background: rgba(178, 178, 178, 0.74);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border-radius: 12px;
 }