/* Võ Lâm MMO - Commercial UI Stylesheet */

.mmo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 12, 10, 0.88);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'IBM Plex Mono', system-ui, sans-serif;
    color: #e8dcc8;
}

.mmo-box {
    width: 90%;
    max-width: 480px;
    background: #141b17;
    border: 2px solid #8c6e3b;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 10px rgba(140, 110, 59, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mmo-header {
    background: linear-gradient(180deg, #2b2216 0%, #171510 100%);
    border-bottom: 2px solid #8c6e3b;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mmo-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffd875;
    text-shadow: 0 1px 3px #000;
}

.mmo-close {
    background: none;
    border: none;
    color: #ffd875;
    font-size: 1.2rem;
    cursor: pointer;
}

.mmo-body {
    padding: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

.mmo-form-group {
    margin-bottom: 12px;
}

.mmo-form-group label {
    display: block;
    font-size: 0.85rem;
    color: #c9baa2;
    margin-bottom: 4px;
}

.mmo-input, .mmo-select {
    width: 100%;
    box-sizing: border-box;
    background: #0a0e0c;
    border: 1px solid #4d402b;
    border-radius: 4px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.95rem;
}

.mmo-input:focus, .mmo-select:focus {
    outline: none;
    border-color: #ffd875;
}

.mmo-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #a87e38 0%, #614619 100%);
    color: #fff;
    border: 1px solid #e0be75;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin-top: 8px;
}

.mmo-btn:hover {
    background: linear-gradient(180deg, #c49442 0%, #75551f 100%);
}

.mmo-btn-secondary {
    background: #2a332d;
    border-color: #4a594e;
    color: #ccc;
    margin-top: 6px;
}

.mmo-tabs {
    display: flex;
    border-bottom: 1px solid #4d402b;
    margin-bottom: 12px;
}

.mmo-tab-btn {
    flex: 1;
    padding: 8px;
    background: #0f1411;
    border: none;
    color: #999;
    font-weight: bold;
    cursor: pointer;
}

.mmo-tab-btn.active {
    color: #ffd875;
    border-bottom: 2px solid #ffd875;
    background: #1a241e;
}

.mmo-char-card {
    background: #1a221d;
    border: 1px solid #445447;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mmo-char-card:hover {
    border-color: #ffd875;
    background: #232f27;
}

.mmo-top-actions {
    position: absolute;
    top: 56px;
    left: 10px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(14, 20, 16, 0.92);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 20px;
    padding: 3px 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    user-select: none;
    touch-action: none;
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    scrollbar-width: none;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.mmo-top-actions::-webkit-scrollbar {
    display: none;
}

.mmo-top-actions.dragging {
    opacity: 0.9;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.9);
    cursor: grabbing;
}

.mmo-drag-handle {
    cursor: grab;
    color: #ffd875;
    font-size: 1.1rem;
    padding: 0 5px;
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity 0.2s;
    user-select: none;
}

.mmo-drag-handle:hover {
    opacity: 1;
}

.mmo-actions-content {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mmo-top-actions.collapsed .mmo-actions-content > button:not(#mmoBtnServer) {
    display: none !important;
}

.mmo-collapse-btn {
    background: rgba(255, 216, 117, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    color: #ffd875;
    font-size: 0.75rem;
    padding: 2px 7px;
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.2s;
    user-select: none;
}

.mmo-collapse-btn:hover {
    background: #8c6e3b;
    color: #fff;
}

.mmo-action-pill {
    background: rgba(20, 27, 23, 0.85);
    border: 1px solid #8c6e3b;
    border-radius: 20px;
    padding: 3px 8px;
    color: #ffd875;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.mmo-action-pill:hover {
    background: #8c6e3b;
    color: #fff;
}

.mmo-socket-badge {
    background: rgba(10, 14, 12, 0.9);
    border: 1px solid #4d402b;
    border-radius: 20px;
    padding: 3px 10px;
    color: #ffd875;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.mmo-socket-badge.online {
    border-color: #22c55e;
    color: #4ade80;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.mmo-socket-badge.offline {
    border-color: #ef4444;
    color: #f87171;
}

/* Server Selection Styles */
.mmo-server-card {
    background: #141c17;
    border: 1px solid #3d4a3e;
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mmo-server-card:hover {
    border-color: #ffd875;
    background: #1d2720;
}

.mmo-server-card.active-server {
    border-color: #ffd875;
    background: #202b23;
    box-shadow: 0 0 8px rgba(255, 216, 117, 0.25);
}

.mmo-server-card.maint-server {
    opacity: 0.55;
    cursor: not-allowed;
    background: #131715;
}

.server-badge {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.server-badge.new {
    background: #dc2626;
    color: #fff;
}

.server-badge.rec {
    background: #d97706;
    color: #fff;
}

.server-status-pill {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.server-status-pill.smooth {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid #22c55e;
}

.server-status-pill.good {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border: 1px solid #eab308;
}

.server-status-pill.crowded {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid #ef4444;
}

.server-status-pill.maint {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid #64748b;
}

/* ========================================================
   Dual Column Item Compare Modal (Trang bị đang xem & đang mặc)
   ======================================================== */
.item-preview-modal .mbox {
    max-width: 860px !important;
    width: 95vw !important;
    padding: 16px 18px !important;
    border: 1px solid #b8924b !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), inset 0 1px rgba(255, 216, 117, 0.2) !important;
}

.item-compare-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

@media (max-width: 720px) {
    .item-compare-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.item-col {
    background: rgba(14, 22, 18, 0.85);
    border: 1px solid rgba(140, 110, 59, 0.45);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.item-col.item-col-view {
    border-color: rgba(255, 216, 117, 0.55);
    background: linear-gradient(135deg, rgba(22, 34, 28, 0.88), rgba(12, 18, 15, 0.92));
    box-shadow: inset 0 1px rgba(255, 216, 117, 0.12);
}

.item-col.item-col-worn {
    border-color: rgba(96, 165, 250, 0.45);
    background: linear-gradient(135deg, rgba(16, 24, 28, 0.82), rgba(10, 15, 18, 0.92));
    box-shadow: inset 0 1px rgba(96, 165, 250, 0.12);
}

.item-single-layout {
    background: rgba(14, 22, 18, 0.85);
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.item-col-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.col-pill {
    font-size: 0.78rem;
    font-weight: bold;
    padding: 3px 9px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.col-pill-view {
    background: rgba(255, 216, 117, 0.2);
    color: #ffd875;
    border: 1px solid #ffd875;
}

.col-pill-worn {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
    border: 1px solid #60a5fa;
}

.col-slot-name {
    font-size: 0.75rem;
    color: #9ca3af;
}

.item-worn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 16px;
    height: 100%;
    min-height: 160px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
}

.worn-empty-icon {
    font-size: 2.2rem;
    opacity: 0.45;
    margin-bottom: 8px;
}

.item-worn-empty h4 {
    color: #e5e7eb;
    margin: 0 0 6px 0;
    font-size: 0.95rem;
}

/* Stat badges */
.stat-diff {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.3;
}

.stat-diff-up {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.55);
}

.stat-diff-down {
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.55);
}

.stat-diff-eq {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.stat-diff-new {
    background: rgba(234, 179, 8, 0.28);
    color: #fde047;
    border: 1px solid #eab308;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.35);
}

.stat-diff-lost {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.item-compare-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* Auto Claim All button in rewards */
.reward-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.reward-header-flex .desc {
    margin: 0 !important;
    flex: 1;
}

.claim-all-btn {
    white-space: nowrap !important;
    font-weight: bold !important;
    font-size: 0.8rem !important;
    padding: 5px 14px !important;
    border-radius: 4px !important;
    border: 1px solid #eab308 !important;
    color: #fde047 !important;
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.25), rgba(202, 138, 4, 0.15)) !important;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.25) !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.claim-all-btn:hover {
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.45), rgba(202, 138, 4, 0.3)) !important;
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.5) !important;
    transform: translateY(-1px);
}

/* In-Game Popup Alert & Confirmation Modal */
.mmo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 9, 0.85);
    backdrop-filter: blur(6px);
    z-index: 200000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'IBM Plex Mono', system-ui, sans-serif;
    color: #e8dcc8;
    animation: mmoFadeIn 0.15s ease-out;
}

@keyframes mmoFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.mmo-popup-box {
    width: 90%;
    max-width: 440px;
    background: #141b17;
    border: 2px solid #8c6e3b;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.95), 0 0 15px rgba(245, 158, 11, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mmo-popup-header {
    background: linear-gradient(180deg, #2b2216 0%, #171510 100%);
    border-bottom: 2px solid #8c6e3b;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mmo-popup-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffd875;
    text-shadow: 0 1px 3px #000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmo-popup-close {
    background: none;
    border: none;
    color: #ffd875;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.mmo-popup-close:hover {
    color: #fff;
}

.mmo-popup-body {
    padding: 20px 20px 16px 20px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f3ede2;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
}

.mmo-popup-body.error {
    color: #fca5a5;
    font-weight: 600;
}

.mmo-popup-footer {
    padding: 10px 16px 18px 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mmo-popup-btn {
    min-width: 130px;
    padding: 10px 22px;
    background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
    color: #fff;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    transition: all 0.15s ease;
}

.mmo-popup-btn:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
    transform: translateY(-1px);
}

.mmo-popup-btn.secondary {
    background: #232d26;
    border-color: #4d402b;
    color: #c9baa2;
}

.mmo-popup-btn.secondary:hover {
    background: #313d35;
    color: #fff;
}

/* Marketplace & Trade UI */
.market-modal-dialog {
    max-width: 720px !important;
    width: 95% !important;
}

.market-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: rgba(18, 26, 21, 0.7);
    border: 1px solid rgba(140, 110, 59, 0.35);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
}

.market-filter-bar .mmo-select {
    padding: 6px 10px;
    font-size: 0.85rem;
    background: #19221c;
    border: 1px solid #5a4625;
    color: #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
}

.market-item-card {
    background: linear-gradient(135deg, rgba(22, 32, 26, 0.95), rgba(14, 20, 16, 0.95));
    border: 1px solid rgba(140, 110, 59, 0.45);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
}

.market-item-card:hover {
    border-color: #ffd875;
    box-shadow: 0 0 12px rgba(255, 216, 117, 0.2);
    transform: translateY(-1px);
}

.market-item-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.market-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.market-price-tag {
    font-size: 0.95rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

.market-price-silver {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.3);
}

.market-price-knb {
    color: #ffd875;
    text-shadow: 0 0 6px rgba(255, 216, 117, 0.4);
}

.market-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 4px;
    margin-right: 4px;
}

.market-badge-series {
    border: 1px solid currentColor;
}

.market-badge-slot {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.market-badge-valuable {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid #10b981;
}

.market-badge-unqualified {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid #ef4444;
}

.market-inspect-modal-box {
    background: #141c17;
    border: 2px solid #8c6e3b;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.market-attrs-list {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 10px 0;
}

/* Floating Sub-Modal (On top of market) */
.mmo-submodal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 9, 0.75);
    backdrop-filter: blur(4px);
    z-index: 150000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: mmoFadeIn 0.15s ease-out;
}

.mmo-submodal-box {
    max-width: 540px !important;
    width: 92% !important;
    background: #141b17;
    border: 2px solid #8c6e3b;
    border-radius: 8px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), 0 0 15px rgba(245, 158, 11, 0.45) !important;
}

