/* ==========================================================================
   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) */
.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-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, span, label, td, th {
    color: #d1d5db !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
   ========================================================================== */
#respond {
    background: #4a4f57 !important;
    border: 1px solid #4a4f57 !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 *,
#rental_popup,
#rental_popup * {
    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 */
.popupCenter b,
.popupCenter strong,
#rental_popup b,
#rental_popup strong {
    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 * { 
    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: #1a66ff !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;
    }
}