/* ==========================================================================
   SKIN DEV — DARK THEME OVERRIDE (MU Ky Tich)
   Đã tách riêng khỏi phần base component (nay nằm lại trong newskin.php,
   include dạng <style> inline như thiết kế gốc) để tránh lỗi vỡ khung khi
   gộp chung 1 file — theo xác nhận thực tế của người quản trị site.
   ========================================================================== */


/* ==========================================================================
   SKIN DEV - BẢN TỐI ƯU MỞ RỘNG (DỄ ĐỌC, DỄ CHỈNH SỬA)
   Khung tổng (Header / Menu / Sidebar / Footer / Các Box Sub)
   ========================================================================== */

:root {
    --sd-bg:            #0a1826;
    --sd-bg-2:          #0e2038;
    --sd-panel:         #132842;
    --sd-panel-border:  #22405f;
    --sd-red-1:         #e0342f;
    --sd-red-2:         #8f1017;
    --sd-orange-1:      #ff8a1e;
    --sd-orange-2:      #c8480f;
    --sd-gold:          #ffd24c;
    --sd-text:          #cfe0f2;
    --sd-text-dim:      #8fa8c2;
    --sd-white:         #ffffff;
    --sd-sidebar-w:     300px;
    --sd-radius:        6px;
}

/* Reset nhẹ */
.sd-wrap, 
.sd-wrap * { 
    box-sizing: border-box; 
}

/* Background tổng thể */
body.sd-body {
    overflow-x: hidden; /* Chặn thanh cuộn ngang do kỹ thuật full-bleed 100vw ở .sd-hero gây ra */
    background: var(--sd-bg) !important;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.25) 50%, transparent 51%),
        radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.2) 50%, transparent 51%),
        radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.3) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.15) 50%, transparent 51%);
    background-attachment: fixed;
}

.sd-wrap { 
    max-width: 1300px; 
    margin: 0 auto; 
    font-family: Tahoma, Arial, sans-serif; 
}

/* ============================== HERO (ẢNH BANNER) ==================================== */
.sd-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    border-bottom: 3px solid var(--sd-red-2);
    border-radius: 0; /* Full-bleed thì không nên bo góc nữa */

    /* Kéo banner tràn hết chiều rộng màn hình (thoát khỏi max-width: 1300px của .sd-wrap) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.sd-hero-img { 
    display: block; 
    width: 100%; 
    height: auto; 
}

.sd-hero::before, 
.sd-hero::after { 
    display: none; 
}

.sd-hero-links { 
    position: absolute; 
    bottom: 18px; 
    right: 34px; 
    z-index: 2; 
    text-align: right; 
    font-size: 13px; 
    background: rgba(0,0,0,0.6); 
    padding: 6px 15px; 
    border-radius: 4px;
}

.sd-hero-links a { 
    color: #fff; 
    text-decoration: none; 
    margin-left: 15px; 
    font-weight: bold; 
}

.sd-hero-links a:hover { 
    color: var(--sd-gold); 
}

/* ============================ BODY LAYOUT ================================ */
.sd-body { 
    display: flex; 
    gap: 18px; 
    align-items: flex-start; 
    padding: 10x 10px 0; 
}

.sd-sidebar { 
    width: var(--sd-sidebar-w); 
    flex: 0 0 var(--sd-sidebar-w); 
}

.sd-content { 
    flex: 1 1 auto; 
    min-width: 0; 
}

.sd-content-inner {
   /* background: #f3f6fa; */
    border-radius: var(--sd-radius);
    min-height: 300px;
}