/* Equipment Icon Box in Marketplace */
.market-item-icon-box {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: radial-gradient(circle, #1a251e 0%, #0d1410 100%);
    border: 2px solid #6b7280;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.market-item-card:hover .market-item-icon-box {
    transform: scale(1.05);
}

.market-item-icon-box.rarity-border-3 {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), inset 0 0 8px rgba(245, 158, 11, 0.2);
}

.market-item-icon-box.rarity-border-2 {
    border-color: #c084fc;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.45), inset 0 0 8px rgba(192, 132, 252, 0.2);
}

.market-item-icon-box.rarity-border-1 {
    border-color: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

.market-item-icon-box.rarity-border-0 {
    border-color: #9ca3af;
}

.market-item-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.market-icon-enhance-tag {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 0.68rem;
    font-weight: bold;
    color: #ffd875;
    background: rgba(0, 0, 0, 0.88);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1.2;
    border: 1px solid rgba(255, 216, 117, 0.45);
    text-shadow: 0 0 4px #000;
}

.market-icon-series-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 4px currentColor;
}





/* =========================================================
   VÕ LÂM 2.0 UI ENHANCEMENTS & SPECIALIZED MODALS
   ========================================================= */

/* Compact / Cinema mode toggle button ⛶ */
#compactBtn {
    border: 2px solid #b9974f !important;
    background: radial-gradient(#6b5530, #2a1f0e) !important;
    color: #ffe9b0 !important;
    box-shadow: 0 0 10px rgba(185, 151, 79, 0.5), inset 0 0 4px rgba(255, 216, 117, 0.2) !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#compactBtn:hover {
    filter: brightness(1.25) !important;
    box-shadow: 0 0 16px rgba(255, 216, 117, 0.8), inset 0 0 8px rgba(255, 216, 117, 0.4) !important;
    transform: scale(1.08) !important;
}

