/* ==========================================
   1. RESET & BASE STYLES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #0b0b0b;
    color: #d1d1d1;
    background-image: radial-gradient(circle, #1a0505 0%, #050505 100%);
    line-height: 1.5;
}

a {
    color: #ffbd59;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 5px #ff4500;
}

/* ==========================================
   2. NAVIGATION BAR & HERO VIDEO
   ========================================== */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(20, 3, 3, 0.95) 0%, rgba(5, 1, 1, 0.98) 100%);
    border-top: 1px solid #5a0c0c;
    border-bottom: 2px solid #8c1111;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 204, 0, 0.2);
    flex-wrap: wrap;
    font-family: 'Oswald', 'Segoe UI', sans-serif;
    width: 100%;
}

/* Style nút chuẩn co giãn linh hoạt */
nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    color: #e6c280;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(180deg, #2b0505 0%, #120202 100%);
    border: 1px solid #5c1111;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.25s ease-in-out;
    overflow: hidden; /* Bắt buộc để vệt sáng tráng gương không bị tràn ra ngoài nút */
    white-space: nowrap;
    margin: 0 !important;
}

/* Tối ưu khoảng cách icon trong nút */
nav a i {
    margin-right: 6px;
    font-size: 14px;
}

/* Hover nút thường */
nav a:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #a61c1c 0%, #4a0303 100%);
    border-color: #ff3333;
    box-shadow: 0 0 12px rgba(255, 51, 51, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Active (khi nhấn giữ nút) */
nav a:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------
   1. NÚT THƯỜNG: TRÁNG GƯƠNG KHI RE CHUỘT (HOVER)
   -------------------------------------------------- */
nav a:not(.btn-highlight)::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
    pointer-events: none;
}

/* Quét vệt sáng 1 lần khi di chuột vào */
nav a:not(.btn-highlight):hover::after {
    animation: navHoverSweep 0.6s ease-in-out forwards;
}