/* ============================ SIDEBAR BOXES (CỘT TRÁI) =============================== */
.sd-box {
    background: var(--sd-panel);
    border: 1px solid var(--sd-panel-border);
    border-radius: var(--sd-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.sd-box-head {
    background: var(--sd-bg-2);
    color: var(--sd-gold);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sd-panel-border);
}

.sd-box-body { 
    padding: 8px 0; 
}

/* --- Khung Đăng Nhập --- */
.sd-login-card { 
    border-radius: var(--sd-radius); 
    overflow: hidden; 
    margin-bottom: 16px; 
    border: 1px solid var(--sd-panel-border); 
}

.sd-login-head {
    background: #8f0606; 
    background-image: linear-gradient(180deg, #aa0a0a 0%, #6e0202 100%);
    border-bottom: 1px solid #3a0000; 
    text-align: center; 
    padding: 16px 10px; 
    color: #fff;
    transition: filter 0.2s ease;
}

.sd-login-head:hover { 
    filter: brightness(1.2); 
}

.sd-login-head b { 
    display: block; 
    font-size: 15px; 
    text-transform: uppercase; 
    letter-spacing: .5px; 
}

.sd-login-head span { 
    display: block; 
    font-size: 11px; 
    opacity: .9; 
    margin-top: 2px; 
}

.sd-login-tabs { 
    display: flex; 
    background: #0e2038; 
}

.sd-login-tabs button, 
.sd-login-tabs a.sd-tab-link {
    flex: 1; 
    background: transparent; 
    color: var(--sd-text-dim); 
    border: none;
    padding: 10px 6px; 
    font-weight: 700; 
    font-size: 12px; 
    cursor: pointer;
    border-bottom: 2px solid transparent; 
    text-align: center; 
    text-decoration: none;
    font-family: inherit;
}

.sd-login-tabs button.sd-active, 
.sd-login-tabs a.sd-tab-link.sd-active { 
    background: var(--sd-panel); 
    color: #fff; 
    border-bottom-color: #aa0a0a; 
}

.sd-login-body { 
    background: var(--sd-panel); 
    padding: 14px; 
}

.sd-field { 
    margin-bottom: 10px; 
}

.sd-field label { 
    display: block; 
    font-size: 12px; 
    color: var(--sd-text-dim); 
    margin-bottom: 4px; 
}

.sd-field input {
    width: 100%; 
    padding: 9px 10px; 
    border-radius: 4px; 
    border: 1px solid var(--sd-panel-border);
    background: #0e2038; 
    color: #fff; 
    font-size: 13px;
}

.sd-btn-login {
    width: 100%; 
    padding: 10px; 
    border-radius: 4px; 
    cursor: pointer;
    background: #8f0606; 
    background-image: linear-gradient(180deg, #aa0a0a 0%, #6e0202 100%);
    border: 1px solid #3a0000; 
    color: #fff; 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 13px; 
    margin-top: 4px; 
    transition: all 0.2s ease;
}

.sd-btn-login:hover {
    background-image: linear-gradient(180deg, #c71212 0%, #8a0505 100%);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.sd-login-links { 
    display: flex; 
    justify-content: space-between; 
    padding: 10px 14px 14px; 
    font-size: 12px; 
}

.sd-login-links a { 
    color: var(--sd-text-dim); 
    text-decoration: none; 
}

.sd-login-links a:hover { 
    color: var(--sd-gold); 
}

/* --- Khung Xin Chào (Đã đăng nhập) --- */
.sd-greet { 
    background: var(--sd-panel); 
    padding: 18px 14px; 
    text-align: center; 
}

.sd-avatar {
    width: 56px; 
    height: 56px; 
    border-radius: 50%; 
    margin: 0 auto 8px;
    background: linear-gradient(180deg,#2c4a70,#0e2038); 
    border: 2px solid var(--sd-gold);
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--sd-gold); 
    font-weight: 900; 
    font-size: 20px;
}

.sd-greet-name { 
    color: #fff; 
    font-size: 13px; 
}

.sd-greet-name b { 
    color: var(--sd-gold); 
    font-size: 15px; 
}

.sd-greet-logout { 
    margin-top: 4px; 
}

.sd-greet-logout button { 
    background: none; 
    border: none; 
    color: #ff7a7a; 
    font-size: 12px; 
    cursor: pointer; 
    padding: 0; 
}

.sd-greet-links { 
    margin-top: 10px; 
    font-size: 12px; 
}

.sd-greet-links a { 
    color: var(--sd-text); 
    text-decoration: none; 
}

.sd-greet-links a:hover { 
    color: var(--sd-gold); 
}

.sd-greet-links span { 
    color: var(--sd-panel-border); 
    margin: 0 6px; 
}

.sd-toggle-btn {
    display: block; 
    width: calc(100% - 28px); 
    margin: 12px 14px 0; 
    padding: 8px;
    background: #0e2038; 
    border: 1px dashed var(--sd-panel-border); 
    border-radius: 4px;
    color: var(--sd-text-dim); 
    font-size: 12px; 
    text-align: center; 
    cursor: pointer;
}

.sd-toggle-btn:hover { 
    color: #fff; 
    border-color: var(--sd-orange-1); 
}

.sd-toggle-panel { 
    display: none; 
    background: #0e2038; 
    padding: 6px 14px 14px; 
}

.sd-toggle-panel.sd-open { 
    display: block; 
}

.sd-toggle-panel .text_blue3 { 
    color: var(--sd-text); 
    border-bottom: 1px dashed var(--sd-panel-border); 
    padding: 4px 0; 
    font-size: 12px; 
}

.sd-toggle-panel .text_blue3 strong { 
    color: var(--sd-gold); 
}

/* --- Danh Sách Menu Cẩm Nang (Cột Trái) --- */
.sd-menu-list { 
    list-style: none; 
    margin: -8px 0; 
    padding: 0; 
    background-color: #363b42; 
}

.sd-menu-list li a {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 10px 14px; 
    color: #d1d5db; 
    text-decoration: none; 
    font-size: 13px;
    border-bottom: 1px solid #000; 
    transition: background 0.2s ease, color 0.2s ease;
}

.sd-menu-list li:last-child a { 
    border-bottom: none; 
}

.sd-menu-list li a i { 
    font-size: 11px; 
    width: 14px; 
    text-align: center; 
    transition: color 0.2s ease; 
}

.sd-menu-list li a:hover, 
.sd-menu-list li a.active { 
    background-color: #b81f1f; 
    color: #ffffff; 
}

.sd-menu-list li a:hover i, 
.sd-menu-list li a.active i { 
    color: #ffffff; 
}

/* --- Nút Tiện Ích Đỏ (Hỗ Trợ, Tải Game...) --- */
.sd-util-box { 
    padding: 10px; 
}

.sd-util-btn {
    display: flex; 
    align-items: center; 
    gap: 15px;
    background: #8f0606; 
    background-image: linear-gradient(180deg, #aa0a0a 0%, #6e0202 100%);
    border: 1px solid #3a0000; 
    color: #fff; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 15px; 
    text-transform: uppercase; 
    font-family: "Times New Roman", Georgia, serif; 
    letter-spacing: 1px; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    padding: 8px 12px; 
    border-radius: 0px; 
    margin-bottom: 8px; 
    transition: all 0.2s ease;
}

.sd-util-btn:hover { 
    background-image: linear-gradient(180deg, #c71212 0%, #8a0505 100%);
    border-color: #5c0000; 
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.sd-util-btn i { 
    font-size: 22px; 
    width: 30px; 
    text-align: center; 
    color: #e8e8e8; 
    text-shadow: none; 
}

.sd-util-btn img { 
    width: 35px; 
    height: auto; 
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); 
}

/* ==========================================================================
   BANNER QUẢNG CÁO
   ========================================================================== */
.sd-banner-box {
    border-radius: var(--sd-radius); 
    overflow: hidden; 
    border: 1px solid var(--sd-panel-border);
    position: relative; 
    width: 100%; 
    height: 400px; 
    background: #0a1626;
    display: flex; 
    flex-direction: column;
}

.sd-banner-images { 
    flex: 1; 
    position: relative; 
    width: 100%; 
}

.sd-banner-images .sd-slide {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.5s ease-in-out;
}

.sd-banner-images .sd-slide.sd-active { 
    opacity: 1; 
    visibility: visible; 
}

.sd-banner-images .sd-slide img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.sd-banner-box .sd-banner-caption {
    position: absolute; 
    bottom: 35px; 
    width: 100%; 
    text-align: center; 
    color: #ffde00; 
    font-weight: 900; 
    font-size: 20px; 
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 4px 6px rgba(0,0,0,0.8);
    padding-bottom: 8px; 
    z-index: 2;
}

.sd-banner-dots { 
    display: flex; 
    width: 100%; 
    height: 35px; 
    background: #2b2b2b; 
    z-index: 2; 
}

.sd-banner-dots span {
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff;
    font-size: 15px; 
    font-weight: bold; 
    cursor: pointer; 
    border-right: 1px solid #444; 
    background: #2b2b2b; 
    transition: background 0.2s;
}

.sd-banner-dots span:last-child { 
    border-right: none; 
}

.sd-banner-dots span:hover { 
    background: #444; 
}

.sd-banner-dots span.sd-active { 
    background: #d82c2c; 
    color: #fff; 
}

/* ============================== FIXED BOTTOM NAV (MENU CHÂN TRANG) ================================ */
body.sd-body { 
    padding-bottom: 50px !important; 
}

.sd-bottom-nav-fixed {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    background: linear-gradient(180deg, #102137, #0a1421); 
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6); 
    border-top: 2px solid #204060;
}

.sd-bottom-nav-inner { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: flex; 
    align-items: stretch; 
    height: 50px; 
}

.sd-bottom-nav-fixed .sd-nav-red-btn {
    background: linear-gradient(180deg, #e00000, #900000); 
    color: #fff; 
    /* font-weight: bold; */
    text-transform: uppercase; 
    padding: 0 25px; 
    display: flex; 
    align-items: center;
    justify-content: center; 
    text-decoration: none; 
    font-size: 14px; 
    white-space: nowrap; 
    transition: filter 0.2s;
}

.sd-bottom-nav-fixed .sd-nav-red-btn:hover { 
    filter: brightness(1.2); 
}

.sd-bottom-nav-fixed .sd-nav-home {
    background: linear-gradient(180deg, #c73737, #8e1f1f); 
    color: #fff; 
    padding: 0 20px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none;
    font-size: 18px; 
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.sd-bottom-nav-fixed .sd-nav-home:hover { 
    background: linear-gradient(180deg, #d84545, #a32727); 
}

.sd-bottom-nav-fixed ul { 
    list-style: none; 
    display: flex; 
    margin: 0; 
    padding: 0; 
    flex: 1; 
    justify-content: center; 
    background: transparent; 
}

.sd-bottom-nav-fixed ul li { 
    display: flex; 
    align-items: stretch; 
}

.sd-bottom-nav-fixed ul li a {
    display: flex; 
    align-items: center; 
    padding: 0 18px; 
    color: #cfe0f2;
    text-decoration: none; 
    font-weight: 500; 
    font-size: 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.15); 
    transition: all 0.2s; 
    white-space: nowrap;
}

.sd-bottom-nav-fixed ul li:last-child a { 
    border-right: none; 
}

.sd-bottom-nav-fixed ul li a:hover, 
.sd-bottom-nav-fixed ul li a.menuactive { 
    color: #fff; 
    background: rgba(255, 255, 255, 0.08); 
}

/* ============================== FOOTER & CHAT FLOAT ==================================== */
.sd-footer-divider {
    margin: 40px auto 10px; 
    height: 2px; 
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--sd-red-1) 50%, transparent 100%);
    position: relative; 
    opacity: 0.85;
}

.sd-footer-divider::after {
    content: "❖"; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    color: var(--sd-red-1); 
    background: var(--sd-bg); 
    padding: 0 15px; 
    font-size: 20px;
    text-shadow: 0 0 10px rgba(224, 52, 47, 0.8);
}

.sd-footer { 
    padding: 22px 16px 30px; 
    text-align: center; 
    color: var(--sd-text-dim); 
    font-size: 12px; 
    line-height: 1.8; 
}

.sd-age-badge {
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    border: 1px solid var(--sd-panel-border);
    border-radius: 4px; 
    padding: 6px 10px; 
    margin-bottom: 12px; 
    background: var(--sd-panel);
}

.sd-age-badge b { 
    color: var(--sd-red-1); 
    font-size: 18px; 
    border: 2px solid var(--sd-red-1); 
    border-radius: 4px; 
    padding: 0 6px; 
}

.sd-chat-fab {
    position: fixed; 
    right: 24px; 
    bottom: 70px !important; 
    z-index: 10000 !important; 
    width: 52px; 
    height: 52px; 
    border-radius: 50%;
    background: linear-gradient(180deg, var(--sd-red-1), var(--sd-red-2));
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); 
    text-decoration: none; 
    cursor: pointer;
}

.sd-chat-bubble {
    position: fixed; 
    right: 86px; 
    bottom: 80px !important; 
    z-index: 9998 !important;
    background: #fff; 
    color: #333; 
    padding: 10px 14px; 
    border-radius: 8px; 
    font-size: 12px;
    max-width: 200px; 
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Reponsive Mobile */
@media (max-width: 900px){
    .sd-body { flex-direction: column; }
    .sd-sidebar { width: 100%; flex-basis: auto; }
    .sd-hero { flex-direction: column; gap: 10px; text-align: center; }
    .sd-hero-links { text-align: center; }
    .sd-bottom-nav-inner { flex-wrap: wrap; height: auto; }
    .sd-bottom-nav-fixed ul { flex-wrap: wrap; order: 3; width: 100%; border-top: 1px solid rgba(255,255,255,0.1); }
    .sd-bottom-nav-fixed .sd-nav-red-btn, .sd-bottom-nav-fixed .sd-nav-home { flex: 1; height: 45px; }
    .sd-bottom-nav-fixed ul li { width: 33.33%; }
    .sd-bottom-nav-fixed ul li a { width: 100%; justify-content: center; padding: 12px 5px; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
}

/* ==========================================================================
   A. HIỆU ỨNG VIỀN SÁNG CHỈ CHẠY KHI CHƯA ĐĂNG NHẬP
   ========================================================================== */
.sd-login-card-fx { 
    position: relative !important; 
    overflow: hidden !important; 
    border-radius: var(--sd-radius); 
    margin-bottom: 16px; 
    border: 1px solid var(--sd-panel-border); 
}

.sd-login-card-fx span { 
    position: absolute; 
    display: block; 
    z-index: 10; 
    pointer-events: none; 
}

.sd-login-card-fx span:nth-child(1) { 
    top: 0; left: -100%; width: 100%; height: 2px; 
    background: linear-gradient(90deg, transparent, #03e9f4); 
    animation: login-anim-1 2s linear infinite; 
}
@keyframes login-anim-1 { 0% { left: -100%; } 50%, 100% { left: 100%; } }

.sd-login-card-fx span:nth-child(2) { 
    top: -100%; right: 0; width: 2px; height: 100%; 
    background: linear-gradient(180deg, transparent, #03e9f4); 
    animation: login-anim-2 2s linear infinite; animation-delay: .5s; 
}
@keyframes login-anim-2 { 0% { top: -100%; } 50%, 100% { top: 100%; } }

.sd-login-card-fx span:nth-child(3) { 
    bottom: 0; right: -100%; width: 100%; height: 2px; 
    background: linear-gradient(270deg, transparent, #03e9f4); 
    animation: login-anim-3 2s linear infinite; animation-delay: 1s; 
}
@keyframes login-anim-3 { 0% { right: -100%; } 50%, 100% { right: 100%; } }

.sd-login-card-fx span:nth-child(4) { 
    bottom: -100%; left: 0; width: 2px; height: 100%; 
    background: linear-gradient(360deg, transparent, #03e9f4); 
    animation: login-anim-4 2s linear infinite; animation-delay: 1.5s; 
}
@keyframes login-anim-4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } }

/* ==========================================================================
   B. CSS HỆ THỐNG MENU TRÁI XỔ MỤC CON (ACCORDION MENU)
   ========================================================================== */
.sd-menu-list ul.sd-submenu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    background-color: #1f2226 !important; 
}

.sd-menu-list ul.sd-submenu li a {
    padding: 8px 14px 8px 30px !important; 
    font-size: 12px !important; 
    color: #b7b0a0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.3) !important; 
    background-color: transparent !important;
    display: flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none;
}

.sd-menu-list ul.sd-submenu li a:hover { 
    color: #ffffff !important; 
    background-color: #b81f1f !important; 
}

.sd-menu-list li.sub-open > a { 
    background-color: #8f0606 !important; 
    color: #ffffff !important; 
}

.sd-menu-list li.sub-open > a i.fa-caret-right { 
    transform: rotate(90deg); 
}

.sd-menu-list li a i { 
    transition: transform 0.2s ease; 
}

/* ==========================================================================
   C. ĐỒNG BỘ GIAO DIỆN TỐI (DARK THEME) VÀ CÁC THẺ HEADER
   ========================================================================== */

/* 1. Đổi màu nền Header Style từ 1->10 sang màu Đen Xám (#1f2226) */
.header-style-1,
.header-style-2,
.header-style-3,
.header-style-4,
.header-style-5,
.header-style-6,
.header-style-7,
.header-style-8,
.header-style-9,
.header-style-10 {
    background-color: #1f2226 !important;
    background-image: none !important;
    color: #ffd24c !important; /* Chữ màu vàng Gold */
    border: 1px solid #4a4f57 !important;
}

/* Đảm bảo các thẻ H1, H2, H3, H4, H5, H6 và thẻ Title có nền trong suốt */
h1, h2, h3, h4, h5, h6,
.mu-section-title {
    background-color: transparent !important;
    color: #ffd24c !important; /* Màu vàng Gold cho các tiêu đề con */
}

/* 2. Ép nền Card/Box/Bảng về màu Xám Đen chuẩn */
.sd-box, 
.sd-login-tabs button.sd-active, 
.sd-login-tabs a.sd-tab-link.sd-active,
.sd-login-body, 
.sd-greet, 
.sd-age-badge, 
.mu-v2-container, 
.mu-content-inner,
.mu-info-card, 
.mu-form-card, 
.trade-wrapper, 
.set-container, 
.reward-card,
.mu-v2-content, 
.popup-box-standalone, 
.ws-popup-container, 
.mu-feature-card,
.reward-card-header, 
.mu-v2-header, 
.popup-header-standalone, 
.item-table,
.history-table, 
.fee-table, 
.reward-table, 
.pricing-table, 
.mu-char-info-table,
.item-table tbody td, 
.history-table tbody td, 
.reward-table tbody td,
.fee-table td, 
.pricing-table td, 
.mu-char-info-table td, 
.item-table thead th,
.history-table thead th, 
.reward-table thead th, 
.fee-table th, 
.pricing-table th,
.event-menu button {
    background-color: #363b42 !important;
    border-color: #4a4f57 !important;
}

/* 3. Phân biệt màu nền Header Phụ (Xám đậm hơn) */
.sd-box-head, 
.sd-login-tabs, 
.sd-toggle-btn, 
.sd-toggle-panel, 
.mu-alert-note-v10 {
    background-color: #1f2226 !important;
}

.sd-box-head, 
.mu-v2-header, 
.mu-alert-title-v10, 
.reward-card-header, 
.popup-header-standalone {
    color: #ffd24c !important; 
    border-bottom: 1px solid #4a4f57 !important;
}

/* 4. Định dạng viền đen cho các Card chức năng */
.mu-feature-card, 
.reward-card, 
.set-container, 
.trade-box, 
.event-menu button {
    border: 1px solid #000 !important;
}

.mu-feature-card:hover {
    border-color: #d84545 !important;
}

/* 5. Ép màu chữ sáng toàn cục trên các Module/Sub (Trừ các Header đã định dạng)
   FIX: Thêm :not(:where([style*="color:"], font, font *)) để KHÔNG đè lên các giá trị đã được
   cố tình tô màu riêng (ví dụ: <strong style="color: var(--error-color)">,
   <font color="red">, số tiền/mốc nạp màu đỏ-xanh...). Những phần tử có
   màu riêng (qua inline style hoặc thẻ <font>) sẽ giữ nguyên màu gốc,
   phần chữ còn lại vẫn được ép sáng màu để đọc được trên nền tối. */
.mu-v2-container :not(:where([style*="color:"], font, font *)), 
.mu-content-inner :not(:where([style*="color:"], font, font *)), 
.mu-info-card :not(:where([style*="color:"], font, font *)), 
.mu-form-card :not(:where([style*="color:"], font, font *)),
.trade-wrapper :not(:where([style*="color:"], font, font *)), 
.set-container :not(:where([style*="color:"], font, font *)), 
.reward-card :not(:where([style*="color:"], font, font *)), 
.mu-v2-content :not(:where([style*="color:"], font, font *)),
.popup-box-standalone :not(:where([style*="color:"], font, font *)), 
.ws-popup-container :not(:where([style*="color:"], font, font *)), 
.mu-card-title, 
.mu-v2-title,
.mu-feature-desc, 
.mu-account-key,
.mu-account-row, 
.mu-form-row label, 
.mu-list-styled-fa li, 
.mu-list-styled-fa li strong,
.mu-list-styled-fa li a, 
p:not(:where([style*="color:"], font, font *)), span:not(:where([style*="color:"], font, font *)), label:not(:where([style*="color:"], font, font *)), td:not(:where([style*="color:"], font, font *)), th:not(:where([style*="color:"], font, font *)) {
    color: #d1d5db !important;
}

/* 5b. FIX XUNG ĐỘT: Khôi phục màu Tiêu đề/Header bị Mục 5 ghi đè
   (Mục 5 dùng selector "*" và các thẻ p/span/label/td/th nên vô tình
   bắt luôn cả các thẻ Header/Title đã được tô màu Vàng Gold ở trên.
   Khối này khai báo LẠI màu cho đúng nhóm Title, đặt SAU Mục 5 để
   thắng thế trong cascade mà không cần sửa lại toàn bộ selector cũ). */
.mu-v2-header,
.mu-card-title,
.mu-v2-title,
.sd-box-head,
.mu-alert-title-v10,
.reward-card-header,
.popup-header-standalone,
h1, h2, h3, h4, h5, h6,
.mu-section-title {
    color: #ffd24c !important;
}

/* 6. Đồng bộ toàn bộ Icon chức năng sang màu Đỏ */
.mu-feature-icon, 
.mu-account-key i, 
i.fas, i.far, i.fab, 
.mu-list-styled-fa li::before {
    color: #d82c2c !important;
}

/* 7. Dọn rác Inline CSS (Xóa nền trắng ẩn của hệ thống cũ) */
[style*="background:#fff"], 
[style*="background: #fff"], 
[style*="background-color:#fff"],
[style*="background-color: #fff"], 
[style*="background-color: #fefefe"],
[style*="background-color:#fefefe"], 
[style*="background-color: #f9f9f9"],
[style*="background-color:#f9f9f9"], 
[style*="background-color: #f7f7f7"],
[style*="background-color:#f7f7f7"], 
[style*="background-color: #f0f0f0"],
[style*="background-color:#f0f0f0"] {
    background-color: #2a2d33 !important;
    color: #d1d5db !important;
}

/* ==========================================================================
   D. FIX CHI TIẾT CÁC COMPONENT (Form, Button, Lỗi, Nhấp nháy...)
   ========================================================================== */

/* 1. Form Inputs, Select, Textarea */
.sd-field input, 
input[type="text"], 
input[type="password"], 
input[type="number"],
select, 
textarea, 
#item-search-input, 
.form-style-select {
    background-color: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    color: #ffffff !important;
}

.sd-field input:focus, 
input[type="text"]:focus, 
input[type="password"]:focus,
select:focus, 
#item-search-input:focus {
    border-color: #d84545 !important;
    outline: none;
}

/* 2. Nút Buttons chung (.mu-btn) */
.mu-btn {
    background-color: #363b42 !important;
    color: #d1d5db !important;
    border: 1px solid #4a4f57 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.mu-btn:hover {
    background-color: #b81f1f !important;
    color: #ffffff !important;
    border-color: #000 !important;
}

.mu-btn.mu-btn-green { 
    background-color: #27ae60 !important; 
    color: #ffffff !important; 
    border-color: #27ae60 !important; 
}

.mu-btn.mu-btn-green:hover { 
    background-color: #219653 !important; 
    border-color: #219653 !important; 
}

.mu-btn.mu-btn-red { 
    background-color: #d82c2c !important; 
    color: #ffffff !important; 
    border-color: #d82c2c !important; 
}

.mu-btn:disabled, 
.mu-btn[disabled] {
    background-color: #2a2d33 !important;
    color: #6c757d !important;
    border: 1px dashed #4a4f57 !important;
    cursor: not-allowed !important;
}

/* 3. Khung Thông Báo Error / Success / VIP Alerts */
.error, 
.error *, 
.error strong, 
.error b, 
.error span, 
.error p { 
    color: #D8000C !important; 
}

.success { 
    background-color: #e8f5e9 !important; 
    border-color: #a5d6a7 !important; 
}

.success, 
.success *, 
.success strong, 
.success b, 
.success span, 
.success p { 
    color: #2e7d32 !important; 
}

.bonus-alert-ip { 
    background-color: #000 !important; 
    border-color: #ffc107 !important; 
    color: #d1d5db !important; 
}

.bonus-alert-vip { 
    background-color: #000 !important; 
    border-color: #007bff !important; 
}

/* 4. Hiệu ứng nhấp nháy chữ (.nhapnhay) */
.nhapnhay, 
.mu-list-styled-fa li .nhapnhay strong, 
.mu-list-styled-fa li .nhapnhay b, 
.nhapnhay strong, 
.nhapnhay b {
    color: #d8000c !important;
    font-weight: bold !important;
    border-radius: 4px;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5) !important;
}

.nhapnhay * { 
    color: inherit !important; 
}

.nhapnhay font[color="blue"], 
.nhapnhay font[color="Blue"], 
font[color="blue"] { 
    color: #007bff !important; 
}

/* ==========================================================================
   FIX LỖI ICON TRONG NÚT TIỆN ÍCH BỊ ÉP MÀU ĐỎ
   ========================================================================== */
.sd-util-btn i.fas, 
.sd-util-btn i.far, 
.sd-util-btn i.fab,
.sd-util-btn i {
    color: #e8e8e8 !important; /* Trả lại màu trắng xám sáng để nổi bật trên nền đỏ */
}

/* ==========================================================================
   FIX LỖI ICON TRONG NÚT CHAT VÀ NÚT HOME CHÂN TRANG BỊ ÉP MÀU ĐỎ
   ========================================================================== */
.sd-chat-fab i.fas, 
.sd-chat-fab i.far, 
.sd-chat-fab i.fab,
.sd-chat-fab i,
.sd-nav-home i.fas, 
.sd-nav-home i.far, 
.sd-nav-home i.fab,
.sd-nav-home i {
    color: #ffffff !important; /* Trả lại màu trắng tinh để nổi bật trên nền đỏ */
}

/* ==========================================================================
   FIX MENU CHÂN TRANG (BOTTOM NAV) GIỐNG BOX MENU DEV
   ========================================================================== */

/* 1. Đổi nền toàn bộ thanh menu sang dải màu đen xám tinh tế */
.sd-bottom-nav-fixed {
    background: linear-gradient(180deg, #1d2127, #0b0d12) !important;
    border-top: 2px solid #2a2d33 !important; /* Chuyển viền trên sang màu xám cho hợp tone */
}

/* 2. Hiệu ứng nền ĐỎ khi Click (Active) hoặc Rê chuột (Hover) vào mục Menu */
.sd-bottom-nav-fixed ul li a:hover, 
.sd-bottom-nav-fixed ul li a.menuactive,
.sd-bottom-nav-fixed ul li a.active { 
    color: #ffffff !important; 
    background: linear-gradient(180deg, #c73737, #8e1f1f) !important; /* Dải màu đỏ rực */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3) !important; /* Đổ bóng chìm tạo độ sâu như nút bấm */
}

/* ==========================================================================
   FIX TRIỆT ĐỂ: CHẶN MÀU ĐỎ TỪ CLASS LỖI CỦA HỆ THỐNG CŨ
   ========================================================================== */

/* 1. Ép hệ thống xóa sạch màu nền từ các class mặc định (bị lỗi lưu dồn) */
.sd-bottom-nav-fixed ul li a.active, 
.sd-bottom-nav-fixed ul li a.menuactive {
    background: transparent !important;
    box-shadow: none !important;
}
.sd-menu-list li a.active,
.sd-menu-list li a.menuactive {
    background-color: transparent !important;
    color: #d1d5db !important;
}
.sd-menu-list li a.active i,
.sd-menu-list li a.menuactive i {
    color: #d82c2c !important; 
}

/* 2. CHỈ TÔ ĐỎ KHI HOVER HOẶC DO SCRIPT MỚI ĐIỀU KHIỂN (.sd-active-red) */
.sd-bottom-nav-fixed ul li a:hover, 
.sd-bottom-nav-fixed ul li a.sd-active-red { 
    color: #ffffff !important; 
    background: linear-gradient(180deg, #c73737, #8e1f1f) !important; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3) !important; 
}
.sd-menu-list li a:hover,
.sd-menu-list li a.sd-active-red {
    background-color: #b81f1f !important; 
    color: #ffffff !important; 
}
.sd-menu-list li a:hover i,
.sd-menu-list li a.sd-active-red i {
    color: #ffffff !important; 
}

/* ==========================================================================
   ĐỒNG BỘ GIAO DIỆN TỐI CHO BOX TIN TỨC TRANG CHỦ
   ========================================================================== */

/* 1. Nền tổng của toàn bộ Box Tin Tức */
.ant-card-custom,
.ant-card,
.ant-card-body {
    background-color: #2a2d33 !important;
    border-color: #4a4f57 !important;
}

/* 2. Phần Tiêu đề Box (Tin Tức Mới Nhất) */
.ant-card-head-custom,
.ant-card-head {
    background-color: #1f2226 !important;
    color: #ffd24c !important; /* Chữ màu vàng gold */
    border-bottom: 1px solid #4a4f57 !important;
}

/* 3. Vùng chứa các Tab phân loại */
.news-menu-container {
    background-color: #2a2d33 !important;
    border-bottom: 1px solid #4a4f57 !important;
    padding: 10px 0 !important;
}

/* 4. Định dạng các nút Tab (Thông báo, Sự kiện...) chưa chọn */
.news-menu-btn {
    background-color: #1f2226 !important;
    color: #d1d5db !important;
    border: 1px solid #4a4f57 !important;
    border-radius: 20px !important; /* Giữ độ bo tròn của nút giống ảnh gốc */
    transition: all 0.2s ease;
}

.news-menu-btn:hover {
    border-color: #d82c2c !important;
    color: #ffffff !important;
}

/* 5. Tab đang được chọn (Chuyển màu từ Xanh Dương sang Đỏ MU) */
.news-menu-btn.ant-tabs-tab-active,
.news-menu-btn.active {
    background-color: #d82c2c !important;
    border-color: #d82c2c !important;
    color: #ffffff !important;
    font-weight: bold;
}

/* 6. Từng dòng bài viết (List Item) */
#list_news li,
.ant-list-item {
    border-bottom: 1px solid #000000 !important; /* Đường kẻ phân cách màu đen theo yêu cầu */
    background-color: transparent !important;
    transition: background 0.2s;
}

/* Đổi màu nền ĐỎ khi rê chuột vào 1 bài viết (thay cho xám/trắng) */
#list_news li:hover,
.ant-list-item:hover {
    background-color: var(--sd-red-1, #e0342f) !important;
}

/* 7. Link tiêu đề bài viết */
.ant-list-item a,
#list_news li a {
    color: #d1d5db !important;
    text-decoration: none !important;
}

.ant-list-item a:hover,
#list_news li a:hover {
    color: #ffd24c !important; /* Tiêu đề sáng lên màu vàng khi hover */
}

/* 8. Fix màu Ngày tháng và Lượt xem (Icon con mắt) */
.ant-list-item span,
#list_news li span {

}

/* Giữ nguyên màu sắc cho các Tag (Nhãn) như Đua Top, Sự Kiện, Sát Nhập... */
.ant-list-item .tag,
#list_news li .tag {
    color: #fff !important; /* Đảm bảo chữ trong tag luôn là màu trắng */
}

/* ==========================================================================
   ĐỔI MÀU VIỀN KHUNG #RESPOND (ĐỒNG BỘ DARK THEME)
   ========================================================================== */
#respond {
    background: #12151d !important;
    border: 1px solid #232834 !important;
}

/* ==========================================================================
   ĐỔI MÀU KHỐI LƯU Ý addpoint10
   ========================================================================== */
.mu-alert-note-v10 {
	border: 1px solid #4a4f57 !important;
}

/* ==========================================================================
   FIX HIỆU ỨNG NÚT MENU TAB (KHI ĐANG ĐƯỢC CHỌN / ACTIVE)
   ========================================================================== */

/* 1. Ép nút đang được chọn (bị disabled) sang màu đỏ, chữ trắng và xóa mờ */
.event-menu button:disabled,
.event-menu button[disabled] {
    background-color: #b81f1f !important; /* Nền đỏ đậm MU */
    color: #ffffff !important; /* Chữ trắng tinh */
    border-color: #000 !important; /* Viền đỏ đồng bộ */
    opacity: 1 !important; /* Ép hiển thị rõ 100%, xóa lệnh mờ 0.7 của hệ thống */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3) !important; /* Đổ bóng chìm tạo cảm giác đang lún xuống */
    font-weight: bold !important;
}

/* 2. Thêm hiệu ứng rê chuột (Hover) cho các nút chưa chọn */
.event-menu button:hover:not(:disabled) {
    background-color: #d82c2c !important; /* Đỏ sáng hơn khi rê chuột */
    color: #ffffff !important;
    border-color: #d82c2c !important;
}

/* ==========================================================================
   FIX LỖI CHỮ BỊ ÉP MÀU XÁM SÁNG TRONG POPUP NỀN TRẮNG
   ========================================================================== */

/* 1. Trả lại màu chữ xám đen mặc định cho toàn bộ nội dung trong Popup */
.popupCenter,
.popupCenter :not(:where([style*="color:"], font, font *)),
#rental_popup,
#rental_popup :not(:where([style*="color:"], font, font *)) {
    color: #333333 !important; 
}

/* 2. Ép màu Đen đậm cho các thẻ nhấn mạnh (b, strong) để nổi bật hơn
   FIX 07.09.2026: thêm :not(:where([style*="color:"], font, font *)) để không đè màu <font> lồng trong
   b/strong (VD: tên item màu xanh/vàng nằm trong <strong><font>...) */
.popupCenter b:not(:where([style*="color:"], font, font *)),
.popupCenter strong:not(:where([style*="color:"], font, font *)),
#rental_popup b:not(:where([style*="color:"], font, font *)),
#rental_popup strong:not(:where([style*="color:"], font, font *)) {
    color: #000000 !important;
}

/* 3. Phục hồi màu đỏ/cam cho các mức giá, hoặc các thẻ thông báo lỗi bên trong popup (nếu có) */
.popupCenter .error, 
.popupCenter .error :not(:where([style*="color:"], font, font *)) { 
    color: #D8000C !important; 
}
.popupCenter font[color="red"] {
    color: #D8000C !important;
}

/* ==========================================================================
   FIX LỖI Ô CHỌN THỜI GIAN THUÊ (SELECT) TRONG POPUP BỊ TỐI OM
   ========================================================================== */
.popupCenter select,
#rental_popup select,
#popup_rewardday {
    background-color: #ffffff !important; /* Trả lại nền trắng */
    color: #333333 !important;            /* Chữ màu xám đen rõ nét */
    border: 1px solid #aaaaaa !important; /* Viền xám nhạt */
    padding: 3px 5px !important;
    outline: none !important;
}

/* Đổi màu viền khi click vào ô chọn */
.popupCenter select:focus,
#rental_popup select:focus,
#popup_rewardday:focus {
    border-color: #d82c2c !important;
}

/* Style cho nút quay lại */
.btn-back-small {
    background-color: transparent !important; /* Ép nền trong suốt hoàn toàn */
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
    padding: 5px 15px; 
    color: #d1d5db !important; /* Tôi đổi màu chữ sáng lên một chút để dễ nhìn trên Dark Theme */
    border: 1px solid #4a4f57 !important; /* Đổi viền sang xám tối cho hợp tông */
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s;
}

/* Hiệu ứng khi rê chuột vào nút quay lại */
.btn-back-small:hover {
    background-color: #b81f1f !important; /* Đổi sang nền đỏ khi hover cho đồng bộ */
    color: #ffffff !important;
    border-color: #b81f1f !important;
}

/* ==========================================================================
   FIX BẢNG (TABLE) LỖI NỀN TRẮNG VIỀN XANH CHÓI MẮT
   ========================================================================== */

/* 1. Ép nền tối cho tổng thể bảng */
.table.table-blue-white,
.table.table-blue-white.table-border-1 {
    background-color: #2a2d33 !important;
    border-color: #4a4f57 !important;
}

/* 2. Đổi nền, viền và chữ cho từng ô (th, td) */
.table.table-blue-white th,
.table.table-blue-white td,
.table.table-blue-white.table-border-1 th,
.table.table-blue-white.table-border-1 td {
    background-color: #2a2d33 !important;
    border: 1px solid #4a4f57 !important; /* Chuyển viền xanh chói thành viền xám tối */
    color: #d1d5db !important; /* Chữ xám sáng dễ đọc */
}

/* 3. Phân biệt hàng Tiêu đề (Header) của bảng cho nổi bật */
.table.table-blue-white thead th,
.table.table-blue-white tr:first-child td,
.table.table-blue-white tr:first-child th {
    background-color: #1f2226 !important; /* Nền xám đen đậm hơn */
    color: #ffd24c !important; /* Chữ màu vàng Gold */
}

/* 4. Trấn áp các thẻ màu inline (như thẻ span màu đỏ, xanh cũ) bên trong bảng */
.table.table-blue-white td span {
    color: inherit !important;
}

/* Ép các chữ in đậm trong bảng thành màu vàng hoặc trắng cho đẹp */
.table.table-blue-white td strong,
.table.table-blue-white td b {
    color: #ffd24c !important; 
}

/* ==========================================================================
   FIX CHUẨN: BACKGROUND GIỮ SIZE GỐC & CUỘN ĐỒNG BỘ CÙNG WEB
   ========================================================================== */

/* 1. Dọn dẹp thẻ html để tránh lỗi nền */
html {
    background: #03080e !important; 
}

/* 2. Áp dụng ảnh nền vào Body với size gốc và cho phép cuộn */
body, 
body.sd-body {
    background-color: #03080e !important; /* Màu nền phụ nối tiếp phần dưới của ảnh */
    background-image: url('bg-sub-top2.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important; /* Luôn canh giữa ảnh ở sát trên cùng */
    background-attachment: scroll !important; /* CHUẨN: Cho phép ảnh cuộn theo nội dung web */
    background-size: auto !important; /* CHUẨN: Giữ 100% kích thước gốc khổng lồ của ảnh, KHÔNG thu nhỏ */
    padding-top: 0 !important; 
}

/* 3. Ẩn khối Banner thừa */
.sd-hero {
    display: none !important;
}

/* 4. Đẩy khung chứa nội dung xuống để chừa chỗ cho phần Logo ở nửa trên ảnh nền */
.sd-wrap {
    padding-top: 210px !important; 
}

/* Tự động thu nhỏ khoảng trống trên điện thoại để tránh bị hở quá nhiều */
@media (max-width: 900px) {
    .sd-wrap {
        padding-top: 100px !important;
    }
}

/* ==========================================================================
   FIX NÚT ĐỔI THƯỞNG / KHO BÁU BỊ MỜ KHÓ NHÌN
   ========================================================================== */

/* 1. Trạng thái nút bị vô hiệu hóa (Disabled - Chưa đủ điều kiện) */
.btn-exchange:disabled,
.btn-exchange[disabled],
button.btn-exchange:disabled,
button.btn-exchange[disabled] {
    background-color: #2a2d33 !important; /* Nền xám đen tối màu, sang trọng */
    color: #9ca3af !important;           /* Chữ xám sáng hơn một chút để dễ đọc */
    border: 1px dashed #4a4f57 !important;/* Viền đứt nét tạo cảm giác chưa mở khóa */
    opacity: 1 !important;              /* Xóa bỏ độ mờ 0.7 cũ của hệ thống */
    cursor: not-allowed !important;
    font-weight: bold !important;
}

/* 2. Trạng thái nút bình thường (Đủ điều kiện để bấm) */
.btn-exchange:not(:disabled) {
    background: linear-gradient(135deg, #e0342f, #8f1017) !important; /* Nền Đỏ MU rực rỡ */
    color: #ffffff !important;           /* Chữ trắng tinh */
    border: 1px solid #000000 !important;
    opacity: 1 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    font-weight: bold !important;
}

/* 3. Hiệu ứng khi rê chuột vào nút bình thường */
.btn-exchange:not(:disabled):hover {
    filter: brightness(1.15);
    cursor: pointer;
}

/* ==========================================================================
   FIX GIAO DIỆN CÁC Ô CHỌN GÓI QUÀ VÒNG QUAY MAY MẮN
   ========================================================================== */

/* 1. Mặc định các ô gói quà (chưa chọn) */
.package-select-item {
    background-color: #2a2d33 !important; /* Nền xám tối đồng bộ */
    border: 1px solid #4a4f57 !important;     /* Viền xám tối sắc nét */
    border-radius: 6px !important;
    transition: all 0.2s ease;
}

/* 2. Tên gói quà (ví dụ: Ngọc, Đồ Ex, Đá +5...) */
.package-select-item .package-name {
    color: #ffd24c !important; /* Chữ màu vàng Gold cho nổi bật */
    font-weight: bold !important;
}

/* 3. Giá tiền của gói (ví dụ: 5,000 Gc) */
.package-select-item .package-cost {
    color: #d1d5db !important; /* Chữ xám sáng dễ đọc */
    font-size: 12px !important;
}

/* 4. Hiệu ứng khi rê chuột vào ô */
.package-select-item:hover {
    background-color: #363b42 !important;
    border-color: #d82c2c !important; /* Viền sáng lên màu đỏ khi hover */
}

/* 5. Ô đang được chọn (Active / Đang đứng ở gói đó) */
.package-select-item.active,
.package-select-item[class*="active"],
.package-select-item:focus {
    background: linear-gradient(135deg, #e0342f, #8f1017) !important; /* Nền Đỏ MU rực rỡ */
    border-color: #000000 !important;
    box-shadow: 0 0 10px rgba(224, 52, 47, 0.4) !important;
}

/* Ép toàn bộ chữ bên trong ô đang chọn chuyển thành màu Trắng */
.package-select-item.active *,
.package-select-item[class*="active"] *,
.package-select-item:focus * {
    color: #ffffff !important;
}

/* ==========================================================================
   FIX GIAO DIỆN KHU VỰC NÚT QUAY / FOOTER CỦA VÒNG QUAY (.spin-x5-footer)
   ========================================================================== */

/* 1. Nền tổng thể và khung chứa nút */
.spin-x5-footer,
.spin-footer,
.spin-action-area {
    background-color: #2a2d33 !important;
    border-top: 1px solid #4a4f57 !important;
    color: #d1d5db !important;
}

/* 2. Các nút bấm thực hiện quay (ví dụ: Quay x1, Quay x5...) */
.spin-x5-footer button,
.spin-footer button,
.spin-btn,
button.spin-btn {
    background: linear-gradient(135deg, #e0342f, #8f1017) !important; /* Nền Đỏ MU rực rỡ */
    color: #ffffff !important;                                       /* Chữ trắng */
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* 3. Hiệu ứng rê chuột vào nút quay */
.spin-x5-footer button:hover,
.spin-footer button:hover,
.spin-btn:hover {
    filter: brightness(1.15) !important;
}

/* 4. Trạng thái nút quay bị vô hiệu hóa (Disabled) */
.spin-x5-footer button:disabled,
.spin-footer button:disabled,
.spin-btn:disabled,
.spin-btn[disabled] {
    background-color: #2a2d33 !important;
    color: #9ca3af !important;
    border: 1px dashed #4a4f57 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* 5. Chữ hướng dẫn hoặc số lượng lượt quay còn lại ở khu vực footer */
.spin-x5-footer span,
.spin-x5-footer p,
.spin-footer span,
.spin-footer p {
    color: #d1d5db !important;
}

.spin-x5-footer strong,
.spin-footer strong {
    color: #ffd24c !important; /* Làm nổi bật số lượt bằng màu vàng Gold */
}


/* ==========================================================================
   FIX MÀU CHỮ CỘT "NẠP NGÀY" (MỐC NẠP & TIẾN ĐỘ)
   ========================================================================== */

/* 2. Dòng chữ tiến độ bên dưới (ví dụ: "Đã nạp: 0") */
.event-progress-cell > span:nth-of-type(2),
.event-progress-cell > span {
    color: #ffffff !important; /* Chuyển sang màu Trắng Tinh để dễ đọc */
    font-size: 13px !important;
}

/* Đảm bảo khung bao quanh các Item Quà tặng không bị lỗi nền trắng cũ */
.item-box.tooltipstered {
    background-color: #1f2226 !important; /* Nền xám đậm */
    border: 1px solid #4a4f57 !important; /* Viền xám tối */
}

/* ==========================================================================
   FIX GIAO DIỆN MODULE NẠP TIỀN ATM / QR (DARK THEME)
   ========================================================================== */

/* 1. Khung tổng và Header */
.aw-panel {
    background: #2a2d33 !important;
    border: 1px solid #4a4f57 !important;
}
.aw-panel-header {
    color: #ffd24c !important; /* Chữ vàng Gold */
    border-bottom: 1px solid #4a4f57 !important;
}

/* 2. Dải Khuyến Mãi & Hộp VIP */
.aw-promo-chip {
    background-color: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    box-shadow: none !important;
}
.aw-vip-box {
    background-color: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    color: #d1d5db !important;
}

/* 3. Ô nhập số tiền và Nút chọn nhanh (Bước 1) */
.aw-amount-input input {
    background: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    color: #ffd24c !important; /* Số tiền nhập vào màu vàng */
}
.aw-quick-btn {
    background: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    color: #d1d5db !important;
}
.aw-quick-btn:hover {
    background: #363b42 !important;
}
.aw-quick-btn.selected {
    background: linear-gradient(135deg, #e0342f, #8f1017) !important; /* Đỏ MU */
    color: #ffffff !important;
    border-color: #000 !important;
}

/* 4. Khu vực Biên lai và Mã QR (Bước 2) */
.aw-qr-left {
    background: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
}
.aw-receipt {
    background: #2a2d33 !important;
    border: 1px solid #4a4f57 !important;
}
.aw-receipt-head {
    background: #1f2226 !important;
    color: #ffd24c !important;
    border-bottom: 1px solid #4a4f57 !important;
}
.aw-receipt-row {
    border-bottom: 1px dashed #4a4f57 !important;
}
.aw-receipt-row .lbl {
    color: #9ca3af !important; /* Nhãn màu xám mờ */
}
.aw-receipt-row .val {
    color: #ffffff !important; /* Giá trị màu trắng tinh */
}
.aw-receipt-row.highlight .val {
    color: #ffd24c !important; /* Số tiền nổi bật màu vàng */
}
#aw_info_note {
    background: #1f2226 !important;
    border: 1px dashed #ffd24c !important;
    color: #ffd24c !important; /* Nội dung CK màu vàng */
}
.aw-nav-row {
    border-top: 1px solid #4a4f57 !important;
}

/* 5. Bảng lịch sử các lệnh đang chờ */
.aw-pending-table th, .aw-pending-table td {
    border: 1px solid #4a4f57 !important;
}
.aw-pending-table th {
    background-color: #1f2226 !important;
    color: #ffd24c !important;
}
.aw-pending-table tbody tr {
    background-color: transparent !important;
}
.aw-pending-table tbody tr:nth-child(even) {
    background-color: #1f2226 !important;
}
.aw-pending-row td {
    color: #d1d5db !important;
}
.aw-pending-row:hover {
    background-color: #363b42 !important;
}
.aw-pending-row.active-row {
    background: linear-gradient(90deg, #8f1017, #2a2d33) !important;
    border-left: 3px solid #ffd24c !important;
}
.aw-pending-row.active-row td {
    color: #ffffff !important;
}

/* ==========================================================================
   NÚT BACK TO TOP (CUỘN LÊN ĐẦU TRANG)
   ========================================================================== */
#sd-back-to-top {
    display: none; /* Ẩn mặc định, khi cuộn chuột JS sẽ cho hiện lên */
    position: fixed;
    bottom: 135px; /* Nằm ngay trên nút Chat (nút chat ở bottom 70px) */
    right: 24px;   /* Thẳng hàng với nút Chat */
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e0342f, #8f1017); /* Màu đỏ MU */
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #000000;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

#sd-back-to-top:hover {
    filter: brightness(1.2);
    transform: translateY(-3px); /* Hiệu ứng nảy nhẹ lên khi rê chuột */
    box-shadow: 0 6px 15px rgba(224, 52, 47, 0.5);
}

/* Icon mũi tên */
#sd-back-to-top i {
    display: block;
    font-size: 16px;
    margin-top: 6px;
}

/* Chữ TOP */
#sd-back-to-top span {
    display: block;
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    margin-top: 1px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   THAY ĐỔI GIAO DIỆN KHU VỰC "CÀI ĐẶT NGAY" BẰNG HÌNH ẢNH
   ========================================================================== */

/* 1. Phần Banner "Cài đặt ngay" trên cùng (Sử dụng ảnh GIF) */
.sd-login-head {
    background: url('taigame.gif') center center no-repeat !important;
    background-size: 100% 100% !important; /* Ép ảnh giãn vừa khít khung */
    height: 145px !important; /* Chiều cao ảnh, bạn có thể tăng giảm số này cho vừa ý */
    border-bottom: none !important;
    padding: 0 !important;
    display: block !important;
    transition: filter 0.2s ease !important;
}

/* Hiệu ứng sáng lên khi rê chuột vào banner */
.sd-login-head:hover {
    filter: brightness(1.15) !important;
}
    
/* Ẩn chữ mặc định của HTML vì trong ảnh taigame.gif đã có sẵn chữ */
.sd-login-head b, 
.sd-login-head span {
    display: none !important; 
}

/* 2. Phần 2 Tab "Đăng ký nhanh" và "Nạp thẻ" (Sử dụng ảnh bt-dkn.png) */
.sd-login-tabs {
    background: #0e2038 !important; /* Nền lót */
}

.sd-login-tabs button, 
.sd-login-tabs a.sd-tab-link {
    color: transparent !important; /* Ẩn chữ thật để nhường chỗ cho chữ trên ảnh */
    text-shadow: none !important;
    height: 48px !important; /* Chiều cao của nút Tab */
    border: none !important;
    border-bottom: 2px solid transparent !important; /* Dành chỗ cho vạch sáng active */
    
    /* Cấu hình ảnh Sprite: Phóng to ảnh gấp 2 lần để cắt lấy đúng 1/4 khung hình cho mỗi nút */
    background-image: url('btn_dangky.png') !important;
    background-size: 200% 200% !important; 
}

/* --- TAB 1: ĐĂNG KÝ NHANH (Cột trái) --- */
.sd-login-tabs button[data-tab="dangky"] {
    background-position: left top !important; /* Lấy góc 1/4 trên cùng bên trái (Mờ) */
}
.sd-login-tabs button[data-tab="dangky"].sd-active,
.sd-login-tabs button[data-tab="dangky"]:hover {
    background-position: left bottom !important; /* Lấy góc 1/4 dưới cùng bên trái (Sáng) */
}

/* --- TAB 2: NẠP THẺ (Cột phải) --- */
.sd-login-tabs button[data-tab="napthe"] {
    background-position: right top !important; /* Lấy góc 1/4 trên cùng bên phải (Mờ) */
}
.sd-login-tabs button[data-tab="napthe"].sd-active,
.sd-login-tabs button[data-tab="napthe"]:hover {
    background-position: right bottom !important; /* Lấy góc 1/4 dưới cùng bên phải (Sáng) */
}

/* 3. Vạch sáng màu xanh lơ (Cyan) ở dưới tab đang được chọn (Active) như ảnh mẫu */
.sd-login-tabs button.sd-active, 
.sd-login-tabs a.sd-tab-link.sd-active {
    border-bottom: 2px solid #00e4ff !important; 
    box-shadow: none !important;
}

/* ==========================================================================
   FIX LỖI NÚT ĐĂNG KÝ / NẠP THẺ LUÔN SÁNG MÀU
   ========================================================================== */

/* 1. Ép tất cả các nút (kể cả nút bị dính class sd-active) về trạng thái TỐI và ẨN VIỀN XANH */
.sd-login-tabs button,
.sd-login-tabs button.sd-active {
    border-bottom: 2px solid transparent !important;
}

.sd-login-tabs button[data-tab="dangky"],
.sd-login-tabs button[data-tab="dangky"].sd-active {
    background-position: left top !important; /* Lấy mảng Đỏ thẫm */
}

.sd-login-tabs button[data-tab="napthe"],
.sd-login-tabs button[data-tab="napthe"].sd-active {
    background-position: right top !important; /* Lấy mảng Đỏ thẫm */
}

/* 2. CHỈ phát sáng và hiện viền xanh khi Rê chuột (:hover) hoặc Bấm vào (:active) */
.sd-login-tabs button[data-tab="dangky"]:hover,
.sd-login-tabs button[data-tab="dangky"]:active,
.sd-login-tabs button[data-tab="dangky"].sd-active:hover,
.sd-login-tabs button[data-tab="dangky"].sd-active:active {
    background-position: left bottom !important; /* Lấy mảng Sáng */
    border-bottom: 2px solid #00e4ff !important; /* Hiện viền xanh */
}

.sd-login-tabs button[data-tab="napthe"]:hover,
.sd-login-tabs button[data-tab="napthe"]:active,
.sd-login-tabs button[data-tab="napthe"].sd-active:hover,
.sd-login-tabs button[data-tab="napthe"].sd-active:active {
    background-position: right bottom !important; /* Lấy mảng Sáng */
    border-bottom: 2px solid #00e4ff !important; /* Hiện viền xanh */
}

/* ==========================================================================
   NÂNG CẤP GIAO DIỆN KHUNG "XIN CHÀO" (ĐÃ ĐĂNG NHẬP)
   ========================================================================== */

/* 1. Nền tổng thể khung Xin chào */
.sd-greet {
    background: linear-gradient(180deg, #1f2226 0%, #2a2d33 100%) !important;
    border: 1px solid #4a4f57 !important;
    border-radius: 6px !important;
    padding: 20px 15px !important;
    position: relative;
    overflow: hidden;
}

/* Thêm chút hiệu ứng ánh sáng nền sau Avatar */
.sd-greet::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(216,44,44,0.2) 0%, transparent 70%);
    pointer-events: none;
}

/* 2. Avatar sang trọng hơn */
.sd-avatar {
    width: 64px !important;
    height: 64px !important;
    border: 2px solid #ffd24c !important;
    background: linear-gradient(135deg, #e0342f, #8f1017) !important; /* Đổi nền xanh cũ thành Đỏ rực */
    color: #ffffff !important;
    font-size: 24px !important;
    box-shadow: 0 0 15px rgba(255, 210, 76, 0.3), inset 0 0 10px rgba(0,0,0,0.5) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin-bottom: 12px !important;
    transition: transform 0.3s ease;
}

/* Hiệu ứng nảy nhẹ khi rê chuột vào Avatar */
.sd-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 210, 76, 0.6), inset 0 0 10px rgba(0,0,0,0.5) !important;
}

/* 3. Tên tài khoản */
.sd-greet-name {
    font-size: 14px !important;
    color: #d1d5db !important;
}
.sd-greet-name b {
    color: #ffd24c !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(255, 210, 76, 0.4); /* Phát sáng nhẹ */
}

/* 4. Nút Thoát tài khoản */
.sd-greet-logout {
    margin: 10px 0 15px !important;
}
.sd-greet-logout button,
.sd-greet-logout a {
    background: #363b42 !important;
    border: 1px solid #d82c2c !important;
    color: #ff7a7a !important;
    padding: 4px 15px !important;
    border-radius: 20px !important; /* Nút bo tròn hình viên thuốc */
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}
.sd-greet-logout button:hover,
.sd-greet-logout a:hover {
    background: #d82c2c !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(216,44,44,0.4);
}

/* 5. Cụm link Thông tin Nhân vật / Tài khoản */
.sd-greet-links {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 15px !important;
}
.sd-greet-links span {
    display: none !important; /* Ẩn dấu gạch đứng | xấu xí */
}
.sd-greet-links a {
    background: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    color: #d1d5db !important;
    padding: 8px 5px !important;
    border-radius: 4px !important;
    flex: 1; /* Chia đều độ rộng 2 nút */
    font-size: 12px !important;
    transition: all 0.2s ease;
}
.sd-greet-links a:hover {
    background: #4a4f57 !important;
    color: #ffffff !important;
    border-color: #ffd24c !important;
}

/* 6. Nút xem thông tin chi tiết (Toggle) */
.sd-toggle-btn {
    background: #1f2226 !important;
    border: 1px dashed #4a4f57 !important;
    color: #9ca3af !important;
    margin-top: 15px !important;
    border-radius: 4px !important;
    transition: all 0.2s;
}
.sd-toggle-btn:hover {
    color: #ffd24c !important;
    border-color: #ffd24c !important;
    background: #2a2d33 !important;
}

/* ==========================================================================
   TOOLTIP HIỂN THỊ THÔNG TIN KHI DI CHUỘT VÀO "CÀI ĐẶT NGAY"
   ========================================================================== */

/* 1. Mở khóa chống tràn khung (Để tooltip không bị cắt mất khi thò ra ngoài) */
.sd-login-card-fx, 
.sd-login-head {
    overflow: visible !important;
    position: relative !important;
}

/* 2. Thiết kế khối nền Tooltip */
.sd-game-info-tooltip {
    position: absolute;
    top: 0;
    left: 104%; /* Đẩy tooltip sang bên phải của nút cài đặt */
    width: 380px; /* Độ rộng của bảng thông tin */
    background-color: #f0f4f8; /* Nền xanh xám nhạt */
    border: 2px solid #003399; /* Viền xanh đậm */
    box-shadow: 5px 5px 20px rgba(0,0,0,0.6); /* Đổ bóng 3D làm nổi bật khung */
    
    /* Ẩn mặc định, thiết lập hiệu ứng trượt mượt mà */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
    transition: all 0.3s ease;
    z-index: 99999;
    text-align: left;
    pointer-events: none; /* Tránh cản trở click chuột vào link tải game */
}

/* 3. Tạo chiếc Mũi tên nhỏ trỏ vào nút Cài Đặt */
.sd-game-info-tooltip::before {
    content: '';
    position: absolute;
    top: 25px;
    left: -10px;
    border-width: 9px 10px 9px 0;
    border-style: solid;
    border-color: transparent #003399 transparent transparent;
}

/* 4. Kích hoạt hiệu ứng Hiện Tooltip khi rê chuột vào khu vực Cài đặt ngay */
.sd-login-head:hover .sd-game-info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 5. Tiêu đề Tooltip (Màu nền xanh - Chữ vàng) */
.sd-game-info-tooltip .tooltip-header {
    background-color: #003399 !important; 
    color: #ffff00 !important; /* Chữ vàng tươi */
    font-weight: 900 !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 8px 10px !important;
    text-transform: uppercase !important;
    font-family: Arial, sans-serif !important;
    border-bottom: 1px solid #002266 !important;
}

/* 6. Nội dung chi tiết của Tooltip */
.sd-game-info-tooltip .tooltip-body {
    padding: 12px 15px !important;
    color: #111111 !important; /* Chữ đen đậm nét dễ đọc */
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-family: Tahoma, Arial, sans-serif !important;
}

/* ==========================================================================
   FIX LỖI HIỆU ỨNG TIA SÁNG CHẠY TÙM LUM RA NGOÀI KHUNG
   ========================================================================== */

/* Chiếc lồng vô hình chuyên dùng để cắt bỏ phần tia sáng bị thừa */
.sd-fx-cage {
    position: absolute !important;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    overflow: hidden !important; /* Lệnh "nhốt" tia sáng nằm ở đây */
    border-radius: 6px !important; /* Bo góc khớp với khung ngoài */
    pointer-events: none !important; /* Không cản trở click chuột */
    z-index: 1;
}

/* ==========================================================================
   FIX GIAO DIỆN NÚT "NHẬP LẠI" (NÚT RESET FORM)
   ========================================================================== */

/* 1. Trạng thái mặc định của nút Nhập lại (Nền tối, chữ sáng) */
button.mu-btn_webshop[type="reset"] {
    background-color: #363b42 !important; /* Nền xám đen */
    color: #d1d5db !important;           /* Chữ xám sáng */
    border: 1px solid #4a4f57 !important;/* Viền xám tối bao quanh */
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* 2. Đổi màu Icon bên trong nút (nếu có) thành màu Đỏ nhạt để làm điểm nhấn */
button.mu-btn_webshop[type="reset"] i {
    color: #ff6b6b !important; 
    transition: all 0.2s ease !important;
}

/* 3. Hiệu ứng khi rê chuột vào (Hover) - Sáng rực rỡ màu Đỏ MU */
button.mu-btn_webshop[type="reset"]:hover {
    background-color: #d82c2c !important; /* Nền đổi sang Đỏ */
    color: #ffffff !important;            /* Chữ đổi sang Trắng tinh */
    border-color: #d82c2c !important;     /* Viền đổi sang Đỏ */
    box-shadow: 0 4px 10px rgba(216, 44, 44, 0.4) !important;
}

/* Khi rê chuột thì Icon cũng chuyển sang màu trắng cùng với chữ */
button.mu-btn_webshop[type="reset"]:hover i {
    color: #ffffff !important;
}

/* ==========================================================================
   TRỊ TẬN GỐC LỖI "NUỐT MÀU" BỞI DẤU SAO (*) CỦA HỆ THỐNG
   ========================================================================== */

/* 1. MÀU CAM ĐẤT: Tiêu đề Server (Nhắm chuẩn xác mã màu #c24c08 trong HTML) */
[style*="color: #c24c08" i], 
[style*="color: #c24c08" i] *,
[style*="color:#c24c08" i], 
[style*="color:#c24c08" i] * {
    color: #ffdba4 !important; /* Cam đất đậm đà */
    text-shadow: none !important;
}

/* 2. MÀU ĐỎ TƯƠI: Dòng chữ chạy Marquee (Nhắm chuẩn xác thẻ marquee và mã #d32f2f) */
marquee, 
marquee *,
[style*="color: #d32f2f" i], 
[style*="color: #d32f2f" i] *,
[style*="color:#d32f2f" i], 
[style*="color:#d32f2f" i] * {
    color: #ffdba4 !important; /* Đỏ tươi rực rỡ */
    text-shadow: none !important;
}

/* 3. MÀU ĐỎ TƯƠI: Các tin tức Khuyến mãi khác */
font[color="red" i], font[color="red" i] *,
font[color="#ff0000" i], font[color="#ff0000" i] *,
[style*="color:red" i], [style*="color:red" i] *,
[style*="color: red" i], [style*="color: red" i] *,
.text-danger, .text-danger *,
#list_news li b, #list_news li strong {
    color: #ffdba4 !important;
    text-shadow: none !important;
}

/* 4. MÀU XANH DƯƠNG: Thời gian đếm ngược (Giữ nguyên vì đã hoạt động) */
font[color="blue" i], font[color="blue" i] *,
font[color="#0000ff" i], font[color="#0000ff" i] *,
[style*="color:blue" i], [style*="color:blue" i] *,
[style*="color: blue" i], [style*="color: blue" i] *,
#time_open, #time_open *,
#count_down, #count_down *,
#thoigian_open, #thoigian_open * {
    color: #d1d5db !important; /* Xanh dương sáng */
    text-shadow: none !important;
}

/* ==========================================================================
   LÀM ĐẸP DÒNG CHỮ ĐẾM NGƯỢC (PHONG CÁCH CHỮ LỬA 3D "TRUYỀN KỲ")
   ========================================================================== */

/* 1. Tạo dải màu Gradient (Vàng chói -> Cam -> Đỏ rực) lấp đầy vào trong chữ */
#countdown_opengame,
#countdown_opengame font,
#countdown_opengame strong {
    background: linear-gradient(180deg, #fff77a 0%, #ff9500 45%, #d80000 100%) !important;
    -webkit-background-clip: text !important; /* Cắt nền theo hình dáng chữ */
    -webkit-text-fill-color: transparent !important; /* Làm trong suốt ruột chữ để lộ nền */
    color: transparent !important; /* Khóa màu cũ */
    font-weight: 900 !important; /* Ép font siêu đậm để lộ rõ dải màu */
    font-size: 16px !important;
    text-transform: uppercase !important; /* Viết hoa toàn bộ cho hoành tráng */
    letter-spacing: 0.5px !important;
    text-shadow: none !important; /* Tắt text-shadow cũ vì nó gây lỗi với background-clip */
}

/* 2. Tạo khối 3D và vầng hào quang (Dùng filter thay thế cho text-shadow) */
#countdown_opengame {
    display: inline-block !important; /* Ép thành khối để filter hoạt động hoàn hảo */
    filter: drop-shadow(0px 2px 0px #5c0000) /* Khối 3D màu đỏ sẫm hắt xuống dưới */
            drop-shadow(0px 0px 8px rgba(255, 120, 0, 0.6)) /* Vầng hào quang lửa cam tỏa ra xung quanh */
            !important;
    margin-top: 5px !important; /* Đẩy xuống một chút cho thoáng */
}

/* ==========================================================================
   KHÓA CHẾ ĐỘ MOBILE - ÉP ĐIỆN THOẠI HIỂN THỊ Y HỆT PC
   ========================================================================== */
@media (max-width: 900px) {
    /* 1. Trả lại cấu trúc 2 cột ngang thay vì xếp dọc */
    .sd-body { 
        flex-direction: row !important; 
    }
    
    /* 2. Giữ nguyên kích thước cột Đăng nhập bên trái (300px) */
    .sd-sidebar { 
        width: var(--sd-sidebar-w) !important; 
        flex: 0 0 var(--sd-sidebar-w) !important; 
    }
    
    /* 3. Ép khung bao bọc (Wrap) phải rộng tối thiểu 1200px để không bị co rúm */
    .sd-wrap {
        min-width: 1080px !important;
        padding-top: 260px !important; /* Giữ khoảng cách chuẩn với menu trên cùng */
    }

    /* 4. Khôi phục lại hiển thị của thanh Menu ngang trên đỉnh */
    .sd-bottom-nav-fixed ul {
        display: flex !important;
        flex-wrap: nowrap !important; /* Cấm menu rớt dòng */
        width: auto !important;
    }
    .sd-bottom-nav-fixed ul li {
        width: auto !important;
    }
    
    /* 5. Khôi phục lại Banner chìm đằng sau */
    body, body.sd-body {
        background-size: auto !important;
        background-position: center 50px !important;
    }
}
/* ==========================================================================
   HỆ THỐNG ĐỔI MÀU GIAO DIỆN TỰ ĐỘNG (THEME CHANGER)
   ========================================================================== */

/* 1. Đổi Nền Gradient cho Nút bấm, Menu Hover, Tab đang chọn
.sd-util-btn, .sd-nav-home, .sd-nav-red-btn, .sd-chat-fab, #sd-back-to-top,
.btn-exchange:not(:disabled), .spin-x5-footer button, .spin-btn,
.sd-bottom-nav-fixed ul li a:hover, .sd-bottom-nav-fixed ul li a.sd-active-red,
.sd-menu-list li a:hover, .sd-menu-list li a.sd-active-red, .sd-menu-list li.sub-open > a,
.news-menu-btn.ant-tabs-tab-active, .news-menu-btn.active,
.event-menu button:disabled, .event-menu button[disabled] {
    background: linear-gradient(180deg, var(--theme-grad-top) 0%, var(--theme-grad-bot) 100%) !important;
    border-color: var(--theme-border) !important;
}

/* 2. Hiệu ứng Hover rực sáng cho các nút chính
.sd-util-btn:hover, .sd-nav-home:hover, .sd-nav-red-btn:hover, .sd-chat-fab:hover, #sd-back-to-top:hover,
.event-menu button:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--theme-hover-top) 0%, var(--theme-hover-bot) 100%) !important;
    box-shadow: 0 0 15px var(--theme-glow) !important;
    border-color: var(--theme-hover-top) !important;
}

/* 3. Đổi màu Viền thanh Menu ngang & Viền Avatar
.sd-bottom-nav-fixed { border-bottom-color: var(--theme-border) !important; }
.sd-avatar { border-color: var(--theme-border) !important; }
.sd-avatar:hover { box-shadow: 0 0 20px var(--theme-glow), inset 0 0 10px rgba(0,0,0,0.5) !important; }

/* 4. Đổi màu Icon tiện ích (Dấu mũi tên, Icon cẩm nang...)
.mu-feature-icon, .mu-account-key i, .sd-menu-list li a.active i, .sd-menu-list li a.menuactive i {
    color: var(--theme-border) !important;
}

/* Lựa chọn 3: Huyết Ma Quái (Gradient Đỏ Đen Huyền Bí)
:root {
    --theme-grad-top: #590000;
    --theme-grad-bot: #1a0000;
    --theme-border: #ff0000;
    --theme-hover-top: #8f0000;
    --theme-hover-bot: #3a0000;
    --theme-glow: rgba(255, 0, 0, 0.6);
}


/* Lựa chọn 1: Băng Giá (Xanh Cyan / Xanh Biển)
:root {
    --theme-grad-top: #00d2ff;
    --theme-grad-bot: #005c99;
    --theme-border: #00e4ff;
    --theme-hover-top: #33ddff;
    --theme-hover-bot: #0077cc;
    --theme-glow: rgba(0, 228, 255, 0.5);
}
*/

/* Lựa chọn 2: Hỏa Long Tinh (Cam / Vàng Gold) 
:root {
    --theme-grad-top: #ff9500;
    --theme-grad-bot: #c24c08;
    --theme-border: #ffd24c;
    --theme-hover-top: #ffb732;
    --theme-hover-bot: #d35400;
    --theme-glow: rgba(255, 210, 76, 0.5);
}
*/

/* ==========================================================================
   FIX TRIỆT ĐỂ: NHUỘM ĐEN (DARK THEME) TOÀN BỘ POPUP CENTER
   ========================================================================== */

/* 1. Đổi Nền Box sang Xám Đen (Xóa bỏ nền trắng cũ) */
.popupCenter, 
#rental_popup, 
.ws-popup-container {
    background-color: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
}

/* 2. Đổi các mảng màu nền phụ bên trong popup (nếu có) */
.popup-content-wrapper,
.ws-popup-body,
.popup-footer,
.ws-popup-footer,
.special-info-row {
    background-color: transparent !important;
    border-color: #4a4f57 !important;
}

/* Đổi màu các đường kẻ vạch chia ngăn */
.popup-col-left,
.ws-popup-col-left,
.option-row,
.ws-popup-option-row,
.popup-divider {
    border-color: #4a4f57 !important;
}
.popupCenter hr {
    background-color: #4a4f57 !important;
}

/* 3. Xóa bỏ lệnh ép màu đen cũ, đổi toàn bộ chữ sang Xám Sáng */
.popupCenter, 
.popupCenter :not(:where([style*="color:"], font, font *)),
#rental_popup, 
#rental_popup :not(:where([style*="color:"], font, font *)),
.ws-popup-container,
.ws-popup-container :not(:where([style*="color:"], font, font *)) {
    color: #d1d5db !important;
}

/* 4. Nhấn mạnh Tiêu đề (Thông Báo Lỗi...) bằng màu Đỏ Rực */


/* 5. Cứu các dòng chữ cảnh báo (Bạn không đủ Gcoin...) sang Vàng Gold */


/* 6. Nút Tắt X ở góc phải */
.popup-header-close {
    background-color: #e0342f !important;
    color: #ffffff !important;
    border-radius: 0 0 0 6px !important;
    transition: all 0.2s ease !important;
}
.popup-header-close:hover {
    background-color: #ff4d4d !important;
}

/* ==========================================================================
   FIX KHUNG BÁO LỖI "SERVER ĐANG BẢO TRÌ" TẠI TRANG CHỦ
   ========================================================================== */

/* 1. Ép Nền Đen Đỏ, Viền Đỏ (Chỉ đích danh đường dẫn HTML cực mạnh) */
html body .sd-content-inner #respond #notice .error,
html body div#respond div#notice div.error {
    /* background-color: #1a0505 !important;  Nền đỏ đen tối màu */
    border: 1px solid #e0342f !important; /* Viền đỏ rực */
    box-shadow: 0 0 15px rgba(224, 52, 47, 0.4) !important;
    border-radius: 6px !important;
    padding: 15px !important;
    text-align: center !important;
}

/* 2. Ép toàn bộ chữ lỗi bên trong sáng Đỏ Rực */
html body .sd-content-inner #respond #notice .error font,
html body .sd-content-inner #respond #notice .error *,
html body div#respond div#notice div.error font {
    color: #ff4d4d !important; /* Chữ đỏ sáng dễ đọc 
   /* text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important; */
    font-size: 16px !important;
    font-weight: bold !important;
}

/* ==========================================================================
   FIX TỔNG HỢP: LỖI ĐEN XÌ CỦA POPUP WEBSHOP VÀ THUÊ ĐỒ
   ========================================================================== */

/* 1. Hủy bỏ lệnh ép chữ màu đen (#333333) bị lỗi ở dòng dưới cùng của CSS cũ, 
      Ép lại toàn bộ chữ trong Popup thành màu xám sáng / trắng để dễ đọc trên nền đen */
.popupCenter, 
.popupCenter :not(:where([style*="color:"], font, font *)), 
#rental_popup, 
#rental_popup :not(:where([style*="color:"], font, font *)),
div.popupContent,
div.popupContent :not(:where([style*="color:"], font, font *)) {
    color: #d1d5db !important; 
}

/* Nhấn mạnh các thẻ b, strong trong popup bằng màu sáng
   FIX 07.09.2026: thêm :not(:where([style*="color:"], font, font *)) — đây chính là rule đã đè mất màu
   tên/info item (VD: <strong><font color="#00CC00">Lôi Phong Đao +11</font></strong>
   trong popup "Thuê Item"), vì strong/b bị chọn trúng trực tiếp nên không
   còn thừa hưởng màu từ <font> cha nữa. */
.popupCenter b:not(:where([style*="color:"], font, font *)), .popupCenter strong:not(:where([style*="color:"], font, font *)), 
#rental_popup b:not(:where([style*="color:"], font, font *)), #rental_popup strong:not(:where([style*="color:"], font, font *)) {
    color: #d1d5db !important; /* 18.8.2026 */
}