body.compact #compactBtn {
    border-color: #ffd875 !important;
    background: radial-gradient(#8c6e3b, #3b2a14) !important;
    box-shadow: 0 0 16px rgba(255, 216, 117, 0.85) !important;
}

/* Codex / Bách Khoa Top Bar Button 📖 */
#codexTopBtn {
    border: 2px solid #5a9bd5 !important;
    background: radial-gradient(#204a6e, #0e2133) !important;
    color: #cce7ff !important;
    box-shadow: 0 0 10px rgba(90, 155, 213, 0.5), inset 0 0 4px rgba(204, 231, 255, 0.2) !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#codexTopBtn:hover {
    filter: brightness(1.25) !important;
    box-shadow: 0 0 16px rgba(120, 195, 255, 0.8), inset 0 0 8px rgba(204, 231, 255, 0.4) !important;
    transform: scale(1.08) !important;
}

body.u2m #codexTopBtn {
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
}

/* Feedback & Roadmap Top Bar Button 💡 */
#feedbackTopBtn {
    border: 2px solid #ca8a04 !important;
    background: radial-gradient(#634514, #241907) !important;
    color: #fef08a !important;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.4), inset 0 0 4px rgba(254, 240, 138, 0.3) !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#feedbackTopBtn:hover {
    filter: brightness(1.25) !important;
    box-shadow: 0 0 16px rgba(250, 204, 21, 0.8), inset 0 0 8px rgba(254, 240, 138, 0.5) !important;
    transform: scale(1.08) !important;
}

body.u2m #feedbackTopBtn {
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
}


/* Top HUD Martial Arts Bars (Võ Lâm 2.0) */
#top .bar.hp i, #hud .bar.hp i, body.u20 #hud .bar.hp i {
    background: linear-gradient(180deg, #ff5252 0%, #e53935 45%, #8b0000 100%) !important;
    box-shadow: 0 0 8px rgba(239, 83, 80, 0.7) !important;
}

#top .bar.mp i, #hud .bar.mp i, body.u20 #hud .bar.mp i {
    background: linear-gradient(180deg, #64b5f6 0%, #1e88e5 45%, #0d47a1 100%) !important;
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.7) !important;
}

#top .bar.xp i, #hud .bar.xp i, body.u20 #hud .bar.xp i {
    background: linear-gradient(180deg, #ffe082 0%, #fbc02d 45%, #b78103 100%) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.7) !important;
}

#top .bar, #hud .bar, body.u20 #hud .bar {
    border: 1px solid #7d6a3c !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    background: #101412 !important;
}

#hud .bar i, body.u20 #hud .bar i {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    z-index: 1 !important;
}

#hud .bar span, body.u20 #hud .bar span {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Top Action Pills (Võ Lâm 2.0) */
.mmo-top-actions {
    background: linear-gradient(180deg, rgba(42, 34, 20, 0.96), rgba(18, 15, 10, 0.97)) !important;
    border: 1.5px solid #8c7440 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), 0 0 10px rgba(140, 116, 64, 0.35) !important;
    backdrop-filter: blur(10px) !important;
}