@keyframes navHoverSweep {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* --------------------------------------------------
   2. NÚT NỔI BẬT (.btn-highlight): TRÁNG GƯƠNG TỰ ĐỘNG
   -------------------------------------------------- */
nav a.btn-highlight {
    background: linear-gradient(180deg, #d92b2b 0%, #7a0000 100%) !important;
    color: #ffea75 !important;
    border: 1px solid #ff4d4d !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

nav a.btn-highlight:hover {
    background: linear-gradient(180deg, #ff3333 0%, #990000 100%) !important;
    color: #ffffff !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 0 18px rgba(255, 51, 51, 0.9), 0 0 8px rgba(255, 204, 0, 0.5) !important;
}

/* Vệt sáng lướt tự động liên tục mỗi 3 giây */
nav a.btn-highlight::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
    pointer-events: none;
    animation: navMirrorSweep 3s infinite ease-in-out;
}

@keyframes navMirrorSweep {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}


@media (min-width: 768px) {
    nav a {
        font-size: 16px;
        margin: 0 10px;
    }
}

.hero-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #8b0000;
    overflow: hidden;
    background-color: #000;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   3. FOOTER
   ========================================== */
footer {
    text-align: center;
    padding: 20px 15px;
    background-color: #050505;
    border-top: 2px solid #330000;
    color: #666;
    font-size: 13px;
}

/* ==========================================
   4. SYSTEM POPUP & OVERLAY (ĐỒNG BỘ CHUẨN)
   ========================================== */
.popup-overlay,
.mu-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 15px;
}

/* Kích hoạt hiển thị Popup */
.popup-overlay.active,
.mu-popup-overlay.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

/* Khung Popup Nội Dung */
.popup-content,
.mu-popup-content {
    background: #120202;
    border: 2px solid #ffcc00;
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.3), inset 0 0 15px rgba(0, 0, 0, 0.9);
    border-radius: 6px;
    position: relative;
    padding: 20px;
    max-height: 90vh;
    max-width: 850px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    color: #d1d1d1;
    overflow: hidden;
    animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Nút Nút Đóng Góc Phải (X) */
.popup-close,
.mu-popup-close {
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 28px;
    color: #ffcc00;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    z-index: 10;
    transition: transform 0.2s, color 0.2s;
}

.popup-close:hover,
.mu-popup-close:hover {
    color: #ff3333;
    transform: scale(1.2);
}

/* Header Popup */
.popup-header-gold,
.mu-modal-header {
    text-align: center;
    padding: 15px;
    background: linear-gradient(180deg, #4a0d0d 0%, #260505 100%);
    border-bottom: 1px solid #5c1414;
    margin-bottom: 15px;
    position: relative;
}

.popup-title-epic,
.mu-modal-title {
    color: #ffcc00;
    font-size: clamp(18px, 2.5vw, 22px);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 0;
}

.popup-subtitle-epic {
    color: #FF7700;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 5px;
    -webkit-font-smoothing: antialiased;
}

/* Body Cuộn Nội Dung */
.popup-body-scroll,
.mu-popup-body {
    overflow-y: auto;
    padding-right: 5px;
    max-height: 70vh;
    background: #1a0303;
}

.popup-body-scroll::-webkit-scrollbar,
.mu-popup-body::-webkit-scrollbar {
    width: 5px;
}

.popup-body-scroll::-webkit-scrollbar-track,
.mu-popup-body::-webkit-scrollbar-track {
    background: #0d0101;
}

.popup-body-scroll::-webkit-scrollbar-thumb,
.mu-popup-body::-webkit-scrollbar-thumb {
    background: #ffcc00;
    border-radius: 3px;
}

/* Banner Sự Kiện & Thời Gian */
.server-event-banner,
.mu-time-box {
    background: rgba(255, 204, 0, 0.05);
    border: 1px dashed #ffcc00;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
}

.banner-text,
.mu-time-val {
    color: #00ff00;
    font-weight: bold;
    font-family: monospace;
    font-size: 14px;
    text-transform: uppercase;
}

/* ==========================================
   5. BẢNG DỮ LIỆU & STYLES CHUNG (TABLES)
   ========================================== */
.table-container-styled {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #420606;
    border-radius: 4px;
    background: #240505;
}

.mu-table-styled,
.mu-table-dark,
.mu-table,
.mu-table-info {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.mu-table-styled thead tr,
.mu-table-dark thead tr,
.mu-table th {
    background: linear-gradient(180deg, #3d1010 0%, #1a0404 100%);
    border-bottom: 2px solid #ffcc00;
}

.mu-table-styled th,
.mu-table-dark th,
.mu-table th {
    padding: 12px;
    color: #ffcc00;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid #420606;
}

.mu-table-styled th:last-child,
.mu-table-dark th:last-child,
.mu-table th:last-child {
    border-right: none;
}

/* Cột tỷ lệ 25% - 75% cho Lộ Trình & Sự Kiện */
.mu-table-styled th.col-time,
.mu-table-dark th.col-event {
    width: 25%;
}

.mu-table-styled th.col-content,
.mu-table-dark th.col-detail {
    width: 75%;
}

.mu-table-styled td,
.mu-table-dark td,
.mu-table td,
.mu-table-info td {
    padding: 10px 12px;
    border-bottom: 1px solid #360707;
    border-right: 1px solid #360707;
    font-size: 13px;
    vertical-align: middle;
}

.mu-table-styled td:last-child,
.mu-table-dark td:last-child,
.mu-table td:last-child,
.mu-table-info td:last-child {
    border-right: none;
}

.col-time-cell,
.col-event-cell {
    width: 25%;
}

.col-content-cell,
.col-detail-cell {
    width: 75%;
}

.col-content-cell div,
.col-detail-cell div {
    text-align: center;
    margin: 2px 0;
}

/* Hiệu ứng Hover Dòng Bảng */
.hover-row,
.mu-table tr,
.mu-table-info tr {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.hover-row:hover,
.mu-table tr:hover,
.mu-table-info tr:hover {
    background-color: #2b0808;
    box-shadow: inset 0 0 8px rgba(255, 69, 0, 0.3);
}

.row-alt {
    background-color: rgba(255, 255, 255, 0.02);
}

.row-important,
.row-highlight-gold {
    background: rgba(255, 204, 0, 0.05);
}

/* ==========================================
   6. HỆ THỐNG TAB MENU
   ========================================== */
.tab-menu-wrapper,
.mu-tabs-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    background: #150202;
    padding: 10px;
    border: 1px solid #420606;
    border-radius: 4px;
    flex-wrap: wrap;
}

.mu-info-tab-btn,
.mu-tab-btn {
    background: #2d0808;
    color: #aaa;
    border: 1px solid #5c1414;
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 12px;
}

.mu-info-tab-btn:hover,
.mu-tab-btn:hover,
.mu-info-tab-btn.active-tab-alpha,
.mu-tab-btn.active {
    background: #ffcc00;
    color: #000;
    border-color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
}

.open-tab-content {
    display: none;
}

.open-tab-content.active {
    display: block;
}

/* ==========================================
   7. CARD, NOTICE BOX & ALERTS
   ========================================== */
.info-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.mu-info-card {
    background: rgba(15, 5, 5, 0.6);
    border: 1px solid #2d0a0a;
    padding: 15px;
    border-radius: 4px;
}

.card-title {
    color: #ffbd59;
    font-size: 15px;
    border-bottom: 1px solid #2d0a0a;
    padding-bottom: 8px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.mu-notice-box-gold,
.mu-notice-box {
    background: rgba(255, 204, 0, 0.02);
    border: 1px solid #ffcc00;
    border-radius: 4px;
    padding: 12px 15px;
    margin-top: 15px;
}

.notice-title,
.mu-notice-title {
    color: #ffcc00;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
    text-transform: uppercase;
}

.notice-commit-list p,
.mu-notice-list span {
    font-size: 13px;
    color: #bbb;
    margin-bottom: 5px;
    line-height: 1.5;
    display: block;
    text-align: center;
}

.mu-alert-warning {
    padding: 12px;
    background: rgba(255, 51, 51, 0.1);
    border-radius: 4px;
    margin-top: 20px;
    border: 1px solid #ff3333;
    text-align: center;
    color: #ff3333;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* ==========================================
   8. FOOTER POPUP & BUTTONS
   ========================================== */
.mu-modal-footer {
    text-align: center;
    padding-top: 15px;
    margin-top: 10px;
    background: #120202;
    border-top: 1px solid #420606;
}

.btn-close-style {
    background: linear-gradient(180deg, #801414 0%, #400a0a 100%);
    color: #fff;
    border: 1px solid #ff3333;
    padding: 8px 25px;
    font-weight: bold;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.btn-close-style:hover {
    background: linear-gradient(180deg, #b31b1b 0%, #600f0f 100%);
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
}

/* ==========================================
   9. UTILITY CLASSES (COLOR & BADGES)
   ========================================== */
.text-bold { font-weight: bold; }
.text-white { color: #ffffff; }
.text-orange { color: #ff6600; }
.text-cyan { color: #00ffff; }
.text-gold { color: #ffbd59; }
.text-green { color: #00ff00; }
.icon-gold-sm { color: #ffbd59; margin-right: 6px; }
.icon-red-sm { color: #ff2200; margin-right: 6px; }

.rank-1 { color: #ffd700 !important; font-weight: bold; }
.rank-2 { color: #c0c0c0 !important; font-weight: bold; }
.rank-3 { color: #cd7f32 !important; font-weight: bold; }

.icon-danger { color: #ff4d4d; }
.icon-info { color: #00bfff; }
.icon-purple { color: #ba55d3; }
.icon-orange { color: #ffa500; }
.icon-gold { color: #ffbd59; }
.icon-white { color: #ffffff; }
.icon-pink { color: #ff69b4; }
.icon-teal { color: #20b2aa; }

.box-note {
    color: #ffbd59;
    font-weight: bold;
    font-size: 13px;
    margin-top: 3px;
}

/* Time Badges */
.time-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0 auto;
}

.badge-success {
    background-color: rgba(0, 255, 102, 0.15);
    color: #00ff66;
    border: 1px solid #00ff66;
}

.badge-info {
    background-color: rgba(0, 191, 255, 0.15);
    color: #00bfff;
    border: 1px solid #00bfff;
}

.badge-purple {
    background-color: rgba(186, 85, 211, 0.15);
    color: #ba55d3;
    border: 1px solid #ba55d3;
}

/* 6. Popup Đăng Ký */

@keyframes borderPulse {
    0% { border-color: #ffcc00; box-shadow: 0 0 5px rgba(255, 204, 0, 0.4); }
    50% { border-color: #ff3333; box-shadow: 0 0 15px rgba(255, 51, 51, 0.8); }
    100% { border-color: #ffcc00; box-shadow: 0 0 5px rgba(255, 204, 0, 0.4); }
}

.mu-pulse-box {
    animation: borderPulse 2.5s infinite ease-in-out;
}
/* ==========================================
   HIỆU ỨNG HOVER CHO POPUP ĐĂNG KÝ
   ========================================== */

/* 1. Hover nút x (Đóng ở góc trên) */
#popup-dangky .popup-close {
    transition: all 0.25s ease-in-out;
}
#popup-dangky .popup-close:hover {
    color: #ff3333 !important;
    transform: translateY(-50%) scale(1.2) rotate(90deg) !important;
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.8);
}

/* 2. Hover nút "ĐÓNG CỬA SỔ" ở footer */
#popup-dangky .mu-modal-footer .mu-tab-btn {
    transition: all 0.3s ease;
    border: 1px solid #8c1111;
    background: linear-gradient(180deg, #4a0000 0%, #1a0000 100%);
    color: #ffcc00;
}
#popup-dangky .mu-modal-footer .mu-tab-btn:hover {
    background: linear-gradient(180deg, #aa0000 0%, #4a0000 100%);
    color: #ffffff;
    border-color: #ff3333;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* 3. Hover các ô "Các bước thực hiện" (01, 02, 03) */
#popup-dangky .popup-body grid > div,
#popup-dangky div[style*="grid-template-columns"] > div {
    transition: all 0.3s ease;
}
#popup-dangky div[style*="grid-template-columns"] > div:hover {
    border-color: #ffcc00 !important;
    background: rgba(45, 5, 5, 0.8) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.2);
}

/* 4. Hover khung ảnh hướng dẫn */
#popup-dangky div[style*="border: 1px solid #540a0a"] {
    transition: all 0.3s ease;
}
#popup-dangky div[style*="border: 1px solid #540a0a"]:hover {
    border-color: #ff3333 !important;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.5) !important;
}

/* 5. Hiệu ứng viền phát sáng nhịp thở cho Khối Bảo Mật */
@keyframes pulseBorder {
    0% {
        border-color: #ffcc00;
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
    }
    50% {
        border-color: #ff3333;
        box-shadow: 0 0 15px rgba(255, 51, 51, 0.6);
    }
    100% {
        border-color: #ffcc00;
        box-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
    }
}

#popup-dangky .mu-pulse-box {
    animation: pulseBorder 2.5s infinite ease-in-out;
}

/* ==========================================
   FULL CSS POPUP TẢI GAME (MU ONLINE STYLE)
   ========================================== */

/* 1. Thiết kế nền Gradient Đỏ - Vàng Nổi 3D */
#popup-taigame .download-card .mu-mirror-btn {
    display: inline-block !important;
    width: 80% !important;
    padding: 10px 0 !important;
    background: linear-gradient(180deg, #d92b2b 0%, #800000 50%, #4a0000 100%) !important;
    color: #fff2a3 !important;
    border: 1px solid #ff4d4d !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 5px rgba(255, 0, 0, 0.5) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 
                inset 0 1px 0 rgba(255, 255, 255, 0.4), 
                inset 0 -1px 0 rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer !important;
}

/* 2. Hiệu ứng Hover - Đổi Màu & Phát Sáng Rực Rỡ */
#popup-taigame .download-card .mu-mirror-btn:hover {
    background: linear-gradient(180deg, #ff3333 0%, #cc0000 50%, #800000 100%) !important;
    color: #ffffff !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.9), 
                0 0 10px rgba(255, 204, 0, 0.6), 
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.03) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9) !important;
}

/* 3. Hiệu ứng Active (Khi bấm giữ chuột) */
#popup-taigame .download-card .mu-mirror-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* 4. Hiệu ứng Icon Download rung nhẹ khi Hover */
#popup-taigame .download-card .mu-mirror-btn i {
    margin-right: 5px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

#popup-taigame .download-card .mu-mirror-btn:hover i {
    transform: translateY(2px);
    color: #ffcc00;
}

/* 5. CLASS NÚT TẢI - HIỆU ỨNG TRÁNG GƯƠNG TỰ ĐỘNG (AUTO SWEEP) */
.mu-mirror-btn {
    position: relative;
    overflow: hidden !important;
    display: inline-block;
    transition: all 0.3s ease !important;
}

/* Dải sáng tráng gương tự chạy bằng ::after */
.mu-mirror-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-30deg);
    pointer-events: none;
    animation: mu-mirror-sweep 2.5s ease-in-out infinite;
}

@keyframes mu-mirror-sweep {
    0% { left: -150%; }
    40% { left: 150%; }
    100% { left: 150%; }
}

/* Hover đổi màu rực hơn cho nút tải */
.mu-mirror-btn:hover {
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
}

/* 6. Khung Công cụ hỗ trợ (UltraViewer & C++) */
#popup-taigame .mu-info-box div[style*="grid-template-columns"] > div {
    transition: all 0.3s ease;
}
#popup-taigame .mu-info-box div[style*="grid-template-columns"] > div:hover {
    border-color: #ffcc00 !important;
    background: rgba(30, 4, 4, 0.9) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.15);
}

/* 7. Khối Lưu Ý Quan Trọng - Hiệu ứng nhịp thở viền */
@keyframes warningPulseGlow {
    0% { border-left-color: #ff3333; box-shadow: 0 0 5px rgba(255, 51, 51, 0.2); }
    50% { border-left-color: #ffcc00; box-shadow: 0 0 15px rgba(255, 204, 0, 0.4); }
    100% { border-left-color: #ff3333; box-shadow: 0 0 5px rgba(255, 51, 51, 0.2); }
}

#popup-taigame .mu-info-box[style*="border-left"] {
    animation: warningPulseGlow 3s infinite ease-in-out;
}

/* 8. Nút "ĐÓNG CỬA SỔ" ở Footer */
#popup-taigame .mu-modal-footer button {
    background: linear-gradient(180deg, #3a0505 0%, #120101 100%) !important;
    color: #ffcc00 !important;
    border: 1px solid #731212 !important;
    transition: all 0.3s ease !important;
}
#popup-taigame .mu-modal-footer button:hover {
    background: linear-gradient(180deg, #8c1111 0%, #3a0505 100%) !important;
    color: #ffffff !important;
    border-color: #ff3333 !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.6) !important;
    transform: translateY(-2px);
}

.mu-table-info td, 
.mu-info-card .card-title {
    text-align: center !important;
}

.highlight-date {
    color: #ffd700; /* Màu vàng kim nổi bật */
    font-weight: bold;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.draft-note{color:#aa8e6a;font-size:11px;margin-top:10px}.service-dialog{text-align:center;padding:38px!important;max-width:540px!important}.service-dialog h2{color:#ffcc00}.service-dialog p{margin:18px 0 26px;line-height:1.7}
.popup-overlay:focus,.mu-popup-overlay:focus{outline:none}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #ffe697;outline-offset:3px}.popup-close{cursor:pointer}.popup-content,.mu-popup-content{overflow-x:hidden}.popup-body-scroll,.mu-popup-body{overscroll-behavior:contain}
@media(max-width:767px){nav{gap:5px;padding:7px 5px}nav a{padding:9px 8px;font-size:11px;letter-spacing:0;flex:1 0 auto}nav a i{font-size:12px;margin-right:4px}.popup-overlay,.mu-popup-overlay{padding:8px}.popup-content,.mu-popup-content{width:100%!important;max-height:94dvh;padding:12px}.popup-body-scroll,.mu-popup-body{max-height:72dvh!important;padding:12px!important}.popup-title-epic{font-size:18px!important;padding-right:20px}.popup-subtitle-epic{font-size:11px!important}.info-cards-wrapper{display:flex;flex-direction:column}.mu-info-card{width:100%}table{font-size:12px!important}td,th{padding:10px 7px!important;overflow-wrap:anywhere}.mu-tabs-container{flex-wrap:wrap;gap:5px}.mu-tab-btn{padding:8px!important;font-size:11px!important}.popup-content .mu-modal-header>span{font-size:16px!important;padding-right:24px}.popup-body-scroll>div[style*="display: flex"],.mu-popup-body>div[style*="display: flex"]{flex-wrap:wrap}.mu-popup-body>div[style*="display: flex"]>div{min-width:0!important;flex:1 1 220px!important}footer{font-size:11px;padding:15px 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* MU Nonreset: metal emblem, diagonal light sweep and small jewel glints. */
.server-brand{position:absolute;z-index:2;left:1.65%;top:2.6%;width:21%;aspect-ratio:3/2;pointer-events:none;isolation:isolate}

.brand-art{display:block;width:100%;height:auto;position:relative;filter:drop-shadow(0 3px 3px #130000) drop-shadow(0 0 3px #d5762170);animation:brand-gold-pulse 4.8s ease-in-out infinite}
.brand-shine{position:absolute;inset:0;overflow:hidden;-webkit-mask:url("logo-nonreset-v2.png") center/contain no-repeat;mask:url("logo-nonreset-v2.png") center/contain no-repeat;mix-blend-mode:screen}
.brand-shine::before{content:"";position:absolute;left:-55%;top:-30%;width:28%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,216,116,.22) 22%,rgba(255,250,218,.9) 48%,#fff 52%,rgba(255,231,155,.36) 70%,transparent);transform:skewX(-22deg);animation:brand-light-sweep 4.8s ease-in-out infinite;will-change:left,opacity}
.brand-glint{position:absolute;width:14%;aspect-ratio:1;opacity:0;transform:translate(-50%,-50%) scale(.2);background:radial-gradient(circle,#fff 0 3%,#fff8c9 5%,#ffd97599 13%,transparent 35%);mix-blend-mode:screen;animation:brand-star-glint 4.8s ease-in-out infinite}
.brand-glint::before,.brand-glint::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,#fff9cd 40%,#fff 50%,#fff9cd 60%,transparent);transform:translate(-50%,-50%)}
.brand-glint::before{width:100%;height:5%}.brand-glint::after{width:5%;height:100%;background:linear-gradient(transparent,#fff9cd 40%,#fff 50%,#fff9cd 60%,transparent)}
.brand-glint-one{left:33%;top:37%;animation-delay:.2s}.brand-glint-two{left:70%;top:47%;animation-delay:.65s}.brand-glint-three{left:49%;top:76%;animation-delay:1.1s}
@keyframes brand-light-sweep{0%,8%{left:-55%;opacity:0}12%{opacity:.9}34%{left:130%;opacity:.9}39%,100%{left:130%;opacity:0}}
@keyframes brand-gold-pulse{0%,9%,42%,100%{filter:brightness(1) drop-shadow(0 3px 3px #130000) drop-shadow(0 0 3px #d5762170)}22%{filter:brightness(1.16) drop-shadow(0 3px 3px #130000) drop-shadow(0 0 7px #ffc85a90)}30%{filter:brightness(1.04) drop-shadow(0 3px 3px #130000) drop-shadow(0 0 4px #d5762170)}}
@keyframes brand-star-glint{0%,13%,34%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}21%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(15deg)}27%{opacity:.45;transform:translate(-50%,-50%) scale(.65) rotate(30deg)}}
@media(prefers-reduced-motion:reduce){.brand-art,.brand-shine::before,.brand-glint{animation:none!important}.brand-shine,.brand-glint{display:none}}

.hero-banner{display:block;width:100%;height:100%;object-fit:cover}.hero-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}.hero-ember{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffdf8c;box-shadow:0 0 6px 2px #ff621a;opacity:0;animation:ember-rise var(--duration) linear var(--delay) infinite}.hero-flare{position:absolute;width:6%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#fffbe8 0 2%,#ffdd77a6 4%,transparent 36%);opacity:0;mix-blend-mode:screen;animation:hero-glimmer 5.4s ease-in-out infinite}.hero-flare::before,.hero-flare::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#fff9c9,transparent);width:100%;height:3%}.hero-flare::after{transform:translate(-50%,-50%) rotate(90deg)}
.ranking-empty{padding:42px 16px!important;text-align:center!important;color:#e4c47f}.ranking-empty>i{font-size:28px;color:#e9b84e;margin-bottom:10px}.ranking-empty p{font-weight:700;margin:6px 0}.ranking-empty small{font-size:12px;color:#ab9585}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.8}80%{opacity:.35}100%{opacity:0;transform:translate(30px,-240px) scale(.1)}}
@keyframes hero-glimmer{0%,12%,39%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35)}23%{opacity:.8;transform:translate(-50%,-50%) scale(1)}30%{opacity:.25;transform:translate(-50%,-50%) scale(.75)}}
@media(max-width:767px){.hero-ember{width:2px;height:2px}.hero-flare{width:8%}}
@media(prefers-reduced-motion:reduce){.hero-ember,.hero-flare{animation:none!important;display:none}}

/* News list and article reader */
.news-window{max-width:960px;padding:0!important;border-color:#b98432}.news-window>.popup-header-gold{margin-bottom:0;padding:22px 48px 18px}.news-window>.popup-close{top:15px;right:17px}.news-scroll{padding:18px 26px 24px!important;max-height:68vh;min-height:340px}.news-sample-note{font-size:12px;color:#bcaa92;background:#241009;border:1px solid #59311e;border-radius:4px;padding:10px 12px;margin-bottom:17px;line-height:1.6}.news-sample-note>span{font-size:10px;font-weight:800;color:#e2b75f;margin-right:8px;letter-spacing:.06em}.news-summary{font-size:12px;color:#b69871;margin-bottom:12px}.news-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.news-row{display:block;position:relative;width:100%;padding:15px 18px;text-align:left;color:#ddc8b5;border:1px solid #512020;border-left:3px solid #8c3626;border-radius:4px;background:linear-gradient(105deg,#2c0908,#1b0404);transition:background .2s,border-color .2s}.news-row:hover{border-color:#b98531;background:linear-gradient(105deg,#40110c,#240705)}.news-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:11px;color:#b5937c;margin-bottom:6px}.news-category{color:#e1b76d;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.news-sample-badge{font-size:9px;border:1px solid #624331;border-radius:3px;padding:0 4px;color:#bc9e7b}.news-title{display:block;font-size:16px;line-height:1.4;color:#ffdc8c;font-weight:700}.news-excerpt{display:block;color:#b99d8d;font-size:12px;line-height:1.5;margin-top:6px;padding-right:70px}.news-read{position:absolute;right:18px;bottom:16px;font-size:11px;color:#daaa64;white-space:nowrap}.news-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin-top:20px}.news-page,.news-back{background:linear-gradient(#370b08,#180403);border:1px solid #6b321f;border-radius:3px;color:#deb57a;padding:8px 13px;font-size:12px;min-width:36px;min-height:36px;cursor:pointer}.news-page:hover:not(:disabled),.news-back:hover{color:#fff1bd;border-color:#d6a548}.news-page.is-current{background:linear-gradient(#c28e38,#80521e);color:#fff7d7;border-color:#e8c075;font-weight:800;box-shadow:0 0 10px #b37a1a30}.news-page:disabled{opacity:.35;cursor:default}.news-ellipsis{color:#b99a71}.news-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #4b1c13;padding:14px 24px;background:#150202}.news-footer>span{font-size:10px;letter-spacing:.08em;color:#8c6e54}.news-article[hidden],#news-list-view[hidden]{display:none!important}.news-back{margin-bottom:22px}.news-article h3{font-size:24px;line-height:1.35;color:#ffdc8c;margin:12px 0 23px;outline:none}.news-article #news-article-content{padding:0 0 20px;line-height:1.85;font-size:15px;color:#dcc9b9}.news-article #news-article-content p+p{margin-top:16px}
@media(max-width:767px){.news-window>.popup-header-gold{padding:20px 32px 15px 14px}.news-scroll{min-height:290px;padding:13px!important;max-height:70dvh!important}.news-title{font-size:14px}.news-row{padding:13px 12px}.news-excerpt{padding-right:0;font-size:11px}.news-read{position:static;display:block;margin-top:8px}.news-meta{gap:6px}.news-footer{padding:12px;justify-content:center}.news-footer>span{display:none}.news-sample-note{font-size:11px}.news-page{padding:8px 10px;min-height:40px}.news-article h3{font-size:20px}.news-article #news-article-content{font-size:14px}}

/* Original full-width banner: preserve the complete image and its natural height. */
.hero-video-container{height:auto;min-height:0;aspect-ratio:auto}
.hero-stage{position:relative;width:100%;height:auto;flex:none;isolation:isolate;overflow:hidden;line-height:0}
.hero-stage .hero-banner{display:block;width:100%;height:auto;object-fit:contain}
@media(min-width:768px){
 body>nav{min-width:0;gap:5px;padding:7px 10px;align-content:center}
 body>nav a{font-size:clamp(11px,.95vw,14px);padding:8px 10px;letter-spacing:.15px;line-height:1.4}
 body>nav a i{font-size:12px;margin-right:5px}
 body>footer{padding:7px 12px;font-size:11px;line-height:1.35;min-width:0}
 body>footer .draft-note{font-size:10px;line-height:1.4;margin-top:3px}
}

/* Living fire and gold lettering, composited over the uncropped banner. */
.hero-stage .hero-banner{position:relative;z-index:0}.hero-stage .server-brand{z-index:5}.hero-stage .hero-atmosphere{z-index:2}
.hero-fire-canvas,.hero-fire-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen}.hero-fire-canvas{opacity:.83}.hero-fire-glow{background:radial-gradient(ellipse at 3% 81%,#ff4b142d,transparent 28%),radial-gradient(ellipse at 98% 77%,#ff721e30,transparent 25%),radial-gradient(ellipse at 50% 108%,#ff3b183b,transparent 50%);animation:fire-warmth 4.3s ease-in-out infinite alternate}
.lorencia-shine,.lorencia-aura{display:none;position:absolute;left:20.5%;top:27.7%;width:58.5%;height:22%;pointer-events:none;z-index:3;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mix-blend-mode:screen;overflow:hidden}.has-title-mask .lorencia-shine,.has-title-mask .lorencia-aura{display:block}.lorencia-shine::before{content:"";position:absolute;top:-20%;left:-45%;height:150%;width:21%;transform:skewX(-23deg);background:linear-gradient(90deg,transparent,rgba(255,210,98,.18) 20%,rgba(255,244,192,.65) 43%,#fffdeb 50%,rgba(255,240,173,.7) 57%,rgba(255,205,85,.2) 80%,transparent);animation:lorencia-metal-sweep 5.8s ease-in-out infinite;will-change:left,opacity}.lorencia-aura{background:#ffd270;animation:lorencia-gold-breath 5.8s ease-in-out infinite}
.lorencia-glint{position:absolute;z-index:4;pointer-events:none;left:50%;top:40%;width:5.5%;aspect-ratio:1;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,#fffef0 0 2%,#ffeaa290 5%,transparent 40%);transform:translate(-50%,-50%) scale(.2);animation:lorencia-glint 5.8s ease-in-out var(--glint-delay,0s) infinite}.lorencia-glint::before,.lorencia-glint::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:3%;background:linear-gradient(90deg,transparent,#fff2b1 40%,#fff 50%,#fff2b1 60%,transparent)}.lorencia-glint::after{width:3%;height:100%;background:linear-gradient(transparent,#fff2b1 40%,#fff 50%,#fff2b1 60%,transparent)}
@keyframes fire-warmth{0%{opacity:.25}45%{opacity:.7}100%{opacity:.4}}
@keyframes lorencia-metal-sweep{0%,6%{left:-45%;opacity:0}12%{opacity:.95}42%{left:125%;opacity:.95}48%,100%{left:125%;opacity:0}}
@keyframes lorencia-gold-breath{0%,8%,48%,100%{opacity:0}24%{opacity:.13}35%{opacity:.035}}
@keyframes lorencia-glint{0%,11%,39%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(15deg)}30%{opacity:.15;transform:translate(-50%,-50%) scale(.6) rotate(30deg)}}
.scene-motion-paused *,.scene-motion-paused *::before,.scene-motion-paused *::after{animation-play-state:paused!important}
@media(max-width:767px){.hero-fire-canvas{opacity:.7}.lorencia-glint{width:7%}}
@media(prefers-reduced-motion:reduce){.hero-fire-canvas,.hero-fire-glow,.lorencia-shine,.lorencia-aura,.lorencia-glint{display:none!important;animation:none!important}}

/* This banner is explicitly animated by default. */
.css-fire-fallback{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.css-fire-fallback>span{position:absolute;left:var(--flame-x);bottom:-5%;width:11%;height:17%;border-radius:52% 4% 45% 45%;transform-origin:50% 100%;background:linear-gradient(0deg,#fff09b 0%,#ffb726 32%,#ff590dcc 66%,#f1250030 88%,transparent);filter:blur(3px);opacity:.8;animation:fallback-flame-rise var(--flame-time) ease-in-out var(--flame-delay) infinite alternate}.fire-ready .css-fire-fallback{display:none!important}
.hero-stage.effects-enabled .hero-fire-canvas{display:block!important;mix-blend-mode:normal;opacity:.94}
.hero-stage.effects-enabled .hero-fire-glow{display:block!important;animation:fire-warmth 3.2s ease-in-out infinite alternate!important}
.hero-stage.effects-enabled .lorencia-shine{display:block!important;opacity:.3}.hero-stage.effects-enabled.has-title-mask .lorencia-shine{opacity:1}
.hero-stage.effects-enabled .lorencia-shine::before{animation:lorencia-metal-sweep 3.8s ease-in-out infinite!important;background:linear-gradient(90deg,transparent,#ffda6433 18%,#fff2bde6 40%,#fff 50%,#fff4bdec 60%,#ffdc6933 82%,transparent);width:24%}
.hero-stage.effects-enabled.has-title-mask .lorencia-aura{display:block!important;animation:lorencia-gold-breath 3.8s ease-in-out infinite!important}
.hero-stage.effects-enabled .lorencia-glint{display:block!important;animation:lorencia-glint 3.8s ease-in-out var(--glint-delay,0s) infinite!important}
.hero-stage.effects-enabled .css-fire-fallback>span{animation:fallback-flame-rise var(--flame-time) ease-in-out var(--flame-delay) infinite alternate!important}
.hero-stage.effects-enabled .hero-ember{display:block!important;animation:ember-rise var(--duration) linear var(--delay) infinite!important}
.hero-stage.effects-enabled.scene-motion-paused *,.hero-stage.effects-enabled.scene-motion-paused *::before,.hero-stage.effects-enabled.scene-motion-paused *::after{animation-play-state:paused!important}
@keyframes fallback-flame-rise{0%{transform:translateY(2%) scaleY(.72) skewX(-9deg);opacity:.6}45%{transform:translateY(-5%) scaleY(1.05) skewX(5deg);opacity:.86}100%{transform:translateY(-8%) scaleY(1.2) skewX(-4deg);opacity:.74}}

#news-article-content p{white-space:pre-line}