/* Các chữ màu xanh thông báo thành công */
.popupCenter span.color-green {
    color: #2ecc71 !important; /* Xanh lá rực rỡ */
    /* font-weight: bold !important; */
}

/* 2. Fix Nút "Thuê Item" bị trắng toát */
#popup_submit_button,
.popupCenter input[type="button"],
.popupCenter input[type="submit"],
.popupCenter button {
    background: linear-gradient(135deg, #e0342f, #8f1017) !important; /* Đỏ MU */
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 8px 25px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
    transition: filter 0.2s ease !important;
}

#popup_submit_button:hover,
.popupCenter input[type="button"]:hover,
.popupCenter input[type="submit"]:hover,
.popupCenter button:hover {
    filter: brightness(1.2) !important;
}

/* 3. Fix Nút Tắt (X) màu trắng chướng mắt của Webshop */
i.popupClose,
.popupClose {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 35px !important;
    height: 35px !important;
    background-color: #e0342f !important;
    background-image: none !important; /* Xóa ảnh X màu xám mặc định của hệ thống */
    color: #ffffff !important;
    text-align: center !important;
    line-height: 35px !important;
    cursor: pointer !important;
    border-radius: 0 8px 0 6px !important; /* Bo góc khớp với viền popup */
    transition: background 0.2s ease !important;
}

i.popupClose::before,
.popupClose::before {
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
    display: block !important;
}

i.popupClose:hover,
.popupClose:hover {
    background-color: #ff4d4d !important;
}

/* 4. Fix Tiêu đề "Webshop" (Popup Caption) */
p.popupCaption,
.popupCaption {
    background: linear-gradient(180deg, #1f2226 0%, #131518 100%) !important;
    color: #ffd24c !important; /* Chữ vàng Gold */
    margin: 0 !important;
    /* padding: 12px 15px !important; */
    font-weight: bold !important;
    font-size: 16px !important;
    border-bottom: 2px solid #e0342f !important;
    border-radius: 8px 8px 0 0 !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

/* Fix khoảng cách nội dung bên trong Webshop */
.popupContent,
div.popupContent {
    padding: 20px 15px !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   BỘ LỌC MÀU TỐI THƯỢNG: TRỊ TẬN GỐC TOÀN BỘ MÃ MÀU ITEM CỦA HỆ THỐNG
   ========================================================================== */
/* FIX (2026-09-07): Trước đây bộ lọc này chỉ áp dụng bên trong
   .mu-v2-container, nên các trang không dùng khung .mu-v2-container
   (VD: bảng Item trong Chợ Trời / Đăng Bán Item / Item của bạn) vẫn bị
   mất màu vật phẩm dù Tooltip (nằm ngoài luồng DOM chính) vẫn lên màu
   bình thường. Bỏ scope '.mu-v2-container' để bộ lọc áp dụng TOÀN TRANG,
   khớp với cách 2 rule đỏ/xanh dương ở mục Tin Tức phía trên đã làm. */


/* 1. Đồ Hoàn Hảo (Mã gốc: #2FF387) -> Giữ nguyên Xanh Lá Mạ rực rỡ */
html body font[color="#2FF387" i],
html body font[color="#2FF387" i] *,
html body span[style*="#2FF387" i],
html body span[style*="#2FF387" i] * {
    color: #2FF387 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 2. Đồ Thường Cấp Cao từ +6 (Mã gốc: #F4CB3F) -> Nâng lên Vàng Gold */
html body font[color="#F4CB3F" i],
html body font[color="#F4CB3F" i] *,
html body span[style*="#F4CB3F" i],
html body span[style*="#F4CB3F" i] * {
    color: #ffd24c !important; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 3. Đồ Socket & Dòng Socket (Mã gốc: #AA1EAA) -> Nâng lên Tím Hồng phát sáng */
html body font[color="#AA1EAA" i],
html body font[color="#AA1EAA" i] *,
html body span[style*="#AA1EAA" i],
html body span[style*="#AA1EAA" i] * {
    color: #D02DB2 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 4. Dòng May Mắn & Tuyệt Chiêu (Mã gốc: #8CB0EA) -> Nâng lên Xanh Cyan chói lóa */
html body font[color="#8CB0EA" i],
html body font[color="#8CB0EA" i] *,
html body span[style*="#8CB0EA" i],
html body span[style*="#8CB0EA" i] * {
    color: #8CB0EA !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 5. Dòng Option Sát Thương / Phòng Thủ (Mã gốc: #9AADD5) -> Nâng lên Xanh Tím sáng */
html body font[color="#9AADD5" i],
html body font[color="#9AADD5" i] *,
html body span[style*="#9AADD5" i],
html body span[style*="#9AADD5" i] * {
    color: #9AADD5 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 6. Dòng Vàng Gia Cường Harmony (Mã gốc: #C8C800) -> Nâng lên Vàng Gold/Vàng Chanh chói lóa */
html body font[color="#C8C800" i],
html body font[color="#C8C800" i] *,
html body span[style*="#C8C800" i],
html body span[style*="#C8C800" i] * {
    color: #C8C800 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 7. Dòng Tính Năng Item 380 PVP (Mã gốc: #CC99FF) -> Nâng lên Hồng Tím rực rỡ */
html body font[color="#CC99FF" i],
html body font[color="#CC99FF" i] *,
html body span[style*="#CC99FF" i],
html body span[style*="#CC99FF" i] * {
    color: #f099ff !important; /* Đẩy lên màu Hồng Tím sáng cực đẹp trên nền đen */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 8. Đồ Thần (Ancient Item) (Mã gốc: #2347F3) -> Nâng lên Xanh Dương Sáng rực rỡ */
html body font[color="#2347F3" i],
html body font[color="#2347F3" i] *,
html body span[style*="#2347F3" i],
html body span[style*="#2347F3" i] * {
    color: #0582ff !important; /* Xanh dương sáng cực kỳ đẹp và dễ đọc trên nền đen */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 9. Chỉ số yêu cầu / Cảnh báo (Mã gốc: red hoặc #ff0000) -> Đỏ rực */
html body font[color="red" i],
html body font[color="red" i] *,
html body font[color="#ff0000" i],
html body font[color="#ff0000" i] *,
html body span[style*="red" i],
html body span[style*="#ff0000" i] {
    color: #ff4d4d !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}
/* ==========================================================================
   FIX Ô THAO TÁC (CHỢ TRỜI / ĐĂNG BÁN) BỊ TRẮNG TOÁT
   ========================================================================== */

/* 1. Ép nền ô Thao tác ngoài cùng sang màu Đen giống ô hình ảnh và thông tin */

/* 2. Ép nền cái khung nhập giá (đang bị set inline border sáng) sang màu Xám Đen */
.item-table .item-action-cell div[id^="itembid_active_"] {
    background-color: #1f2226 !important; /* Nền xám đen để làm nổi bật khu vực nhập */
    border: 1px solid #4a4f57 !important; /* Đổi viền xám sáng thành viền tối */
    border-radius: 6px !important;
    color: #d1d5db !important; /* Ép chữ "Giá bán", "Thời gian" thành màu sáng */
}

/* 3. Xử lý các ô nhập số (Giá GC) và ô chọn (Thời gian) */
.item-table .item-action-cell input[type="text"],
.item-table .item-action-cell input[type="number"],
.item-table .item-action-cell select {
    background-color: #0b0d12 !important; /* Nền ô nhập siêu tối */
    color: #ffd24c !important; /* Chữ số gõ vào hiện màu Vàng Gold */
    border: 1px solid #4a4f57 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    outline: none !important;
}

/* 4. Viền đỏ rực lên khi click chuột vào ô nhập giá */
.item-table .item-action-cell input[type="text"]:focus,
.item-table .item-action-cell input[type="number"]:focus,
.item-table .item-action-cell select:focus {
    border-color: #e0342f !important;
}

/* ==========================================================================
   FIX Ô THAO TÁC (EVENT2) BỊ TRẮNG TOÁT
   ========================================================================== */
   
.trade-box {
	background-color: transparent !important;
}

/* ==========================================================================
   FIX GIAO DIỆN "LỊCH SỬ NẠP THÁNG" (ĐIỂM DANH) - BẢN TỐI ƯU GỌN NHẸ
   ========================================================================== */

/* 1. Mặc định: Các ngày chưa nạp (Đổi nền xám sáng thành Xám Đen) */
.calendar-day {
    background-color: #1f2226 !important; /* Nền tối */
    border: 1px solid #4a4f57 !important; /* Viền xám mờ */
    color: #9ca3af !important; /* Chữ xám sáng nhẹ */
    transition: all 0.2s ease !important;
}

/* Hiệu ứng khi rê chuột vào ngày chưa nạp */
.calendar-day:hover {
    background-color: #363b42 !important;
    border-color: #ffd24c !important; /* Sáng viền vàng Gold */
    color: #ffd24c !important;
}

/* 2. Ngày ĐÃ NẠP: Dùng đúng class .highlight của hệ thống */
html body .calendar-day.highlight {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important; /* Xanh ngọc lục bảo */
    color: #ffffff !important; /* Chữ trắng tinh */
    border: 1px solid #145a32 !important; /* Viền xanh đậm */
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.6) !important; /* Hiệu ứng phát sáng */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}

/* 3. Fix màu của 2 hình tròn chú thích (Legend) ở bên dưới */
/* Chú thích "Ngày chưa nạp" (Nền gốc #ddd) */
span[style*="background-color: #ddd" i],
span[style*="background-color:#ddd" i],
span[style*="background: #ddd" i] {
    background-color: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
}

/* Chú thích "Ngày đã nạp" (Nền gốc xanh lá) */
span[style*="green" i],
span[style*="#4CAF50" i],
span[style*="#28a745" i] {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    border: 1px solid #145a32 !important;
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.5) !important;
}

/* ==========================================================================
   FIX GIAO DIỆN "LỊCH SỬ VÒNG QUAY" - BẢN TỐI ƯU GỌN NHẸ
   ========================================================================== */
.history-table th {
	background-color: #000 !important;
	text-align: center !important;
}

/* ==========================================================================
   FIX GIAO DIỆN DANH SÁCH TIN TỨC (STYLE 2 CỘT TRONG SUỐT GIỐNG MÁY CHAO)
   ========================================================================== */
.tintuc-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Chia làm 2 cột đều nhau */
    gap: 0 30px !important; /* Khoảng cách thoáng giữa 2 cột */
    padding: 0 10px !important;
    margin: 0 !important;
    list-style: none !important;
}

.tintuc-list li {
    padding: 12px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed #4a4f57 !important; /* Đường kẻ đứt phân cách mờ ở dưới */
}

/* Biến thẻ từ dạng Box về dạng Link văn bản thuần túy */
.tintuc-list li a {
    display: flex !important;
    align-items: center !important;
    background: transparent !important; /* Khử màu nền */
    border: none !important; /* Khử viền */
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #d1d5db !important; /* Chữ màu xám sáng */
    font-weight: normal !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Hiệu ứng khi rê chuột vào bài viết: Không đổi nền, chỉ đổi màu chữ */
.tintuc-list li a:hover {
    background: transparent !important;
    color: #ffd24c !important; /* Chữ sáng lên màu Vàng Gold */
    box-shadow: none !important;
    padding-left: 5px !important; /* Nhích nhẹ chữ sang phải tạo cảm giác 3D */
}

/* Ép Icon bên trái (mũi tên hoặc icon hệ thống) thành màu Đỏ MU y hệt Máy Chao */
.tintuc-list li a i {
    color: #e0342f !important; 
    margin-right: 8px !important;
    font-size: 14px !important;
}

/* Tự động thu về 1 cột khi xem trên điện thoại để chữ không bị chen lấn */
@media (max-width: 768px) {
    .tintuc-list {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   FIX GIAO DIỆN TAB ĐỒ THẦN (CHỌN CHỦNG TỘC DK, DW, ELF...)
   ========================================================================== */
.ancient-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    justify-content: center !important;
}

/* Trạng thái mặc định của các nút chọn Class (Xóa nền trắng) */
.ancient-tabs .event-nav-btn {
    background-color: #1f2226 !important; /* Ép nền tối */
    border: 1px solid #4a4f57 !important; /* Ép viền xám */
    color: #d1d5db !important;
    border-radius: 20px !important; /* Bo góc dạng viên thuốc giống bản gốc */
    padding: 8px 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Khi rê chuột vào các Tab chưa chọn */
.ancient-tabs .event-nav-btn:hover {
    background-color: #363b42 !important;
    color: #ffd24c !important; /* Chữ vàng Gold */
    border-color: #ffd24c !important; /* Viền vàng Gold */
}

/* Tab ĐANG ĐƯỢC CHỌN (Class Active) - Nhuộm Đỏ rực rỡ */
.ancient-tabs .event-nav-btn.active,
.ancient-tabs .event-nav-btn[style*="background"], /* Bắt luôn nếu hệ thống dùng JS ép inline */
.ancient-tabs .event-nav-btn[class*="active"] {
    background: linear-gradient(135deg, #e0342f, #8f1017) !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: 0 4px 10px rgba(224, 52, 47, 0.4) !important;
}

/* ==========================================================================
   VẮC-XIN NÂNG CẤP: BẮT MỌI THẺ (KỂ CẢ TD, TH, DIV) CÓ CHỨA MÃ MÀU
   ========================================================================== */

/* 10. Tiêu đề "Thông Tin Sét Thần" (Mã gốc: #FFD700) -> Ép Vàng Gold rực rỡ */
html body .mu-v2-container [style*="#FFD700" i],
html body .mu-v2-container [style*="#FFD700" i] *,
html body .mu-v2-container [color="#FFD700" i],
html body .mu-v2-container [color="#FFD700" i] * {
    color: #ffd24c !important; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 11. Các dòng chỉ số phụ của Set Thần (Mã gốc: #999999) -> Ép Xám Sáng */
html body .mu-v2-container [style*="#999999" i],
html body .mu-v2-container [style*="#999999" i] *,
html body .mu-v2-container [color="#999999" i],
html body .mu-v2-container [color="#999999" i] * {
    color: #9ca3af !important; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}

/* 12. Cứu luôn màu Đỏ gốc (trường hợp bị dính vào td/th) */
html body .mu-v2-container [style*="#FF0000" i],
html body .mu-v2-container [style*="#FF0000" i] *,
html body .mu-v2-container [color="#FF0000" i],
html body .mu-v2-container [color="#FF0000" i] *,
html body .mu-v2-container [color="red" i],
html body .mu-v2-container [color="red" i] * {
    color: #ff4d4d !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* ==========================================================================
   BỔ SUNG BỘ LỌC MÀU: THUỘC TÍNH VŨ KHÍ RỒNG
   ========================================================================== */

/* 13. Tiêu đề "Thuộc Tính Vũ Khí Rồng" (Mã gốc: #FF1493) -> Ép Hồng Đậm rực rỡ */
html body .mu-v2-container [style*="#FF1493" i],
html body .mu-v2-container [style*="#FF1493" i] *,
html body .mu-v2-container [color="#FF1493" i],
html body .mu-v2-container [color="#FF1493" i] * {
    color: #ff4dff !important; /* Nâng cấp lên tông màu Hồng Sáng rực rỡ */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* 14. Ép các thẻ màu Green/Blue/Black và mã hex #0056b3, #555, #666, #777 về màu chữ chuẩn xám sáng */
html body [color="green" i], html body [color="green" i] *,
html body [color="blue" i], html body [color="blue" i] *,
html body [color="black" i], html body [color="black" i] *,
html body [color="#0056b3" i], html body [color="#0056b3" i] *,

html body [color="#555" i], html body [color="#555" i] *,
html body [color="#555555" i], html body [color="#555555" i] *,
html body [color="#666" i], html body [color="#666" i] *,
html body [color="#666666" i], html body [color="#666666" i] *,
html body [color="#777" i], html body [color="#777" i] *,
html body [color="#777777" i], html body [color="#777777" i] *,

html body [style*="color:green" i], html body [style*="color:green" i] *,
html body [style*="color:blue" i], html body [style*="color:blue" i] *,
html body [style*="color:black" i], html body [style*="color:black" i] *,
html body [style*="#0056b3" i], html body [style*="#0056b3" i] *,

html body [style*="#555" i], html body [style*="#555" i] *,
html body [style*="rgb(85, 85, 85)" i], html body [style*="rgb(85, 85, 85)" i] *,
html body [style*="#666" i], html body [style*="#666" i] *,
html body [style*="rgb(102, 102, 102)" i], html body [style*="rgb(102, 102, 102)" i] *,
html body [style*="#777" i], html body [style*="#777" i] *,
html body [style*="rgb(119, 119, 119)" i], html body [style*="rgb(119, 119, 119)" i] * {
    color: #d1d5db !important;
    text-shadow: none !important;
}

/* ==========================================================================
   MODULE EVENT HUB — GIAO DIỆN SỰ KIỆN GAMING (DARK THEME) - Giao diện 1
   ========================================================================== */
.ev-hub-wrapper {
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    /* padding: 2px 2px 20px 2px; */
    box-sizing: border-box;
}

/* 1. HERO HEADER */
.ev-hero-box {
    position: relative;
    /* background: linear-gradient(145deg, #181c26 0%, #11141c 100%) !important; */
	background: linear-gradient(145deg, #1f2226 0%, #1f2226 100%) !important;
    border: 1px solid #282f3d !important;
    /* border-radius: 10px !important; */
    padding: 16px 20px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.ev-hero-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e0342f 0%, #ff8a1e 30%, #ffd24c 50%, #ff8a1e 70%, #e0342f 100%);
    box-shadow: 0 0 10px rgba(255, 210, 76, 0.6);
}
.ev-hero-box::after {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255, 210, 76, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.ev-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}
.ev-hero-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2a1012 0%, #4a1518 100%) !important;
    border: 1px solid #8f1017 !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffd24c !important;
    box-shadow: 0 0 16px rgba(224, 52, 47, 0.4);
    flex-shrink: 0;
}
.ev-hero-icon i {
    color: #ffd24c !important;
    filter: drop-shadow(0 0 6px rgba(255, 210, 76, 0.7));
}
.ev-hero-text {
    flex: 1;
    min-width: 0;
}
.ev-hero-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.ev-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(224, 52, 47, 0.2) !important;
    border: 1px solid #e0342f !important;
    color: #ff6b6b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}
.ev-live-dot {
    width: 6px;
    height: 6px;
    background-color: #ff4742;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px #ff4742;
    animation: evDotBlink 1.4s infinite;
}
@keyframes evDotBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.75); }
}
.ev-hero-title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.3;
}
.ev-hero-title span {
    color: #ffd24c !important;
    text-shadow: 0 0 10px rgba(255, 210, 76, 0.4);
}
.ev-hero-desc {
    margin: 3px 0 0 0 !important;
    font-size: 12px !important;
    color: #8fa8c2 !important;
    line-height: 1.4;
}

/* 2. FILTER TABS */
.ev-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ev-tab-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    /* background: #181c26 !important; */
	background: #1f2226 !important;
    border: 1px solid #282f3d !important;
    color: #94a3b8 !important;
    padding: 9px 6px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    gap: 6px !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    outline: none !important;
}
.ev-tab-btn:hover {
    background: #202634 !important;
    color: #ffd24c !important;
    border-color: #3d495c !important;
    transform: translateY(-2px);
}
.ev-tab-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1px solid #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.45) !important;
}
.ev-tab-btn i {
    font-size: 12px;
    flex-shrink: 0;
}

/* 3. SECTION HEADERS */
.ev-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid #1f2f45;
    position: relative;
}
.ev-section-header::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 0;
    width: 70px; height: 2px;
    background: #ffd24c;
    box-shadow: 0 0 8px rgba(255, 210, 76, 0.6);
}
.ev-section-header.rewards-header::after {
    background: #e0342f;
    box-shadow: 0 0 8px rgba(224, 52, 47, 0.6);
}
.ev-section-header.other-header::after {
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.ev-sec-title-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
}
.ev-sec-icon {
    font-size: 14px;
    width: 26px; height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ev-sec-icon.main-gold {
    background: rgba(255, 210, 76, 0.15) !important;
    color: #ffd24c !important;
    border: 1px solid rgba(255, 210, 76, 0.3) !important;
}
.ev-sec-icon.rewards-red {
    background: rgba(224, 52, 47, 0.15) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(224, 52, 47, 0.3) !important;
}
.ev-sec-icon.other-cyan {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}
.ev-section-title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #ffd24c !important;
    background: transparent !important;
}
.ev-section-subtag {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #8fa8c2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 4. GRID & CARDS */
.ev-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 13px !important;
    margin-bottom: 20px !important;
}

.ev-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: linear-gradient(155deg, #141d2c 0%, #0d131f 100%) !important;
    border: 1px solid #233348 !important;
    border-radius: 9px !important;
    padding: 13px 14px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.22s cubic-bezier(0.2, 0, 0.2, 1) !important;
    outline: none !important;
}
.ev-card:hover {
    transform: translateY(-3px) !important;
    background: linear-gradient(155deg, #192538 0%, #101827 100%) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6) !important;
}
.ev-card:active {
    transform: scale(0.98) !important;
}

.ev-card-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    transition: height 0.2s ease, opacity 0.2s ease;
    opacity: 0.85;
}
.ev-card:hover .ev-card-top-bar {
    height: 4px;
    opacity: 1;
}

.ev-card-main .ev-card-top-bar { background: linear-gradient(90deg, #ffd24c, #ff9900); }
.ev-card-main:hover { border-color: #ffd24c !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 210, 76, 0.22) !important; }

.ev-card-reward .ev-card-top-bar { background: linear-gradient(90deg, #ef4444, #f97316); }
.ev-card-reward:hover { border-color: #f87171 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(239, 68, 68, 0.22) !important; }

.ev-card-other .ev-card-top-bar { background: linear-gradient(90deg, #38bdf8, #10b981); }
.ev-card-other:hover { border-color: #38bdf8 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.22) !important; }

.ev-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}
.ev-card-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.ev-card:hover .ev-card-icon-wrap {
    transform: scale(1.08) rotate(3deg);
}

.ev-card-main .ev-card-icon-wrap {
    background: rgba(255, 210, 76, 0.12) !important;
    border: 1px solid rgba(255, 210, 76, 0.35) !important;
    color: #ffd24c !important;
}
.ev-card-reward .ev-card-icon-wrap {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}
.ev-card-other .ev-card-icon-wrap {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
}

.ev-tag {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}
.ev-tag-gold {
    background: rgba(255, 210, 76, 0.14) !important;
    border: 1px solid rgba(255, 210, 76, 0.4) !important;
    color: #ffd24c !important;
}
.ev-tag-red {
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}
.ev-tag-orange {
    background: rgba(249, 115, 22, 0.14) !important;
    border: 1px solid rgba(249, 115, 22, 0.4) !important;
    color: #fdba74 !important;
}
.ev-tag-cyan {
    background: rgba(56, 189, 248, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #7dd3fc !important;
}
.ev-tag-green {
    background: rgba(16, 185, 129, 0.14) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

/* Badge số đếm Nạp Ngày - Nhỏ gọn, nằm ngang hàng ngay sau tiêu đề */
.ev-pulse-count,
.tintuc-list-3col li a div span.ev-pulse-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 15px !important;
    height: 18px !important;
    padding: 0 6px !important;
    margin-left: 6px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border-radius: 999px !important; /* Bo tròn dạng viên thuốc nhỏ */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
    vertical-align: middle !important;
    /* line-height: 1 !important; */
    animation: evCountPulse 1.8s infinite ease-in-out !important;
}
/* Hiệu ứng nhịp đập phát sáng nhẹ nhàng, không bị giật lag */
@keyframes evCountPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); 
    }
    50% { 
        transform: scale(1.12); 
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.9); 
    }
}

.ev-card-body {
    flex: 1 !important;
    margin-bottom: 10px !important;
}
.ev-card-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #f8fafc !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.35 !important;
    transition: color 0.2s ease !important;
}
.ev-card:hover .ev-card-title {
    color: #ffd24c !important;
}
.ev-card-desc {
    font-size: 11.5px !important;
    color: #8fa8c2 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ev-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px dashed #1e2c40 !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
}
.ev-card-action-text {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: gap 0.2s ease !important;
}
.ev-card-main .ev-card-action-text { color: #ffd24c !important; }
.ev-card-reward .ev-card-action-text { color: #f87171 !important; }
.ev-card-other .ev-card-action-text { color: #38bdf8 !important; }

.ev-card:hover .ev-card-action-text {
    gap: 9px !important;
}
.ev-card-action-text i {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
}
.ev-card:hover .ev-card-action-text i {
    transform: translateX(3px) !important;
}

.ev-card-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

@media (max-width: 950px) {
    .ev-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .ev-filter-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 3px !important;
    }
    .ev-filter-bar::-webkit-scrollbar {
        display: none !important;
    }
    .ev-tab-btn {
        flex: 1 0 auto !important;
        padding: 8px 14px !important;
    }
}
@media (max-width: 580px) {
    .ev-card-grid {
        grid-template-columns: 1fr !important;
    }
    .ev-hero-content {
        flex-direction: column;
        text-align: center;
    }
    .ev-hero-badge-row {
        justify-content: center;
    }
}

/* =======================================================
   5. BẢNG THÔNG TIN NHÂN VẬT (CHAR MANAGER HUD)
   ======================================================= */
.cm-profile-box {
    background: linear-gradient(145deg, #181c26 0%, #11141c 100%) !important;
    border: 1px solid #282f3d !important;
    border-radius: 9px !important;
    margin-bottom: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

.cm-profile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 16px !important;
    background: linear-gradient(90deg, #1e2430 0%, #141720 100%) !important;
    border-bottom: 1px solid #282f3d !important;
}

.cm-profile-name-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.cm-profile-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 210, 76, 0.12);
    border: 1px solid rgba(255, 210, 76, 0.35);
    color: #ffd24c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.cm-profile-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffd24c !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}

.cm-stats-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.cm-stats-table td {
    padding: 8px 12px !important;
    border: 1px solid rgba(40, 47, 61, 0.6) !important;
    font-size: 12.5px !important;
    vertical-align: middle !important;
}

.cm-stats-table tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

.cm-stats-table .cm-lbl {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    width: 20% !important;
    background: rgba(14, 17, 24, 0.6) !important;
}
.cm-stats-table .cm-lbl strong {
    font-weight: 500 !important;
}

.cm-stats-table .cm-val {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    text-align: right !important;
    width: 17% !important;
}

.cm-stats-table .cm-btn-col {
    width: 14% !important;
    text-align: center !important;
    padding: 4px 8px !important;
}

.cm-btn-action {
    display: inline-block !important;
    width: 100% !important;
    max-width: 110px !important;
    padding: 5px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid #34d399 !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.cm-btn-action:hover {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.5) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .cm-stats-table {
        display: block !important;
        overflow-x: auto !important;
    }
}

/* =======================================================
   5.1. BẢNG CHỨC NĂNG NHÂN VẬT & DANH SÁCH 3 CỘT (TINH GỌN)
   ======================================================= */
.cm-features-panel {
    /* background: linear-gradient(145deg, #181c26 0%, #11141c 100%) !important; */
	background: linear-gradient(145deg, #1f2226 0%, #1f2226 100%) !important;
    /* border: 1px solid #4e4e4e !important; */
    /* border-radius: 9px !important; */
    padding: 6px 20px 20px 20px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
    /* margin-bottom: 20px !important; */
}

/* Tiêu đề mục Gaming Gold gạch chân */
.cm-sec-title {
    color: #94a3b8 !important;
    font-size: 12.0px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #2b3342 !important;
    padding-bottom: 7px !important;
    margin: 20px 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cm-sec-title:first-child,
.ev-section-block:first-child .cm-sec-title:first-child {
    margin-top: 12px !important;
}
/* Khung viền bao icon tiêu đề (Icon màu đỏ có viền vàng bao quanh chuẩn ảnh mẫu) */
.cm-sec-icon {
    width: 25px !important;
    height: 25px !important;
    border-radius: 6px !important;
    background: rgba(255, 210, 76, 0.1) !important;
    border: 1px solid rgba(255, 210, 76, 0.38) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
}
.cm-sec-icon i,
.cm-sec-title > i {
    font-size: 13px !important;
    color: #ef4444 !important; /* Icon màu đỏ tươi chuẩn ảnh mẫu */
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.55)) !important;
}
.cm-sec-title > i:not(.cm-sec-icon i) {
    width: 25px !important;
    height: 25px !important;
    border-radius: 6px !important;
    background: rgba(255, 210, 76, 0.1) !important;
    border: 1px solid rgba(255, 210, 76, 0.38) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
}

/* Danh sách chức năng 3 cột tinh gọn */
.tintuc-list-3col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 18px !important; /* Tạo khoảng cách 12px giữa hàng trên và dưới */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.tintuc-list-3col li {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important; /* Xóa đường gạch cũ dưới đáy li */
	/* border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important; */
}
.tintuc-list-3col li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;          /* Chiếm trọn bề ngang cột */
    min-height: 62px !important;     /* Chiều cao sàn chuẩn, giúp ô 3 dòng hay 4 dòng đều cân đối */
    box-sizing: border-box !important; /* Giữ padding và viền không làm vỡ khung */
    padding: 10px 10px !important;
    text-decoration: none !important;
    color: #f8fafc !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
    border: 1px dashed #4a4f57 !important; /* Đường viền dash bạn vừa thêm */
}
.tintuc-list-3col li a:hover {
	border-color: rgba(255, 210, 76, 0.6) !important; /* sáng vàng gold khi hover */
    background: rgba(255, 255, 255, 0.05) !important;
    padding-left: 10px !important;
}
.tintuc-list-3col li a:hover div {
    color: #ffd24c !important;
}
.tintuc-list-3col li a i {
    color: #ef4444 !important; /* Icon đỏ tươi gaming */
    font-size: 15px !important;
    width: 22px !important;
    text-align: center !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}
.tintuc-list-3col li a:hover i {
    transform: scale(1.15);
    color: #ff6b6b !important;
}
.tintuc-list-3col li a div {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d1d5db !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}
.tintuc-list-3col li a div span {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
}

@media (max-width: 800px) {
    .tintuc-list-3col {
        grid-template-columns: 1fr !important;
    }
}

/* =======================================================
   6. BẢO MẬT TÀI KHOẢN (ACCOUNT SECURITY SECTION)
   ======================================================= */
.acc-security-box {
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    background: #1f2226 !important;
    border: 1px solid #4a4f57 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-top: 18px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.acc-security-title {
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffd24c !important;
    border-bottom: 1px solid #4a4f57 !important;
    padding-bottom: 10px !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0.4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.acc-security-title span.acc-user-tag {
    color: #ff6b6b !important;
    font-weight: 700 !important;
}

.acc-security-box .mu-form-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.acc-security-box .mu-form-row label {
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    width: 170px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    padding-right: 16px !important;
    padding-top: 7px !important;
}

.acc-security-box .mu-input-group {
    width: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.acc-security-box .mu-input-style {
    font-family: 'Roboto', Tahoma, monospace !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #14171a !important;
    border: 1px solid #363b42 !important;
    border-radius: 4px !important;
    padding: 7px 12px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    outline: none !important;
}

.acc-security-link {
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.acc-security-link i {
    color: #ef4444 !important;
    font-size: 11px !important;
}

.acc-security-link:hover {
    color: #ffd24c !important;
    transform: translateX(2px) !important;
}

.acc-security-note {
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    font-size: 11.5px !important;
    color: #7b808d !important;
    margin-top: 6px !important;
    font-style: italic !important;
    line-height: 1.4 !important;
}