.mmo-action-pill {
    background: radial-gradient(circle at center, #352a1a, #1a150e) !important;
    border: 1px solid #7a6336 !important;
    color: #e8dcc8 !important;
    transition: all 0.15s ease !important;
    position: relative;
}

.mmo-action-pill:hover {
    border-color: #ffd875 !important;
    color: #ffd875 !important;
    box-shadow: 0 0 8px rgba(255, 216, 117, 0.45) !important;
    transform: translateY(-1px) !important;
}

.mmo-pill-badge {
    background: #ef4444;
    color: #fff;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 0 5px;
    margin-left: 4px;
    line-height: 14px;
    display: inline-block;
    box-shadow: 0 0 4px #ef4444;
}

/* Chat Party Tab & Interaction */
.wc-tabs .wc-tab[data-chat-tab="party"].active {
    background: linear-gradient(180deg, #164e29, #0d2c18) !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.35) !important;
}

.wc-sender-link:hover {
    text-decoration: underline !important;
    filter: brightness(1.25) !important;
}

/* Mã Trường Modal Styling */
.mmo-box.mmo-horse-box {
    max-width: 600px !important;
    max-height: 88vh !important;
}

.mmo-tabs-row {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid #8c6e3b;
    padding-bottom: 8px;
}

.mmo-tab-btn {
    flex: 1;
    padding: 8px 12px;
    background: #181d19;
    border: 1px solid #444;
    border-radius: 6px 6px 0 0;
    color: #aaa;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mmo-tab-btn.active {
    background: linear-gradient(180deg, #3d2f19, #1e180d);
    border-color: #ffd875;
    color: #ffd875;
    box-shadow: 0 -2px 8px rgba(255, 216, 117, 0.25);
}

.mmo-horse-equipped-card {
    background: linear-gradient(135deg, #2b2214, #141814);
    border: 1.5px solid #b9974f;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 0 12px rgba(185, 151, 79, 0.3);
}

.mmo-horse-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111714;
    border: 1px solid #2b352e;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    transition: background 0.15s ease;
}

.mmo-horse-row:hover {
    background: #17201b;
    border-color: #8c7440;
}

.mmo-collection-chip.owned {
    box-shadow: 0 0 6px currentColor;
    font-weight: bold;
}

/* Sát Thủ Đường Modal Styling */
.mmo-box.mmo-assassin-box {
    max-width: 560px !important;
    max-height: 88vh !important;
}

.mmo-assassin-banner {
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.3);
}

/* Đồng Hành & Đấu Thú Modal Styling */
.mmo-box.companion-modal-dialog {
    max-width: 680px !important;
    max-height: 90vh !important;
}

/* Hide floating actions by default to keep clean volamidle 2.0 interface */
.mmo-top-actions {
    display: none !important;
}

/* Top Bar Buttons */
#ktcBtn {
    background: linear-gradient(180deg, #c49a3a 0%, #684a12 100%) !important;
    border: 1px solid #ffe28a !important;
    color: #fff9e6 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}
#ktcBtn:hover {
    filter: brightness(1.2) !important;
    box-shadow: 0 0 8px rgba(255,215,0,0.6) !important;
}
#actBtn {
    background: linear-gradient(180deg, #a32424 0%, #521111 100%) !important;
    border: 1px solid #ff7b7b !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
    transition: all 0.2s ease !important;
}
#actBtn:hover {
    filter: brightness(1.25) !important;
    box-shadow: 0 0 8px rgba(255,69,0,0.6) !important;
}

/* Dã Tẩu Quest Keep Item Badge */
.datau-keep-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    font-size: 11px;
    line-height: 1;
    z-index: 5;
    background: rgba(0,0,0,0.7);
    border-radius: 3px;
    padding: 1px;
    filter: drop-shadow(0 0 2px #ffd700);
}

/* MMO Hub Dashboard in Tab Khác (#t-more) */
.mmo-hub-dashboard {
    padding: 8px 4px;
    color: #e8dcc8;
}
.mmo-hub-header {
    background: linear-gradient(180deg, #2a2216, #141815);
    border: 1px solid #7d6a3c;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mmo-hub-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd875;
}
.mmo-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.mmo-hub-card {
    background: linear-gradient(180deg, #1b211d 0%, #101412 100%);
    border: 1px solid #3c483f;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 95px;
    position: relative;
    overflow: hidden;
}
.mmo-hub-card:hover {
    border-color: #ffd875;
    background: linear-gradient(180deg, #26302a 0%, #151b18 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 10px rgba(255,216,117,0.2);
}
.mmo-hub-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mmo-hub-card-icon {
    font-size: 26px;
    line-height: 1;
}
.mmo-hub-card-info h4 {
    margin: 0 0 3px 0;
    font-size: 13.5px;
    color: #ffe9b0;
}
.mmo-hub-card-info p {
    margin: 0;
    font-size: 11px;
    color: #9aa89e;
    line-height: 1.3;
}
.mmo-hub-card-btn {
    align-self: flex-end;
    margin-top: 8px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #ffd875;
    background: #2a2216;
    border: 1px solid #7d6a3c;
    border-radius: 4px;
}
.mmo-hub-card:hover .mmo-hub-card-btn {
    background: #ffd875;
    color: #101412;
}

/* Đổi Phái Modal */
.doiphai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.doiphai-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #151b18;
    border: 1.5px solid #3c483f;
    border-radius: 6px;
    padding: 8px 12px;
    color: #e8dcc8;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.doiphai-btn:hover:not(:disabled) {
    border-color: #ffd875;
    background: #202b25;
    transform: translateY(-1px);
}
.doiphai-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.doiphai-btn.current {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

/* =============================================================
   PvP Lôi Đài 1vs1 Styles
   ============================================================= */
.pvp-box {
    max-width: 780px !important;
    width: 95% !important;
    border: 2px solid #eab308 !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), 0 0 15px rgba(234, 179, 8, 0.4) !important;
}

.pvp-header {
    background: linear-gradient(180deg, #422006 0%, #1c1917 100%) !important;
    border-bottom: 2px solid #ca8a04 !important;
}

.pvp-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid #3f3f46;
    padding-bottom: 6px;
}

.pvp-tab-btn {
    flex: 1;
    padding: 8px 12px;
    background: #1c1917;
    border: 1px solid #44403c;
    border-radius: 4px;
    color: #d6d3d1;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.pvp-tab-btn.active {
    background: linear-gradient(180deg, #ca8a04 0%, #854d0e 100%);
    color: #fff;
    border-color: #fef08a;
    box-shadow: 0 2px 8px rgba(202, 138, 4, 0.5);
}

.pvp-my-stats-card {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, rgba(30, 27, 24, 0.9) 0%, rgba(15, 13, 11, 0.9) 100%);
    border: 1px solid #78350f;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    text-align: center;
}

.pvp-stat-item b {
    display: block;
    font-size: 1.25rem;
    color: #fde047;
    text-shadow: 0 1px 2px #000;
}

.pvp-stat-item span {
    font-size: 0.8rem;
    color: #a8a29e;
}

.pvp-queue-banner {
    text-align: center;
    padding: 16px;
    background: radial-gradient(circle, rgba(120, 53, 15, 0.25) 0%, rgba(20, 16, 12, 0.6) 100%);
    border: 1px dashed #ca8a04;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pvp-big-match-btn {
    padding: 12px 28px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border: 2px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.6);
    transition: all 0.2s;
}

.pvp-big-match-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 22px rgba(220, 38, 38, 0.8);
}

.pvp-fighters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.pvp-fighter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1917;
    border: 1px solid #44403c;
    border-radius: 6px;
    padding: 8px 12px;
}

.pvp-fighter-row:hover {
    border-color: #ca8a04;
    background: #292524;
}

.pvp-fighter-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pvp-fighter-name {
    font-weight: bold;
    color: #fef08a;
}

.pvp-fighter-details {
    font-size: 0.8rem;
    color: #a8a29e;
}

.pvp-challenge-btn {
    padding: 5px 12px;
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border: 1px solid #fde68a;
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

/* Fullscreen Duel Stage Overlay */
.pvp-duel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
    font-family: 'IBM Plex Mono', system-ui, sans-serif;
}

.pvp-top-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.6) 80%, transparent 100%);
}

.pvp-player-card {
    flex: 1;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pvp-player-card.right {
    text-align: right;
    align-items: flex-end;
}

.pvp-player-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fef08a;
    text-shadow: 0 1px 3px #000;
}

.pvp-hp-track {
    width: 100%;
    height: 22px;
    background: #27272a;
    border: 1.5px solid #71717a;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px #000;
}

.pvp-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
    transition: width 0.3s ease;
}

.pvp-hp-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}

.pvp-duel-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

.pvp-clock-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid #eab308;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fef08a;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.6);
}

.pvp-clock-swords {
    font-size: 1.8rem;
    margin-bottom: 2px;
    animation: pvpPulse 1.5s infinite;
}

@keyframes pvpPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.pvp-middle-arena {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.pvp-countdown-big {
    font-size: 6rem;
    font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 30px #f87171, 0 0 10px #000;
    animation: pvpPop 0.8s ease-out;
}

@keyframes pvpPop {
    0% { transform: scale(2.5); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.pvp-combat-ticker {
    width: 90%;
    max-width: 600px;
    height: 120px;
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(202, 138, 4, 0.4);
    border-radius: 6px;
    padding: 10px;
    overflow-y: auto;
    font-size: 0.85rem;
    color: #e4e4e7;
    line-height: 1.5;
}

.pvp-bottom-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(0deg, rgba(10, 10, 10, 0.95) 0%, transparent 100%);
}

.pvp-skill-btn {
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #ca8a04 0%, #854d0e 100%);
    border: 2px solid #fde047;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(202, 138, 4, 0.6);
    transition: transform 0.1s;
}

.pvp-skill-btn:active {
    transform: scale(0.95);
}

.pvp-surrender-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
    color: #cbd5e1;
    background: #334155;
    border: 1px solid #64748b;
    border-radius: 6px;
    cursor: pointer;
}

/* PvP Visual Duel Arena Canvas */
.pvp-canvas-wrapper {
    position: relative;
    width: 860px;
    max-width: 95vw;
    height: 400px;
    max-height: 52vh;
    border: 2px solid #ca8a04;
    border-radius: 8px;
    background: #0f0d0c;
    box-shadow: 0 0 25px rgba(202, 138, 4, 0.35), inset 0 0 40px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    margin-bottom: 12px;
}

#pvpArenaCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.pvp-canvas-banner {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.88);
    border: 1.5px solid #eab308;
    color: #fef08a;
    font-size: 1.15rem;
    font-weight: 900;
    padding: 6px 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
    pointer-events: none;
    z-index: 10;
    letter-spacing: 1px;
}

.pvp-skill-banner {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.85) 80%, transparent);
    color: #fbbf24;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 4px 30px;
    text-shadow: 0 0 10px #f59e0b, 0 1px 3px #000;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.2s;
    opacity: 0;
}

.pvp-playback-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pvp-ctrl-btn {
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.pvp-ctrl-btn:hover {
    background: #334155;
    border-color: #94a3b8;
}

.pvp-ctrl-btn.gold {
    color: #fef08a;
    background: linear-gradient(180deg, #854d0e 0%, #713f12 100%);
    border-color: #ca8a04;
    box-shadow: 0 0 8px rgba(202, 138, 4, 0.4);
}

.pvp-ctrl-btn.gold:hover {
    background: linear-gradient(180deg, #a16207 0%, #854d0e 100%);
}



/* ========================================================
   PVP IN-WORLD BATTLE HUD (CANVAS NATIVE DUEL OVERLAY)
   ======================================================== */
.pvp-battle-hud {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 120;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(20, 16, 13, 0.96) 0%, rgba(10, 8, 7, 0.94) 100%);
    border: 1.5px solid #ca8a04;
    border-radius: 10px;
    padding: 8px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(202, 138, 4, 0.35);
    backdrop-filter: blur(4px);
    pointer-events: auto;
    animation: pvpSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pvpSlideDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pvp-hud-fighter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pvp-hud-fighter.right {
    flex-direction: row-reverse;
    text-align: right;
}

.pvp-hud-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #1c1917;
    border: 1.5px solid #eab308;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}

.pvp-hud-info {
    min-width: 140px;
}

.pvp-hud-name {
    font-weight: 800;
    font-size: 0.92rem;
    color: #fef08a;
    letter-spacing: 0.5px;
}

.pvp-hud-lvl {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.pvp-hud-sect {
    font-size: 0.78rem;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.pvp-hud-bar-track {
    position: relative;
    height: 14px;
    width: 180px;
    max-width: 25vw;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #52525b;
    border-radius: 7px;
    overflow: hidden;
}

.pvp-hud-bar-fill {
    height: 100%;
    transition: width 0.25s ease-out;
    border-radius: 6px;
}

.pvp-hud-bar-fill.my {
    background: linear-gradient(90deg, #15803d 0%, #22c55e 100%);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.pvp-hud-bar-fill.opp {
    background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.pvp-hud-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px #000000;
}

.pvp-hud-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    min-width: 160px;
}

.pvp-hud-title {
    font-size: 0.92rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
    letter-spacing: 1px;
}

.pvp-hud-round {
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    margin: 2px 0 6px;
}

.pvp-hud-controls {
    display: flex;
    gap: 8px;
}

.pvp-hud-btn {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 4px;
    cursor: pointer;
    background: #27272a;
    color: #e4e4e7;
    border: 1px solid #52525b;
    transition: all 0.15s;
}

.pvp-hud-btn:hover {
    background: #3f3f46;
    border-color: #eab308;
    color: #fef08a;
}

.pvp-hud-btn.skip {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #fecaca;
}

.pvp-hud-btn.skip:hover {
    background: #991b1b;
    border-color: #f87171;
    color: #ffffff;
}

/* ========================================================
   OPEN-WORLD MULTIPLAYER & FREE PK SYSTEM STYLES
   ======================================================== */
.pk-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    user-select: none;
    z-index: 10;
}

.pk-mode-peace {
    background: linear-gradient(180deg, #064e3b 0%, #022c22 100%);
    border: 1px solid #10b981;
    color: #6ee7b7;
}
.pk-mode-peace:hover {
    background: linear-gradient(180deg, #047857 0%, #064e3b 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.pk-mode-guild {
    background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
    border: 1px solid #f59e0b;
    color: #fde68a;
}
.pk-mode-guild:hover {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.pk-mode-slaughter {
    background: linear-gradient(180deg, #991b1b 0%, #450a0a 100%);
    border: 1px solid #ef4444;
    color: #fecaca;
    animation: pkPulse 1.8s infinite;
}
.pk-mode-slaughter:hover {
    background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}

@keyframes pkPulse {
    0% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.9); }
    100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
}

.pk-select-box {
    max-width: 440px;
    background: #141414;
    border: 2px solid #8c6e3b;
    border-radius: 8px;
}

.pk-safe-notice {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid #eab308;
    color: #fef08a;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

.pk-mode-card {
    background: #1c1917;
    border: 1px solid #44403c;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.pk-mode-card:hover:not(.disabled) {
    border-color: #fbbf24;
    background: #292524;
    transform: translateY(-1px);
}

.pk-mode-card.selected {
    border-color: #fbbf24;
    background: #2a2212;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}

.pk-mode-card.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pk-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pk-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
}
.pk-badge.green { background: #064e3b; color: #6ee7b7; border: 1px solid #10b981; }
.pk-badge.yellow { background: #78350f; color: #fde68a; border: 1px solid #f59e0b; }
.pk-badge.red { background: #7f1d1d; color: #fecaca; border: 1px solid #ef4444; }

.pk-check {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fbbf24;
}

.pk-mode-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #a8a29e;
    line-height: 1.45;
}

.pk-info-footer {
    border-top: 1px solid #292524;
    padding-top: 10px;
    margin-top: 8px;
    text-align: right;
    font-size: 0.8rem;
    color: #d6d3d1;
}

/* PK Death Modal */
.pk-death-overlay {
    background: rgba(15, 5, 5, 0.92);
}

.pk-death-box {
    max-width: 420px;
    background: #181111;
    border: 2px solid #ef4444;
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.4);
}

.pk-death-header {
    background: linear-gradient(180deg, #450a0a 0%, #1c0505 100%);
    border-bottom: 1px solid #7f1d1d;
}

.pk-skull-icon {
    font-size: 2.8rem;
    margin-top: 4px;
    animation: pkFloat 2s ease-in-out infinite;
}

@keyframes pkFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.pk-penalty-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed #7f1d1d;
    border-radius: 6px;
    padding: 10px;
    margin: 14px 0;
    text-align: left;
}

.pk-respawn-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.pk-btn-town {
    background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
    border-color: #22c55e;
    color: #f0fdf4;
}
.pk-btn-town:hover {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}

.pk-btn-here {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border-color: #f59e0b;
    color: #fef3c7;
}
.pk-btn-here:hover {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
}

/* ========================================================
   TARGET FRAME HUD (Chọn mục tiêu chiến đấu PK)
   ======================================================== */
.target-frame-hud {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 20, 0.94);
    border: 2px solid #8c6e3b;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 10px rgba(140, 110, 59, 0.35);
    backdrop-filter: blur(6px);
    max-width: 380px;
    width: calc(100% - 32px);
    transition: all 0.2s ease-in-out;
    pointer-events: auto;
    font-family: 'IBM Plex Mono', monospace, sans-serif;
}

.target-frame-hud.can-attack {
    border-color: #ef4444;
    box-shadow: 0 4px 25px rgba(239, 68, 68, 0.4), 0 0 10px rgba(239, 68, 68, 0.6);
}

.target-frame-hud.cannot-attack {
    border-color: #10b981;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 8px rgba(16, 185, 129, 0.4);
}

.target-avatar-box {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #0f1713;
    border: 1px solid #785a28;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.target-fac-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    background: #1e293b;
    color: #ffd875;
    border: 1px solid #785a28;
}

.target-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.target-top-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: bold;
}

.target-name {
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.target-level {
    color: #fbbf24;
    font-size: 0.78rem;
}

.target-pk-tag {
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
}
.target-pk-tag.peace { background: #064e3b; color: #6ee7b7; border: 1px solid #10b981; }
.target-pk-tag.guild { background: #78350f; color: #fde68a; border: 1px solid #f59e0b; }
.target-pk-tag.slaughter { background: #7f1d1d; color: #fecaca; border: 1px solid #ef4444; }

.target-hp-container {
    position: relative;
    width: 100%;
    height: 12px;
    background: #1e1e1e;
    border: 1px solid #3f3f46;
    border-radius: 3px;
    overflow: hidden;
}

.target-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
    transition: width 0.15s ease-out;
}

.target-hp-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 2px #000;
}

.target-status-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #94a3b8;
}

.target-atk-state {
    font-weight: bold;
}
.target-atk-state.can-attack { color: #f87171; }
.target-atk-state.safe-mode { color: #34d399; }

.target-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.target-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* ========================================================
   ASYNC GHOST ARENA (ĐẤU TRƯỜNG BẤT ĐỒNG BỘ) STYLES
   ======================================================== */
.arena-dashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arena-profile-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(40, 25, 10, 0.95) 0%, rgba(20, 15, 10, 0.95) 100%);
    border: 1px solid #ca8a04;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    flex-wrap: wrap;
    gap: 10px;
}

.arena-rank-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.arena-rank-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fde047;
    text-shadow: 0 0 10px rgba(234, 179, 8, 0.6);
}

.arena-profile-stats {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: #e2e8f0;
    flex-wrap: wrap;
}

.arena-profile-stats b {
    color: #fef08a;
}

.arena-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #44403c;
    flex-wrap: wrap;
    gap: 8px;
}

.arena-opponents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.arena-opp-card {
    background: linear-gradient(180deg, #1c1917 0%, #141210 100%);
    border: 1px solid #57534e;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: all 0.2s;
}

.arena-opp-card:hover {
    border-color: #eab308;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.arena-opp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
}

.arena-opp-rank {
    font-weight: 900;
    color: #fbbf24;
    font-size: 1rem;
}

.arena-opp-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.arena-opp-avatar {
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #78350f;
}

.arena-opp-name {
    font-weight: bold;
    color: #f8fafc;
    font-size: 0.95rem;
}

.arena-opp-power {
    font-size: 0.85rem;
    color: #38bdf8;
    font-weight: bold;
}

.arena-opp-element {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.element-metal { background: #854d0e; color: #fef08a; }
.element-wood { background: #166534; color: #86efac; }
.element-water { background: #155e75; color: #67e8f9; }
.element-fire { background: #991b1b; color: #fca5a5; }
.element-earth { background: #9a3412; color: #fdba74; }

.arena-fight-btn {
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border: 1px solid #f87171;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
    transition: all 0.15s;
}

.arena-fight-btn:hover {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    transform: scale(1.02);
}

.arena-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1917;
    border: 1px solid #44403c;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.arena-history-item.win {
    border-left: 4px solid #22c55e;
}

.arena-history-item.loss {
    border-left: 4px solid #ef4444;
}

.arena-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.arena-shop-item {
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.arena-shop-item:hover {
    border-color: #ca8a04;
}

.arena-shop-icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: #141210;
    border: 1px solid #52473b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.85);
    flex-shrink: 0;
}

.arena-shop-icon-box.rarity-border-3,
.arena-shop-icon-box.rarity-border-4 {
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.45), inset 0 0 6px rgba(245, 158, 11, 0.2);
}

.arena-shop-icon-box.rarity-border-2 {
    border-color: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.45), inset 0 0 6px rgba(192, 132, 252, 0.2);
}

.arena-shop-icon-box.rarity-border-1 {
    border-color: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.4), inset 0 0 6px rgba(96, 165, 250, 0.15);
}

.arena-shop-icon-box.rarity-border-0 {
    border-color: #9ca3af;
}

.arena-shop-icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.arena-icon-badge {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #ffd875;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 216, 117, 0.5);
    border-radius: 3px;
    padding: 0 3px;
    line-height: 1.1;
}

/* =============================================================
   Player Inspection & Equipment Detail Modal
   ============================================================= */
.inspect-modal-box {
    max-width: 440px !important;
    width: 95% !important;
    background: linear-gradient(135deg, #181511 0%, #100e0b 100%) !important;
    border: 2px solid #ca8a04 !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), 0 0 15px rgba(202, 138, 4, 0.35) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    overflow: hidden;
}

.inspect-char-header {
    background: linear-gradient(90deg, #2a2013 0%, #1c160e 100%);
    border-bottom: 1px solid #78350f;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.inspect-char-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inspect-char-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #14120e;
    border: 2px solid #eab308;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}

.inspect-char-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #cbd5e1;
    margin-top: 4px;
}

.inspect-char-stats-badge {
    background: rgba(0,0,0,0.5);
    border: 1px solid #44403c;
    border-radius: 4px;
    padding: 2px 8px;
}

.inspect-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 14px;
    max-height: 560px;
    overflow-y: auto;
}

.inspect-left-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.inspect-doll-wrapper {
    position: relative;
    width: 252px;
    margin: 0 auto;
}

.u2doll.inspect-doll {
    position: relative;
    width: 252px;
    height: 300px;
    margin: 0 auto;
    background: radial-gradient(ellipse at 50% 45%, #2b2d26, #0d0e0b 75%);
    border: 1px solid #5c5a45;
    box-shadow: inset 0 0 20px #000, 0 4px 15px rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    user-select: none;
}

.inspect-doll canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.65;
}

.inspect-doll .u2s.slot {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid #5c5a45 !important;
    border-radius: 0 !important;
    background: #0b0c0acc;
    box-shadow: inset 0 0 8px #000;
    font-size: 10px;
    color: #6f6c58;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.inspect-doll .u2s.slot:hover,
.inspect-doll .u2s.slot.active {
    border-color: #ffd24a !important;
    box-shadow: 0 0 12px #ffd24a, inset 0 0 6px #ffd24a88 !important;
    z-index: 5;
}

.inspect-doll .u2s.slot .it {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.inspect-doll .u2s.slot .it img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.inspect-enh-badge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 10px;
    font-weight: bold;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #ca8a04;
    border-radius: 2px;
    padding: 0 2px;
    line-height: 1.1;
    pointer-events: none;
}

.inspect-doll-hint {
    font-size: 11px;
    color: #ca8a04;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

.inspect-right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 340px;
}

.inspect-item-detail-panel {
    background: #14110d;
    border: 1px solid #4a3e2a;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 340px;
    max-height: 480px;
    overflow-y: auto;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.7);
}

.inspect-item-detail-panel::-webkit-scrollbar {
    width: 6px;
}
.inspect-item-detail-panel::-webkit-scrollbar-track {
    background: #14110d;
}
.inspect-item-detail-panel::-webkit-scrollbar-thumb {
    background: #ca8a04;
    border-radius: 3px;
}

.inspect-floating-tooltip {
    position: fixed;
    z-index: 100099;
    max-width: 330px;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    background: rgba(14, 18, 16, 0.96);
    border: 1px solid #ca8a04;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 0 12px rgba(202, 138, 4, 0.45);
    border-radius: 6px;
    padding: 10px 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    font-size: 11.5px;
    line-height: 1.4;
    color: #e2e8f0;
}

.inspect-floating-tooltip.show {
    opacity: 1;
}

.inspect-rarity-0 { color: #d1d5db !important; }
.inspect-rarity-1 { color: #60a5fa !important; }
.inspect-rarity-2 { color: #4ade80 !important; }
.inspect-rarity-3 { color: #c084fc !important; }
.inspect-rarity-4 { color: #fbbf24 !important; }
.inspect-rarity-5 { color: #22d3ee !important; }

.inspect-native-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inspect-native-card .idet {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #3d3324;
    padding-bottom: 8px;
}
.inspect-native-card .idet .pic {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border: 2px solid #ca8a04;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: #0c1210;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
}
.inspect-native-card .idet .pic img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}
.inspect-native-card .idet h4 {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
}
.inspect-native-card .idet small.dim {
    color: #94a3b8;
    font-size: 11px;
    display: block;
    margin-top: 3px;
}
.inspect-native-card .sl {
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.5;
    background: #110e0b;
    border: 1px solid #2d2417;
    border-radius: 5px;
    padding: 8px 10px;
}
.inspect-native-card .sl .b { color: #f1f5f9; }
.inspect-native-card .sl .m { color: #60a5fa; }
.inspect-native-card .sl .h { color: #94a3b8; }
.inspect-native-card .sl .h.on { color: #ffd700; font-weight: bold; }
.inspect-native-card .sl .rq { color: #ef4444; }
.inspect-native-card .sl .rng { color: #fbbf24; }

/* ==========================================================================
   COMMUNITY FEEDBACKS, VOTING, ROADMAP & CHANGELOGS MODAL STYLES
   ========================================================================== */
.feedback-modal-box {
    width: 95% !important;
    max-width: 820px !important;
    max-height: 88vh !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #0f0d0a !important;
    border: 1px solid #785a28 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(234, 179, 8, 0.25) !important;
    border-radius: 8px;
    overflow: hidden;
}

.feedback-header-banner {
    background: linear-gradient(180deg, #261e12 0%, #151109 100%);
    border-bottom: 1px solid #4a381b;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feedback-nav-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #14100a;
    border-bottom: 1px solid #382a14;
    overflow-x: auto;
}

.feedback-tab-btn {
    background: #1f180f;
    border: 1px solid #4a381b;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.feedback-tab-btn:hover {
    border-color: #f59e0b;
    color: #fde047;
    background: #2b2012;
}

.feedback-tab-btn.active {
    background: linear-gradient(180deg, #ca8a04 0%, #854d0e 100%);
    border-color: #ffd875;
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

.feedback-tab-badge {
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.feedback-content-area {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Feedback Item Cards */
.feedback-card {
    background: #17130d;
    border: 1px solid #3d2e16;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    gap: 14px;
    transition: border-color 0.15s ease;
}

.feedback-card:hover {
    border-color: #785a28;
}

.feedback-vote-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 65px;
}

.btn-upvote {
    width: 60px;
    background: #241b10;
    border: 1px solid #5a421e;
    border-radius: 6px;
    padding: 6px 4px;
    color: #ffd875;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: bold;
    transition: all 0.15s ease;
}

.btn-upvote:hover:not(:disabled) {
    background: #3b2a14;
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.btn-upvote.voted {
    background: #143520 !important;
    border-color: #22c55e !important;
    color: #4ade80 !important;
    cursor: default;
}

.btn-upvote .arrow {
    font-size: 14px;
    line-height: 1;
}

.btn-upvote .count {
    font-size: 14px;
}

.btn-upvote .lbl {
    font-size: 9px;
    font-weight: normal;
    opacity: 0.8;
}

.feedback-main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feedback-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-title-text {
    font-size: 15px;
    font-weight: bold;
    color: #fde047;
}

.feedback-tag {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 600;
}

.feedback-tag.feature { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.feedback-tag.balance { background: rgba(249, 115, 22, 0.2); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.4); }
.feedback-tag.ui { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
.feedback-tag.other { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }

.feedback-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.feedback-status-badge.open { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.4); }
.feedback-status-badge.in_progress { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid #0284c7; }
.feedback-status-badge.completed { background: rgba(234, 179, 8, 0.2); color: #ffd875; border: 1px solid #ca8a04; }
.feedback-status-badge.rejected { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }

.feedback-desc-text {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.5;
    word-break: break-word;
}

.feedback-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 6px;
}

.feedback-admin-notes {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    color: #ffd875;
    margin-top: 4px;
}

.feedback-admin-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #382c18;
    flex-wrap: wrap;
}

.feedback-admin-btn {
    font-size: 11px;
    padding: 3px 8px;
    background: #2b1f11;
    border: 1px solid #5a421e;
    color: #fde047;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feedback-admin-btn:hover {
    background: #3d2b16;
    border-color: #ffd875;
}

.feedback-admin-btn.delete {
    background: #3b1111;
    border-color: #7f1d1d;
    color: #fca5a5;
}

.feedback-admin-btn.delete:hover {
    background: #4c1d1d;
    border-color: #ef4444;
}

/* Changelog Cards */
.changelog-card {
    background: #17130d;
    border: 1px solid #4a381b;
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.changelog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #2d2212;
    padding-bottom: 8px;
}

.changelog-version-tag {
    background: linear-gradient(180deg, #ca8a04 0%, #78350f 100%);
    color: #ffd875;
    font-size: 12px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #ffd875;
    letter-spacing: 0.5px;
}

.changelog-date {
    color: #94a3b8;
    font-size: 12px;
}

.changelog-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
}

.changelog-body {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
    white-space: pre-wrap;
    background: #100d08;
    border: 1px solid #281d0f;
    border-radius: 5px;
    padding: 12px 14px;
}

/* Captcha Modal Dialog */
.captcha-dialog-box {
    width: 320px !important;
    background: #17130d !important;
    border: 1px solid #eab308 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95), 0 0 15px rgba(234, 179, 8, 0.4) !important;
    padding: 20px !important;
    border-radius: 8px;
    text-align: center;
}

.captcha-question-badge {
    display: inline-block;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fde047;
    background: #241c10;
    border: 2px dashed #ca8a04;
    border-radius: 8px;
    padding: 8px 24px;
    margin: 12px 0;
}

/* =========================================================================
   EMBEDDED CHAT FEEDBACK PANEL (#u20lines)
   ========================================================================= */
.chat-fb-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
    background: transparent;
    color: #ece4cf;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
}

.chat-fb-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: linear-gradient(180deg, #241c10 0%, #14110b 100%);
    border-bottom: 1px solid #5a4521;
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 6px;
}

.chat-fb-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.chat-fb-tabs::-webkit-scrollbar { display: none; }

.chat-fb-tab {
    background: #18150f;
    border: 1px solid #4a3a1f;
    color: #d1c5a5;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.chat-fb-tab:hover {
    background: #2b2214;
    color: #ffd875;
    border-color: #8c6d32;
}

.chat-fb-tab.active {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
    color: #000;
    font-weight: 800;
    border-color: #ffd875;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.chat-fb-tab .badge-num {
    background: rgba(0, 0, 0, 0.4);
    color: inherit;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
}

.chat-fb-tab.active .badge-num {
    background: rgba(0, 0, 0, 0.25);
    color: #000;
}

.chat-fb-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.chat-fb-btn-new {
    background: linear-gradient(180deg, #10b981 0%, #047857 100%);
    border: 1px solid #34d399;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.chat-fb-btn-new:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

.chat-fb-btn-refresh {
    background: #2a2215;
    border: 1px solid #5a4521;
    color: #d1c5a5;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}
.chat-fb-btn-refresh:hover {
    color: #ffd875;
    border-color: #ffd875;
}

.chat-fb-content {
    flex: 1;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.chat-fb-loading, .chat-fb-empty {
    text-align: center;
    padding: 30px 10px;
    color: #a89f88;
    font-size: 12px;
}

.chat-fb-item {
    display: flex;
    gap: 8px;
    background: rgba(22, 18, 12, 0.85);
    border: 1px solid #3d2f19;
    border-radius: 6px;
    padding: 8px 10px;
    transition: all 0.15s;
}

.chat-fb-item:hover {
    border-color: #785e2b;
    background: rgba(30, 24, 15, 0.95);
}

.chat-fb-item.voted {
    border-left: 3px solid #10b981;
}

.chat-fb-votecol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    padding-top: 2px;
}

.chat-btn-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1b160e;
    border: 1px solid #5a4521;
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 36px;
    cursor: pointer;
    transition: all 0.15s;
}

.chat-btn-vote:hover {
    border-color: #ffd875;
    background: #2a2012;
}

.chat-btn-vote .chat-vote-icon {
    font-size: 10px;
    color: #f59e0b;
    line-height: 1;
}

.chat-btn-vote .chat-vote-count {
    font-size: 12px;
    font-weight: 800;
    color: #ffd875;
    line-height: 1.2;
}

.chat-btn-vote.voted {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.chat-btn-vote.voted .chat-vote-icon,
.chat-btn-vote.voted .chat-vote-count {
    color: #34d399;
}

.chat-fb-infocol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-fb-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chat-fb-badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.chat-fb-badge.feature { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); }
.chat-fb-badge.balance { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); }
.chat-fb-badge.ui { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
.chat-fb-badge.other { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }

.chat-fb-title-txt {
    font-weight: 700;
    color: #ffd875;
    font-size: 12.5px;
    line-height: 1.3;
}

.chat-fb-desc-txt {
    color: #e2d9c0;
    font-size: 11.5px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-fb-reply-box {
    background: rgba(245, 158, 11, 0.08);
    border-left: 2px solid #f59e0b;
    padding: 4px 8px;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
    color: #fed7aa;
    margin-top: 2px;
}

.chat-fb-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #8c826b;
    margin-top: 2px;
}

/* Chat Changelogs Card */
.chat-cl-card {
    background: rgba(20, 16, 10, 0.9);
    border: 1px solid #4a381b;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-cl-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #332611;
    padding-bottom: 4px;
}

.chat-cl-ver {
    background: #ca8a04;
    color: #000;
    font-weight: 800;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
}

.chat-cl-title {
    font-weight: 700;
    color: #ffd700;
    font-size: 12px;
    flex: 1;
}

.chat-cl-date {
    font-size: 10px;
    color: #94a3b8;
}

.chat-cl-content {
    font-size: 11.5px;
    color: #cbd5e1;
    line-height: 1.45;
    padding-top: 2px;
}

.chat-cl-content div {
    margin-bottom: 2px;
}

/* Tab [data-lt="feedback"] button in #u20ct */
#u20ct button[data-lt="feedback"].on {
    background: linear-gradient(#f59e0b, #b45309)!important;
    border-color: #ffd875!important;
    color: #000!important;
    font-weight: bold!important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6)!important;
}
#u20ct button[data-lt="feedback"] {
    color: #ffd875;
}







/* Strictly hide Tống Kim and Nạp KNB buttons */
#tongkimTopBtn, #tkQuickBtn, #bTongKim, #u20tongkim, #mmoBtnTongKim, #mmoBtnRecharge, button[id*="tongkim"], button[id*="TongKim"], button[id*="recharge"], button[id*="Recharge"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}