/* =================================================================
   XH THEME — Tiên Hiệp UI (client)
   Aggregated from inline blade <style> blocks.
   Source files (removed from blade after tách):
     - resources/views/layouts/client/client.blade.php  (header + toolbar)
     - resources/views/layouts/client/menu.blade.php    (sidebar + user dropdown)
     - resources/views/client/home.blade.php            (home-only visuals)
   ================================================================= */

:root {
    --xh-kim: #fde68a; --xh-kim-deep: #f59e0b;
    --xh-hoa: #dc2626; --xh-hoa-light: #ef4444;
    --xh-moc: #10b981; --xh-moc-deep: #065f46;
    --xh-thuy: #3b82f6; --xh-thuy-deep: #1e40af;
    --xh-tho: #a16207; --xh-tho-deep: #78350f;
    --xh-tu: #7c3aed; --xh-tu-deep: #4c1d95;
    --xh-thanh: #06b6d4; --xh-thanh-deep: #0e7490;
    --xh-nguyet: #94a3b8; --xh-nguyet-deep: #475569;
    --xh-phong: #2dd4bf; --xh-phong-deep: #0d9488;
    --xh-huyen: #6366f1; --xh-huyen-deep: #4338ca;
}

/* =================================================================
   HEADER + NAVBAR (client.blade.php)
   ================================================================= */
#kt_app_header .app-navbar .btn-icon,
#kt_app_header .app-navbar .symbol > .symbol-label,
#kt_app_header .app-navbar .btn-custom {
    position: relative;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(239,68,68,.08)) !important;
    border: 1px solid rgba(253,224,71,.25) !important;
    color: #fde68a !important;
    transition: all .25s ease;
}
#kt_app_header .app-navbar .btn-icon i,
#kt_app_header .app-navbar .btn-custom i {
    color: #fde68a !important;
    transition: filter .25s ease, color .25s ease;
}
#kt_app_header .app-navbar .btn-icon:hover,
#kt_app_header .app-navbar .btn-custom:hover {
    background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(245,158,11,.18)) !important;
    border-color: rgba(253,224,71,.7) !important;
    box-shadow: 0 0 14px rgba(253,224,71,.35), 0 0 24px rgba(239,68,68,.2);
    transform: translateY(-1px);
}
#kt_app_header .app-navbar .btn-icon:hover i,
#kt_app_header .app-navbar .btn-custom:hover i {
    filter: drop-shadow(0 0 6px #fde68a);
}

#kt_app_header #kt_header_user_menu_toggle .symbol-label {
    background: linear-gradient(135deg, #b45309, #fbbf24) !important;
    border: 1px solid rgba(253,224,71,.55) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(245,158,11,.55), inset 0 0 10px rgba(253,230,138,.25);
}
#kt_app_header #kt_header_user_menu_toggle:hover .symbol-label {
    box-shadow: 0 0 18px rgba(245,158,11,.8), inset 0 0 14px rgba(253,230,138,.4);
}

/* Align translate button với btn-icon cùng hàng */
#button_translate {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.goog-te-gadget { line-height: 1 !important; }
#kt_header_user_menu_toggle { margin-top: -3px; }
.goog-te-gadget > span { display: inline-flex; align-items: center; }
#button_translate .goog-te-combo,
.app-navbar .goog-te-combo {
    background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(120,53,15,.18)) !important;
    border: 1px solid rgba(253,230,138,.6) !important;
    color: #fde68a !important;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 0 10px rgba(245,158,11,.3);
    height: 40px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    vertical-align: middle;
}
#button_translate .goog-te-combo:hover,
.app-navbar .goog-te-combo:hover {
    border-color: #fde68a !important;
    box-shadow: 0 0 16px rgba(253,230,138,.55);
}
#button_translate .goog-te-combo option { background: #1a0f08; color: #fde68a; }
#button_translate,
#button_translate *,
.goog-te-gadget,
.goog-te-gadget *,
.goog-te-combo {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
}
.goog-te-gadget .goog-te-combo { font-size: 13px !important; }


/* =================================================================
   TOOLBAR — Hoành phi tiên môn
   ================================================================= */
/* === XH TOOLBAR A START === Rong Sao (Constellation Dragon) — Kim heavy */
#kt_app_toolbar {
    position: relative;
    background:
        radial-gradient(ellipse 50% 90% at 10% 50%, rgba(245,158,11,.22), transparent 70%),
        radial-gradient(ellipse 50% 90% at 90% 50%, rgba(245,158,11,.22), transparent 70%),
        radial-gradient(ellipse 60% 100% at 50% 50%, rgba(253,230,138,.12), transparent 65%),
        radial-gradient(ellipse 40% 60% at 20% 10%, rgba(147,51,234,.12), transparent 60%),
        radial-gradient(ellipse 40% 60% at 80% 10%, rgba(147,51,234,.12), transparent 60%),
        linear-gradient(180deg, #1a0f08 0%, #1f1410 50%, #1a0e08 100%);
    border: 1px solid rgba(253,230,138,.35);
    border-radius: 14px;
    margin: 10px 12px 20px !important;
    padding: 18px 24px !important;
    box-shadow:
        inset 0 0 80px rgba(245,158,11,.2),
        inset 0 0 30px rgba(124,58,237,.08),
        0 6px 24px rgba(0,0,0,.5);
    overflow: hidden;
}
/* Mây nền ở trung tâm — làm mờ, không hiệu ứng, làm nền cho title */
#kt_app_toolbar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32%;
    height: 95%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(245,158,11,.6) 0%,
        rgba(180,83,9,.35) 60%,
        transparent 100%);
    -webkit-mask: url("/img/sky.png") center/contain no-repeat;
            mask: url("/img/sky.png") center/contain no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    opacity: .22;
}
.xh-dragons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: 14px;
}
.xh-dragons::before,
.xh-dragons::after {
    content: "";
    position: absolute;
    top: 5%; bottom: 5%;
    width: 22%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(253,230,138,.95) 0%,
        rgba(245,158,11,.85) 35%,
        rgba(245,158,11,.6) 60%,
        rgba(180,83,9,.3) 85%,
        transparent 100%);
    -webkit-mask: url("/img/dragon.png") center/contain no-repeat;
            mask: url("/img/dragon.png") center/contain no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    opacity: .55;
    filter: drop-shadow(0 0 8px rgba(253,230,138,.6));
    animation: xh-dragon-breathe 4s ease-in-out infinite alternate;
}
.xh-dragons::before { left: 16.5%; transform: scaleX(-1); }
.xh-dragons::after  { right: 16.5%; animation-delay: -2s; }

@keyframes xh-dragon-breathe {
    0%   { opacity: .4;  filter: drop-shadow(0 0 4px rgba(253,230,138,.35)) brightness(.85); }
    100% { opacity: .75; filter: drop-shadow(0 0 14px rgba(253,230,138,.8))  brightness(1.15); }
}
/* Sky ngang — thay Light Lane. Mask sky.png + fill kim + breathing */
#kt_app_toolbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 55%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(253,230,138,.95) 0%,
        rgba(245,158,11,.85)  35%,
        rgba(245,158,11,.6)   60%,
        rgba(180,83,9,.3)     85%,
        transparent 100%);
    -webkit-mask-image: url("/img/sky.png"), url("/img/sky.png");
            mask-image: url("/img/sky.png"), url("/img/sky.png");
    -webkit-mask-size: 15% 95%, 15% 95%;
            mask-size: 15% 95%, 15% 95%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: 7% 50%, 93% 50%;
            mask-position: 7% 50%, 93% 50%;
    -webkit-mask-mode: alpha, alpha;
            mask-mode: alpha, alpha;
    opacity: .55;
    filter: drop-shadow(0 0 8px rgba(253,230,138,.6));
    animation:
        xh-sky-breathe 4s ease-in-out infinite alternate,
        xh-sky-float   6s ease-in-out infinite;
}
@keyframes xh-sky-breathe {
    0%   { opacity: .35; filter: drop-shadow(0 0 4px rgba(253,230,138,.35)) brightness(.9); }
    100% { opacity: .7;  filter: drop-shadow(0 0 14px rgba(253,230,138,.85)) brightness(1.15); }
}
@keyframes xh-sky-float {
    0%, 100% {
        -webkit-mask-position: 7% 42%, 93% 58%;
                mask-position: 7% 42%, 93% 58%;
    }
    50% {
        -webkit-mask-position: 7% 58%, 93% 42%;
                mask-position: 7% 58%, 93% 42%;
    }
}
@keyframes xh-star-twinkle {
    0%   { opacity: .7; }
    100% { opacity: 1; }
}
@keyframes xh-wuxing-pulse {
    0%,100% { opacity: .7;  }
    50%     { opacity: 1;   }
}
/* === XH TOOLBAR A END === */


#kt_app_toolbar .page-title {
    position: relative;
    z-index: 2;
    padding: 10px 0 22px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
}
#kt_app_toolbar .page-title::before,
#kt_app_toolbar .page-title::after {
    display: none;
}

/* Cột tre 2 bên — thay Hồi Văn. Mask tre.png + fill kim + breathing */
#kt_app_toolbar_container { position: relative; }
#kt_app_toolbar_container::before,
#kt_app_toolbar_container::after {
    content: "";
    position: absolute;
    top: -60px; bottom: -60px;
    width: 84px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(253,230,138,.95) 0%,
        rgba(245,158,11,.9)  28%,
        rgba(253,230,138,.9)  50%,
        rgba(245,158,11,.9)  72%,
        rgba(180,83,9,.85)   92%,
        transparent 100%);
    background-size: 100% 250%;
    -webkit-mask: url("/img/tre.png") center/contain no-repeat;
            mask: url("/img/tre.png") center/contain no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    opacity: .8;
    filter: drop-shadow(0 0 10px rgba(253,230,138,.6));
    transform-origin: 50% 100%;
    animation:
        xh-tre-sway  6s ease-in-out infinite alternate,
        xh-tre-shine 8s linear infinite;
}
#kt_app_toolbar_container::before { left: -18px; }
#kt_app_toolbar_container::after  {
    right: -18px;
    animation-delay: -3s, -4s;
}

@keyframes xh-tre-sway {
    0%   { transform: rotate(-0.6deg); }
    100% { transform: rotate( 0.6deg); }
}
@keyframes xh-tre-shine {
    0%   { background-position: 0   0%; }
    100% { background-position: 0 200%; }
}

/* Title — vàng kim + stroke mỏng + letter-spacing rộng cho thoáng */
#kt_app_toolbar .page-heading {
    position: relative;
    z-index: 2;
    font-family: 'Philosopher', 'Inter', serif;
    font-weight: 700 !important;
    font-size: clamp(1.55rem, 2.7vw, 2.5rem) !important;
    letter-spacing: 5.5px;
    text-transform: uppercase;
    line-height: 1.5;
    padding-top: .15em;
    display: inline-flex !important;
    align-items: center;
    gap: .7em;
    color: #fde68a;
    -webkit-text-stroke: 1.8px rgba(15,8,3,.95);
    paint-order: stroke fill;
    filter:
        drop-shadow(0 2px 0 rgba(15,8,3,.9))
        drop-shadow(0 3px 6px rgba(0,0,0,.85));
    animation: xh-title-reveal .75s ease-out both;
}
@keyframes xh-title-reveal {
    0%   { opacity: 0; transform: scale(.96); filter: blur(4px) drop-shadow(0 3px 4px rgba(0,0,0,.85)); }
    100% { opacity: 1; transform: scale(1);   filter:
        drop-shadow(0 2px 0 rgba(15,8,3,.9))
        drop-shadow(0 3px 6px rgba(0,0,0,.85)); }
}
#kt_app_toolbar .page-heading .xh-title-inner {
    position: relative;
    display: inline-block;
}
#kt_app_toolbar .page-heading::before,
#kt_app_toolbar .page-heading::after {
    content: "";
    display: inline-block;
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        #ffffff 0%,
        #fde68a 22%,
        #f59e0b 65%,
        #b45309 100%);
    box-shadow:
        0 0 6px rgba(253,230,138,.9),
        0 0 14px rgba(245,158,11,.55),
        inset 0 -1px 3px rgba(120,53,15,.6);
    filter: drop-shadow(0 0 4px rgba(253,230,138,.7));
    animation: xh-twinkle 4s ease-in-out infinite alternate;
    vertical-align: middle;
}
#kt_app_toolbar .page-heading::after { animation-delay: -2s; }

/* === TOOLBAR — MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    #kt_app_toolbar {
        margin: 8px 8px 14px !important;
        padding: 14px 12px !important;
        border-radius: 10px;
        /* Ẩn 2 cột Hồi Văn dọc — chỉ giữ radial glow + base bg */
        background:
            radial-gradient(ellipse 80% 60% at 50% 50%, rgba(253,230,138,.15), transparent 70%),
            radial-gradient(ellipse 50% 80% at 20% 50%, rgba(245,158,11,.12), transparent 70%),
            radial-gradient(ellipse 50% 80% at 80% 50%, rgba(245,158,11,.12), transparent 70%),
            linear-gradient(180deg, #1a0f08 0%, #1f1410 50%, #1a0e08 100%);
    }
    /* Rồng — tăng hiện diện vì không còn light line đè */
    .xh-dragons::before,
    .xh-dragons::after {
        width: 28%;
        opacity: .35;
        filter: drop-shadow(0 0 5px rgba(253,230,138,.5));
    }
    .xh-dragons::before { left: 3% !important; }
    .xh-dragons::after  { right: 3% !important; }
    /* Per-tab reset — mobile dùng vị trí chung */
    body[data-xh-page] .xh-dragons::before { left: 3% !important; }
    body[data-xh-page] .xh-dragons::after  { right: 3% !important; }
    /* Ẩn shimmer bands */
    #kt_app_toolbar_container::before,
    #kt_app_toolbar_container::after { display: none; }
    /* Ẩn light line — mobile chỉ cần rồng + ngọc + title */
    #kt_app_toolbar::after { display: none; }
    /* Title mobile — kim, stroke đậm hơn cho nét chữ rõ */
    #kt_app_toolbar .page-heading {
        font-size: 1.25rem !important;
        letter-spacing: 2px;
        gap: .4em;
        -webkit-text-stroke: 1.3px rgba(15,8,3,.95);
    }
    #kt_app_toolbar .page-heading::before,
    #kt_app_toolbar .page-heading::after {
        width: .4em;
        height: .4em;
    }
    #kt_app_toolbar .page-title {
        padding: 6px 0 14px;
    }
}
@media (max-width: 400px) {
    #kt_app_toolbar .page-heading {
        font-size: 1.1rem !important;
        letter-spacing: 2px;
        -webkit-text-stroke: 1px rgba(15,8,3,.95);
    }
    .xh-dragons::before,
    .xh-dragons::after { opacity: .2; }
}

/* =================================================================
   SIDEBAR — Section dividers + menu link states
   ================================================================= */
[data-xh-section] {
    position: relative;
    display: flex; align-items: center; gap: 8px;
}
[data-xh-section]::before,
[data-xh-section]::after {
    content:''; flex: 1; height: 1px;
}
[data-xh-section] .menu-section {
    font-weight: 900 !important; letter-spacing: 2px !important;
    font-size: .72rem !important; white-space: nowrap;
    color: #f9fafb !important;
    background: rgba(10,15,28,.7);
    padding: 4px 10px !important;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.7) !important;
    border: 1px solid rgba(253,230,138,.18);
}
[data-xh-section="moc"]::before, [data-xh-section="moc"]::after {
    background: linear-gradient(90deg, transparent, rgba(253,230,138,.55), transparent);
}
[data-xh-section="kim"]::before, [data-xh-section="kim"]::after {
    background: linear-gradient(90deg, transparent, rgba(253,230,138,.75), transparent);
}
[data-xh-section="tu"]::before, [data-xh-section="tu"]::after {
    background: linear-gradient(90deg, transparent, rgba(217,119,6,.75), transparent);
}

#kt_app_sidebar_menu .menu-link {
    position: relative;
    transition: background .22s ease, color .22s ease, letter-spacing .22s ease, border-color .22s ease;
    background: rgba(10,15,28,.82) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(253,230,138,.22);
    border-radius: 8px;
    margin: 4px 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.4);
}
#kt_app_sidebar_menu .menu-link .menu-title {
    color: #ffffff !important;
    letter-spacing: .3px;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6);
}
/* Icon — bright neutral default, gold khi hover/active */
#kt_app_sidebar_menu .menu-link .menu-icon i,
#kt_app_sidebar_menu .menu-link .menu-icon i .path1::before,
#kt_app_sidebar_menu .menu-link .menu-icon i .path2::before,
#kt_app_sidebar_menu .menu-link .menu-icon i .path3::before,
#kt_app_sidebar_menu .menu-link .menu-icon i .path4::before {
    color: #f9fafb !important;
}
#kt_app_sidebar_menu .menu-link .menu-icon i .path1::before { opacity: .55; }
#kt_app_sidebar_menu .menu-link .menu-icon i .path2::before,
#kt_app_sidebar_menu .menu-link .menu-icon i .path3::before,
#kt_app_sidebar_menu .menu-link .menu-icon i .path4::before { opacity: 1; }
#kt_app_sidebar_menu .menu-link:hover .menu-icon i,
#kt_app_sidebar_menu .menu-link:hover .menu-icon i .path1::before,
#kt_app_sidebar_menu .menu-link:hover .menu-icon i .path2::before,
#kt_app_sidebar_menu .menu-link.active .menu-icon i,
#kt_app_sidebar_menu .menu-link.active .menu-icon i .path1::before,
#kt_app_sidebar_menu .menu-link.active .menu-icon i .path2::before {
    color: #fef3c7 !important;
}
#kt_app_sidebar_menu .menu-link::before {
    content:''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #b45309, #fde68a);
    transform: scaleY(0); transform-origin: top;
    transition: transform .25s ease;
    pointer-events: none;
}
#kt_app_sidebar_menu .menu-link:hover {
    background: rgba(20,26,42,.92) !important;
    border-color: rgba(253,230,138,.55);
    letter-spacing: .4px;
}
#kt_app_sidebar_menu .menu-link:hover .menu-title {
    color: #fef3c7 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 10px rgba(253,230,138,.6);
}
#kt_app_sidebar_menu .menu-link:hover::before { transform: scaleY(1); }
#kt_app_sidebar_menu .menu-link:hover .menu-icon i {
    filter: drop-shadow(0 0 6px currentColor);
}
#kt_app_sidebar_menu .menu-link.active {
    background: linear-gradient(90deg, rgba(245,158,11,.38) 0%, rgba(10,15,28,.92) 70%) !important;
    border-color: rgba(253,230,138,.8);
    box-shadow: 0 0 14px rgba(245,158,11,.3), inset 0 0 14px rgba(253,230,138,.1), 0 2px 8px rgba(0,0,0,.5);
}
#kt_app_sidebar_menu .menu-link.active::before {
    transform: scaleY(1);
    background: #fbbf24;
    box-shadow: 0 0 10px rgba(253,230,138,.85), 0 0 20px rgba(245,158,11,.55);
}
#kt_app_sidebar_menu .menu-link.active .menu-title {
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 12px rgba(253,230,138,.8);
    font-weight: 800;
}
#kt_app_sidebar_menu .menu-link.active .menu-icon i {
    color: #fde68a !important;
    filter: drop-shadow(0 0 6px rgba(253,230,138,.8));
}
#kt_app_sidebar_menu .menu-link.active::after {
    content:''; position: absolute; right: 14px; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, #fde68a 0%, #fbbf24 70%, transparent);
    box-shadow: 0 0 10px #fbbf24, 0 0 18px rgba(253,230,138,.65);
    animation: xhMenuDot 2s ease-in-out infinite;
}
@keyframes xhMenuDot {
    0%,100% { opacity:.6; transform: translateY(-50%) scale(1); }
    50% { opacity:1; transform: translateY(-50%) scale(1.3); }
}

#kt_app_sidebar_menu .menu-accordion.here.show > .menu-link::before {
    transform: scaleY(1);
    background: linear-gradient(180deg, #fbbf24, #fde68a);
    box-shadow: 0 0 10px rgba(253,230,138,.75);
}
#kt_app_sidebar_menu .menu-accordion.here.show > .menu-link .menu-title {
    color: #fef3c7 !important;
    text-shadow: 0 0 8px rgba(253,230,138,.65);
}
#kt_app_sidebar_menu .menu-sub {
    position: relative;
    margin-left: 18px;
}
#kt_app_sidebar_menu .menu-sub::before {
    content:''; position: absolute; left: 6px; top: 4px; bottom: 4px;
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(253,230,138,.45) 0 4px, transparent 4px 8px);
}
#kt_app_sidebar_menu .menu-sub .menu-item > .menu-link { position: relative; }
#kt_app_sidebar_menu .menu-sub .menu-item > .menu-link::after {
    content:''; position: absolute; left: -10px; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(253,230,138,.5);
    transition: all .2s ease;
}
#kt_app_sidebar_menu .menu-sub .menu-item > .menu-link:hover::after,
#kt_app_sidebar_menu .menu-sub .menu-item > .menu-link.active::after {
    background: #fde68a;
    box-shadow: 0 0 8px #fde68a;
}

#kt_app_sidebar_menu .menu-badge .badge-light-danger {
    background: rgba(239,68,68,.15) !important;
    border: 1px solid rgba(239,68,68,.55);
    color: #fca5a5 !important;
    box-shadow: 0 0 10px rgba(239,68,68,.45), inset 0 0 6px rgba(239,68,68,.15);
    text-transform: uppercase; letter-spacing: .5px;
}
#kt_app_sidebar_menu .menu-badge .badge-light-success {
    background: rgba(16,185,129,.15) !important;
    border: 1px solid rgba(110,231,183,.6);
    color: #6ee7b7 !important;
    box-shadow: 0 0 10px rgba(16,185,129,.4), inset 0 0 6px rgba(16,185,129,.15);
    text-transform: uppercase; letter-spacing: .5px;
}

/* Logout button sidebar footer — Kim đồng */
.xh-logout-btn.btn-primary {
    background: linear-gradient(135deg, #7c2d12 0%, #b45309 50%, #92400e 100%) !important;
    border: 1.5px solid rgba(253,230,138,.8) !important;
    color: #fef3c7 !important;
    box-shadow:
        0 0 16px rgba(245,158,11,.6),
        0 0 32px rgba(253,230,138,.35),
        inset 0 1px 0 rgba(253,230,138,.3) !important;
    transition: all .25s ease;
    position: relative; overflow: hidden;
    letter-spacing: .3px;
}
.xh-logout-btn.btn-primary:hover {
    transform: translateY(-2px);
    border-color: #fde68a !important;
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #d97706 100%) !important;
    box-shadow:
        0 0 24px rgba(245,158,11,.8),
        0 0 44px rgba(253,230,138,.55),
        inset 0 1px 0 rgba(253,230,138,.4) !important;
    color: #fff !important;
}
.xh-logout-btn.btn-primary i { color: currentColor !important; }

/* =================================================================
   USER DROPDOWN (top-right avatar menu)
   ================================================================= */
.xh-user-dropdown {
    position: relative;
    background: linear-gradient(160deg, #1a0b1e 0%, #2d0a1f 50%, #170917 100%) !important;
    border: 1px solid rgba(253,224,71,.3) !important;
    border-radius: 12px !important;
    box-shadow:
      0 0 40px rgba(239,68,68,.12) inset,
      0 15px 45px rgba(0,0,0,.55) !important;
    overflow: hidden;
}
.xh-user-dropdown::before,
.xh-user-dropdown::after {
    content:''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle, #fde68a 0%, #dc2626 60%, transparent 100%);
    box-shadow: 0 0 10px #dc2626, 0 0 18px rgba(239,68,68,.55);
    animation: xhMenuDot 2.4s ease-in-out infinite;
    pointer-events: none; z-index: 3;
}
.xh-user-dropdown::before { top: 10px; right: 10px; }
.xh-user-dropdown::after { bottom: 10px; left: 10px; animation-delay: 1.2s; }
.xh-user-dropdown > * { position: relative; z-index: 2; }

.xh-user-dropdown .menu-content .symbol-label.bg-primary {
    background: linear-gradient(135deg, #4c1d95, #7c3aed) !important;
    border: 1px solid rgba(196,181,253,.5);
    box-shadow: 0 0 14px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.2);
    color: #fff !important;
}
.xh-user-dropdown .fw-bold.fs-5 {
    color: #fde68a !important;
    text-shadow: 0 0 10px rgba(245,158,11,.5);
}
.xh-user-dropdown .badge-light-success {
    background: rgba(245,158,11,.18) !important;
    border: 1px solid rgba(253,224,71,.55);
    color: #fde68a !important;
    box-shadow: 0 0 10px rgba(245,158,11,.4);
    text-transform: uppercase; letter-spacing: .5px;
}
.xh-user-dropdown .text-muted,
.xh-user-dropdown a.text-muted {
    color: #d1d5db !important;
}
.xh-user-dropdown a.text-hover-primary:hover {
    color: #fde68a !important;
}

.xh-user-dropdown .menu-content .text-muted.fw-semibold.fs-7 {
    display: inline-flex; align-items: center;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(245,158,11,.12), transparent 80%);
    border: 1px solid rgba(253,224,71,.25);
    border-radius: 8px;
    width: 100%;
}
.xh-user-dropdown .menu-content .text-muted.fw-semibold.fs-7 i.text-primary {
    color: #fde68a !important;
    filter: drop-shadow(0 0 6px rgba(245,158,11,.6));
}
.xh-user-dropdown .menu-content strong.text-dark {
    color: #fde68a !important;
    text-shadow: 0 0 8px rgba(245,158,11,.5);
    font-weight: 800;
    margin-left: 4px;
}
.xh-user-dropdown .separator {
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(253,224,71,.45), transparent) !important;
    margin: 8px 12px !important;
}
.xh-user-dropdown .menu-item .menu-link {
    position: relative;
    border-radius: 8px;
    transition: all .22s ease;
    color: #e5e7eb !important;
}
.xh-user-dropdown .menu-item .menu-link::before {
    content:''; position: absolute; left: 4px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 2px;
    background: #fde68a;
    transform: scaleY(0); transform-origin: top;
    transition: transform .22s ease;
}
.xh-user-dropdown .menu-item .menu-link:hover {
    background: rgba(253,224,71,.1) !important;
    color: #fde68a !important;
}
.xh-user-dropdown .menu-item .menu-link:hover::before { transform: scaleY(1); }
.xh-user-dropdown .menu-item .menu-link:hover i {
    filter: drop-shadow(0 0 6px currentColor);
}
.xh-user-dropdown .menu-item .menu-link.text-danger { color: #f87171 !important; }
.xh-user-dropdown .menu-item .menu-link.text-danger::before { background: #dc2626; box-shadow: 0 0 8px rgba(239,68,68,.6); }
.xh-user-dropdown .menu-item .menu-link.text-danger:hover {
    background: rgba(239,68,68,.15) !important;
    color: #fca5a5 !important;
}

/* =================================================================
   SCROLLBAR (wrapped block — xoá để rollback mặc định)
   ================================================================= */
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar,
#kt_app_sidebar_menu::-webkit-scrollbar { width: 6px; }
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-track,
#kt_app_sidebar_menu::-webkit-scrollbar-track { background: transparent; }
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb,
#kt_app_sidebar_menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dc2626, #f59e0b);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(239,68,68,.4);
}
#kt_app_sidebar_menu_wrapper::-webkit-scrollbar-thumb:hover,
#kt_app_sidebar_menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ef4444, #fde68a);
}

/* =================================================================
   MENU RUNE — SVG glyph tiên hiệp (Lôi Điện tone)
   ================================================================= */
/* === XH ICONS START === */
.xh-menu-rune {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    background: linear-gradient(135deg, rgba(120,53,15,.45), rgba(245,158,11,.22));
    border: 1px solid rgba(253,230,138,.5);
    box-shadow: inset 0 0 6px rgba(245,158,11,.22);
    transition: all .25s ease;
    overflow: hidden;
    position: relative;
    font-size: 0;
}
/* Bỏ Hán tự cũ */
.xh-menu-rune::before { content: none !important; }
/* Base icon layer — dùng mask-image để dễ đổi màu qua background-color */
.xh-menu-rune::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    filter: drop-shadow(0 0 3px rgba(253,230,138,.55));
    transition: background .25s, filter .25s;
}

/* Map 14 data-rune → SVG mask */
.xh-menu-rune[data-rune="palace"]::after {
    /* Tháp 3 tầng */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21v-4h14v4M7 17l-1-2h12l-1 2M8 15v-3h8v3M9 12l-1-2h8l-1 2M10 10V8h4v2M10.5 8l1.5-3 1.5 3M12 17v4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21v-4h14v4M7 17l-1-2h12l-1 2M8 15v-3h8v3M9 12l-1-2h8l-1 2M10 10V8h4v2M10.5 8l1.5-3 1.5 3M12 17v4'/></svg>");
}
.xh-menu-rune[data-rune="token"]::after {
    /* Ấn triện vuông */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='5' y='8' width='14' height='13' rx='1.5'/><path d='M9 5h6v3M9 13h6M9 16h6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='5' y='8' width='14' height='13' rx='1.5'/><path d='M9 5h6v3M9 13h6M9 16h6'/></svg>");
}
.xh-menu-rune[data-rune="gold"]::after {
    /* Nguyên bảo */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'><path d='M4 17 L8 9 H16 L20 17 Z M4 17 H20 M7 13 H17'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'><path d='M4 17 L8 9 H16 L20 17 Z M4 17 H20 M7 13 H17'/></svg>");
}
.xh-menu-rune[data-rune="body"]::after {
    /* Hạc bay */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 15 Q9 10 13 12 L19 7 L17 12 L21 14 L17 15 L13 14 Q9 16 3 15 Z'/><circle cx='18.5' cy='9' r='.8' fill='black' stroke='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 15 Q9 10 13 12 L19 7 L17 12 L21 14 L17 15 L13 14 Q9 16 3 15 Z'/><circle cx='18.5' cy='9' r='.8' fill='black' stroke='none'/></svg>");
}
.xh-menu-rune[data-rune="realm"]::after {
    /* Thang cảnh giới */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='3' y='17' width='5' height='4'/><rect x='9.5' y='13' width='5' height='8'/><rect x='16' y='8' width='5' height='13'/><circle cx='18.5' cy='4' r='1.5' fill='black' stroke='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='3' y='17' width='5' height='4'/><rect x='9.5' y='13' width='5' height='8'/><rect x='16' y='8' width='5' height='13'/><circle cx='18.5' cy='4' r='1.5' fill='black' stroke='none'/></svg>");
}
.xh-menu-rune[data-rune="book"]::after {
    /* Sổ tay gấp đôi */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='3' y='5' width='8' height='14'/><rect x='13' y='5' width='8' height='14'/><path d='M6 9h2M6 12h2M16 9h2M16 12h2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='3' y='5' width='8' height='14'/><rect x='13' y='5' width='8' height='14'/><path d='M6 9h2M6 12h2M16 9h2M16 12h2'/></svg>");
}
.xh-menu-rune[data-rune="scroll"]::after {
    /* Cuộn giấy ngang */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><ellipse cx='5' cy='12' rx='2' ry='4'/><ellipse cx='19' cy='12' rx='2' ry='4'/><path d='M5 8h14M5 16h14M8 11h8M8 13h6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><ellipse cx='5' cy='12' rx='2' ry='4'/><ellipse cx='19' cy='12' rx='2' ry='4'/><path d='M5 8h14M5 16h14M8 11h8M8 13h6'/></svg>");
}
.xh-menu-rune[data-rune="talisman"]::after {
    /* Phù chú */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='3' width='10' height='18' rx='1'/><path d='M12 6v3M10 12 q2 -1 4 0 M10 15 q2 -1 4 0 M12 18v-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='3' width='10' height='18' rx='1'/><path d='M12 6v3M10 12 q2 -1 4 0 M10 15 q2 -1 4 0 M12 18v-1'/></svg>");
}
.xh-menu-rune[data-rune="coin"]::after {
    /* Đồng tiền lỗ vuông */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='8'/><rect x='9' y='9' width='6' height='6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='8'/><rect x='9' y='9' width='6' height='6'/></svg>");
}
.xh-menu-rune[data-rune="blade"]::after {
    /* Song kiếm chéo */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4 L14 14 M20 4 L10 14'/><path d='M3 7 L7 3 L7 5 M17 3 L21 7 L19 7'/><path d='M10 14 L4 20 L6 20 L4 20 L4 18M14 14 L20 20 L18 20 L20 20 L20 18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4 L14 14 M20 4 L10 14'/><path d='M3 7 L7 3 L7 5 M17 3 L21 7 L19 7'/><path d='M10 14 L4 20 L6 20 L4 20 L4 18M14 14 L20 20 L18 20 L20 20 L20 18'/></svg>");
}
.xh-menu-rune[data-rune="rings"]::after {
    /* 2 vòng khóa chồng nhau */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='9' cy='12' r='5'/><circle cx='15' cy='12' r='5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='9' cy='12' r='5'/><circle cx='15' cy='12' r='5'/></svg>");
}
.xh-menu-rune[data-rune="sutra"]::after {
    /* Quyển thư mở */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M3 6 Q8 5 12 7 Q16 5 21 6 V19 Q16 18 12 20 Q8 18 3 19 Z'/><path d='M12 7 V20M6 10h3M6 13h3M15 10h3M15 13h3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M3 6 Q8 5 12 7 Q16 5 21 6 V19 Q16 18 12 20 Q8 18 3 19 Z'/><path d='M12 7 V20M6 10h3M6 13h3M15 10h3M15 13h3'/></svg>");
}
.xh-menu-rune[data-rune="gate"]::after {
    /* Cổng tông môn */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M3 6h18M4 9h16M5 9v12h14V9M10 21v-8h4v8'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M3 6h18M4 9h16M5 9v12h14V9M10 21v-8h4v8'/></svg>");
}
.xh-menu-rune[data-rune="art"]::after {
    /* Phù nhỏ có luồng pháp thuật */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='4' width='8' height='16' rx='1'/><path d='M12 7 l-2 3 l2 2 l-2 3 l2 2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='4' width='8' height='16' rx='1'/><path d='M12 7 l-2 3 l2 2 l-2 3 l2 2'/></svg>");
}

/* Hover / active state */
#kt_app_sidebar_menu .menu-link:hover .xh-menu-rune {
    border-color: rgba(253,230,138,.95);
    background: linear-gradient(135deg, rgba(245,158,11,.5), rgba(120,53,15,.35));
    box-shadow: 0 0 12px rgba(253,230,138,.6), inset 0 0 8px rgba(253,230,138,.35);
    transform: rotate(-4deg) scale(1.08);
}
#kt_app_sidebar_menu .menu-link:hover .xh-menu-rune::after {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    filter: drop-shadow(0 0 6px rgba(253,230,138,.95));
}
#kt_app_sidebar_menu .menu-link.active .xh-menu-rune {
    background: linear-gradient(135deg, #b45309, #fbbf24);
    border-color: #fde68a;
    box-shadow: 0 0 14px rgba(253,230,138,.8), 0 0 28px rgba(245,158,11,.55);
}
#kt_app_sidebar_menu .menu-link.active .xh-menu-rune::after {
    background: #fef3c7;
    filter: drop-shadow(0 0 8px rgba(253,230,138,.95));
}

/* Platform icon: bỏ box + bỏ viền; glow chỉ drop-shadow bo theo shape thực của logo */
.xh-menu-rune-platform {
    width: 38px !important; height: 38px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.xh-menu-rune-platform::after { content: none !important; }
.xh-menu-rune-platform img {
    width: 32px !important; height: 32px !important;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    /* Multi-layer drop-shadow bo theo đường viền thực của logo (không tròn cứng) */
    filter:
        drop-shadow(0 0 2px rgba(253,230,138,.55))
        drop-shadow(0 0 6px rgba(245,158,11,.35))
        drop-shadow(0 2px 4px rgba(0,0,0,.45));
    transition: filter .25s ease, transform .25s ease;
    position: relative; z-index: 1;
}
#kt_app_sidebar_menu .menu-link:hover .xh-menu-rune-platform img {
    filter:
        drop-shadow(0 0 3px rgba(253,230,138,.9))
        drop-shadow(0 0 10px rgba(245,158,11,.7))
        drop-shadow(0 2px 4px rgba(0,0,0,.5));
    transform: scale(1.08);
}
#kt_app_sidebar_menu .menu-accordion.here.show > .menu-link .xh-menu-rune-platform {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#kt_app_sidebar_menu .menu-accordion.here.show > .menu-link .xh-menu-rune-platform img {
    filter:
        drop-shadow(0 0 4px #fde68a)
        drop-shadow(0 0 14px rgba(253,230,138,.85))
        drop-shadow(0 0 24px rgba(245,158,11,.55));
}

/* Sub rune (service item trong platform) */
.xh-menu-rune-sub {
    width: 22px; height: 22px; border-radius: 5px;
    background: linear-gradient(135deg, rgba(253,230,138,.25), rgba(120,53,15,.18));
    border-color: rgba(253,230,138,.5);
}
.xh-menu-rune-sub::after { inset: 2px; }
.xh-menu-rune-sub img {
    width: 16px; height: 16px; object-fit: cover; border-radius: 3px;
    filter: drop-shadow(0 0 2px rgba(253,230,138,.55));
    position: relative; z-index: 1;
}
#kt_app_sidebar_menu .menu-sub .menu-link.active .xh-menu-rune-sub {
    background: linear-gradient(135deg, #b45309, #fbbf24);
    border-color: #fde68a;
    box-shadow: 0 0 10px rgba(253,230,138,.65);
}
#kt_app_sidebar_menu .menu-sub .menu-link.active .xh-menu-rune-sub::after {
    background: #fef3c7;
    filter: drop-shadow(0 0 5px rgba(253,230,138,.9));
}

/* Nếu platform/service có ảnh upload → ẩn SVG mask */
.xh-menu-rune-platform:has(img)::after,
.xh-menu-rune-sub:has(img)::after { display: none; }
/* === XH ICONS END === */


/* =================================================================
   HOME (home.blade.php) — Panels / Stats / Titles / Pháp Bảo Các
   ================================================================= */
.transition-link:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}
.home-recharge-cta {
    background: linear-gradient(135deg, #f1416c 0%, #ff7a45 100%);
    transition: all .25s ease;
    position: relative; overflow: hidden;
}
.home-recharge-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(241,65,108,.35) !important;
}

/* Generic panel */
.xh-panel {
    position: relative; overflow: hidden;
    background:
      radial-gradient(ellipse at top, var(--xh-accent-glow, rgba(255,255,255,.1)), transparent 60%),
      linear-gradient(160deg, var(--xh-bg1, #1a0b1e) 0%, var(--xh-bg2, #2d0a1f) 50%, var(--xh-bg1, #1a0b1e) 100%) !important;
    border: 1px solid var(--xh-accent-border, rgba(255,255,255,.2)) !important;
    box-shadow:
      0 0 40px var(--xh-accent-inner, rgba(255,255,255,.08)) inset,
      0 10px 40px rgba(0,0,0,.45) !important;
}
.xh-panel::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background-image:
      radial-gradient(circle at 15% 20%, var(--xh-accent-inner, rgba(255,255,255,.06)) 0, transparent 30%),
      radial-gradient(circle at 85% 80%, var(--xh-accent-glow, rgba(255,255,255,.08)) 0, transparent 35%);
}
.xh-corner {
    position: absolute; z-index: 3; width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle, var(--xh-accent-light, #fff) 0%, var(--xh-accent, #dc2626) 60%, transparent 100%);
    box-shadow: 0 0 12px var(--xh-accent, #dc2626), 0 0 24px var(--xh-accent-glow, rgba(239,68,68,.6));
    animation: xhCornerPulse 2.4s ease-in-out infinite;
    z-index: 2;
}
.xh-corner-tl { top: 12px; left: 12px; animation-delay: 0s; }
.xh-corner-tr { top: 12px; right: 12px; animation-delay: .6s; }
.xh-corner-bl { bottom: 12px; left: 12px; animation-delay: 1.2s; }
.xh-corner-br { bottom: 12px; right: 12px; animation-delay: 1.8s; }
@keyframes xhCornerPulse {
    0%,100% { opacity:.5; transform:scale(1); }
    50% { opacity:1; transform:scale(1.35); }
}
@media (max-width: 576px) {
    .xh-corner { width: 7px; height: 7px; }
    .xh-corner-tl, .xh-corner-tr { top: 8px; }
    .xh-corner-tl, .xh-corner-bl { left: 8px; }
    .xh-corner-tr, .xh-corner-br { right: 8px; }
    .xh-corner-bl, .xh-corner-br { bottom: 8px; }
}
.xh-corner-kim {
    background: radial-gradient(circle, #fde68a 0%, #f59e0b 60%, transparent 100%);
    box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245,158,11,.7);
}

/* Tông modifiers */
.xh-panel-hoa {
    --xh-bg1:#1a0b1e; --xh-bg2:#2d0a1f;
    --xh-accent:#dc2626; --xh-accent-light:#fde68a;
    --xh-accent-border: rgba(239,68,68,.35);
    --xh-accent-glow: rgba(239,68,68,.18);
    --xh-accent-inner: rgba(239,68,68,.12);
}
.xh-panel-moc {
    --xh-bg1:#081a12; --xh-bg2:#0f2a1c;
    --xh-accent:#10b981; --xh-accent-light:#6ee7b7;
    --xh-accent-border: rgba(16,185,129,.4);
    --xh-accent-glow: rgba(16,185,129,.2);
    --xh-accent-inner: rgba(16,185,129,.14);
}
.xh-panel-thuy {
    --xh-bg1:#07142a; --xh-bg2:#0d1e3e;
    --xh-accent:#3b82f6; --xh-accent-light:#93c5fd;
    --xh-accent-border: rgba(59,130,246,.4);
    --xh-accent-glow: rgba(59,130,246,.2);
    --xh-accent-inner: rgba(59,130,246,.14);
}
.xh-panel-kim {
    --xh-bg1:#1f1608; --xh-bg2:#2a1e0a;
    --xh-accent:#f59e0b; --xh-accent-light:#fde68a;
    --xh-accent-border: rgba(245,158,11,.45);
    --xh-accent-glow: rgba(245,158,11,.22);
    --xh-accent-inner: rgba(245,158,11,.16);
}
.xh-panel-tu {
    --xh-bg1:#14082a; --xh-bg2:#1e0d3d;
    --xh-accent:#7c3aed; --xh-accent-light:#c4b5fd;
    --xh-accent-border: rgba(124,58,237,.4);
    --xh-accent-glow: rgba(124,58,237,.22);
    --xh-accent-inner: rgba(124,58,237,.15);
}
.xh-panel-thanh {
    --xh-bg1:#052432; --xh-bg2:#073545;
    --xh-accent:#06b6d4; --xh-accent-light:#67e8f9;
    --xh-accent-border: rgba(6,182,212,.4);
    --xh-accent-glow: rgba(6,182,212,.22);
    --xh-accent-inner: rgba(6,182,212,.15);
}
.xh-panel-tho {
    --xh-bg1:#1a1408; --xh-bg2:#2a2210;
    --xh-accent:#a16207; --xh-accent-light:#d4a574;
    --xh-accent-border: rgba(161,98,7,.4);
    --xh-accent-glow: rgba(161,98,7,.22);
    --xh-accent-inner: rgba(161,98,7,.15);
}
.xh-panel-hu {
    --xh-bg1:#0a0f1f; --xh-bg2:#151b2e;
    --xh-accent:#818cf8; --xh-accent-light:#c7d2fe;
    --xh-accent-border: rgba(129,140,248,.5);
    --xh-accent-glow: rgba(99,102,241,.2);
    --xh-accent-inner: rgba(129,140,248,.15);
}

/* Client service sidebar cards */
.xh-service-side-card {
    align-self: start;
}
.xh-service-side-copy {
    font-size: .9rem;
    line-height: 1.5;
    color: #d1d5db;
}
.xh-service-side-copy > :first-child {
    margin-top: 0;
}
.xh-service-side-copy > :last-child {
    margin-bottom: 0;
}
.xh-service-side-copy p {
    margin: 0 0 .45rem;
}
.xh-service-side-copy ul,
.xh-service-side-copy ol {
    margin: .35rem 0 .55rem 1.1rem;
    padding-left: .65rem;
}
.xh-service-side-copy li {
    margin: .22rem 0;
    padding-left: .05rem;
}
.xh-service-side-copy h1,
.xh-service-side-copy h2,
.xh-service-side-copy h3,
.xh-service-side-copy h4,
.xh-service-side-copy h5,
.xh-service-side-copy h6 {
    margin: .7rem 0 .35rem;
    line-height: 1.25;
}
.xh-service-side-copy strong,
.xh-service-side-copy b {
    color: #e5e7eb;
    font-weight: 800;
}
.xh-service-side-copy .ratio {
    margin-bottom: .75rem !important;
}
@media (max-width: 576px) {
    .xh-service-side-copy {
        font-size: .875rem;
        line-height: 1.48;
    }
}
.xh-panel-kiep {
    --xh-bg1:#0a0612; --xh-bg2:#1a0a2e;
    --xh-accent:#fbbf24; --xh-accent-light:#fef3c7;
    --xh-accent-border: rgba(251,191,36,.55);
    --xh-accent-glow: rgba(251,191,36,.2);
    --xh-accent-inner: rgba(168,85,247,.18);
}

/* Vạn Pháp Tông — Tử Linh (tím) override */
.xh-panel-tu .xh-title-moc .xh-title-main {
    color: #c4b5fd;
    text-shadow: 0 0 20px rgba(124,58,237,.75), 0 0 40px rgba(167,139,250,.4);
}
.xh-panel-tu .xh-title-moc .xh-title-deco { color: #a78bfa; text-shadow: 0 0 16px rgba(167,139,250,.9); }
.xh-panel-tu .xh-title-moc .xh-title-sub { color: #a78bfa; text-shadow: 0 0 10px rgba(124,58,237,.55); }
.xh-panel-tu .xh-phap-mon {
    border-color: rgba(124,58,237,.28);
    background: linear-gradient(160deg, rgba(124,58,237,.1), rgba(255,255,255,0));
}
.xh-panel-tu .xh-phap-mon:hover {
    border-color: rgba(196,181,253,.75);
    box-shadow: 0 10px 22px rgba(124,58,237,.4), 0 0 22px rgba(167,139,250,.45);
    background: linear-gradient(160deg, rgba(124,58,237,.2), rgba(124,58,237,.06));
}
/* Vạn Pháp Tông Tử (Thường section) — override glow color sang tím */
.xh-panel-tu .xh-phap-mon-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.xh-panel-tu .xh-phap-mon-icon i {
    color: #c4b5fd !important;
    filter: drop-shadow(0 0 6px rgba(167,139,250,.75)) drop-shadow(0 0 10px rgba(124,58,237,.5));
}
.xh-panel-tu .xh-phap-mon-icon img {
    filter:
        drop-shadow(0 0 3px rgba(196,181,253,.65))
        drop-shadow(0 0 8px rgba(124,58,237,.45))
        drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.xh-panel-tu .xh-phap-mon:hover .xh-phap-mon-icon img {
    filter:
        drop-shadow(0 0 4px rgba(196,181,253,.9))
        drop-shadow(0 0 14px rgba(167,139,250,.7))
        drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.xh-panel-tu .xh-phap-mon-name {
    color: #e9d5ff;
    text-shadow: 0 0 8px rgba(167,139,250,.6), 0 1px 2px rgba(0,0,0,.55);
}
.xh-panel-tu .xh-phap-mon-badge {
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    box-shadow: 0 0 8px rgba(124,58,237,.6);
}

/* Truyền Âm Các — Thanh Băng (cyan) override */
.xh-panel-thanh .xh-noti-title {
    color: #a5f3fc;
    text-shadow: 0 0 12px rgba(6,182,212,.7);
}
.xh-panel-thanh .xh-noti-sub { color: #67e8f9; }
.xh-panel-thanh .xh-orb-thuy {
    background: linear-gradient(135deg, #0e7490, #06b6d4) !important;
    box-shadow: 0 0 12px rgba(6,182,212,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-panel-thanh .xh-noti-badge {
    background: linear-gradient(135deg, #0e7490, #06b6d4);
    box-shadow: 0 2px 10px rgba(6,182,212,.45);
}
.xh-panel-thanh .xh-noti-item:hover {
    border-color: rgba(34,211,238,.5) !important;
    border-left-color: #22d3ee !important;
    background: linear-gradient(135deg, rgba(6,182,212,.15), rgba(15,23,42,.3)) !important;
    box-shadow: 0 4px 18px rgba(6,182,212,.25) !important;
}
.xh-panel-thanh .xh-noti-avatar img {
    border-color: rgba(196,181,253,.55);
    box-shadow: 0 0 10px rgba(147,51,234,.45);
}
/* Avatar "Chân Nhân" — ảnh Tiên Nữ */
.xh-panel-thanh .xh-noti-item { overflow: visible; }
.xh-panel-thanh .xh-noti-avatar,
.xh-panel-thanh .xh-noti-avatar.symbol {
    position: relative;
    width: 45px; height: 45px;
    border-radius: 50%;
    overflow: visible !important;
    margin: 4px 1rem 4px 4px;
    background: url('/img/avatar-tien-nu.jpg') center/cover no-repeat, #1a0f2e;
    box-shadow:
        0 0 14px rgba(147,51,234,.55),
        0 0 28px rgba(196,181,253,.35),
        inset 0 0 0 2px rgba(233,213,255,.6);
}
.xh-panel-thanh .xh-noti-avatar img { display: none !important; }
.xh-panel-thanh .xh-noti-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: url('/img/avatar-tien-nu.jpg') center/cover no-repeat;
    z-index: 1;
}
.xh-panel-thanh .xh-noti-avatar::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed rgba(233,213,255,.55);
    box-shadow: 0 0 10px rgba(147,51,234,.4);
    animation: xh-avatar-spin 8s linear infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes xh-avatar-spin {
    to { transform: rotate(360deg); }
}
.xh-panel-thanh .xh-noti-name {
    color: #a5f3fc;
    text-shadow: 0 0 8px rgba(6,182,212,.55);
}
.xh-panel-thanh .xh-noti-date {
    color: #a5f3fc;
    background: rgba(6,182,212,.15);
    border-color: rgba(6,182,212,.4);
}

/* Shine sweep utility */
.xh-shine-btn::after {
    content:''; position:absolute; top:0; left:-75%;
    width:50%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
    pointer-events:none;
    z-index: 1;
}
.xh-shine-btn:hover::after { left: 125%; }

/* Stat cards */
.xh-stat-card { transition: all .25s ease; }
.xh-stat-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 0 40px var(--xh-accent-inner) inset,
      0 14px 32px rgba(0,0,0,.5),
      0 0 20px var(--xh-accent-glow) !important;
    border-color: var(--xh-accent-light) !important;
}
.xh-cta-card.home-recharge-cta {
    border: 1px solid rgba(253,224,71,.5) !important;
    box-shadow:
      0 0 30px rgba(253,224,71,.2) inset,
      0 6px 20px rgba(241,65,108,.3) !important;
    position: relative; overflow: hidden;
}
.xh-cta-card.home-recharge-cta:hover {
    transform: translateY(-4px);
    border-color: #fde68a !important;
    box-shadow:
      0 0 40px rgba(253,224,71,.35) inset,
      0 14px 32px rgba(241,65,108,.45),
      0 0 25px rgba(253,224,71,.5) !important;
}
.xh-stat-label {
    color: #e5e7eb; font-weight: 700; font-size: .78rem;
    letter-spacing: .5px; text-transform: uppercase;
}
.xh-stat-hint {
    font-weight: 500; font-size: .72rem; color: #cbd5e1;
    text-transform: none; letter-spacing: 0; margin-left: 2px;
}
.xh-stat-value {
    color: #fff; font-weight: 800; font-size: 1.35rem;
    letter-spacing: .3px; line-height: 1.2; margin-top: 2px;
    text-shadow: 0 0 12px rgba(255,255,255,.15);
}

/* Orb icons */
.xh-orb { position: relative; }
.xh-orb-moc {
    background: linear-gradient(135deg, var(--xh-moc-deep), var(--xh-moc)) !important;
    box-shadow: 0 0 12px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-orb-thuy {
    background: linear-gradient(135deg, var(--xh-thuy-deep), var(--xh-thuy)) !important;
    box-shadow: 0 0 12px rgba(59,130,246,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-orb-tho {
    background: linear-gradient(135deg, var(--xh-tho-deep), var(--xh-tho)) !important;
    box-shadow: 0 0 12px rgba(161,98,7,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-orb-hoa {
    background: linear-gradient(135deg, #991b1b, var(--xh-hoa-light)) !important;
    box-shadow: 0 0 12px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-orb-kim {
    background: linear-gradient(135deg, var(--xh-kim-deep), var(--xh-kim)) !important;
    box-shadow: 0 0 12px rgba(245,158,11,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
/* Luyện Hư orb — slate/indigo + silver shield glow */
.xh-orb-hu {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #0f172a 100%) !important;
    box-shadow: 0 0 14px rgba(129,140,248,.45),
                0 0 20px rgba(99,102,241,.3),
                inset 0 1px 0 rgba(199,210,254,.3),
                inset 0 -4px 12px rgba(99,102,241,.2);
    position: relative;
    overflow: hidden;
}
.xh-orb-hu::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(129,140,248,.25), transparent 60%);
    pointer-events: none;
}
.xh-orb-hu i {
    color: #e0e7ff !important;
    text-shadow: 0 0 8px rgba(129,140,248,.9), 0 0 14px rgba(99,102,241,.5);
    position: relative; z-index: 1;
}

/* Độ Kiếp orb — void đen tím + sét vàng glow */
.xh-orb-kiep {
    background: linear-gradient(135deg, #1a0826 0%, #3b1966 50%, #0a0612 100%) !important;
    box-shadow: 0 0 14px rgba(251,191,36,.5),
                0 0 22px rgba(168,85,247,.35),
                inset 0 1px 0 rgba(251,191,36,.35),
                inset 0 -4px 12px rgba(168,85,247,.25);
    position: relative;
    overflow: hidden;
}
.xh-orb-kiep::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(251,191,36,.22), transparent 60%);
    pointer-events: none;
}
.xh-orb-kiep i {
    color: #fef3c7 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.9), 0 0 16px rgba(168,85,247,.6);
    position: relative; z-index: 1;
}

/* Section titles */
.xh-title-wrap { position: relative; z-index: 2; }
.xh-title-main {
    font-size: 2rem; font-weight: 900; letter-spacing: 2.5px;
    text-transform: uppercase; line-height: 1.1;
    display: inline-flex; align-items: center; gap: 14px;
}
.xh-title-deco {
    font-size: 1.4rem;
    animation: xhPulse 3s ease-in-out infinite;
}
.xh-title-sub {
    margin-top: 6px;
    font-size: .8rem; font-weight: 600; letter-spacing: 5px;
    text-transform: uppercase;
}
.xh-title-moc .xh-title-main {
    color: #6ee7b7;
    text-shadow: 0 0 20px rgba(16,185,129,.7), 0 0 40px rgba(52,211,153,.35);
}
.xh-title-moc .xh-title-deco { color: var(--xh-moc); text-shadow: 0 0 16px rgba(16,185,129,.9); }
.xh-title-moc .xh-title-sub { color: #34d399; text-shadow: 0 0 10px rgba(16,185,129,.5); }
@keyframes xhPulse {
    0%,100% { opacity:.65; transform:scale(1); }
    50% { opacity:1; transform:scale(1.18); }
}
@media (max-width: 576px) {
    .xh-title-main { font-size: 1.4rem; letter-spacing: 1.5px; gap:8px; }
    .xh-title-deco { font-size: 1.1rem; }
    .xh-title-sub { font-size: .65rem; letter-spacing: 3px; }
}

/* Vạn Pháp Tông — platform grid */
.xh-phap-mon {
    border-radius: 14px;
    border: 1px solid rgba(16,185,129,.25);
    background: linear-gradient(160deg, rgba(16,185,129,.08), rgba(255,255,255,0));
    transition: all .25s ease;
}
.xh-phap-mon:hover {
    transform: translateY(-4px);
    border-color: rgba(52,211,153,.7);
    box-shadow: 0 10px 22px rgba(16,185,129,.35), 0 0 22px rgba(52,211,153,.4);
    background: linear-gradient(160deg, rgba(16,185,129,.18), rgba(16,185,129,.05));
}
/* Vạn Pháp Tông Thường — bỏ viền + bỏ box, glow drop-shadow bo theo shape logo */
.xh-phap-mon-icon {
    width: 76px !important; height: 76px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.xh-phap-mon-icon i {
    color: #6ee7b7 !important; font-size: 2.6rem !important;
    filter: drop-shadow(0 0 6px rgba(52,211,153,.7)) drop-shadow(0 0 10px rgba(16,185,129,.45));
}
.xh-phap-mon-icon img {
    width: 64px !important; height: 64px !important;
    object-fit: contain; border-radius: 0;
    background: transparent;
    filter:
        drop-shadow(0 0 3px rgba(167,243,208,.6))
        drop-shadow(0 0 8px rgba(16,185,129,.4))
        drop-shadow(0 2px 4px rgba(0,0,0,.5));
    transition: filter .25s ease, transform .25s ease;
}
/* Tăng symbol wrapper cho match */
.xh-phap-mon .symbol.symbol-45px { width: 76px !important; height: 76px !important; }
.xh-phap-mon:hover .xh-phap-mon-icon { background: transparent !important; box-shadow: none !important; }
.xh-phap-mon:hover .xh-phap-mon-icon img {
    filter:
        drop-shadow(0 0 4px rgba(167,243,208,.9))
        drop-shadow(0 0 14px rgba(52,211,153,.65))
        drop-shadow(0 2px 4px rgba(0,0,0,.5));
    transform: scale(1.06);
}
.xh-phap-mon-name {
    font-weight: 700; font-size: 1rem; letter-spacing: .4px;
    color: #d1fae5;
    text-align: center;
    text-shadow: 0 0 8px rgba(16,185,129,.55), 0 1px 2px rgba(0,0,0,.55);
    margin-top: 4px;
}
.xh-phap-mon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 9px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--xh-moc-deep), var(--xh-moc));
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(16,185,129,.55);
    animation: xhPulse 2.4s ease-in-out infinite;
}

/* Truyền Âm Các — notifications base */
.xh-noti-title {
    color: #93c5fd; font-weight: 900; font-size: 1.05rem;
    letter-spacing: 1px; text-transform: uppercase; line-height: 1.1;
    text-shadow: 0 0 12px rgba(59,130,246,.6);
}
.xh-noti-sub {
    color: #60a5fa; font-size: .7rem; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;
}
.xh-noti-badge {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, var(--xh-thuy-deep), var(--xh-thuy));
    box-shadow: 0 2px 10px rgba(59,130,246,.4);
}
.xh-noti-item {
    position: relative;
    padding: .85rem 1rem;
    margin-bottom: .65rem;
    border: 1px solid rgba(6,182,212,.22);
    border-left: 3px solid rgba(6,182,212,.55);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(6,182,212,.06), rgba(15,23,42,.25));
    transition: all .2s ease;
}
.xh-noti-item:last-child { margin-bottom: 0; }
.xh-noti-item:hover {
    border-color: rgba(34,211,238,.45);
    border-left-color: #22d3ee;
    background: linear-gradient(135deg, rgba(6,182,212,.13), rgba(15,23,42,.3));
    box-shadow: 0 4px 18px rgba(6,182,212,.22);
    transform: translateX(2px);
}
.xh-noti-head {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .5rem; padding-bottom: .5rem;
    border-bottom: 1px dashed rgba(165,243,252,.2);
    flex-wrap: wrap;
}
.xh-noti-marker {
    color: #a5f3fc;
    font-size: .95rem;
    text-shadow: 0 0 8px rgba(6,182,212,.7);
    line-height: 1;
    user-select: none;
}
.xh-noti-meta {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #a5f3fc;
    font-size: .82rem; font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.xh-noti-meta i {
    color: #67e8f9;
    filter: drop-shadow(0 0 4px rgba(6,182,212,.6));
}
.xh-noti-meta .xh-noti-date {
    display: inline; padding: 0; border: 0; background: transparent;
    font-size: .82rem; font-weight: 600;
    color: inherit;
}
.xh-noti-avatar img {
    border: 2px solid rgba(59,130,246,.4);
    box-shadow: 0 0 10px rgba(59,130,246,.35);
    border-radius: 50%;
}
.xh-noti-name {
    color: #bfdbfe; font-weight: 800; font-size: .95rem;
    text-shadow: 0 0 8px rgba(59,130,246,.5);
}
.xh-noti-date {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: .65rem; font-weight: 600;
    color: #bfdbfe;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.35);
}
.xh-noti-content {
    color: #e5e7eb; font-size: .9rem; font-weight: 500;
    letter-spacing: .2px; line-height: 1.55; margin-top: 2px;
}

/* Pháp Môn modal */
.xh-phap-mon-modal-header {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(255,255,255,0) 70%);
    border-bottom: 1px solid rgba(16,185,129,.15) !important;
}
.xh-phap-mon-modal-title {
    color: var(--xh-moc-deep);
    text-shadow: 0 0 10px rgba(16,185,129,.25);
}
.xh-phap-mon-modal-sub { color: var(--xh-moc); font-style: italic; }
.xh-phap-mon-svc {
    border: 1px solid rgba(16,185,129,.18);
    background: #fff;
    transition: all .22s ease;
    box-shadow: none;
}
.xh-phap-mon-svc:hover {
    transform: translateY(-3px);
    border-color: var(--xh-moc);
    background: linear-gradient(135deg, rgba(209,250,229,.4), #fff);
    box-shadow: 0 8px 20px rgba(16,185,129,.2);
}
.xh-phap-mon-svc-icon {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
}
.xh-phap-mon-svc-icon i { color: var(--xh-moc-deep) !important; }
.xh-phap-mon-svc-cta { color: var(--xh-moc); }

/* ═══ Modal Pháp Môn — platform logo header + service logo (no-box + drop-shadow) ═══ */
.xh-modal-platform-logo {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    overflow: visible;
}
.xh-modal-platform-logo img {
    width: 44px; height: 44px; object-fit: contain;
    border-radius: 0; background: transparent;
    filter:
        drop-shadow(0 0 3px rgba(167,243,208,.7))
        drop-shadow(0 0 10px rgba(16,185,129,.5))
        drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.xh-modal-platform-logo i {
    font-size: 2.2rem; color: #6ee7b7;
    filter: drop-shadow(0 0 8px rgba(52,211,153,.8)) drop-shadow(0 0 12px rgba(16,185,129,.5));
}

.xh-phap-mon-svc-logo {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    overflow: visible;
}
.xh-phap-mon-svc-logo img {
    width: 36px; height: 36px; object-fit: contain;
    border-radius: 0; background: transparent;
    filter:
        drop-shadow(0 0 2px rgba(167,243,208,.6))
        drop-shadow(0 0 8px rgba(16,185,129,.4))
        drop-shadow(0 2px 3px rgba(0,0,0,.4));
    transition: filter .25s ease, transform .25s ease;
}
.xh-phap-mon-svc-logo i {
    font-size: 1.8rem; color: #10b981;
    filter: drop-shadow(0 0 5px rgba(52,211,153,.6));
}
.xh-phap-mon-svc:hover .xh-phap-mon-svc-logo img {
    filter:
        drop-shadow(0 0 3px rgba(167,243,208,.9))
        drop-shadow(0 0 12px rgba(16,185,129,.65))
        drop-shadow(0 2px 3px rgba(0,0,0,.45));
    transform: scale(1.05);
}

/* Pháp Bảo Các */
.featured-section {
    position: relative;
    background:
      radial-gradient(ellipse at top, rgba(239,68,68,.18), transparent 60%),
      linear-gradient(160deg, #1a0b1e 0%, #2d0a1f 50%, #170917 100%) !important;
    border: 1px solid rgba(239,68,68,.35) !important;
    box-shadow:
      0 0 40px rgba(239,68,68,.12) inset,
      0 10px 40px rgba(0,0,0,.45) !important;
    overflow: hidden;
}
.featured-section::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(circle at 15% 20%, rgba(253,224,71,.06) 0, transparent 30%),
      radial-gradient(circle at 85% 80%, rgba(239,68,68,.08) 0, transparent 35%);
}
.featured-corner {
    position:absolute; width:10px; height:10px; border-radius:50%;
    background: radial-gradient(circle, #fde68a 0%, #dc2626 60%, transparent 100%);
    box-shadow: 0 0 12px #dc2626, 0 0 24px rgba(239,68,68,.6);
    animation: featuredPulse 2.4s ease-in-out infinite;
    z-index:1;
}
.featured-corner-tl { top:14px; left:14px; }
.featured-corner-tr { top:14px; right:14px; animation-delay:.6s; }
.featured-corner-bl { bottom:14px; left:14px; animation-delay:1.2s; }
.featured-corner-br { bottom:14px; right:14px; animation-delay:1.8s; }
@keyframes featuredPulse {
    0%,100% { opacity:.5; transform:scale(1); }
    50% { opacity:1; transform:scale(1.3); }
}

.featured-title-wrap { position:relative; z-index:2; }
.featured-title-main {
    font-size: 2.2rem; font-weight: 900; letter-spacing: 3px;
    color: #fde68a; text-transform: uppercase;
    text-shadow:
      0 0 20px rgba(239,68,68,.8),
      0 0 40px rgba(253,224,71,.35),
      0 2px 4px rgba(0,0,0,.6);
    line-height: 1.1;
    display: inline-flex; align-items: center; gap: 14px;
}
.featured-title-deco {
    color: #dc2626; font-size: 1.6rem;
    text-shadow: 0 0 16px rgba(220,38,38,.9);
    animation: featuredPulse 3s ease-in-out infinite;
}
.featured-title-sub {
    margin-top: 6px;
    font-size: .85rem; font-weight: 600; letter-spacing: 6px;
    color: #f87171; text-transform: uppercase;
    text-shadow: 0 0 10px rgba(248,113,113,.5);
}
@media (max-width: 576px) {
    .featured-title-main { font-size: 1.5rem; letter-spacing: 2px; gap:8px; }
    .featured-title-deco { font-size: 1.2rem; }
    .featured-title-sub { font-size: .7rem; letter-spacing: 3px; }
}

.featured-group-heading {
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 18px 8px 14px; margin-bottom: 14px;
    background: linear-gradient(90deg, rgba(239,68,68,.22) 0%, rgba(239,68,68,.04) 80%, transparent 100%);
    border-left: 3px solid #dc2626;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Pháp Bảo Các VIP — bỏ viền + bỏ box, glow drop-shadow bo theo shape logo */
.featured-group-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    overflow: visible;
}
.featured-group-icon img {
    width: 34px; height: 34px; object-fit: contain;
    border-radius: 0;
    background: transparent;
    filter:
        drop-shadow(0 0 2px rgba(253,224,71,.6))
        drop-shadow(0 0 8px rgba(239,68,68,.5))
        drop-shadow(0 2px 4px rgba(0,0,0,.45));
    transition: filter .25s ease, transform .25s ease;
}
.featured-group-icon i {
    font-size: 22px;
    color: #fde68a;
    filter: drop-shadow(0 0 6px rgba(253,224,71,.8)) drop-shadow(0 0 10px rgba(239,68,68,.5));
}
.featured-group-name {
    font-weight: 800; font-size: .95rem; letter-spacing: 1.5px;
    color: #fde68a; text-transform: uppercase;
    text-shadow: 0 0 8px rgba(239,68,68,.5);
}

.featured-service-btn {
    position: relative; overflow: hidden;
    background:
      radial-gradient(circle at 18% 25%, rgba(253,224,71,.18), transparent 55%),
      linear-gradient(135deg, #7f1d1d 0%, #b91c1c 45%, #dc2626 100%);
    border: 1px solid rgba(253,224,71,.28);
    border-radius: 10px !important;
    box-shadow:
      0 2px 10px rgba(220,38,38,.4),
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.3);
    transition: all .25s ease;
}
.featured-service-btn::after {
    content:''; position:absolute; top:0; left:-75%;
    width:50%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(253,224,71,.35), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
    pointer-events:none;
}
.featured-service-btn:hover::after { left: 125%; }
.featured-service-btn:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(253,224,71,.65);
    color: #fff;
    box-shadow:
      0 12px 28px rgba(220,38,38,.55),
      0 0 24px rgba(253,224,71,.4),
      inset 0 1px 0 rgba(255,255,255,.2);
}
.featured-service-btn .symbol-label {
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(253,224,71,.4);
    box-shadow: 0 0 8px rgba(253,224,71,.3), inset 0 0 6px rgba(0,0,0,.4);
}
.featured-service-btn span.fw-bold {
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    letter-spacing: .3px;
}

/* ========= Ngọc Giản — DataTables skin ========= */

/* Khi card DataTable nằm trong xh-panel, bỏ lớp bg/border riêng để panel kim/thuy dẫn dắt tông */
.xh-panel .card.card-flush:has(table[id^="table-"]),
.xh-panel .card.card-flush:has(table[id^="table-"])::before {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-mask: none !important;
            mask: none !important;
}

/* Accent kim mạnh thêm cho panel kim bọc DataTable — glow inner + header underline */
.xh-panel-kim:has(table[id^="table-"]) {
    box-shadow:
      0 0 40px rgba(245,158,11,.18) inset,
      0 10px 40px rgba(0,0,0,.45),
      0 0 30px rgba(245,158,11,.12) !important;
}
.xh-panel-kim:has(table[id^="table-"]) .card-header {
    border-bottom: 1px solid rgba(253,230,138,.22) !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245,158,11,.08) 50%,
        transparent 100%) !important;
}
.xh-panel-kim:has(table[id^="table-"]) table.table thead th {
    color: var(--xh-kim, #fde68a) !important;
    text-shadow: 0 0 10px rgba(245,158,11,.35);
    border-bottom-color: rgba(253,230,138,.25) !important;
}


/* Card wrapper (chỉ áp cho card bọc DataTable) */
.card.card-flush:has(table[id^="table-"]) {
    position: relative;
    background: linear-gradient(180deg, rgba(26,15,46,.55) 0%, rgba(10,8,32,.75) 100%) !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 30px rgba(124,58,237,.08) !important;
}
.card.card-flush:has(table[id^="table-"])::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(196,181,253,.5), rgba(147,51,234,.3), rgba(233,213,255,.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
.card.card-flush:has(table[id^="table-"]) > * { position: relative; z-index: 2; }

/* Card header */
.card.card-flush:has(table[id^="table-"]) .card-title .card-label,
.card.card-flush:has(table[id^="table-"]) .card-title span.text-gray-900 {
    color: #e9d5ff !important;
    text-shadow: 0 0 12px rgba(196,181,253,.35);
}
.card.card-flush:has(table[id^="table-"]) .card-title .text-muted {
    color: rgba(196,181,253,.55) !important;
}
.card.card-flush:has(table[id^="table-"]) .card-title i.ki-duotone {
    color: #c4b5fd !important;
}

/* Controls: search + length */
.card.card-flush:has(table[id^="table-"]) .dataTables_filter input,
.card.card-flush:has(table[id^="table-"]) .dataTables_length select,
.card.card-flush:has(table[id^="table-"]) .dataTables_filter label,
.card.card-flush:has(table[id^="table-"]) .dataTables_length label {
    color: rgba(196,181,253,.75);
}
.card.card-flush:has(table[id^="table-"]) .dataTables_filter input,
.card.card-flush:has(table[id^="table-"]) .dataTables_length select {
    background: rgba(15,10,35,.6) !important;
    border: 1px solid rgba(147,51,234,.35) !important;
    color: #e9d5ff !important;
    border-radius: 8px !important;
    padding: 6px 12px;
    transition: border-color .2s, box-shadow .2s;
}
.card.card-flush:has(table[id^="table-"]) .dataTables_filter input::placeholder {
    color: rgba(196,181,253,.4);
}
.card.card-flush:has(table[id^="table-"]) .dataTables_filter input:focus,
.card.card-flush:has(table[id^="table-"]) .dataTables_length select:focus {
    border-color: #c4b5fd !important;
    box-shadow: 0 0 0 3px rgba(196,181,253,.15) !important;
    outline: none;
}
.card.card-flush:has(table[id^="table-"]) .dataTables_length select option {
    background: #0f0a23;
    color: #e9d5ff;
}

/* Table */
.card.card-flush:has(table[id^="table-"]) table.table {
    color: #e5e7eb;
    --bs-table-bg: transparent;
    --bs-table-color: #e5e7eb;
    --bs-table-hover-bg: rgba(124,58,237,.06);
    --bs-table-hover-color: #fff;
}
.card.card-flush:has(table[id^="table-"]) table.table thead.table-light,
.card.card-flush:has(table[id^="table-"]) table.table thead.table-light tr,
.card.card-flush:has(table[id^="table-"]) table.table thead.table-light th {
    background: rgba(30,20,60,.5) !important;
    --bs-table-bg: rgba(30,20,60,.5);
    color: rgba(196,181,253,.75) !important;
    border-bottom: 1px solid rgba(147,51,234,.25) !important;
    letter-spacing: .5px;
}
.card.card-flush:has(table[id^="table-"]) table.table.table-row-dashed tr {
    border-bottom: 1px dashed rgba(147,51,234,.15) !important;
}
.card.card-flush:has(table[id^="table-"]) table.table tbody tr {
    transition: background .15s, box-shadow .15s;
}
.card.card-flush:has(table[id^="table-"]) table.table tbody tr:hover {
    background: rgba(124,58,237,.06) !important;
    box-shadow: inset 3px 0 0 #c4b5fd;
}

/* Badge ngũ hành (trong bảng) */
.card.card-flush:has(table[id^="table-"]) .badge.badge-light-success {
    background: color-mix(in srgb, var(--xh-moc) 18%, transparent) !important;
    color: var(--xh-moc) !important;
    border: 1px solid color-mix(in srgb, var(--xh-moc) 35%, transparent) !important;
}
.card.card-flush:has(table[id^="table-"]) .badge.badge-light-primary {
    background: color-mix(in srgb, var(--xh-thuy) 18%, transparent) !important;
    color: #93c5fd !important;
    border: 1px solid color-mix(in srgb, var(--xh-thuy) 40%, transparent) !important;
}
.card.card-flush:has(table[id^="table-"]) .badge.badge-light-danger {
    background: color-mix(in srgb, var(--xh-hoa) 18%, transparent) !important;
    color: #fca5a5 !important;
    border: 1px solid color-mix(in srgb, var(--xh-hoa) 40%, transparent) !important;
}
.card.card-flush:has(table[id^="table-"]) .badge.badge-light-info {
    background: color-mix(in srgb, var(--xh-kim) 18%, transparent) !important;
    color: var(--xh-kim) !important;
    border: 1px solid color-mix(in srgb, var(--xh-kim) 40%, transparent) !important;
}
.card.card-flush:has(table[id^="table-"]) .badge.badge-light-secondary {
    background: rgba(196,181,253,.1) !important;
    color: rgba(196,181,253,.7) !important;
    border: 1px solid rgba(196,181,253,.25) !important;
}

/* Pagination */
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid rgba(147,51,234,.25) !important;
    color: rgba(196,181,253,.7) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 3px;
    transition: all .2s;
}
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .paginate_button:hover {
    background: rgba(124,58,237,.15) !important;
    border-color: #c4b5fd !important;
    color: #fff !important;
}
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .paginate_button.current,
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #7c3aed, #c4b5fd) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(196,181,253,.35);
}
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .paginate_button.disabled,
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .35;
    background: transparent !important;
    border-color: rgba(147,51,234,.15) !important;
    color: rgba(196,181,253,.35) !important;
}
.card.card-flush:has(table[id^="table-"]) .dataTables_info {
    color: rgba(196,181,253,.55) !important;
}

/* Processing overlay */
.card.card-flush:has(table[id^="table-"]) .dataTables_processing {
    background: rgba(10,8,32,.85) !important;
    border: 1px solid rgba(147,51,234,.4) !important;
    color: #e9d5ff !important;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(124,58,237,.2);
}

/* ───────────────────────────────────────────────────────────────────────
   Table theme cho xh-panel KHÔNG có .card.card-flush wrapper
   (filter-bar pattern sau khi migrate — table nằm trực tiếp trong xh-panel)
   ─────────────────────────────────────────────────────────────────────── */
.xh-panel:has(table[id^="table-"]) table.table {
    color: #e5e7eb;
    --bs-table-bg: transparent;
    --bs-table-color: #e5e7eb;
    --bs-table-hover-bg: rgba(124,58,237,.06);
    --bs-table-hover-color: #fff;
}
.xh-panel:has(table[id^="table-"]) table.table thead th {
    color: rgba(196,181,253,.75) !important;
    border-bottom: 1px solid rgba(147,51,234,.25) !important;
    letter-spacing: .5px;
}
.xh-panel:has(table[id^="table-"]) table.table.table-row-dashed tr {
    border-bottom: 1px dashed rgba(147,51,234,.15) !important;
}
.xh-panel:has(table[id^="table-"]) table.table tbody tr {
    transition: background .15s, box-shadow .15s;
}
.xh-panel:has(table[id^="table-"]) table.table tbody tr:hover {
    background: rgba(124,58,237,.06) !important;
    box-shadow: inset 3px 0 0 #c4b5fd;
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid rgba(147,51,234,.25) !important;
    color: rgba(196,181,253,.7) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 3px;
    transition: all .2s;
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .paginate_button:hover {
    background: rgba(124,58,237,.15) !important;
    border-color: #c4b5fd !important;
    color: #fff !important;
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .paginate_button.current,
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #7c3aed, #c4b5fd) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(196,181,253,.35);
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .paginate_button.disabled,
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .35;
    background: transparent !important;
    border-color: rgba(147,51,234,.15) !important;
    color: rgba(196,181,253,.35) !important;
}
/* Bootstrap5 renderer (Metronic mặc định dùng .page-item/.page-link) */
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .pagination .page-link,
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .pagination .page-link {
    background: transparent !important;
    border: 1px solid rgba(147,51,234,.25) !important;
    color: rgba(196,181,253,.7) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 3px;
    transition: all .2s;
    box-shadow: none !important;
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .pagination .page-item:not(.disabled):not(.active) .page-link:hover,
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background: rgba(124,58,237,.15) !important;
    border-color: #c4b5fd !important;
    color: #fff !important;
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .pagination .page-item.active .page-link,
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #7c3aed, #c4b5fd) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(196,181,253,.35) !important;
}
.xh-panel:has(table[id^="table-"]) .dataTables_paginate .pagination .page-item.disabled .page-link,
.card.card-flush:has(table[id^="table-"]) .dataTables_paginate .pagination .page-item.disabled .page-link {
    opacity: .35;
    background: transparent !important;
    border-color: rgba(147,51,234,.15) !important;
    color: rgba(196,181,253,.35) !important;
}
.xh-panel:has(table[id^="table-"]) .dataTables_info {
    color: rgba(196,181,253,.55) !important;
}
.xh-panel:has(table[id^="table-"]) .dataTables_processing {
    background: rgba(10,8,32,.85) !important;
    border: 1px solid rgba(147,51,234,.4) !important;
    color: #e9d5ff !important;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(124,58,237,.2);
}
.xh-panel:has(table[id^="table-"]) .badge.badge-light-success {
    background: color-mix(in srgb, var(--xh-moc) 18%, transparent) !important;
    color: var(--xh-moc) !important;
    border: 1px solid color-mix(in srgb, var(--xh-moc) 35%, transparent) !important;
}
.xh-panel:has(table[id^="table-"]) .badge.badge-light-primary {
    background: color-mix(in srgb, var(--xh-thuy) 18%, transparent) !important;
    color: #93c5fd !important;
    border: 1px solid color-mix(in srgb, var(--xh-thuy) 40%, transparent) !important;
}
.xh-panel:has(table[id^="table-"]) .badge.badge-light-danger {
    background: color-mix(in srgb, var(--xh-hoa) 18%, transparent) !important;
    color: #fca5a5 !important;
    border: 1px solid color-mix(in srgb, var(--xh-hoa) 40%, transparent) !important;
}
.xh-panel:has(table[id^="table-"]) .badge.badge-light-info {
    background: color-mix(in srgb, var(--xh-kim) 18%, transparent) !important;
    color: var(--xh-kim) !important;
    border: 1px solid color-mix(in srgb, var(--xh-kim) 40%, transparent) !important;
}
.xh-panel:has(table[id^="table-"]) .badge.badge-light-secondary {
    background: rgba(196,181,253,.1) !important;
    color: rgba(196,181,253,.7) !important;
    border: 1px solid rgba(196,181,253,.25) !important;
}

/* Empty state — Ngọc Giản vô vật */
.xh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 8px;
}
.xh-empty-icon {
    font-size: 72px;
    line-height: 1;
    color: rgba(196,181,253,.35);
    text-shadow: 0 0 24px rgba(196,181,253,.25);
    animation: xh-empty-float 3s ease-in-out infinite alternate;
    font-family: "Noto Serif SC", "Songti SC", serif;
}
.xh-empty-text {
    color: #c4b5fd;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 6px;
}
.xh-empty-sub {
    color: rgba(196,181,253,.45);
    font-size: 13px;
}
@keyframes xh-empty-float {
    from { transform: translateY(0); opacity: .8; }
    to   { transform: translateY(-6px); opacity: 1; }
}

/* ========= Nạp tiền — Recharge skin ========= */

/* Title variants (Kim / Thủy / Hỏa / Hư) */
.xh-title-kim .xh-title-main {
    color: #fde68a;
    text-shadow: 0 0 20px rgba(245,158,11,.75), 0 0 40px rgba(253,230,138,.4);
}
.xh-title-kim .xh-title-deco { color: #f59e0b; text-shadow: 0 0 16px rgba(245,158,11,.9); }
.xh-title-kim .xh-title-sub { color: #fbbf24; text-shadow: 0 0 10px rgba(245,158,11,.55); }

.xh-title-hu .xh-title-main {
    color: #c7d2fe;
    text-shadow: 0 0 20px rgba(129,140,248,.75), 0 0 40px rgba(199,210,254,.35);
}
.xh-title-hu .xh-title-deco { color: #818cf8; text-shadow: 0 0 16px rgba(99,102,241,.9); }
.xh-title-hu .xh-title-sub { color: #a5b4fc; text-shadow: 0 0 10px rgba(99,102,241,.55); }

.xh-title-thuy .xh-title-main {
    color: #93c5fd;
    text-shadow: 0 0 20px rgba(59,130,246,.75), 0 0 40px rgba(147,197,253,.4);
}
.xh-title-thuy .xh-title-deco { color: #3b82f6; text-shadow: 0 0 16px rgba(59,130,246,.9); }
.xh-title-thuy .xh-title-sub { color: #60a5fa; text-shadow: 0 0 10px rgba(59,130,246,.55); }

.xh-title-hoa .xh-title-main {
    color: #fca5a5;
    text-shadow: 0 0 20px rgba(220,38,38,.7), 0 0 40px rgba(248,113,113,.4);
}
.xh-title-hoa .xh-title-deco { color: #ef4444; text-shadow: 0 0 16px rgba(220,38,38,.9); }
.xh-title-hoa .xh-title-sub { color: #fca5a5; text-shadow: 0 0 10px rgba(220,38,38,.5); }

.xh-title-tho .xh-title-main {
    color: #d4a574;
    text-shadow: 0 0 20px rgba(161,98,7,.7), 0 0 40px rgba(212,165,116,.35);
}
.xh-title-tho .xh-title-deco { color: #a16207; text-shadow: 0 0 16px rgba(161,98,7,.9); }
.xh-title-tho .xh-title-sub { color: #c28a52; text-shadow: 0 0 10px rgba(161,98,7,.5); }

.xh-title-thanh .xh-title-main {
    color: #67e8f9;
    text-shadow: 0 0 20px rgba(6,182,212,.7), 0 0 40px rgba(103,232,249,.35);
}
.xh-title-thanh .xh-title-deco { color: #06b6d4; text-shadow: 0 0 16px rgba(6,182,212,.9); }
.xh-title-thanh .xh-title-sub { color: #22d3ee; text-shadow: 0 0 10px rgba(6,182,212,.5); }

.xh-title-tu .xh-title-main {
    color: #c4b5fd;
    text-shadow: 0 0 20px rgba(124,58,237,.7), 0 0 40px rgba(196,181,253,.35);
}
.xh-title-tu .xh-title-deco { color: #a78bfa; text-shadow: 0 0 16px rgba(124,58,237,.9); }
.xh-title-tu .xh-title-sub { color: #a78bfa; text-shadow: 0 0 10px rgba(124,58,237,.5); }

.xh-title-main-sm { font-size: 1.35rem; letter-spacing: 1.8px; gap: 10px; }
.xh-title-main-sm ~ .xh-title-sub,
.xh-title-wrap:has(.xh-title-main-sm) .xh-title-sub { font-size: .7rem; letter-spacing: 3px; }

/* Gloss — nghĩa gốc đi kèm tên tiên hiệp */
.xh-gloss {
    font-size: .68em;
    font-weight: 500;
    opacity: .55;
    margin-left: 4px;
    letter-spacing: normal;
    text-transform: none;
}

/* ── xh-muted: muted secondary text (dark-bg readable, giữ nguyên size) ── */
/* Thay inline style="color:#9ca3af" ở blade. Không chained size như .xh-gloss. */
.xh-muted { color: #cbd5e1 !important; }

/* Link Kim */
.xh-link-kim {
    color: var(--xh-kim) !important;
    text-decoration: none;
    transition: text-shadow .2s;
}
.xh-link-kim:hover {
    text-shadow: 0 0 12px rgba(253,230,138,.6);
}

/* Link Mộc */
.xh-link-moc {
    color: var(--xh-moc) !important;
    text-decoration: none;
    transition: text-shadow .2s;
}
.xh-link-moc:hover {
    text-shadow: 0 0 12px rgba(16,185,129,.6);
}

.xh-lead-muted { color: rgba(196,181,253,.65); }

/* Inline code (trong step description) */
.xh-code-inline {
    color: var(--xh-kim);
    background: rgba(253,230,138,.1);
    border: 1px solid rgba(253,230,138,.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

/* Alert Hỏa ở đầu panel */
.recharge-alert-custom {
    background: linear-gradient(90deg, rgba(220,38,38,.08), rgba(220,38,38,.18), rgba(220,38,38,.08)) !important;
    border: 1px solid rgba(220,38,38,.4);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    box-shadow: 0 0 20px rgba(220,38,38,.1), inset 0 0 12px rgba(220,38,38,.08);
}
.recharge-alert-custom .main-text {
    color: #fca5a5 !important;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
    font-size: .95rem;
    text-shadow: 0 0 10px rgba(252,165,165,.4);
}
.recharge-alert-custom .sub-text {
    color: rgba(252,165,165,.75) !important;
    font-weight: 600;
    font-size: .88rem;
}

/* Thiên Mệnh Phù — transfer code container (dùng accent vars từ parent panel) */
.transfer-code-container {
    background: var(--xh-accent-inner, rgba(253,230,138,.08));
    border: 1px solid var(--xh-accent-border, rgba(253,230,138,.45));
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 0 24px var(--xh-accent-glow, rgba(253,230,138,.15)), inset 0 0 20px var(--xh-accent-inner, rgba(253,230,138,.05));
}
.transfer-code-container:hover {
    background: var(--xh-accent-glow, rgba(253,230,138,.14));
    transform: translateY(-2px);
    box-shadow: 0 6px 32px var(--xh-accent-glow, rgba(253,230,138,.3)), inset 0 0 24px var(--xh-accent-inner, rgba(253,230,138,.1));
    border-color: var(--xh-accent, var(--xh-kim));
}
.transfer-code-value {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    color: var(--xh-accent-light, var(--xh-kim));
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 16px var(--xh-accent-glow, rgba(253,230,138,.55));
}
.transfer-code-container i.ki-copy {
    color: var(--xh-accent-light, var(--xh-kim));
}

/* Bank card */
.recharge-card {
    background: linear-gradient(180deg, rgba(26,15,46,.55), rgba(10,8,32,.78)) !important;
    border: 1px solid rgba(253,230,138,.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 0 20px rgba(253,230,138,.05) !important;
    transition: all .3s ease;
}
.recharge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 24px rgba(253,230,138,.25), inset 0 0 24px rgba(253,230,138,.08) !important;
    border-color: var(--xh-kim) !important;
}

/* Badge icon color helpers */
.xh-badge-moc i { color: var(--xh-moc) !important; }
.xh-badge-kim i { color: var(--xh-kim) !important; }

/* Bank logo wrapper — GIỮ nền sáng để logo đọc được */
.bank-logo-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f0e3;
    border: 1px solid rgba(253,230,138,.45);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 14px rgba(253,230,138,.18);
}
.bank-logo-wrapper img { filter: none; }

/* Bank info box — "ngọc giản" cream mờ */
.bank-info-box {
    background: rgba(255,248,220,.05);
    border: 1px dashed rgba(253,230,138,.4);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
}
.bank-info-label {
    color: rgba(196,181,253,.7);
    font-weight: 600;
    font-size: .85rem;
}
.bank-info-value {
    color: var(--xh-kim);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .5px;
    text-shadow: 0 0 8px rgba(253,230,138,.35);
}
.bank-info-name {
    color: #e5e7eb;
    font-weight: 700;
    font-size: .85rem;
}
.bank-info-copy {
    color: rgba(253,230,138,.6) !important;
    background: transparent !important;
    border: 1px solid rgba(253,230,138,.25);
    transition: all .2s;
}
.bank-info-copy:hover {
    color: var(--xh-kim) !important;
    border-color: var(--xh-kim);
    box-shadow: 0 0 10px rgba(253,230,138,.3);
}

/* Bank meta (limit / time) */
.bank-meta-label {
    color: rgba(196,181,253,.55);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.bank-meta-min {
    color: #fca5a5;
    font-weight: 800;
    font-size: 1.05rem;
    text-shadow: 0 0 8px rgba(252,165,165,.3);
}
.bank-meta-time {
    color: #e9d5ff;
    font-weight: 800;
    font-size: 1.05rem;
}

/* Button Kim (CTA) */
.xh-btn-kim {
    background: linear-gradient(135deg, #92400e 0%, #b45309 30%, #d97706 50%, #b45309 70%, #92400e 100%) !important;
    color: #fef3c7 !important;
    border: 1px solid rgba(253,230,138,.7) !important;
    box-shadow: 0 4px 16px rgba(245,158,11,.5), inset 0 1px 0 rgba(253,230,138,.35);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-kim:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #b45309 0%, #d97706 30%, #f59e0b 50%, #d97706 70%, #b45309 100%) !important;
    box-shadow: 0 8px 28px rgba(245,158,11,.65), 0 0 24px rgba(253,230,138,.4), inset 0 1px 0 rgba(253,230,138,.5);
    color: #fff !important;
}
.xh-btn-kim .xh-gloss { color: rgba(254,243,199,.8); opacity: 1; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

.xh-btn-kim-outline {
    background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(253,230,138,.12)) !important;
    border: 1px solid rgba(253,230,138,.45) !important;
    color: var(--xh-kim) !important;
    transition: all .2s;
}
.xh-btn-kim-outline:hover {
    background: linear-gradient(135deg, rgba(245,158,11,.4), rgba(253,230,138,.2)) !important;
    box-shadow: 0 0 18px rgba(253,230,138,.35);
    color: #fff !important;
}

/* Button Hỏa outline (đóng modal) */
.xh-btn-hoa {
    background: transparent !important;
    border: 1px solid rgba(220,38,38,.45) !important;
    color: #fca5a5 !important;
    letter-spacing: .5px;
    transition: all .2s;
}
.xh-btn-hoa:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(220,38,38,.35);
}

/* Modal QR — Truyền Tống Linh Thạch */
.xh-qr-modal .modal-content {
    background: linear-gradient(180deg, rgba(20,12,48,.96), rgba(10,8,32,.98)) !important;
    border: 1px solid rgba(253,230,138,.45) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(253,230,138,.18);
}
.xh-qr-header {
    background: linear-gradient(90deg, rgba(253,230,138,.12), rgba(245,158,11,.28), rgba(253,230,138,.12)) !important;
    border-bottom: 1px solid rgba(253,230,138,.35) !important;
}
.xh-qr-header .modal-title {
    color: var(--xh-kim) !important;
    text-shadow: 0 0 14px rgba(253,230,138,.5);
    letter-spacing: .5px;
}
.xh-qr-header .modal-title i { color: var(--xh-kim) !important; }
.xh-qr-body { background: transparent !important; }
.xh-qr-image-wrap {
    display: inline-block;
    background: #fff;
    padding: 1rem;
    border-radius: 14px;
    border: 2px solid rgba(253,230,138,.55);
    box-shadow: 0 0 30px rgba(253,230,138,.3);
    margin-bottom: 1.2rem;
}
.xh-qr-code-box {
    background: rgba(253,230,138,.08);
    border: 1px dashed rgba(253,230,138,.5);
    border-radius: 10px;
    padding: 1rem 1.2rem;
}
.xh-qr-code-label {
    display: block;
    color: rgba(196,181,253,.7);
    font-size: .8rem;
    margin-bottom: 6px;
}
.xh-qr-code-value {
    color: var(--xh-kim);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-shadow: 0 0 14px rgba(253,230,138,.5);
    font-family: 'JetBrains Mono', monospace;
}
.xh-qr-hint {
    color: rgba(196,181,253,.55);
    font-size: .82rem;
}
.xh-qr-footer { background: transparent; }

/* Pháp Quyết Truyền Thụ — step */
.step-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--xh-thuy-deep), var(--xh-thuy)) !important;
    color: #fff;
    font-weight: 800;
    margin-right: 16px;
    flex-shrink: 0;
    font-size: 1.05rem;
    box-shadow: 0 0 14px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.25);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.step-title { color: #e9d5ff; }
.step-title i { color: var(--xh-thuy) !important; text-shadow: 0 0 8px rgba(59,130,246,.5); }
.step-desc { color: rgba(221,214,254,.92); }
.step-desc strong { color: #fde68a; }

.xh-separator-thuy {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.45), transparent);
    border: 0;
    position: relative;
}
.xh-separator-thuy::after {
    content: "❈";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: var(--xh-thuy);
    background: #0d1e3e;
    padding: 0 10px;
    font-size: .9rem;
    text-shadow: 0 0 10px rgba(59,130,246,.6);
}

/* Notice Hỏa */
.xh-notice-hoa {
    background: rgba(220,38,38,.1) !important;
    border: 1px dashed rgba(220,38,38,.45) !important;
    box-shadow: inset 0 0 18px rgba(220,38,38,.08);
}
.xh-notice-hoa i { color: #fca5a5 !important; text-shadow: 0 0 12px rgba(252,165,165,.4); }
.xh-notice-title { color: #fca5a5 !important; text-shadow: 0 0 10px rgba(252,165,165,.35); }
.xh-notice-body { color: #e5e7eb; }

/* Gloss readable trong notice/callout boxes — .xh-gloss default quá bé (.68em, opacity .55)
   Trong context notice cần đọc rõ sub, boost lên */
.notice[class*="xh-notice-"] .xh-gloss,
.xh-notice .xh-gloss,
.xh-notice-title .xh-gloss {
    font-size: .82em !important;
    opacity: .9 !important;
}

/* Bank grid responsive tweak */
@media (max-width: 576px) {
    .transfer-code-value { font-size: 1.7rem; letter-spacing: 1px; }
    .xh-qr-code-value { font-size: 1.1rem; letter-spacing: 1px; }
}

/* =================================================================
   SIDEBAR — Long Trấn Kim Đình (kim theme, share concept với toolbar)
   ================================================================= */
#kt_app_sidebar {
    background:
        radial-gradient(ellipse 90% 30% at 50% 0%, rgba(245,158,11,.22), transparent 70%),
        radial-gradient(ellipse 90% 30% at 50% 100%, rgba(245,158,11,.22), transparent 70%),
        radial-gradient(ellipse 70% 40% at 50% 50%, rgba(147,51,234,.08), transparent 70%),
        linear-gradient(180deg, #1a0f08 0%, #1f1410 50%, #1a0e08 100%) !important;
    border-right: 1px solid rgba(253,230,138,.35);
}
/* Viền phải kim glow */
#kt_app_sidebar::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(253,230,138,.25) 10%,
        rgba(245,158,11,.85) 50%,
        rgba(253,230,138,.25) 90%,
        transparent 100%);
    box-shadow:
        0 0 14px rgba(245,158,11,.6),
        0 0 30px rgba(180,83,9,.45),
        0 0 60px rgba(245,158,11,.2);
    pointer-events: none;
    z-index: 5;
}
/* Rồng đứng watermark — dragon2.png mask + kim glow fill */
.xh-dragon-vertical {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 75%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(253,230,138,.9) 0%,
        rgba(245,158,11,.75) 35%,
        rgba(180,83,9,.45) 70%,
        transparent 100%);
    -webkit-mask: url("/img/dragon2.png") center/contain no-repeat;
            mask: url("/img/dragon2.png") center/contain no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    opacity: .28;
    filter: drop-shadow(0 0 12px rgba(253,230,138,.5));
    pointer-events: none;
    z-index: 0;
    animation: xh-dragon-breathe 4s ease-in-out infinite alternate;
}
/* Logo plaque — kim khắc ngọc (kim plaque with corner brackets) */
#kt_app_sidebar_logo {
    position: relative;
    z-index: 2;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    justify-content: center !important;  /* toggle button absolute → center logo trong plaque */
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(253,230,138,.22), transparent 75%),
        linear-gradient(180deg, #241812 0%, #18100a 100%);
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, transparent 2%, rgba(253,230,138,.9) 20%, rgba(245,158,11,.7) 50%, rgba(253,230,138,.9) 80%, transparent 98%) 1;
    box-shadow:
        inset 0 0 40px rgba(245,158,11,.22),
        inset 0 0 2px rgba(253,230,138,.5),
        0 2px 16px rgba(253,230,138,.35);
}
/* Logo img — phát sáng kim */
#kt_app_sidebar_logo a {
    display: flex;
    align-items: center;
    min-width: 0;
}

.site-logo-img {
    width: 160px;
    max-width: 100%;
    height: auto !important;
    max-height: 40px;
    object-fit: contain;
}

.site-logo-img--mobile {
    width: 144px;
    max-height: 36px;
}

#kt_app_sidebar_logo .app-sidebar-logo-default.site-logo-img {
    width: 168px;
    max-width: 168px;
    max-height: 42px;
    transform: translateX(-10px);
}

#kt_app_sidebar_logo .app-sidebar-logo-minimize.site-logo-img {
    width: 40px;
    max-width: 40px;
    height: 40px !important;
    object-fit: cover;
    object-position: left center;
}

#kt_app_sidebar_logo .app-sidebar-logo-default {
    filter:
        drop-shadow(0 0 6px rgba(253,230,138,.85))
        drop-shadow(0 0 14px rgba(245,158,11,.55))
        brightness(1.15);
}
/* 4 góc kim khắc (corner brackets) */
#kt_app_sidebar_logo::before,
#kt_app_sidebar_logo::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(245,158,11,.8));
}
#kt_app_sidebar_logo::before {
    top: 6px; left: 8px;
    border-top: 2px solid rgba(253,230,138,.95);
    border-left: 2px solid rgba(253,230,138,.95);
}
#kt_app_sidebar_logo::after {
    bottom: 10px; right: 8px;
    border-bottom: 2px solid rgba(253,230,138,.95);
    border-right: 2px solid rgba(253,230,138,.95);
}
/* Toggle nút thu gọn — viền kim */
#kt_app_sidebar_toggle {
    background: linear-gradient(135deg, #2a1a10, #1a0f08) !important;
    border: 1px solid rgba(253,230,138,.6) !important;
    box-shadow: 0 0 10px rgba(245,158,11,.5) !important;
    color: rgba(253,230,138,.95) !important;
}
#kt_app_sidebar_toggle i { color: rgba(253,230,138,.95) !important; }
#kt_app_sidebar_toggle:hover {
    background: linear-gradient(135deg, #3a2418, #241510) !important;
    box-shadow: 0 0 16px rgba(245,158,11,.75) !important;
}
/* Footer — kim */
#kt_app_sidebar_footer {
    position: relative;
    z-index: 2;
    background: linear-gradient(0deg, rgba(245,158,11,.22) 0%, transparent 100%);
    border-top: 2px solid transparent !important;
    border-image: linear-gradient(90deg, transparent, rgba(253,230,138,.85), rgba(245,158,11,.6), rgba(253,230,138,.85), transparent) 1;
    box-shadow: inset 0 8px 20px rgba(245,158,11,.18);
}
/* Menu wrapper — reset, không cần padding vì strips đã chuyển ra outer */
#kt_app_sidebar_menu_wrapper {
    position: relative;
    z-index: 1;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}
/* 2 dải Hồi Văn kim ở top/bottom vùng menu — đặt trên .app-sidebar-menu (non-scroll parent) để KHÔNG scroll theo content */
.app-sidebar-menu {
    position: relative;
}
.app-sidebar-menu::before,
.app-sidebar-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    /* Fill: vệt kim sáng chạy ngang — background-size 35% + repeat-x + shift Y → light wave flow */
    background: linear-gradient(90deg,
        rgba(180,83,9,.9)     0%,
        rgba(245,158,11,.95) 25%,
        rgba(253,230,138,1)  42%,
        rgba(255,253,230,1)  50%,
        rgba(253,230,138,1)  58%,
        rgba(245,158,11,.95) 75%,
        rgba(180,83,9,.9)   100%);
    background-size: 200px 100%;
    background-repeat: repeat-x;
    will-change: background-position;
    /* Mask: hoa văn vien.png — stretch 106% để cắt mép padding của ảnh, tránh đứt 2 đầu */
    -webkit-mask: url("/img/vien.png") center center / 106% 110% no-repeat;
            mask: url("/img/vien.png") center center / 106% 110% no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    filter: drop-shadow(0 0 8px rgba(253,230,138,.8));
    pointer-events: none;
    z-index: 3;
    animation:
        xh-vien-flow  8s linear infinite,
        xh-vien-pulse 4s ease-in-out infinite alternate;
}
.app-sidebar-menu::before { top: 0; }
.app-sidebar-menu::after  {
    bottom: 0;
    transform: scaleY(-1);              /* lật dọc cho đối xứng */
    animation-direction: reverse, alternate;  /* đáy chạy ngược chiều, pulse lệch pha */
    animation-delay: -4s, -2s;
}

@keyframes xh-vien-flow {
    0%   { background-position-x: 0; }
    100% { background-position-x: -200px; }
}
@keyframes xh-vien-pulse {
    0%   { filter: drop-shadow(0 0 4px rgba(253,230,138,.4))  brightness(.85); }
    100% { filter: drop-shadow(0 0 14px rgba(253,230,138,1))  brightness(1.2); }
}

/* =================================================================
   PROFILE PAGE — Chân Nhân Lục
   ================================================================= */

/* ── Corner hành variants (hỏa, mộc, thủy, thổ) ── */
.xh-corner-hoa {
    background: radial-gradient(circle, #fca5a5 0%, #ef4444 60%, transparent 100%);
    box-shadow: 0 0 12px #ef4444, 0 0 24px rgba(239,68,68,.7);
}
.xh-corner-moc {
    background: radial-gradient(circle, #6ee7b7 0%, #10b981 60%, transparent 100%);
    box-shadow: 0 0 12px #10b981, 0 0 24px rgba(16,185,129,.7);
}
.xh-corner-thuy {
    background: radial-gradient(circle, #93c5fd 0%, #3b82f6 60%, transparent 100%);
    box-shadow: 0 0 12px #3b82f6, 0 0 24px rgba(59,130,246,.7);
}
.xh-corner-tho {
    background: radial-gradient(circle, #d4a574 0%, #a16207 60%, transparent 100%);
    box-shadow: 0 0 12px #a16207, 0 0 24px rgba(161,98,7,.7);
}
.xh-corner-thanh {
    background: radial-gradient(circle, #67e8f9 0%, #06b6d4 60%, transparent 100%);
    box-shadow: 0 0 12px #06b6d4, 0 0 24px rgba(6,182,212,.7);
}
.xh-corner-tu {
    background: radial-gradient(circle, #c4b5fd 0%, #7c3aed 60%, transparent 100%);
    box-shadow: 0 0 12px #7c3aed, 0 0 24px rgba(124,58,237,.7);
}

/* ── Button hành variants ── */
.xh-btn-thuy {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 40%, #2563eb 60%, #1e40af 100%) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(59,130,246,.65) !important;
    box-shadow: 0 4px 16px rgba(59,130,246,.45), inset 0 1px 0 rgba(147,197,253,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-thuy:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #60a5fa 60%, #3b82f6 100%) !important;
    box-shadow: 0 8px 28px rgba(59,130,246,.6), 0 0 24px rgba(147,197,253,.35);
    color: #fff !important;
}

.xh-btn-thuy-outline {
    background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(147,197,253,.12)) !important;
    border: 1px solid rgba(59,130,246,.45) !important;
    color: #93c5fd !important;
    transition: all .2s;
}
.xh-btn-thuy-outline:hover {
    background: linear-gradient(135deg, rgba(59,130,246,.4), rgba(147,197,253,.2)) !important;
    box-shadow: 0 0 18px rgba(59,130,246,.35);
    color: #fff !important;
}

.xh-btn-moc {
    background: linear-gradient(135deg, #064e3b 0%, #047857 40%, #10b981 60%, #047857 100%) !important;
    color: #a7f3d0 !important;
    border: 1px solid rgba(16,185,129,.65) !important;
    box-shadow: 0 4px 16px rgba(16,185,129,.45), inset 0 1px 0 rgba(110,231,183,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-moc:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #047857 0%, #10b981 40%, #34d399 60%, #10b981 100%) !important;
    box-shadow: 0 8px 28px rgba(16,185,129,.6), 0 0 24px rgba(110,231,183,.35);
    color: #fff !important;
}

.xh-btn-hoa-solid {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 30%, #dc2626 50%, #b91c1c 70%, #7f1d1d 100%) !important;
    color: #fecaca !important;
    border: 1px solid rgba(239,68,68,.7) !important;
    box-shadow: 0 4px 16px rgba(220,38,38,.45), inset 0 1px 0 rgba(252,165,165,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-hoa-solid:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 30%, #ef4444 50%, #dc2626 70%, #b91c1c 100%) !important;
    box-shadow: 0 8px 28px rgba(220,38,38,.6), 0 0 24px rgba(252,165,165,.35);
    color: #fff !important;
}

/* Button Hỏa outline (alias — xh-btn-hoa đã là outline style) */
.xh-btn-hoa-outline { /* alias cho tên nhất quán */
    background: transparent !important;
    border: 1px solid rgba(220,38,38,.45) !important;
    color: #fca5a5 !important;
    letter-spacing: .5px;
    transition: all .2s;
}
.xh-btn-hoa-outline:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(220,38,38,.35);
}

/* Button Thổ */
.xh-btn-tho {
    background: linear-gradient(135deg, #92400e 0%, #b45309 30%, #d97706 50%, #b45309 70%, #92400e 100%) !important;
    color: #fef3c7 !important;
    border: 1px solid rgba(251,191,36,.55) !important;
    box-shadow: 0 4px 16px rgba(217,119,6,.55), inset 0 1px 0 rgba(253,230,138,.4), 0 0 20px rgba(251,191,36,.25);
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 8px rgba(253,230,138,.35);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-tho i { color: #fde68a !important; filter: drop-shadow(0 0 6px rgba(253,230,138,.85)); }
.xh-btn-tho .xh-gloss { color: rgba(254,243,199,.88) !important; opacity: 1 !important; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.xh-btn-tho:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #b45309 0%, #d97706 30%, #f59e0b 50%, #d97706 70%, #b45309 100%) !important;
    box-shadow: 0 8px 28px rgba(217,119,6,.7), 0 0 32px rgba(253,230,138,.5);
    color: #fff !important;
}
.xh-btn-tho-outline {
    background: linear-gradient(135deg, rgba(161,98,7,.25), rgba(212,165,116,.12)) !important;
    border: 1px solid rgba(161,98,7,.45) !important;
    color: #d4a574 !important;
    transition: all .2s;
}
.xh-btn-tho-outline:hover {
    background: linear-gradient(135deg, rgba(161,98,7,.4), rgba(212,165,116,.2)) !important;
    box-shadow: 0 0 18px rgba(161,98,7,.35);
    color: #fff !important;
}

/* Button Thanh (cyan) */
.xh-btn-thanh {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 30%, #06b6d4 50%, #0891b2 70%, #0e7490 100%) !important;
    color: #a5f3fc !important;
    border: 1px solid rgba(6,182,212,.65) !important;
    box-shadow: 0 4px 16px rgba(6,182,212,.45), inset 0 1px 0 rgba(103,232,249,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-thanh i { color: #fff !important; filter: drop-shadow(0 0 4px rgba(103,232,249,.6)); }
.xh-btn-thanh:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 30%, #22d3ee 50%, #06b6d4 70%, #0891b2 100%) !important;
    box-shadow: 0 8px 28px rgba(6,182,212,.6), 0 0 24px rgba(103,232,249,.35);
    color: #fff !important;
}
.xh-btn-thanh-outline {
    background: linear-gradient(135deg, rgba(6,182,212,.25), rgba(103,232,249,.12)) !important;
    border: 1px solid rgba(6,182,212,.45) !important;
    color: #67e8f9 !important;
    transition: all .2s;
}
.xh-btn-thanh-outline i { color: #a5f3fc !important; filter: drop-shadow(0 0 3px rgba(103,232,249,.5)); }
.xh-btn-thanh-outline:hover {
    background: linear-gradient(135deg, rgba(6,182,212,.4), rgba(103,232,249,.2)) !important;
    box-shadow: 0 0 18px rgba(6,182,212,.35);
    color: #fff !important;
}

/* Button Tử (purple) */
.xh-btn-tu {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 30%, #7c3aed 50%, #6d28d9 70%, #4c1d95 100%) !important;
    color: #ddd6fe !important;
    border: 1px solid rgba(124,58,237,.65) !important;
    box-shadow: 0 4px 16px rgba(124,58,237,.45), inset 0 1px 0 rgba(196,181,253,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-tu:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 30%, #8b5cf6 50%, #7c3aed 70%, #6d28d9 100%) !important;
    box-shadow: 0 8px 28px rgba(124,58,237,.6), 0 0 24px rgba(196,181,253,.35);
    color: #fff !important;
}
.xh-btn-tu-outline {
    background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(196,181,253,.12)) !important;
    border: 1px solid rgba(124,58,237,.45) !important;
    color: #c4b5fd !important;
    transition: all .2s;
}
.xh-btn-tu-outline:hover {
    background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(196,181,253,.2)) !important;
    box-shadow: 0 0 18px rgba(124,58,237,.35);
    color: #fff !important;
}

/* Button Mộc outline */
.xh-btn-moc-outline {
    background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(110,231,183,.12)) !important;
    border: 1px solid rgba(16,185,129,.45) !important;
    color: #6ee7b7 !important;
    transition: all .2s;
}
.xh-btn-moc-outline:hover {
    background: linear-gradient(135deg, rgba(16,185,129,.4), rgba(110,231,183,.2)) !important;
    box-shadow: 0 0 18px rgba(16,185,129,.35);
    color: #fff !important;
}

/* ── Sidebar profile — Thổ (earth/amber tối) ── */
.xh-profile-sidebar {
    background:
        radial-gradient(ellipse at top, rgba(161,98,7,.18), transparent 65%),
        linear-gradient(180deg, #1a1408 0%, #2a2210 50%, #1a1408 100%);
    border: 1px solid rgba(212,165,116,.3);
    border-radius: 14px;
    overflow: hidden;
}

/* Banner (avatar area) */
.xh-profile-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 20px;
    background:
        radial-gradient(ellipse 80% 50% at 50% 40%, rgba(161,98,7,.28), transparent 70%),
        linear-gradient(180deg, #2a2010 0%, #1a1408 100%);
    border-bottom: 1px solid rgba(212,165,116,.22);
}
.xh-profile-avatar {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #78350f, #a16207, #ca8a04);
    box-shadow: 0 0 22px rgba(161,98,7,.55), 0 0 44px rgba(212,165,116,.2);
    margin-bottom: 12px;
}
.xh-profile-initial {
    font-size: 1.6rem; font-weight: 900; color: #fef3c7;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.xh-profile-name {
    color: #d4a574; font-weight: 700; font-size: 1.05rem;
    text-shadow: 0 0 10px rgba(212,165,116,.35);
}
.xh-profile-username {
    color: rgba(212,165,116,.55); font-size: .85rem; margin-top: 2px;
}
.xh-profile-level {
    display: inline-block; margin-top: 8px;
    background: linear-gradient(135deg, rgba(161,98,7,.35), rgba(212,165,116,.15));
    border: 1px solid rgba(212,165,116,.45);
    color: #d4a574; font-weight: 700; font-size: .75rem;
    padding: 3px 14px; border-radius: 20px;
    text-shadow: 0 0 8px rgba(161,98,7,.35);
    box-shadow: 0 0 12px rgba(161,98,7,.2);
}

/* Nav */
.xh-profile-nav {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px;
}
.xh-profile-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    color: rgba(212,165,116,.6);
    font-weight: 600; font-size: .88rem;
    text-decoration: none;
    transition: all .2s;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.xh-profile-nav-item:hover {
    background: rgba(161,98,7,.12);
    color: #d4a574;
    border-left-color: rgba(161,98,7,.4);
}
.xh-profile-nav-item.active {
    background: linear-gradient(90deg, rgba(161,98,7,.22), rgba(212,165,116,.08));
    color: #d4a574;
    border-left-color: #a16207;
    text-shadow: 0 0 8px rgba(161,98,7,.3);
}
.xh-profile-nav-icon {
    width: 28px; text-align: center;
}
.xh-profile-nav-icon i {
    color: inherit !important;
}
.xh-profile-nav-item.active .xh-profile-nav-icon i {
    filter: drop-shadow(0 0 6px rgba(161,98,7,.7));
}
.xh-nav-sub {
    color: rgba(212,165,116,.35);
    font-size: .72rem; font-weight: 400;
    margin-left: 4px;
}
.xh-profile-nav-item.active .xh-nav-sub {
    color: rgba(212,165,116,.5);
}

/* Quick stats */
.xh-profile-stats {
    display: flex; gap: 0;
    border-top: 1px solid rgba(212,165,116,.18);
}
.xh-profile-stat {
    flex: 1; text-align: center; padding: 14px 8px;
}
.xh-profile-stat:first-child {
    border-right: 1px solid rgba(212,165,116,.12);
}
.xh-profile-stat-value {
    font-weight: 800; font-size: 1rem;
    color: #d4a574;
    text-shadow: 0 0 8px rgba(161,98,7,.3);
}
.xh-profile-stat-value.xh-stat-moc {
    color: #6ee7b7;
    text-shadow: 0 0 8px rgba(16,185,129,.35);
}
.xh-profile-stat-label {
    color: rgba(212,165,116,.65); font-size: .68rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    margin-top: 3px;
    text-shadow: 0 0 6px rgba(161,98,7,.2);
}
.xh-profile-stat-sub {
    color: rgba(212,165,116,.35); font-size: .6rem;
    font-weight: 500; letter-spacing: .5px;
    margin-top: 1px;
}

/* ── Form dark glass (inherits panel hành via CSS vars) ── */
.xh-form-label {
    display: block;
    color: var(--xh-accent-light, #fde68a);
    opacity: 1;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 6px;
    text-shadow: 0 0 8px var(--xh-accent-glow, rgba(253,230,138,.35));
}
.xh-form-label .xh-gloss {
    opacity: .85 !important;
    color: var(--xh-accent-light, rgba(253,230,138,.8));
    font-weight: 500;
}
.xh-form-input {
    display: block; width: 100%;
    background: rgba(0,0,0,.35) !important;
    border: 1px solid var(--xh-accent-border, rgba(253,230,138,.25)) !important;
    border-radius: 8px;
    color: var(--xh-accent-light, #fde68a) !important;
    padding: 9px 14px;
    font-size: .88rem;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.xh-form-input::placeholder {
    color: var(--xh-accent-light, rgba(253,230,138,.3));
    opacity: .35;
}
.xh-form-input:focus {
    border-color: var(--xh-accent, rgba(245,158,11,.7)) !important;
    box-shadow: 0 0 12px var(--xh-accent-glow, rgba(245,158,11,.3)), inset 0 0 6px var(--xh-accent-glow, rgba(245,158,11,.1));
}
.xh-form-readonly {
    opacity: .65;
    border-style: dashed !important;
    cursor: default;
}
.xh-form-highlight {
    color: var(--xh-accent, #f59e0b) !important;
    font-weight: 700;
    opacity: .8;
}
.xh-form-code {
    letter-spacing: 4px;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Badges ── */
.xh-badge-moc {
    display: inline-block;
    background: rgba(16,185,129,.18);
    border: 1px solid rgba(16,185,129,.4);
    color: #6ee7b7; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-hoa {
    display: inline-block;
    background: rgba(220,38,38,.18);
    border: 1px solid rgba(220,38,38,.4);
    color: #fca5a5; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-thuy {
    display: inline-block;
    background: rgba(59,130,246,.18);
    border: 1px solid rgba(59,130,246,.4);
    color: #93c5fd; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-tho {
    display: inline-block;
    background: rgba(161,98,7,.18);
    border: 1px solid rgba(161,98,7,.4);
    color: #d4a574; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-thanh {
    display: inline-block;
    background: rgba(6,182,212,.18);
    border: 1px solid rgba(6,182,212,.4);
    color: #67e8f9; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-kim {
    display: inline-block;
    background: rgba(245,158,11,.18);
    border: 1px solid rgba(245,158,11,.4);
    color: #fde68a; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-tu {
    display: inline-block;
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(124,58,237,.4);
    color: #c4b5fd; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}

/* ═══ Hư — Luyện Hư (nhân viên sale) — slate indigo + silver shield glow ═══ */
.xh-badge-hu {
    display: inline-block;
    background: linear-gradient(135deg, rgba(15,23,42,.95) 0%, rgba(30,41,59,.85) 50%, rgba(15,23,42,.95) 100%);
    border: 1px solid rgba(129,140,248,.55);
    color: #c7d2fe;
    font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
    text-shadow: 0 0 8px rgba(129,140,248,.6);
    box-shadow: inset 0 0 8px rgba(129,140,248,.18), 0 0 10px rgba(99,102,241,.15);
    position: relative; overflow: hidden;
}
.xh-badge-hu::before {
    content: "❖"; margin-right: 4px;
    color: #818cf8; text-shadow: 0 0 6px rgba(129,140,248,.9);
    font-size: .75em; vertical-align: middle;
}
.xh-badge-hu i {
    color: #818cf8 !important;
    text-shadow: 0 0 6px rgba(129,140,248,.7);
}

/* ═══ Kiếp — Độ Kiếp (tribulation) — nền void đen tím + ánh sét vàng ═══ */
.xh-badge-kiep {
    display: inline-block;
    background: linear-gradient(135deg, rgba(10,6,18,.95) 0%, rgba(30,10,50,.85) 50%, rgba(10,6,18,.95) 100%);
    border: 1px solid rgba(251,191,36,.55);
    color: #fde68a;
    font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
    text-shadow: 0 0 8px rgba(251,191,36,.6), 0 0 2px rgba(168,85,247,.4);
    box-shadow: inset 0 0 8px rgba(251,191,36,.18), 0 0 10px rgba(168,85,247,.15);
    position: relative; overflow: hidden;
}
.xh-badge-kiep::before {
    content: "⚡"; margin-right: 3px;
    color: #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,.8);
    font-size: .7em; vertical-align: middle;
}
.xh-badge-kiep i {
    color: #fbbf24 !important;
    text-shadow: 0 0 6px rgba(251,191,36,.6);
}

/* ── Telegram box (inherits hành from parent panel via CSS vars) ── */
.xh-telegram-box {
    background: var(--xh-accent-glow, rgba(59,130,246,.08));
    border: 1px solid var(--xh-accent-border, rgba(59,130,246,.3));
    border-radius: 12px;
    padding: 18px;
}
.xh-telegram-icon {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--xh-accent-inner, #1e40af), var(--xh-accent, #3b82f6));
    border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 16px var(--xh-accent-glow, rgba(59,130,246,.45));
}
.xh-telegram-title {
    color: var(--xh-accent-light, #93c5fd); font-weight: 700; font-size: .95rem;
    text-shadow: 0 0 8px var(--xh-accent-glow, rgba(59,130,246,.3));
}
.xh-telegram-desc {
    color: var(--xh-accent-light, rgba(147,197,253,.6)); opacity: .6;
    font-size: .82rem; margin-top: 2px;
}

/* ── 2FA section (Mộc) ── */
.xh-2fa-qr-frame {
    background: rgba(16,185,129,.06);
    border: 1px dashed rgba(16,185,129,.35);
    border-radius: 14px;
    padding: 20px;
}
.xh-2fa-qr-inner {
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 0 20px rgba(16,185,129,.25);
}
.xh-2fa-secret {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(16,185,129,.1);
    border: 1px dashed rgba(16,185,129,.45);
    border-radius: 8px;
    padding: 10px 14px;
}
.xh-2fa-secret-code {
    color: #6ee7b7; font-weight: 800; font-size: .95rem;
    font-family: 'JetBrains Mono', monospace;
    background: transparent; padding: 0;
    letter-spacing: 1px;
}
.xh-2fa-copy-btn i { color: #6ee7b7 !important; }
.xh-2fa-copy-btn:hover i { color: #34d399 !important; }

.xh-2fa-step-num {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #047857, #10b981);
    color: #fff; font-weight: 800; font-size: .9rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(16,185,129,.5);
}
.xh-2fa-step-title {
    color: #a7f3d0; font-weight: 700; font-size: .95rem;
    text-shadow: 0 0 6px rgba(16,185,129,.3);
}
.xh-2fa-step-desc {
    color: rgba(167,243,208,.55); font-size: .82rem;
}
.xh-2fa-step-desc strong { color: #fde68a; }

.xh-2fa-active-notice {
    display: flex; align-items: center;
    background: rgba(16,185,129,.1);
    border: 1px dashed rgba(16,185,129,.4);
    border-radius: 10px;
    padding: 16px;
}
.xh-2fa-active-notice i { color: #6ee7b7 !important; text-shadow: 0 0 12px rgba(16,185,129,.5); }
.xh-2fa-active-text {
    color: rgba(167,243,208,.8); font-size: .88rem;
}
.xh-2fa-active-text strong { color: #6ee7b7; }

/* ── Login history table ── */
.xh-table-history {
    border-collapse: separate;
    border-spacing: 0;
}
.xh-table-history thead tr {
    background: rgba(59,130,246,.12);
}
.xh-table-history thead th {
    color: rgba(147,197,253,.7) !important;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    border-bottom: 1px solid rgba(59,130,246,.25) !important;
    padding: 10px 12px;
}
.xh-table-history tbody tr {
    border-bottom: 1px solid rgba(59,130,246,.1);
    transition: background .15s;
}
.xh-table-history tbody tr:hover {
    background: rgba(59,130,246,.08);
}
.xh-table-history tbody td {
    color: rgba(147,197,253,.6);
    border-bottom: 1px solid rgba(59,130,246,.1) !important;
    padding: 10px 12px;
    font-size: .82rem;
}
.xh-table-history tbody td.fw-bold {
    color: #93c5fd;
}

/* Pagination thủy */
.xh-pagination-thuy .page-link {
    background: rgba(59,130,246,.08) !important;
    border: 1px solid rgba(59,130,246,.3) !important;
    color: rgba(147,197,253,.7) !important;
    font-size: .82rem; font-weight: 600;
    padding: 6px 12px;
    transition: all .2s;
}
.xh-pagination-thuy .page-link:hover {
    background: rgba(59,130,246,.22) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 10px rgba(59,130,246,.25);
}
.xh-pagination-thuy .page-item.active .page-link {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border-color: rgba(59,130,246,.7) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(59,130,246,.5);
}
.xh-pagination-thuy .page-item.disabled .page-link {
    opacity: .35;
}

/* ── Profile responsive ── */
@media (max-width: 576px) {
    .xh-telegram-box { flex-direction: column; text-align: center; }
    .xh-telegram-box .d-flex { flex-direction: column; }
    .xh-2fa-step-title { font-size: .85rem; }
    .xh-profile-stat-value { font-size: .88rem; }
}

/* =================================================================
   NGUYÊN TỐ MỚI — Nguyệt (bạc), Phong (gió), Huyền (indigo)
   Pre-build full set: panel, title, corner, btn, badge
   ================================================================= */

/* ── Panel variants ── */
.xh-panel-nguyet {
    --xh-bg1:#151920; --xh-bg2:#1e2330;
    --xh-accent:#94a3b8; --xh-accent-light:#cbd5e1;
    --xh-accent-border: rgba(148,163,184,.4);
    --xh-accent-glow: rgba(148,163,184,.2);
    --xh-accent-inner: rgba(148,163,184,.12);
}
.xh-panel-phong {
    --xh-bg1:#05201c; --xh-bg2:#0a3028;
    --xh-accent:#2dd4bf; --xh-accent-light:#99f6e4;
    --xh-accent-border: rgba(45,212,191,.4);
    --xh-accent-glow: rgba(45,212,191,.2);
    --xh-accent-inner: rgba(45,212,191,.12);
}
.xh-panel-huyen {
    --xh-bg1:#0f0d2a; --xh-bg2:#181540;
    --xh-accent:#6366f1; --xh-accent-light:#a5b4fc;
    --xh-accent-border: rgba(99,102,241,.4);
    --xh-accent-glow: rgba(99,102,241,.2);
    --xh-accent-inner: rgba(99,102,241,.12);
}

/* ── Title variants ── */
.xh-title-nguyet .xh-title-main {
    color: #cbd5e1;
    text-shadow: 0 0 20px rgba(148,163,184,.6), 0 0 40px rgba(203,213,225,.3);
}
.xh-title-nguyet .xh-title-deco { color: #94a3b8; text-shadow: 0 0 16px rgba(148,163,184,.8); }
.xh-title-nguyet .xh-title-sub { color: #94a3b8; text-shadow: 0 0 10px rgba(148,163,184,.45); }

.xh-title-phong .xh-title-main {
    color: #99f6e4;
    text-shadow: 0 0 20px rgba(45,212,191,.7), 0 0 40px rgba(153,246,228,.35);
}
.xh-title-phong .xh-title-deco { color: #2dd4bf; text-shadow: 0 0 16px rgba(45,212,191,.9); }
.xh-title-phong .xh-title-sub { color: #5eead4; text-shadow: 0 0 10px rgba(45,212,191,.5); }

.xh-title-huyen .xh-title-main {
    color: #a5b4fc;
    text-shadow: 0 0 20px rgba(99,102,241,.7), 0 0 40px rgba(165,180,252,.35);
}
.xh-title-huyen .xh-title-deco { color: #6366f1; text-shadow: 0 0 16px rgba(99,102,241,.9); }
.xh-title-huyen .xh-title-sub { color: #818cf8; text-shadow: 0 0 10px rgba(99,102,241,.5); }

/* ── Corner variants ── */
.xh-corner-nguyet {
    background: radial-gradient(circle, #cbd5e1 0%, #94a3b8 60%, transparent 100%);
    box-shadow: 0 0 12px #94a3b8, 0 0 24px rgba(148,163,184,.7);
}
.xh-corner-phong {
    background: radial-gradient(circle, #99f6e4 0%, #2dd4bf 60%, transparent 100%);
    box-shadow: 0 0 12px #2dd4bf, 0 0 24px rgba(45,212,191,.7);
}
.xh-corner-huyen {
    background: radial-gradient(circle, #a5b4fc 0%, #6366f1 60%, transparent 100%);
    box-shadow: 0 0 12px #6366f1, 0 0 24px rgba(99,102,241,.7);
}

/* ── Button Nguyệt (bạc) ── */
.xh-btn-nguyet {
    background: linear-gradient(135deg, #475569 0%, #64748b 30%, #94a3b8 50%, #64748b 70%, #475569 100%) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148,163,184,.65) !important;
    box-shadow: 0 4px 16px rgba(148,163,184,.35), inset 0 1px 0 rgba(203,213,225,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-nguyet:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 30%, #cbd5e1 50%, #94a3b8 70%, #64748b 100%) !important;
    box-shadow: 0 8px 28px rgba(148,163,184,.5), 0 0 24px rgba(203,213,225,.3);
    color: #fff !important;
}
.xh-btn-nguyet-outline {
    background: linear-gradient(135deg, rgba(148,163,184,.2), rgba(203,213,225,.1)) !important;
    border: 1px solid rgba(148,163,184,.45) !important;
    color: #cbd5e1 !important;
    transition: all .2s;
}
.xh-btn-nguyet-outline:hover {
    background: linear-gradient(135deg, rgba(148,163,184,.35), rgba(203,213,225,.2)) !important;
    box-shadow: 0 0 18px rgba(148,163,184,.3);
    color: #fff !important;
}

/* ── Button Phong (gió) ── */
.xh-btn-phong {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 30%, #2dd4bf 50%, #14b8a6 70%, #0d9488 100%) !important;
    color: #ccfbf1 !important;
    border: 1px solid rgba(45,212,191,.65) !important;
    box-shadow: 0 4px 16px rgba(45,212,191,.45), inset 0 1px 0 rgba(153,246,228,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-phong:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 30%, #5eead4 50%, #2dd4bf 70%, #14b8a6 100%) !important;
    box-shadow: 0 8px 28px rgba(45,212,191,.6), 0 0 24px rgba(153,246,228,.35);
    color: #fff !important;
}
.xh-btn-phong-outline {
    background: linear-gradient(135deg, rgba(45,212,191,.25), rgba(153,246,228,.12)) !important;
    border: 1px solid rgba(45,212,191,.45) !important;
    color: #99f6e4 !important;
    transition: all .2s;
}
.xh-btn-phong-outline:hover {
    background: linear-gradient(135deg, rgba(45,212,191,.4), rgba(153,246,228,.2)) !important;
    box-shadow: 0 0 18px rgba(45,212,191,.35);
    color: #fff !important;
}

/* ── Button Huyền (indigo) ── */
.xh-btn-huyen {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 30%, #6366f1 50%, #4f46e5 70%, #4338ca 100%) !important;
    color: #c7d2fe !important;
    border: 1px solid rgba(99,102,241,.65) !important;
    box-shadow: 0 4px 16px rgba(99,102,241,.45), inset 0 1px 0 rgba(165,180,252,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: .5px;
    transition: all .25s;
}
.xh-btn-huyen:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 30%, #818cf8 50%, #6366f1 70%, #4f46e5 100%) !important;
    box-shadow: 0 8px 28px rgba(99,102,241,.6), 0 0 24px rgba(165,180,252,.35);
    color: #fff !important;
}
.xh-btn-huyen-outline {
    background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(165,180,252,.12)) !important;
    border: 1px solid rgba(99,102,241,.45) !important;
    color: #a5b4fc !important;
    transition: all .2s;
}
.xh-btn-huyen-outline:hover {
    background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(165,180,252,.2)) !important;
    box-shadow: 0 0 18px rgba(99,102,241,.35);
    color: #fff !important;
}
.xh-btn-huyen i,
.xh-btn-huyen i [class*="path"]::before {
    color: #fff !important;
    filter: drop-shadow(0 0 4px rgba(165,180,252,.65));
}
.xh-btn-huyen-outline i,
.xh-btn-huyen-outline i [class*="path"]::before {
    color: #c7d2fe !important;
    filter: drop-shadow(0 0 3px rgba(99,102,241,.5));
}
.xh-btn-moc i,
.xh-btn-moc i [class*="path"]::before {
    color: #fff !important;
    filter: drop-shadow(0 0 4px rgba(110,231,183,.65));
}
.xh-btn-moc-outline i,
.xh-btn-moc-outline i [class*="path"]::before {
    color: #a7f3d0 !important;
    filter: drop-shadow(0 0 3px rgba(16,185,129,.5));
}

/* ── Segmented tab bar (recharge group) ── */
.xh-seg {
    display: inline-flex;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 4px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}
.xh-seg-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    font-size: .85rem; font-weight: 700;
    color: #9ca3af;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: .4px;
    transition: all .25s;
    position: relative;
    white-space: nowrap;
}
.xh-seg-item i { color: inherit !important; transition: all .25s; }
.xh-seg-item i [class*="path"]::before { color: inherit !important; }
.xh-seg-item:hover:not(.active) { color: #e5e7eb; background: rgba(255,255,255,.05); }

.xh-seg-item.xh-seg-kim.active {
    background: linear-gradient(135deg, #7c2d12 0%, #b45309 50%, #7c2d12 100%);
    color: #fef3c7 !important; box-shadow: 0 0 16px rgba(251,191,36,.35);
}
.xh-seg-item.xh-seg-kim.active i { color: #fde68a !important; filter: drop-shadow(0 0 4px rgba(253,230,138,.6)); }

.xh-seg-item.xh-seg-huyen.active {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #4338ca 100%);
    color: #fff !important; box-shadow: 0 0 16px rgba(99,102,241,.45);
}
.xh-seg-item.xh-seg-huyen.active i { color: #c7d2fe !important; filter: drop-shadow(0 0 4px rgba(165,180,252,.6)); }

.xh-seg-item.xh-seg-moc.active {
    background: linear-gradient(135deg, #065f46 0%, #10b981 50%, #065f46 100%);
    color: #fff !important; box-shadow: 0 0 16px rgba(16,185,129,.4);
}
.xh-seg-item.xh-seg-moc.active i { color: #a7f3d0 !important; filter: drop-shadow(0 0 4px rgba(110,231,183,.6)); }

.xh-seg-item.xh-seg-kim:hover:not(.active) { color: #fde68a; }
.xh-seg-item.xh-seg-huyen:hover:not(.active) { color: #a5b4fc; }
.xh-seg-item.xh-seg-moc:hover:not(.active) { color: #6ee7b7; }

@media (max-width: 576px) {
    .xh-seg-item { padding: 8px 12px; font-size: .75rem; gap: 6px; }
    .xh-seg-item i { font-size: 1rem !important; }
}

/* ── Badge variants ── */
.xh-badge-nguyet {
    display: inline-block;
    background: rgba(148,163,184,.18);
    border: 1px solid rgba(148,163,184,.4);
    color: #cbd5e1; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-phong {
    display: inline-block;
    background: rgba(45,212,191,.18);
    border: 1px solid rgba(45,212,191,.4);
    color: #99f6e4; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}
.xh-badge-huyen {
    display: inline-block;
    background: rgba(99,102,241,.18);
    border: 1px solid rgba(99,102,241,.4);
    color: #a5b4fc; font-weight: 700; font-size: .75rem;
    padding: 2px 10px; border-radius: 6px;
}

/* =================================================================
   UPGRADE PAGE — Đột Phá Cảnh Giới
   ================================================================= */

/* ── Text color utilities ── */
.xh-text-kim    { color: var(--xh-kim) !important; }
.xh-text-moc    { color: #6ee7b7 !important; }
.xh-text-thuy   { color: #93c5fd !important; }
.xh-text-hoa    { color: #fca5a5 !important; }
.xh-text-tho    { color: #d4a574 !important; }
.xh-text-tu     { color: #c4b5fd !important; }
.xh-text-thanh  { color: #67e8f9 !important; }
.xh-text-nguyet { color: #cbd5e1 !important; }
.xh-text-phong  { color: #99f6e4 !important; }
.xh-text-huyen  { color: #a5b4fc !important; }

/* ── Progress section (inside xh-panel-thanh) ── */
.xh-progress-label { color: rgba(255,255,255,.5); font-size: .78rem; font-weight: 600; }
.xh-progress-username { color: #fff; font-weight: 800; font-size: 1.05rem; margin-left: 4px; }
.xh-progress-amount { color: #fff; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.xh-progress-hint { color: rgba(255,255,255,.55); font-size: .78rem; }

.xh-progress-track {
    height: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    overflow: hidden;
}
.xh-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width .6s ease;
    position: relative;
}
.xh-progress-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    animation: xhProgressShimmer 2s ease-in-out infinite;
}
@keyframes xhProgressShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.xh-progress-fill-moc  { background: linear-gradient(90deg, #065f46, #10b981); }
.xh-progress-fill-thuy { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.xh-progress-fill-tho  { background: linear-gradient(90deg, #78350f, #a16207); }
.xh-progress-fill-hoa  { background: linear-gradient(90deg, #991b1b, #dc2626); }
.xh-progress-fill-kim  { background: linear-gradient(90deg, #92400e, #f59e0b); }

.xh-progress-complete {
    display: flex; align-items: center;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.35);
    border-radius: 10px;
    padding: 14px 18px;
    color: #6ee7b7;
    font-weight: 700;
    font-size: .88rem;
}
.xh-progress-complete i { color: #6ee7b7 !important; text-shadow: 0 0 12px rgba(16,185,129,.5); }

/* ── Rank cards (lightweight dark-glass) ── */
.xh-rank-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--xh-rank-border, rgba(255,255,255,.12));
    background:
        radial-gradient(ellipse at top center, var(--xh-rank-glow, rgba(255,255,255,.06)), transparent 65%),
        linear-gradient(160deg, var(--xh-rank-bg1, #12101a) 0%, var(--xh-rank-bg2, #1a1528) 100%);
    box-shadow:
        0 0 30px var(--xh-rank-inner, rgba(255,255,255,.04)) inset,
        0 8px 24px rgba(0,0,0,.4);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
}
.xh-rank-card:hover {
    transform: translateY(-5px);
    border-color: var(--xh-rank-accent, rgba(255,255,255,.35));
    box-shadow:
        0 0 40px var(--xh-rank-inner) inset,
        0 16px 40px rgba(0,0,0,.5),
        0 0 28px var(--xh-rank-glow);
}
.xh-rank-card.xh-rank-active {
    border-width: 2px;
    border-color: var(--xh-rank-accent);
    box-shadow:
        0 0 40px var(--xh-rank-inner) inset,
        0 0 20px var(--xh-rank-glow);
}

/* Rank card — hành variants */
.xh-rank-moc {
    --xh-rank-bg1: #081a12; --xh-rank-bg2: #0f2a1c;
    --xh-rank-accent: #10b981; --xh-rank-accent-light: #6ee7b7;
    --xh-rank-border: rgba(16,185,129,.3);
    --xh-rank-glow: rgba(16,185,129,.12);
    --xh-rank-inner: rgba(16,185,129,.08);
}
.xh-rank-thuy {
    --xh-rank-bg1: #07142a; --xh-rank-bg2: #0d1e3e;
    --xh-rank-accent: #3b82f6; --xh-rank-accent-light: #93c5fd;
    --xh-rank-border: rgba(59,130,246,.3);
    --xh-rank-glow: rgba(59,130,246,.12);
    --xh-rank-inner: rgba(59,130,246,.08);
}
.xh-rank-tho {
    --xh-rank-bg1: #1a1408; --xh-rank-bg2: #2a2210;
    --xh-rank-accent: #a16207; --xh-rank-accent-light: #d4a574;
    --xh-rank-border: rgba(161,98,7,.3);
    --xh-rank-glow: rgba(161,98,7,.12);
    --xh-rank-inner: rgba(161,98,7,.08);
}
.xh-rank-hoa {
    --xh-rank-bg1: #1a0b1e; --xh-rank-bg2: #2d0a1f;
    --xh-rank-accent: #dc2626; --xh-rank-accent-light: #fca5a5;
    --xh-rank-border: rgba(239,68,68,.3);
    --xh-rank-glow: rgba(239,68,68,.12);
    --xh-rank-inner: rgba(239,68,68,.08);
}
.xh-rank-kim {
    --xh-rank-bg1: #1a1408; --xh-rank-bg2: #2a1e0a;
    --xh-rank-accent: #f59e0b; --xh-rank-accent-light: #fde68a;
    --xh-rank-border: rgba(245,158,11,.35);
    --xh-rank-glow: rgba(245,158,11,.15);
    --xh-rank-inner: rgba(245,158,11,.1);
}

/* VIP (Kim) pulse glow */
.xh-rank-kim:not(.xh-rank-active) {
    animation: xhRankKimGlow 2.5s ease-in-out infinite;
}
@keyframes xhRankKimGlow {
    0%,100% {
        box-shadow: 0 0 30px rgba(245,158,11,.08) inset, 0 0 0 0 rgba(245,158,11,.35), 0 8px 24px rgba(0,0,0,.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(245,158,11,.12) inset, 0 0 0 6px rgba(245,158,11,0), 0 0 30px rgba(245,158,11,.35);
    }
}

/* Độ Kiếp — void đen tím + sét vàng (admin-only visible) */
.xh-rank-kiep {
    --xh-rank-bg1: #0a0612; --xh-rank-bg2: #1a0a2e;
    --xh-rank-accent: #fbbf24; --xh-rank-accent-light: #fef3c7;
    --xh-rank-border: rgba(251,191,36,.4);
    --xh-rank-glow: rgba(251,191,36,.18);
    --xh-rank-inner: rgba(168,85,247,.15);
}
.xh-rank-kiep:not(.xh-rank-active) {
    animation: xhRankKiepStorm 3.2s ease-in-out infinite;
}
@keyframes xhRankKiepStorm {
    0%,100% {
        box-shadow: 0 0 30px rgba(168,85,247,.12) inset,
                    0 0 0 0 rgba(251,191,36,.4),
                    0 8px 24px rgba(0,0,0,.5);
    }
    50% {
        box-shadow: 0 0 45px rgba(251,191,36,.15) inset,
                    0 0 0 4px rgba(251,191,36,0),
                    0 0 35px rgba(251,191,36,.35),
                    0 0 20px rgba(168,85,247,.4);
    }
}

/* ═══ Độ Kiếp — button variant cho xh-btn-kiep ═══ */
.xh-btn-kiep {
    background: linear-gradient(135deg, #1a0826 0%, #2d1155 30%, #3b1966 50%, #2d1155 70%, #1a0826 100%) !important;
    color: #fde68a !important;
    border: 1px solid rgba(251,191,36,.6) !important;
    box-shadow: 0 4px 16px rgba(168,85,247,.35),
                inset 0 1px 0 rgba(251,191,36,.25),
                0 0 18px rgba(251,191,36,.18);
    text-shadow: 0 0 8px rgba(251,191,36,.6), 0 1px 2px rgba(0,0,0,.5);
    letter-spacing: .6px;
    transition: all .25s;
}
.xh-btn-kiep:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #2d1155 0%, #3b1966 30%, #4c1d95 50%, #3b1966 70%, #2d1155 100%) !important;
    box-shadow: 0 8px 28px rgba(168,85,247,.55),
                0 0 32px rgba(251,191,36,.45),
                inset 0 1px 0 rgba(251,191,36,.4);
    color: #fef3c7 !important;
}
.xh-btn-kiep .xh-gloss { color: rgba(253,230,138,.85); opacity: 1; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* Badge icon colors helper cho Kiếp */
.xh-badge-kiep i { color: #fbbf24 !important; }

/* Rank card — inner elements */
.xh-rank-current-tag {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    font-size: .7rem;
}
.xh-rank-header {
    text-align: center;
    padding: 24px 16px 16px;
    position: relative;
    z-index: 2;
}
.xh-rank-orb {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--xh-rank-inner), var(--xh-rank-accent));
    box-shadow: 0 0 18px var(--xh-rank-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-rank-name {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    color: var(--xh-rank-accent-light);
    text-shadow: 0 0 14px var(--xh-rank-glow);
    margin-bottom: 2px;
    text-transform: uppercase;
}
.xh-rank-sub {
    color: var(--xh-rank-accent-light);
    opacity: .6;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.xh-rank-savings {
    margin-top: 8px;
}
.xh-rank-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--xh-rank-accent-light);
    text-shadow: 0 0 12px var(--xh-rank-glow);
    margin-top: 10px;
}
.xh-rank-price sup {
    font-size: .65rem;
    font-weight: 700;
    opacity: .9;
}
.xh-rank-currency {
    font-size: .7rem;
    font-weight: 700;
    opacity: .7;
    letter-spacing: 1px;
}
.xh-rank-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 16px 20px;
    position: relative;
    z-index: 2;
}
.xh-rank-features {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.xh-rank-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
}
.xh-rank-features li i {
    color: var(--xh-rank-accent) !important;
    flex-shrink: 0;
    margin-top: 1px;
}
.xh-rank-btn {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 10px 0;
}

/* ── Comparison table (dark Nguyệt theme) ── */
.xh-table-compare {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.xh-table-compare thead tr {
    background: rgba(148,163,184,.06);
}
.xh-table-compare thead th {
    color: rgba(203,213,225,.7) !important;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
    padding: 12px 10px;
    text-align: center;
    vertical-align: middle;
}
.xh-table-compare thead th:first-child {
    text-align: left;
}
.xh-table-compare tbody tr {
    transition: background .15s;
}
.xh-table-compare tbody tr:hover {
    background: rgba(148,163,184,.05);
}
.xh-table-compare tbody td {
    color: rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(148,163,184,.08) !important;
    padding: 10px;
    font-size: .82rem;
    text-align: center;
    vertical-align: middle;
}
.xh-table-compare tbody td:first-child {
    text-align: left;
    color: rgba(255,255,255,.65);
    font-weight: 600;
}
.xh-table-compare .xh-col-current {
    background: rgba(148,163,184,.06);
    font-weight: 700;
}
.xh-table-compare .xh-th-moc    { color: #6ee7b7 !important; }
.xh-table-compare .xh-th-thuy   { color: #93c5fd !important; }
.xh-table-compare .xh-th-tho    { color: #d4a574 !important; }
.xh-table-compare .xh-th-hoa    { color: #fca5a5 !important; }
.xh-table-compare .xh-th-kim    { color: #fde68a !important; }
.xh-table-compare .xh-check { color: #6ee7b7; font-weight: 800; }
.xh-table-compare .xh-cross { color: rgba(255,255,255,.18); }

/* ── Affiliate F-level boxes ── */
.xh-f-box { padding: 20px 16px; transition: all .25s ease; }
.xh-f-box:hover { transform: translateY(-3px); filter: brightness(1.15); }

/* ── Nav tabs dark (inside xh-panel) ── */
.xh-nav-dark .nav-link { color: #9ca3af !important; border-color: transparent !important; }
.xh-nav-dark .nav-link:hover { color: #e5e7eb !important; }
.xh-nav-dark .nav-link.active { color: #fff !important; border-bottom: 2px solid var(--xh-accent-light, #67e8f9) !important; }

/* ── Ticket chat bubbles ── */
.xh-chat-client {
    background: rgba(6,182,212,.2);
    border: 1px solid rgba(6,182,212,.35);
    color: #e5e7eb;
}
.xh-chat-admin {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #d1d5db;
}

/* ── Modal dark theme ── */
.xh-modal-dark {
    background: rgba(15,18,28,.96) !important;
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
}
.xh-modal-dark .modal-header { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.xh-modal-dark .modal-title { color: #e5e7eb; }
.xh-modal-dark .btn-close { filter: invert(1) grayscale(1) brightness(.8); }
.xh-modal-dark label { color: #d1d5db !important; }

/* ── Modal per-element accents ── */
.xh-modal-thanh {
    --xh-accent: #3b82f6;
    --xh-accent-light: #bfdbfe;
    --xh-accent-border: rgba(59,130,246,.28);
    --xh-accent-glow: rgba(59,130,246,.28);
    position: relative; overflow: hidden;
    border: 1px solid rgba(59,130,246,.22) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(59,130,246,.12) inset;
}
.xh-modal-thanh::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at top, rgba(59,130,246,.16) 0%, transparent 65%),
        linear-gradient(180deg, rgba(12,18,30,.92) 0%, rgba(10,12,20,.96) 100%);
    z-index: 0; pointer-events: none;
}
.xh-modal-thanh > * { position: relative; z-index: 2; }
.xh-modal-thanh .xh-form-label {
    color: var(--xh-accent-light) !important;
    opacity: .85;
}
.xh-modal-thanh .xh-form-input {
    background: rgba(8,12,22,.65) !important;
    border-color: rgba(59,130,246,.28) !important;
    color: #e5e7eb !important;
}
.xh-modal-thanh .xh-form-input::placeholder { color: rgba(191,219,254,.35); }
.xh-modal-thanh .xh-form-input:focus {
    border-color: rgba(59,130,246,.7) !important;
    box-shadow: 0 0 12px rgba(59,130,246,.35), inset 0 0 6px rgba(59,130,246,.15);
}
.xh-modal-thanh select.xh-form-input option {
    background: #0b1220; color: #e5e7eb;
}

/* ── Ghost button (dùng cho nút huỷ/đóng trong modal) ── */
.xh-btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #cbd5e1 !important;
    transition: all .2s ease;
}
.xh-btn-ghost:hover {
    border-color: rgba(255,255,255,.28) !important;
    color: #f1f5f9 !important;
    background: rgba(255,255,255,.04) !important;
}

/* ── Upgrade responsive ── */
@media (max-width: 576px) {
    .xh-rank-header { padding: 18px 12px 12px; }
    .xh-rank-orb { width: 48px; height: 48px; }
    .xh-rank-name { font-size: .95rem; letter-spacing: 1px; }
    .xh-rank-price { font-size: 1.1rem; }
    .xh-rank-body { padding: 0 12px 16px; }
    .xh-rank-features li { font-size: .72rem; }
    .xh-progress-amount { font-size: 1.05rem; }
}

/* === Rule page — Hero seal === */
.xh-rule-hero {
    background:
        radial-gradient(ellipse at top, rgba(220,38,38,.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(15,10,10,.85) 0%, rgba(10,8,12,.92) 100%);
    position: relative; overflow: hidden;
}
.xh-rule-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(239,68,68,.12) 0, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(251,191,36,.08) 0, transparent 40%);
    pointer-events: none;
}
.xh-rule-seal {
    display: inline-block;
    width: 92px; height: 92px;
    position: relative;
}
.xh-rule-seal-inner {
    width: 100%; height: 100%;
    border-radius: 12px;
    background: linear-gradient(145deg, #dc2626 0%, #991b1b 60%, #450a0a 100%);
    border: 2px solid #fde68a;
    box-shadow:
        0 0 0 1px rgba(253,230,138,.4),
        0 0 20px rgba(220,38,38,.6),
        0 4px 18px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -2px 4px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-6deg);
    animation: xhSealGlow 3.6s ease-in-out infinite alternate;
}
.xh-rule-seal-icon {
    font-size: 52px !important;
    color: #fef3c7 !important;
    filter:
        drop-shadow(0 0 8px rgba(253,230,138,.9))
        drop-shadow(0 0 16px rgba(245,158,11,.6))
        drop-shadow(0 2px 4px rgba(0,0,0,.8));
    line-height: 1;
}
.xh-rule-seal-icon .path1:before,
.xh-rule-seal-icon .path2:before { color: #fef3c7 !important; }
@keyframes xhSealGlow {
    0%   { box-shadow: 0 0 0 1px rgba(253,230,138,.4), 0 0 20px rgba(220,38,38,.5), 0 4px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.4); }
    100% { box-shadow: 0 0 0 1px rgba(253,230,138,.7), 0 0 34px rgba(220,38,38,.85), 0 4px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.4); }
}
.xh-rule-motto {
    font-size: 1.05rem;
    color: #fde68a;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(245,158,11,.5);
}
.xh-rule-motto-sub {
    display: block;
    font-size: .78rem;
    color: #d1d5db;
    letter-spacing: 1px;
    margin-top: 4px;
    font-style: italic;
    text-shadow: none;
}

/* Inner tile chứa nội dung law */
.xh-rule-tile {
    background: rgba(10,15,28,.55);
    border: 1px solid rgba(220,38,38,.22);
    border-radius: 10px;
    padding: 24px 28px;
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(253,230,138,.06),
        0 4px 16px rgba(0,0,0,.35);
}
.xh-rule-tile::before,
.xh-rule-tile::after {
    content: "";
    position: absolute;
    height: 2px; width: 40%;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(239,68,68,.7), transparent);
}
.xh-rule-tile::before { left: 0; }
.xh-rule-tile::after  { right: 0; }

/* Stamp */
.xh-rule-stamp-box {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid #dc2626;
    color: #fca5a5;
    font-weight: 700;
    letter-spacing: 4px;
    transform: rotate(-4deg);
    background: rgba(220,38,38,.08);
    box-shadow:
        0 0 12px rgba(220,38,38,.35),
        inset 0 0 8px rgba(220,38,38,.2);
    text-shadow: 0 0 6px rgba(239,68,68,.6);
    border-radius: 4px;
}

/* === Rule page content (raw HTML từ DB) === */
.xh-rule-content { color: #e5e7eb; }
.xh-rule-content h1,
.xh-rule-content h2,
.xh-rule-content h3,
.xh-rule-content h4 {
    color: #f9fafb; font-weight: 700;
    margin-top: 1.5em; margin-bottom: .6em;
}
.xh-rule-content h2 {
    font-size: 1.4rem;
    border-left: 3px solid #dc2626;
    padding-left: 12px;
}
.xh-rule-content h3 { font-size: 1.15rem; color: #fca5a5; }
.xh-rule-content p { color: #e5e7eb; margin-bottom: .8em; line-height: 1.65; }
.xh-rule-content ul,
.xh-rule-content ol { color: #e5e7eb; padding-left: 1.5em; line-height: 1.65; }
.xh-rule-content li { margin-bottom: .35em; }
.xh-rule-content strong,
.xh-rule-content b { color: #fde68a; }
.xh-rule-content a { color: #60a5fa; text-decoration: underline; }
.xh-rule-content blockquote {
    border-left: 3px solid #ef4444;
    background: rgba(220,38,38,.08);
    padding: 12px 18px; margin: 1em 0;
    border-radius: 4px; color: #e5e7eb;
}
.xh-rule-content hr { border-color: rgba(253,230,138,.2); }
.xh-rule-content code {
    background: rgba(10,15,28,.6); color: #fbbf24;
    padding: 2px 6px; border-radius: 4px; font-size: .9em;
}

/* ════════════════════════════════════════════════════════════════════
   SERVICE PAGE — Thi Pháp Đài components
   ════════════════════════════════════════════════════════════════════ */

/* ── Tab bar (outer: Thi Pháp / Pháp Lệnh Ký) ─────────────────────── */
.xh-tab-bar {
    display: flex;
    gap: .5rem;
    padding: .35rem;
    background: linear-gradient(135deg, rgba(16,185,129,.04) 0%, rgba(10,15,28,.5) 100%);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.xh-tab-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.2rem;
    border-radius: 9px;
    color: #9ca3af;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all .25s ease;
    position: relative;
}
.xh-tab-item:hover {
    color: #d1fae5;
    background: rgba(16,185,129,.08);
    text-decoration: none;
}
.xh-tab-item.active {
    color: #fde68a;
    background: linear-gradient(135deg, rgba(16,185,129,.15) 0%, rgba(253,230,138,.08) 100%);
    border: 1px solid rgba(253,230,138,.35);
    text-shadow: 0 0 12px rgba(253,230,138,.4);
    box-shadow: inset 0 0 18px rgba(16,185,129,.12), 0 0 14px rgba(253,230,138,.18);
}
.xh-tab-item .xh-tab-icon {
    font-size: 1.1rem;
    color: var(--xh-kim, #fde68a);
    text-shadow: 0 0 10px rgba(253,230,138,.5);
}
.xh-tab-item .xh-gloss {
    opacity: .7;
    font-weight: 500;
    font-size: .78rem;
}
@media (max-width: 576px) {
    .xh-tab-item { padding: .55rem .8rem; font-size: .85rem; }
    .xh-tab-item .xh-gloss { display: none; }
}

/* ── Server list (Linh Cảnh Trận) ─────────────────────────────────── */
.xh-server-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    max-height: 420px;
    overflow-y: auto;
    padding: .65rem;
    background: rgba(10,15,28,.45);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 10px;
    scrollbar-width: thin;
}
.xh-server-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    background: rgba(30,30,45,.5);
    border: 1px solid rgba(148,163,184,.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
    margin: 0;
}
.xh-server-card:hover {
    background: rgba(16,185,129,.06);
    border-color: rgba(16,185,129,.35);
    transform: translateY(-1px);
}
.xh-server-card.active-server {
    background: linear-gradient(135deg, rgba(16,185,129,.1) 0%, rgba(253,230,138,.06) 100%);
    border-color: rgba(253,230,138,.55);
    box-shadow: inset 0 0 14px rgba(16,185,129,.18), 0 0 12px rgba(253,230,138,.2);
}
.xh-server-radio {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.xh-server-radio:checked {
    background-color: var(--xh-moc, #10b981);
    border-color: var(--xh-kim, #fde68a);
}
.xh-server-body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    min-width: 0;
    font-size: 12.5px;
    color: #d1d5db;
}
.xh-server-id {
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: .2px;
    white-space: nowrap;
}
.xh-server-name {
    font-weight: 600;
    color: #e5e7eb;
}
.xh-server-price {
    font-weight: 800;
    color: #fde68a;
    text-shadow: 0 0 8px rgba(253,230,138,.35);
    white-space: nowrap;
}
.xh-srv-badge--right { margin-left: auto; }

/* Hint callout (instructional) */
.xh-hint {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1rem .7rem .85rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(8,12,22,.75) 0%, rgba(15,23,42,.6) 100%);
    border: 1px solid rgba(59,130,246,.22);
    border-left: 3px solid var(--xh-thuy);
    box-shadow: inset 0 0 20px rgba(59,130,246,.05);
}
.xh-hint-icon {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.25) 0%, rgba(59,130,246,.06) 60%, transparent 100%);
    color: #93c5fd;
    box-shadow: 0 0 14px rgba(59,130,246,.25), inset 0 0 10px rgba(59,130,246,.15);
}
.xh-hint-icon i { color: #bfdbfe !important; text-shadow: 0 0 10px rgba(147,197,253,.55); }
.xh-hint-body { line-height: 1.35; }
.xh-hint-label {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: #93c5fd; opacity: .85;
    margin-bottom: 2px;
}
.xh-hint-text { color: #e5e7eb; font-size: .9rem; font-weight: 500; }
.xh-hint-kw {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(16,185,129,.15);
    border: 1px solid rgba(16,185,129,.4);
    color: #a7f3d0;
    font-weight: 700;
    font-size: .85rem;
    text-shadow: 0 0 8px rgba(16,185,129,.35);
}

/* Bulk cart table cells */
.xh-cart-wrap {
    padding: .25rem 1.25rem;
    margin: 0 -.25rem;
    border-radius: 10px;
    background: rgba(8,12,22,.35);
    border: 1px solid rgba(16,185,129,.15);
    overflow: hidden;
}
.xh-cart-table {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.xh-cart-table thead tr,
.xh-cart-table thead th {
    background: transparent !important;
}
.xh-cart-table thead th {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #93c5fd !important;
    border-bottom: 1px solid rgba(59,130,246,.2) !important;
    padding: .6rem .6rem;
    white-space: nowrap;
}
.xh-cart-table thead th:first-child,
.xh-cart-table tbody td:first-child { padding-left: .25rem; }
.xh-cart-table thead th:last-child,
.xh-cart-table tbody td:last-child { padding-right: .25rem; }
.xh-cart-table tbody td { padding: .5rem .6rem; vertical-align: middle; }
.xh-cart-table tbody tr { transition: background .15s; }
.xh-cart-table tbody tr:hover { background: rgba(16,185,129,.04); }

.xh-cart-del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(239,68,68,.08);
    color: #fca5a5;
    cursor: pointer;
    transition: all .15s;
}
.xh-cart-del:hover { background: rgba(239,68,68,.2); color: #fecaca; border-color: rgba(239,68,68,.6); }
.xh-cart-del i { color: #fca5a5 !important; }

.xh-row-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
}
.xh-row-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.xh-cart-table .badge.xh-row-status--pending,
.xh-cart-table .badge-light-warning.xh-row-status {
    background: rgba(234,179,8,.12) !important;
    color: #fde047 !important;
    border: 1px solid rgba(234,179,8,.3);
}
.xh-cart-table .badge-light-success {
    background: rgba(16,185,129,.14) !important;
    color: #86efac !important;
    border: 1px solid rgba(16,185,129,.35);
}
.xh-cart-table .badge-light-danger {
    background: rgba(239,68,68,.14) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239,68,68,.35);
}

.xh-cart-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
    font-size: .82rem;
    color: #cbd5e1;
    padding: 2px 8px;
    background: rgba(15,23,42,.5);
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 6px;
    vertical-align: middle;
}

.xh-cart-srv {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.35);
    color: #a7f3d0;
    white-space: nowrap;
}

.xh-cart-qxp { font-size: .85rem; color: #e5e7eb; white-space: nowrap; }
.xh-cart-qxp .xh-qty { font-weight: 700; color: #f1f5f9; }
.xh-cart-qxp .xh-mul { color: #6b7280; margin: 0 2px; }
.xh-cart-qxp .xh-price { color: #94a3b8; }

.xh-cart-total {
    font-weight: 800;
    font-size: 1rem;
    color: #fde68a !important;
    text-shadow: 0 0 10px rgba(253,230,138,.4);
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Bulk modal footer summary (3 stat chips) */
.xh-bulk-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.xh-bulk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: .4rem .9rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(8,12,22,.7) 0%, rgba(15,23,42,.55) 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-bottom: 2px solid var(--xh-accent, rgba(253,230,138,.5));
}
.xh-bulk-stat-label {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 1px;
}
.xh-bulk-stat-value {
    font-size: 1.35rem; font-weight: 800;
    line-height: 1.1;
    letter-spacing: .5px;
}
.xh-bulk-stat-value small { font-size: .85rem; font-weight: 700; margin-left: 2px; opacity: .9; }

.xh-bulk-stat--huyen {
    border-bottom-color: var(--xh-huyen);
    box-shadow: inset 0 0 14px rgba(99,102,241,.06);
}
.xh-bulk-stat--huyen .xh-bulk-stat-value { color: #a5b4fc; text-shadow: 0 0 10px rgba(99,102,241,.45); }

.xh-bulk-stat--moc {
    border-bottom-color: var(--xh-moc);
    box-shadow: inset 0 0 14px rgba(16,185,129,.08);
}
.xh-bulk-stat--moc .xh-bulk-stat-value { color: #86efac; text-shadow: 0 0 10px rgba(16,185,129,.5); }

.xh-bulk-stat--kim {
    border-bottom-color: var(--xh-kim, #fde68a);
    box-shadow: inset 0 0 14px rgba(253,230,138,.08);
}
.xh-bulk-stat--kim .xh-bulk-stat-value { color: #fde68a; text-shadow: 0 0 12px rgba(253,230,138,.55); }

@media (max-width: 576px) {
    .xh-bulk-stat { min-width: 90px; padding: .35rem .7rem; }
    .xh-bulk-stat-value { font-size: 1.15rem; }
}

/* ── Submit CTA 2-line (title + sub) layout ─────────────────────── */
.xh-submit-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.xh-submit-cta__text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    gap: 2px;
}
.xh-submit-cta__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: inherit;
}
.xh-submit-cta__sub {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .7;
    color: inherit;
}

/* ── xh-btn-stable: kill shine + lift + double glow hover ───────────
   Dùng cho button action chính (submit, primary modal) — tránh cảm giác
   lag khi có layout phức tạp (modal, panel gradient). Thay cho xh-shine-btn.
   Áp được cùng xh-btn-moc/hoa/thuy/kim/huyen... — chỉ đè :hover.
*/
.xh-btn-stable,
.xh-btn-stable:hover,
.xh-btn-stable:focus,
.xh-btn-stable:active {
    transform: none !important;
    animation: none !important;
}
.xh-btn-stable::before,
.xh-btn-stable::after {
    display: none !important;
}
.xh-btn-moc.xh-btn-stable:hover        { box-shadow: 0 4px 14px rgba(16,185,129,.5) !important; }
.xh-btn-hoa.xh-btn-stable:hover        { box-shadow: 0 4px 14px rgba(220,38,38,.5)  !important; }
.xh-btn-thuy.xh-btn-stable:hover       { box-shadow: 0 4px 14px rgba(59,130,246,.5) !important; }
.xh-btn-kim.xh-btn-stable:hover        { box-shadow: 0 4px 14px rgba(245,158,11,.5) !important; }
.xh-btn-huyen.xh-btn-stable:hover      { box-shadow: 0 4px 14px rgba(99,102,241,.5) !important; }

/* Legacy: bulk button giữ hành vi stable (không cần class thủ công) */
#btnProcessBulkOrders { }
#btnProcessBulkOrders:hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.45) !important;
}

.xh-server-detail-btn {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    border: 1px solid rgba(99,102,241,.4);
    background: rgba(99,102,241,.12);
    color: #a5b4fc;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.xh-server-detail-btn:hover {
    background: rgba(99,102,241,.25);
    border-color: rgba(165,180,252,.6);
    color: #e0e7ff;
    box-shadow: 0 0 12px rgba(99,102,241,.3);
}
.xh-server-card.opacity-75 { opacity: .55; }

/* ── Info widgets row (4 cards) ───────────────────────────────────── */
.xh-info-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}
@media (max-width: 767px) {
    .xh-info-row { grid-template-columns: repeat(2, 1fr); }
}
.xh-info-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem 1rem 1.35rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #0b1424 0%, #050912 100%);
    border: 1px solid rgba(148,163,184,.22);
    overflow: hidden;
    transition: all .25s ease;
    opacity: 0;
    animation: xh-info-cascade-in .5s ease forwards;
    box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.xh-info-icon {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.xh-info-icon i { color: #ffffff !important; font-size: 1.45rem; }
.xh-info-stack { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* Accent bar bên trái theo hành */
.xh-info-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--xh-accent, #64748b);
    box-shadow: 0 0 12px var(--xh-accent, #64748b);
}
.xh-info-card.xh-cascade-1 { animation-delay: .08s; }
.xh-info-card.xh-cascade-2 { animation-delay: .16s; }
.xh-info-card.xh-cascade-3 { animation-delay: .24s; }
.xh-info-card.xh-cascade-4 { animation-delay: .32s; }
@keyframes xh-info-cascade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.xh-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 0 18px var(--xh-glow, rgba(148,163,184,.35)), inset 0 1px 0 rgba(255,255,255,.06);
    border-color: var(--xh-accent, rgba(148,163,184,.5));
}
.xh-info-moc  { --xh-accent: #10b981; --xh-glow: rgba(16,185,129,.35);
    border-color: rgba(16,185,129,.45);
    background: linear-gradient(135deg, rgba(16,185,129,.12) 0%, #0b1424 55%, #050912 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(16,185,129,.18), inset 0 1px 0 rgba(110,231,183,.08);
}
.xh-info-thuy { --xh-accent: #3b82f6; --xh-glow: rgba(59,130,246,.35);
    border-color: rgba(59,130,246,.45);
    background: linear-gradient(135deg, rgba(59,130,246,.12) 0%, #0b1424 55%, #050912 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(59,130,246,.18), inset 0 1px 0 rgba(147,197,253,.08);
}
.xh-info-hoa  { --xh-accent: #dc2626; --xh-glow: rgba(220,38,38,.35);
    border-color: rgba(220,38,38,.45);
    background: linear-gradient(135deg, rgba(220,38,38,.12) 0%, #0b1424 55%, #050912 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(220,38,38,.18), inset 0 1px 0 rgba(252,165,165,.08);
}
.xh-info-tho  { --xh-accent: #b45309; --xh-glow: rgba(180,83,9,.4);
    border-color: rgba(180,83,9,.55);
    background: linear-gradient(135deg, rgba(180,83,9,.14) 0%, #0b1424 55%, #050912 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(180,83,9,.2), inset 0 1px 0 rgba(253,186,116,.08);
}
/* State-based border override: xanh=có/ok, đỏ=không/tắt (trừ card Thủy = thông tin trung tính) */
.xh-info-card:not(.xh-info-thuy):has(.icon-bg-green) {
    --xh-accent: #10b981; --xh-glow: rgba(16,185,129,.45);
    border-color: rgba(16,185,129,.6);
    background: linear-gradient(135deg, rgba(16,185,129,.14) 0%, #0b1424 55%, #050912 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 16px rgba(16,185,129,.22), inset 0 1px 0 rgba(110,231,183,.1);
}
.xh-info-card:not(.xh-info-thuy):has(.icon-bg-red) {
    --xh-accent: #dc2626; --xh-glow: rgba(220,38,38,.45);
    border-color: rgba(220,38,38,.6);
    background: linear-gradient(135deg, rgba(220,38,38,.14) 0%, #0b1424 55%, #050912 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 16px rgba(220,38,38,.22), inset 0 1px 0 rgba(252,165,165,.1);
}
.xh-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.2;
    margin-bottom: .3rem;
}
.xh-info-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f3f4f6;
    line-height: 1.2;
    letter-spacing: .2px;
}
/* Thời gian Thủy giữ màu xanh (không phải state-based) */
.xh-info-thuy .xh-info-value { color: #bfdbfe; text-shadow: 0 0 10px rgba(147,197,253,.35); }

/* Icon bg helpers — carry state: green=có/ok, red=không/bảo trì, blue=info */
.xh-info-card .icon-bg-green {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #ffffff;
    border: 1px solid rgba(110,231,183,.6);
    box-shadow: 0 2px 8px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-info-card .icon-bg-red {
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
    color: #ffffff;
    border: 1px solid rgba(252,165,165,.6);
    box-shadow: 0 2px 8px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-info-card .icon-bg-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    border: 1px solid rgba(147,197,253,.6);
    box-shadow: 0 2px 8px rgba(59,130,246,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-info-card .icon-bg-green i,
.xh-info-card .icon-bg-red i,
.xh-info-card .icon-bg-blue i { color: #ffffff !important; font-size: 1.05rem; }
/* Đồng bộ text color với icon state */
.xh-info-card:has(.icon-bg-green) .xh-info-value:not(.xh-info-thuy .xh-info-value) {
    color: #6ee7b7; text-shadow: 0 0 10px rgba(110,231,183,.35);
}
.xh-info-card:has(.icon-bg-red) .xh-info-value {
    color: #fca5a5; text-shadow: 0 0 10px rgba(252,165,165,.35);
}
.xh-info-card:has(.icon-bg-blue) .xh-info-value:not(.xh-info-thuy .xh-info-value) {
    color: #93c5fd; text-shadow: 0 0 10px rgba(147,197,253,.35);
}

/* ── Total + CTA block ────────────────────────────────────────────── */
.xh-total-cta {
    position: relative;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16,185,129,.12) 0%, rgba(253,230,138,.06) 50%, rgba(10,15,28,.6) 100%);
    border: 1px solid rgba(253,230,138,.35);
    box-shadow: inset 0 0 24px rgba(16,185,129,.1), 0 0 20px rgba(253,230,138,.12);
    overflow: hidden;
    text-align: center;
}
.xh-total-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(253,230,138,.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: xh-total-shimmer 8s linear infinite;
    pointer-events: none;
}
@keyframes xh-total-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.xh-total-cta .xh-corner { width: 14px; height: 14px; }
.xh-total-row {
    position: relative; z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .25rem;
}
.xh-total-label,
.xh-total-amount,
.xh-total-unit {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fde68a;
    letter-spacing: .5px;
    text-shadow: 0 0 12px rgba(253,230,138,.4);
    font-variant-numeric: tabular-nums;
}
.xh-total-amount { font-weight: 900; }
.xh-total-sub {
    position: relative; z-index: 2;
    font-size: 1rem;
    color: #e5e7eb;
    line-height: 1.5;
}
.xh-total-hl {
    font-weight: 800;
    color: #fde68a;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(253,230,138,.35);
    padding: 0 2px;
}

/* ── Modal skins (moc / hoa / huyen) ──────────────────────────────── */
.xh-modal {
    position: relative;
    background: linear-gradient(135deg, rgba(10,15,28,.98) 0%, rgba(20,25,45,.98) 100%);
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 14px;
    color: #e5e7eb;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}
.xh-modal-moc   { border-color: rgba(16,185,129,.4); box-shadow: 0 0 32px rgba(16,185,129,.15); }
.xh-modal-hoa   { border-color: rgba(220,38,38,.4);  box-shadow: 0 0 32px rgba(220,38,38,.15);  }
.xh-modal-huyen { border-color: rgba(99,102,241,.4); box-shadow: 0 0 32px rgba(99,102,241,.15); }
.xh-modal .modal-header,
.xh-modal .modal-body,
.xh-modal .modal-footer { background: transparent; color: #e5e7eb; }

/* ── Cart table (inside bulk modal — Mộc) ─────────────────────────── */
.xh-cart-wrap {
    border: 1px solid rgba(16,185,129,.18);
    border-radius: 10px;
    background: rgba(10,15,28,.45);
}
.xh-cart-table {
    margin: 0;
    color: #e5e7eb;
}
.xh-cart-table thead tr {
    background: linear-gradient(90deg, rgba(6,95,70,.35) 0%, rgba(16,185,129,.18) 100%);
}
.xh-cart-table thead th {
    color: #d1fae5 !important;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 1px solid rgba(16,185,129,.35);
    padding: .65rem .6rem;
}
.xh-cart-table tbody td {
    color: #d1d5db;
    border-bottom: 1px dashed rgba(148,163,184,.15);
    padding: .55rem .6rem;
    font-size: .82rem;
}
.xh-cart-table tbody tr:hover { background: rgba(16,185,129,.05); }

/* ── Btn Hỏa outline ──────────────────────────────────────────────── */
.xh-btn-hoa-outline {
    background: transparent;
    color: #fca5a5;
    border: 1px solid rgba(220,38,38,.5);
    padding: .5rem 1.1rem;
    border-radius: 8px;
    transition: all .25s ease;
}
.xh-btn-hoa-outline:hover:not(:disabled) {
    background: rgba(220,38,38,.15);
    color: #fecaca;
    border-color: rgba(252,165,165,.7);
    box-shadow: 0 0 14px rgba(220,38,38,.3);
}
.xh-btn-hoa-outline:disabled { opacity: .55; cursor: not-allowed; }

/* ── Btn Huyền outline (fallback if not defined elsewhere) ────────── */
.xh-btn-huyen-outline {
    background: transparent;
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.5);
    padding: .5rem 1.1rem;
    border-radius: 8px;
    transition: all .25s ease;
}
.xh-btn-huyen-outline:hover {
    background: rgba(99,102,241,.15);
    color: #e0e7ff;
    border-color: rgba(165,180,252,.7);
    box-shadow: 0 0 14px rgba(99,102,241,.3);
}

/* ── Form-label spacing in service page ───────────────────────────── */
.xh-form-label .xh-gloss { opacity: .65; font-weight: 500; }

/* ── Legacy class overrides INSIDE xh-panel (dark bg conversion) ──── */
.xh-panel .form-check-input { background-color: rgba(30,30,45,.6); border-color: rgba(148,163,184,.4); }
.xh-panel .form-check-input:checked { background-color: var(--xh-moc, #10b981); border-color: var(--xh-kim, #fde68a); }

/* ── Custom <select> replacement (.xh-select) ────────────────────────
   Native <option> không thể style được nhất quán → build custom UI.
   Giữ <select> trong DOM cho JS đọc .val() / :selected data-*.
*/
.xh-select {
    position: relative;
    width: 100%;
}
.xh-select .xh-select-native {
    position: absolute !important;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.xh-select-display {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(6,10,18,.75);
    border: 1px solid rgba(16,185,129,.35);
    border-radius: 8px;
    color: #ecfdf5;
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}
.xh-select-display:hover {
    border-color: rgba(16,185,129,.6);
}
.xh-select.open .xh-select-display {
    border-color: rgba(16,185,129,.8);
    box-shadow: 0 0 12px rgba(16,185,129,.35), inset 0 0 6px rgba(16,185,129,.15);
}
.xh-select-label {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; gap: 8px;
}
.xh-select-label--placeholder {
    color: rgba(167,243,208,.45);
    font-style: italic;
    font-weight: 500;
}
.xh-select-caret {
    color: #10b981;
    transition: transform .2s ease;
    flex: 0 0 auto;
}
.xh-select.open .xh-select-caret {
    transform: rotate(180deg);
    color: #fde68a;
}
.xh-select-menu {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    max-height: 280px; overflow-y: auto;
    background: linear-gradient(180deg, #0b1a14 0%, #060f0b 100%);
    border: 1px solid rgba(16,185,129,.45);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(16,185,129,.2);
    padding: 6px;
    z-index: 1060;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.xh-select.open .xh-select-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.xh-select-menu::-webkit-scrollbar { width: 6px; }
.xh-select-menu::-webkit-scrollbar-track { background: transparent; }
.xh-select-menu::-webkit-scrollbar-thumb { background: rgba(16,185,129,.35); border-radius: 3px; }
.xh-select-option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, transform .15s;
    color: #ecfdf5;
}
.xh-select-option + .xh-select-option {
    margin-top: 2px;
}
.xh-select-option:hover {
    background: rgba(16,185,129,.18);
    transform: translateX(2px);
}
.xh-select-option.active {
    background: rgba(16,185,129,.25);
    box-shadow: inset 0 0 0 1px rgba(253,230,138,.35);
}
.xh-opt-badge {
    flex: 0 0 auto;
    font-size: .72rem; font-weight: 800;
    color: #065f46;
    background: linear-gradient(135deg, #34d399, #10b981);
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: .3px;
    min-width: 38px; text-align: center;
    box-shadow: 0 0 8px rgba(16,185,129,.4);
}
.xh-opt-name {
    flex: 1; min-width: 0;
    font-weight: 600; font-size: .92rem;
    color: #f0fdf4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-opt-price {
    flex: 0 0 auto;
    font-weight: 800; font-size: .88rem;
    color: #fde68a;
    text-shadow: 0 0 6px rgba(253,230,138,.4);
    white-space: nowrap;
}
.xh-opt-price-inline {
    color: #fde68a;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(253,230,138,.4);
    margin-left: auto;
}

/* ── Native <select> dark skin (Mộc modal) ───────────────────────────
   Native option panel dùng OS default → nền xám trắng với Kim text = không đọc được.
   Fix: color-scheme:dark cho UA render panel tối + custom chevron + option bg tối.
*/
select.xh-form-input {
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2310b981' d='M6 8 0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
    cursor: pointer;
}
select.xh-form-input::-ms-expand { display: none; }

.xh-modal-moc .xh-form-label,
.xh-panel-moc .xh-form-label {
    color: #a7f3d0 !important;
    opacity: 1 !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-shadow: 0 0 8px rgba(16,185,129,.2);
}
.xh-modal-moc .xh-form-label .xh-gloss,
.xh-panel-moc .xh-form-label .xh-gloss {
    color: rgba(167,243,208,.55) !important;
    font-size: .78rem;
    font-weight: 500;
    margin-left: 4px;
}
.xh-modal-moc .xh-form-input,
.xh-modal-moc select.xh-form-input,
.xh-modal-moc textarea.xh-form-input,
.xh-panel-moc .xh-form-input,
.xh-panel-moc select.xh-form-input,
.xh-panel-moc textarea.xh-form-input {
    background-color: rgba(6,10,18,.75) !important;
    border: 1px solid rgba(16,185,129,.35) !important;
    color: #ecfdf5 !important;
    font-size: .95rem !important;
    padding: 11px 14px !important;
}
.xh-modal-moc .xh-form-input::placeholder,
.xh-modal-moc textarea.xh-form-input::placeholder,
.xh-panel-moc .xh-form-input::placeholder,
.xh-panel-moc textarea.xh-form-input::placeholder {
    color: rgba(167,243,208,.35) !important;
    opacity: 1;
}
.xh-modal-moc .xh-form-input:hover,
.xh-modal-moc select.xh-form-input:hover,
.xh-modal-moc textarea.xh-form-input:hover,
.xh-panel-moc .xh-form-input:hover,
.xh-panel-moc select.xh-form-input:hover,
.xh-panel-moc textarea.xh-form-input:hover {
    border-color: rgba(16,185,129,.6) !important;
}
.xh-modal-moc .xh-form-input:focus,
.xh-modal-moc select.xh-form-input:focus,
.xh-modal-moc textarea.xh-form-input:focus,
.xh-panel-moc .xh-form-input:focus,
.xh-panel-moc select.xh-form-input:focus,
.xh-panel-moc textarea.xh-form-input:focus {
    border-color: rgba(16,185,129,.8) !important;
    box-shadow: 0 0 12px rgba(16,185,129,.35), inset 0 0 6px rgba(16,185,129,.15) !important;
}

/* ── Server detail card (JS-injected by oder.js) ─────────────────────
   Hiện sau khi user chọn server — info/giới thiệu nên dùng Thủy (xanh tri thức).
*/
.xh-server-detail {
    background: linear-gradient(180deg, rgba(8,14,30,.85), rgba(5,9,20,.85));
    border: 1px solid rgba(59,130,246,.28);
    border-left: 3px solid #3b82f6;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: inset 0 0 18px rgba(59,130,246,.08);
}
.xh-server-detail__header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.xh-server-detail__orb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.55), rgba(59,130,246,.2) 70%);
    color: #eff6ff;
    box-shadow: 0 0 12px rgba(59,130,246,.4);
    flex: 0 0 auto;
}
.xh-server-detail__orb i { color: #eff6ff !important; }
.xh-server-detail__title {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #bfdbfe;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(59,130,246,.35);
}
.xh-server-detail__body {
    font-size: .88rem;
    line-height: 1.65;
    color: #dbeafe;
}
.xh-server-detail__body p,
.xh-server-detail__body li,
.xh-server-detail__body span { color: inherit !important; }

/* ── Qty pill (Min/Max/Count badges trong form JS-injected) ────────── */
.xh-qty-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .78rem; font-weight: 800;
    padding: 4px 11px;
    border-radius: 999px;
    letter-spacing: .4px;
    vertical-align: middle;
    line-height: 1.2;
}
.xh-qty-pill span {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.xh-qty-pill--min {
    color: #052e1a;
    background: linear-gradient(135deg, #6ee7b7, #10b981);
    border: 1px solid rgba(52,211,153,.85);
    box-shadow: 0 0 10px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-qty-pill--min span { color: #022c1a; }
.xh-qty-pill--max {
    color: #3f0914;
    background: linear-gradient(135deg, #fda4af, #f43f5e);
    border: 1px solid rgba(251,113,133,.85);
    box-shadow: 0 0 10px rgba(244,63,94,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-qty-pill--max span { color: #3f0914; }
.xh-qty-pill--count {
    color: #3f2a05;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    border: 1px solid rgba(253,224,71,.85);
    box-shadow: 0 0 10px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.xh-qty-pill--count span { color: #3f2a05; }

/* Simple xh-select (filter đơn giản — chỉ text, không badge/price) */
.xh-select--simple .xh-select-option {
    padding: 10px 14px;
}
.xh-select--simple .xh-opt-name {
    font-size: .92rem;
    color: #ecfdf5;
}
.xh-select--simple.xh-select .xh-select-menu {
    padding: 6px;
}

/* ── xh-select contextual variants (inherit hành từ parent modal/panel) ─
   Default .xh-select = Mộc (emerald). Override khi nằm trong xh-modal-<hành>
   / xh-panel-<hành> khác để đồng bộ màu với panel bao quanh.
   Rules: border-color, caret, label placeholder, menu bg/border, option hover/active.
*/
/* Thanh (cyan/teal) */
.xh-modal-thanh .xh-select-display,
.xh-panel-thanh .xh-select-display {
    border-color: rgba(6,182,212,.35); color: #cffafe;
}
.xh-modal-thanh .xh-select-display:hover,
.xh-panel-thanh .xh-select-display:hover { border-color: rgba(6,182,212,.6); }
.xh-modal-thanh .xh-select.open .xh-select-display,
.xh-panel-thanh .xh-select.open .xh-select-display {
    border-color: rgba(6,182,212,.8);
    box-shadow: 0 0 12px rgba(6,182,212,.35), inset 0 0 6px rgba(6,182,212,.15);
}
.xh-modal-thanh .xh-select-caret,
.xh-panel-thanh .xh-select-caret { color: #06b6d4; }
.xh-modal-thanh .xh-select-label--placeholder,
.xh-panel-thanh .xh-select-label--placeholder { color: rgba(103,232,249,.5); }
.xh-modal-thanh .xh-select-menu,
.xh-panel-thanh .xh-select-menu {
    background: linear-gradient(180deg, #082a2e 0%, #030d0f 100%);
    border-color: rgba(6,182,212,.45);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(6,182,212,.2);
}
.xh-modal-thanh .xh-select-menu::-webkit-scrollbar-thumb,
.xh-panel-thanh .xh-select-menu::-webkit-scrollbar-thumb { background: rgba(6,182,212,.35); }
.xh-modal-thanh .xh-select-option,
.xh-panel-thanh .xh-select-option { color: #cffafe; }
.xh-modal-thanh .xh-select-option:hover,
.xh-panel-thanh .xh-select-option:hover { background: rgba(6,182,212,.18); }
.xh-modal-thanh .xh-select-option.active,
.xh-panel-thanh .xh-select-option.active { background: rgba(6,182,212,.25); box-shadow: inset 0 0 0 1px rgba(253,230,138,.35); }
.xh-modal-thanh .xh-select--simple .xh-opt-name,
.xh-panel-thanh .xh-select--simple .xh-opt-name { color: #cffafe; }

/* Tu (purple) */
.xh-modal-tu .xh-select-display,
.xh-panel-tu .xh-select-display {
    border-color: rgba(124,58,237,.35); color: #ede9fe;
}
.xh-modal-tu .xh-select-display:hover,
.xh-panel-tu .xh-select-display:hover { border-color: rgba(124,58,237,.6); }
.xh-modal-tu .xh-select.open .xh-select-display,
.xh-panel-tu .xh-select.open .xh-select-display {
    border-color: rgba(124,58,237,.8);
    box-shadow: 0 0 12px rgba(124,58,237,.35), inset 0 0 6px rgba(124,58,237,.15);
}
.xh-modal-tu .xh-select-caret,
.xh-panel-tu .xh-select-caret { color: #a78bfa; }
.xh-modal-tu .xh-select-label--placeholder,
.xh-panel-tu .xh-select-label--placeholder { color: rgba(196,181,253,.5); }
.xh-modal-tu .xh-select-menu,
.xh-panel-tu .xh-select-menu {
    background: linear-gradient(180deg, #1e1338 0%, #0b0618 100%);
    border-color: rgba(124,58,237,.45);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(124,58,237,.2);
}
.xh-modal-tu .xh-select-menu::-webkit-scrollbar-thumb,
.xh-panel-tu .xh-select-menu::-webkit-scrollbar-thumb { background: rgba(124,58,237,.35); }
.xh-modal-tu .xh-select-option,
.xh-panel-tu .xh-select-option { color: #ede9fe; }
.xh-modal-tu .xh-select-option:hover,
.xh-panel-tu .xh-select-option:hover { background: rgba(124,58,237,.18); }
.xh-modal-tu .xh-select-option.active,
.xh-panel-tu .xh-select-option.active { background: rgba(124,58,237,.28); box-shadow: inset 0 0 0 1px rgba(253,230,138,.35); }
.xh-modal-tu .xh-select--simple .xh-opt-name,
.xh-panel-tu .xh-select--simple .xh-opt-name { color: #ede9fe; }

/* Thủy (blue) */
.xh-modal-thuy .xh-select-display,
.xh-panel-thuy .xh-select-display {
    border-color: rgba(59,130,246,.35); color: #dbeafe;
}
.xh-modal-thuy .xh-select-display:hover,
.xh-panel-thuy .xh-select-display:hover { border-color: rgba(59,130,246,.6); }
.xh-modal-thuy .xh-select.open .xh-select-display,
.xh-panel-thuy .xh-select.open .xh-select-display {
    border-color: rgba(59,130,246,.8);
    box-shadow: 0 0 12px rgba(59,130,246,.35), inset 0 0 6px rgba(59,130,246,.15);
}
.xh-modal-thuy .xh-select-caret,
.xh-panel-thuy .xh-select-caret { color: #60a5fa; }
.xh-modal-thuy .xh-select-label--placeholder,
.xh-panel-thuy .xh-select-label--placeholder { color: rgba(147,197,253,.5); }
.xh-modal-thuy .xh-select-menu,
.xh-panel-thuy .xh-select-menu {
    background: linear-gradient(180deg, #0b1a36 0%, #060f20 100%);
    border-color: rgba(59,130,246,.45);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(59,130,246,.2);
}
.xh-modal-thuy .xh-select-menu::-webkit-scrollbar-thumb,
.xh-panel-thuy .xh-select-menu::-webkit-scrollbar-thumb { background: rgba(59,130,246,.35); }
.xh-modal-thuy .xh-select-option,
.xh-panel-thuy .xh-select-option { color: #dbeafe; }
.xh-modal-thuy .xh-select-option:hover,
.xh-panel-thuy .xh-select-option:hover { background: rgba(59,130,246,.18); }
.xh-modal-thuy .xh-select-option.active,
.xh-panel-thuy .xh-select-option.active { background: rgba(59,130,246,.28); box-shadow: inset 0 0 0 1px rgba(253,230,138,.35); }
.xh-modal-thuy .xh-select--simple .xh-opt-name,
.xh-panel-thuy .xh-select--simple .xh-opt-name { color: #dbeafe; }

/* Thổ (earth / dark amber) */
.xh-modal-tho .xh-select-display,
.xh-panel-tho .xh-select-display {
    border-color: rgba(161,98,7,.4); color: #fef3c7;
}
.xh-modal-tho .xh-select-display:hover,
.xh-panel-tho .xh-select-display:hover { border-color: rgba(180,115,30,.7); }
.xh-modal-tho .xh-select.open .xh-select-display,
.xh-panel-tho .xh-select.open .xh-select-display {
    border-color: rgba(217,149,55,.85);
    box-shadow: 0 0 12px rgba(161,98,7,.35), inset 0 0 6px rgba(161,98,7,.15);
}
.xh-modal-tho .xh-select-caret,
.xh-panel-tho .xh-select-caret { color: #d97706; }
.xh-modal-tho .xh-select-label--placeholder,
.xh-panel-tho .xh-select-label--placeholder { color: rgba(253,230,138,.5); }
.xh-modal-tho .xh-select-menu,
.xh-panel-tho .xh-select-menu {
    background: linear-gradient(180deg, #2a1a08 0%, #0f0904 100%);
    border-color: rgba(161,98,7,.5);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(161,98,7,.22);
}
.xh-modal-tho .xh-select-menu::-webkit-scrollbar-thumb,
.xh-panel-tho .xh-select-menu::-webkit-scrollbar-thumb { background: rgba(161,98,7,.4); }
.xh-modal-tho .xh-select-option,
.xh-panel-tho .xh-select-option { color: #fef3c7; }
.xh-modal-tho .xh-select-option:hover,
.xh-panel-tho .xh-select-option:hover { background: rgba(161,98,7,.22); }
.xh-modal-tho .xh-select-option.active,
.xh-panel-tho .xh-select-option.active { background: rgba(161,98,7,.32); box-shadow: inset 0 0 0 1px rgba(253,230,138,.4); }
.xh-modal-tho .xh-select--simple .xh-opt-name,
.xh-panel-tho .xh-select--simple .xh-opt-name { color: #fef3c7; }

/* Kim (amber) */
.xh-modal-kim .xh-select-display,
.xh-panel-kim .xh-select-display {
    border-color: rgba(245,158,11,.35); color: #fef3c7;
}
.xh-modal-kim .xh-select-display:hover,
.xh-panel-kim .xh-select-display:hover { border-color: rgba(245,158,11,.6); }
.xh-modal-kim .xh-select.open .xh-select-display,
.xh-panel-kim .xh-select.open .xh-select-display {
    border-color: rgba(245,158,11,.8);
    box-shadow: 0 0 12px rgba(245,158,11,.35), inset 0 0 6px rgba(245,158,11,.15);
}
.xh-modal-kim .xh-select-caret,
.xh-panel-kim .xh-select-caret { color: #fbbf24; }
.xh-modal-kim .xh-select-label--placeholder,
.xh-panel-kim .xh-select-label--placeholder { color: rgba(253,230,138,.5); }
.xh-modal-kim .xh-select-menu,
.xh-panel-kim .xh-select-menu {
    background: linear-gradient(180deg, #2a1a08 0%, #0f0904 100%);
    border-color: rgba(245,158,11,.45);
    box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 16px rgba(245,158,11,.2);
}
.xh-modal-kim .xh-select-menu::-webkit-scrollbar-thumb,
.xh-panel-kim .xh-select-menu::-webkit-scrollbar-thumb { background: rgba(245,158,11,.35); }
.xh-modal-kim .xh-select-option,
.xh-panel-kim .xh-select-option { color: #fef3c7; }
.xh-modal-kim .xh-select-option:hover,
.xh-panel-kim .xh-select-option:hover { background: rgba(245,158,11,.18); }
.xh-modal-kim .xh-select-option.active,
.xh-panel-kim .xh-select-option.active { background: rgba(245,158,11,.28); box-shadow: inset 0 0 0 1px rgba(253,230,138,.45); }
.xh-modal-kim .xh-select--simple .xh-opt-name,
.xh-panel-kim .xh-select--simple .xh-opt-name { color: #fef3c7; }
.xh-modal-moc select.xh-form-input option {
    background-color: #0b1a14 !important;
    color: #ecfdf5 !important;
    padding: 10px 14px !important;
    font-weight: 500;
}
.xh-modal-moc select.xh-form-input option:disabled {
    color: rgba(167,243,208,.35) !important;
    font-style: italic;
}
.xh-modal-moc select.xh-form-input option:checked,
.xh-modal-moc select.xh-form-input option:hover {
    background: linear-gradient(0deg, rgba(16,185,129,.35), rgba(16,185,129,.35)) !important;
    color: #fde68a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Colvis dropdown menu — items used inside .xh-fbar-cell--view
   ─────────────────────────────────────────────────────────────────────── */
.xh-colvis-menu {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 220px; max-width: 280px;
    max-height: 420px; overflow-y: auto;
    padding: .4rem;
    background: linear-gradient(180deg, #0b1424 0%, #050912 100%);
    border: 1px solid rgba(59,130,246,.4);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,.6), 0 0 18px rgba(59,130,246,.2);
    z-index: 50;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.xh-fbar-cell--view.open .xh-colvis-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.xh-colvis-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .4rem .55rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease;
    margin: 0;
}
.xh-colvis-item:hover { background: rgba(59,130,246,.1); }
.xh-colvis-item input[type=checkbox] {
    position: absolute; opacity: 0; pointer-events: none;
}
.xh-colvis-check {
    flex: 0 0 18px;
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1.5px solid rgba(148,163,184,.4);
    background: rgba(10,15,28,.6);
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.xh-colvis-check i { color: transparent !important; font-size: .75rem; }
.xh-colvis-item input:checked ~ .xh-colvis-check {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59,130,246,.5);
}
.xh-colvis-item input:checked ~ .xh-colvis-check i { color: #ffffff !important; }
.xh-colvis-label {
    font-size: .82rem; font-weight: 600;
    color: #cbd5e1;
    line-height: 1.3;
    flex: 1;
}
.xh-colvis-item input:not(:checked) ~ .xh-colvis-label { color: #64748b; }

.xh-colvis-actions {
    display: flex; gap: .4rem;
    margin-top: .35rem; padding-top: .4rem;
    border-top: 1px solid rgba(148,163,184,.15);
}
.xh-colvis-actions button {
    flex: 1;
    padding: .35rem .5rem;
    border-radius: 6px;
    font-size: .72rem; font-weight: 700;
    background: rgba(10,15,28,.6);
    border: 1px solid rgba(148,163,184,.25);
    color: #cbd5e1;
    cursor: pointer;
    transition: all .15s ease;
}
.xh-colvis-actions button:hover {
    border-color: rgba(59,130,246,.55);
    color: #dbeafe;
    background: rgba(59,130,246,.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Filter Bar v2 — 4-cell card: Filter | View | Length | Search
   Dùng qua <x-xh-filter-bar> component. Filter + View là opt-in cells.
   ─────────────────────────────────────────────────────────────────────── */
.xh-filter-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: .55rem .75rem;
    background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(5,10,20,.55) 100%);
    border: 1px solid rgba(99,102,241,.28);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
    margin-bottom: .9rem;
}
.xh-fbar-cell {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .8rem;
    border-right: 1px solid rgba(99,102,241,.18);
    position: relative;
}
.xh-fbar-cell:last-child { border-right: 0; }
.xh-fbar-cell--search { margin-left: auto; }
.xh-fbar-icon {
    color: #a5b4fc;
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    background: transparent; border: 0; padding: 0;
}
.xh-fbar-icon i { color: inherit; }

/* Dropdown chung — Filter + Length + View */
.xh-fbar-dd { position: relative; }
.xh-fbar-dd-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem;
    background: rgba(10,15,28,.6);
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 6px;
    color: #dbeafe;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.2;
}
.xh-fbar-dd-btn:hover { border-color: rgba(99,102,241,.6); }
.xh-fbar-dd.open .xh-fbar-dd-btn,
.xh-fbar-cell--view.open .xh-fbar-dd-btn {
    border-color: rgba(99,102,241,.7);
    box-shadow: 0 0 10px rgba(99,102,241,.3);
}
.xh-fbar-dd-caret { color: #a5b4fc; transition: transform .2s; }
.xh-fbar-dd.open .xh-fbar-dd-caret,
.xh-fbar-cell--view.open .xh-fbar-dd-caret { transform: rotate(180deg); color: #fde68a; }

.xh-fbar-dd-menu {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 140px;
    background: linear-gradient(180deg, #0b1424 0%, #050912 100%);
    border: 1px solid rgba(99,102,241,.4);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(99,102,241,.22);
    padding: .25rem;
    z-index: 1050;
    opacity: 0; transform: translateY(-4px) scale(.98);
    transition: opacity .16s, transform .16s;
    pointer-events: none;
}
.xh-fbar-dd.open .xh-fbar-dd-menu { opacity: 1; transform: none; pointer-events: auto; }

.xh-fbar-dd-opt {
    padding: .4rem .7rem;
    font-size: .82rem; font-weight: 600;
    color: #dbeafe;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.xh-fbar-dd-opt:hover { background: rgba(99,102,241,.18); }
.xh-fbar-dd-opt.selected {
    background: rgba(99,102,241,.28); color: #fde68a; font-weight: 800;
}

/* Search */
.xh-fbar-cell--search { gap: .5rem; }
.xh-search-input {
    width: 180px;
    padding: .3rem .7rem;
    background: rgba(10,15,28,.6);
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 6px;
    color: #dbeafe;
    font-size: .82rem;
    transition: width .25s, border-color .15s, box-shadow .15s;
}
.xh-search-input::placeholder { color: rgba(203,213,225,.4); }
.xh-search-input:focus {
    outline: none;
    border-color: rgba(99,102,241,.7);
    box-shadow: 0 0 10px rgba(99,102,241,.3);
}
.xh-search-toggle {
    background: transparent; border: 0; padding: 0;
    color: #a5b4fc; cursor: pointer;
}
.xh-search-toggle:hover { color: #e0e7ff; }

/* Mobile — wrap + search collapse */
@media (max-width: 576px) {
    .xh-filter-bar { flex-wrap: wrap; gap: .3rem; padding: .5rem .6rem; }
    .xh-fbar-cell { padding: 0 .5rem; border-right: 0; }
    .xh-fbar-cell--search { margin-left: auto; }
    .xh-fbar-cell--search .xh-search-input {
        display: none;
        width: 100%;
    }
    .xh-fbar-cell--search.open {
        flex: 1 1 100%;
        order: 99;
    }
    .xh-fbar-cell--search.open .xh-search-input {
        display: block;
    }
}

/* Colvis menu dùng trong .xh-fbar-cell--view — override position */
.xh-fbar-cell--view .xh-colvis-menu { right: auto; left: 0; }

/* Input group themed cho panel Mộc (create-website domain input) */
.xh-panel-moc .input-group.input-group-solid {
    border: 1px solid rgba(16,185,129,.45);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(16,185,129,.18), inset 0 0 8px rgba(16,185,129,.08);
    background: rgba(6,10,18,.6);
    transition: border-color .2s, box-shadow .2s;
}
.xh-panel-moc .input-group.input-group-solid:focus-within {
    border-color: rgba(16,185,129,.85);
    box-shadow: 0 0 22px rgba(16,185,129,.35), inset 0 0 10px rgba(16,185,129,.15);
}
.xh-panel-moc .input-group.input-group-solid .input-group-text {
    background: rgba(6,78,59,.55) !important;
    border: 0 !important;
    border-right: 1px solid rgba(16,185,129,.35) !important;
    color: #6ee7b7 !important;
}
.xh-panel-moc .input-group.input-group-solid .input-group-text i { color: #6ee7b7 !important; text-shadow: 0 0 8px rgba(110,231,183,.6); }
.xh-panel-moc .input-group.input-group-solid .form-control,
.xh-panel-moc .input-group.input-group-solid .form-control-solid {
    background: transparent !important;
    border: 0 !important;
    color: #ecfdf5 !important;
    box-shadow: none !important;
}
.xh-panel-moc .input-group.input-group-solid .form-control::placeholder {
    color: rgba(167,243,208,.45) !important;
}
.xh-panel-moc .input-group.input-group-solid .btn {
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(16,185,129,.5) !important;
}


/* ═══════════════════════════════════════════════════════════
   XH SweetAlert2 — Tiên hiệp themed popups
   Usage: Swal.fire({ customClass: { popup: 'xh-swal xh-swal-moc', confirmButton: 'xh-swal-btn xh-swal-btn-moc', cancelButton: 'xh-swal-btn xh-swal-btn-hoa' }})
   ═══════════════════════════════════════════════════════════ */
.xh-swal.swal2-popup {
    background: linear-gradient(135deg, rgba(10,14,24,.97), rgba(14,20,34,.97)) !important;
    border: 1px solid rgba(253,230,138,.25) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 50px rgba(0,0,0,.6), 0 0 40px rgba(253,230,138,.08) !important;
    color: #e5e7eb !important;
    padding: 1.6rem 1.4rem 1.2rem !important;
    position: relative;
    overflow: hidden;
}
.xh-swal.swal2-popup::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at top, rgba(253,230,138,.06), transparent 55%);
}
.xh-swal .swal2-title {
    color: #fde68a !important;
    font-weight: 800 !important;
    letter-spacing: .4px;
    text-shadow: 0 0 16px rgba(253,230,138,.4);
    font-size: 1.4rem !important;
}
.xh-swal .swal2-html-container {
    color: #d1d5db !important;
    font-size: .95rem !important;
    line-height: 1.7 !important;
}
.xh-swal .swal2-html-container strong { color: #fde68a !important; text-shadow: 0 0 8px rgba(253,230,138,.3); }
.xh-swal .swal2-actions { gap: .6rem !important; margin-top: 1.2rem !important; }
.xh-swal .swal2-timer-progress-bar { background: rgba(110,231,183,.6) !important; }

/* Icons — tone by panel hành */
.xh-swal-moc .swal2-icon.swal2-warning,
.xh-swal-moc .swal2-icon.swal2-question { border-color: #10b981 !important; color: #6ee7b7 !important; }
.xh-swal-moc .swal2-icon.swal2-success { border-color: #10b981 !important; color: #6ee7b7 !important; }
.xh-swal-moc .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #6ee7b7 !important; }
.xh-swal-moc .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16,185,129,.5) !important; }
.xh-swal-hoa .swal2-icon.swal2-error { border-color: #dc2626 !important; color: #fecaca !important; }
.xh-swal-hoa .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #fecaca !important; }
.xh-swal-thuy .swal2-icon.swal2-info { border-color: #3b82f6 !important; color: #93c5fd !important; }

/* Buttons */
.xh-swal-btn {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: .55rem 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    transition: all .2s !important;
    box-shadow: none !important;
}
.xh-swal-btn-moc {
    background: linear-gradient(135deg, #065f46, #047857) !important;
    border-color: rgba(110,231,183,.5) !important;
    color: #ecfdf5 !important;
    text-shadow: 0 0 8px rgba(110,231,183,.5);
    box-shadow: 0 0 16px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.xh-swal-btn-moc:hover { background: linear-gradient(135deg, #047857, #059669) !important; transform: translateY(-1px); }
.xh-swal-btn-hoa {
    background: linear-gradient(135deg, #7f1d1d, #991b1b) !important;
    border-color: rgba(252,165,165,.5) !important;
    color: #fee2e2 !important;
    text-shadow: 0 0 8px rgba(252,165,165,.5);
    box-shadow: 0 0 16px rgba(220,38,38,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.xh-swal-btn-hoa:hover { background: linear-gradient(135deg, #991b1b, #b91c1c) !important; transform: translateY(-1px); }
.xh-swal-btn-kim {
    background: linear-gradient(135deg, #78350f, #92400e) !important;
    border-color: rgba(253,230,138,.6) !important;
    color: #fef3c7 !important;
    text-shadow: 0 0 8px rgba(253,230,138,.5);
    box-shadow: 0 0 18px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.xh-swal-btn-kim:hover { background: linear-gradient(135deg, #92400e, #b45309) !important; transform: translateY(-1px); }
.xh-swal-btn-thuy {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    border-color: rgba(147,197,253,.5) !important;
    color: #dbeafe !important;
    text-shadow: 0 0 8px rgba(147,197,253,.5);
    box-shadow: 0 0 16px rgba(59,130,246,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.xh-swal-btn-thuy:hover { background: linear-gradient(135deg, #1e40af, #1d4ed8) !important; transform: translateY(-1px); }

/* Loader color when processing */
.xh-swal .swal2-loader { border-color: #6ee7b7 transparent #6ee7b7 transparent !important; }

/* Progress bar (bulk order) */
.xh-swal .progress {
    background: rgba(10,14,24,.7) !important;
    border: 1px solid rgba(16,185,129,.3);
    height: 1rem;
}
.xh-swal .progress-bar {
    background: linear-gradient(90deg, #10b981, #6ee7b7) !important;
    color: #062e20 !important;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(255,255,255,.5);
}

/* ── Footer (Nguyệt — đêm khuya tĩnh lặng, 1 row horizontal, full-width) ── */
.xh-footer {
    padding: .75rem 1.25rem;
    display: block; width: 100%;
}
.xh-footer-panel {
    display: block; width: 100%; box-sizing: border-box;
    border-radius: 12px;
    padding: .6rem 1.4rem;
}
.xh-footer-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center;
    flex-wrap: nowrap; justify-content: space-between;
    gap: 1rem; width: 100%;
    white-space: nowrap;
}
.xh-footer-brand {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .92rem; line-height: 1;
}
.xh-footer-brand .xh-title-deco {
    color: #cbd5e1;
    text-shadow: 0 0 10px rgba(203,213,225,.5);
    font-size: .9rem;
}
.xh-footer-brand-name {
    font-weight: 800; letter-spacing: .5px;
    color: #e2e8f0 !important; text-decoration: none;
    text-shadow: 0 0 14px rgba(203,213,225,.4);
    transition: text-shadow .2s, color .2s;
}
.xh-footer-brand-name:hover {
    color: #f1f5f9 !important;
    text-shadow: 0 0 20px rgba(203,213,225,.7);
}
.xh-footer-tagline {
    color: #cbd5e1; font-style: italic; font-weight: 500;
    font-size: .85rem;
    text-shadow: 0 0 10px rgba(203,213,225,.25);
}
.xh-footer-copy {
    color: #cbd5e1;
    font-weight: 500;
    font-size: .82rem; line-height: 1;
    margin-left: .35rem;
    padding-left: .7rem;
    border-left: 1px solid rgba(148,163,184,.35);
}
.xh-footer-links {
    list-style: none; padding: 0; margin: 0;
    display: inline-flex; align-items: center; gap: .5rem;
}
.xh-footer-links li { margin: 0; }
.xh-footer-links a {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #cbd5e1 !important; text-decoration: none;
    font-size: .8rem; font-weight: 600;
    padding: .28rem .55rem;
    border-radius: 6px;
    line-height: 1;
    transition: all .2s;
}
.xh-footer-links a i { color: #94a3b8; transition: color .2s; font-size: .95rem !important; }
.xh-footer-links a:hover {
    color: #f1f5f9 !important;
    background: rgba(148,163,184,.1);
    text-shadow: 0 0 12px rgba(203,213,225,.5);
}
.xh-footer-links a:hover i { color: #e2e8f0; }

/* Mobile: stack order = links → brand → copyright */
@media (max-width: 991px) {
    .xh-footer-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        row-gap: .55rem; gap: .55rem;
    }
    .xh-footer-tagline { display: none; }
    .xh-footer-links { order: 1; flex-wrap: wrap; justify-content: center; gap: .35rem; }
    .xh-footer-brand {
        order: 2;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .25rem;
    }
    .xh-footer-copy {
        margin-left: .35rem;
        padding-left: .6rem;
    }
}
@media (max-width: 576px) {
    .xh-footer { padding: .55rem .5rem; }
    .xh-footer-panel { padding: .7rem .85rem; border-radius: 10px; }
    .xh-footer-brand { font-size: .82rem; gap: .4rem; }
    .xh-footer-brand .xh-title-deco { font-size: .82rem; }
    .xh-footer-copy {
        display: block;
        width: 100%;
        margin: .25rem 0 0;
        padding: .25rem 0 0;
        border-left: none;
        border-top: 1px dashed rgba(148,163,184,.2);
        font-size: .7rem;
        color: #94a3b8;
    }
    .xh-footer-links { gap: .3rem; }
    .xh-footer-links a { padding: .25rem .45rem; font-size: .72rem; }
    .xh-footer-links a i { font-size: .85rem !important; }
}

/* ── Toastr xianxia override (.xh-toastr wraps default toastr skin) ───
   Default toastr renders white/opaque background với icon tím → chói trên dark bg.
   Override base + từng variant (success/error/info/warning) theo ngũ hành.
*/
#toast-container > .xh-toastr {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(11,20,36,.96) 0%, rgba(5,9,18,.96) 100%) !important;
    border: 1px solid rgba(148,163,184,.35) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(148,163,184,.18) !important;
    color: #e2e8f0 !important;
    padding: 14px 16px 14px 50px !important;
    opacity: 1 !important;
    width: 320px;
    font-size: .88rem;
}
#toast-container > .xh-toastr:hover {
    box-shadow: 0 12px 34px rgba(0,0,0,.65), 0 0 22px rgba(148,163,184,.28) !important;
    opacity: 1 !important;
}
.xh-toastr .toast-title {
    font-weight: 800;
    letter-spacing: .4px;
    font-size: .95rem;
    margin-bottom: 3px;
    color: #f1f5f9;
    text-shadow: 0 0 10px rgba(148,163,184,.3);
}
.xh-toastr .toast-message {
    color: #cbd5e1 !important;
    line-height: 1.5;
}
.xh-toastr .toast-close-button {
    color: #94a3b8 !important;
    text-shadow: none !important;
    opacity: .75;
    font-size: 1.1rem;
}
.xh-toastr .toast-close-button:hover { opacity: 1; color: #f1f5f9 !important; }
.xh-toastr .toast-progress { background: rgba(203,213,225,.55) !important; opacity: .75; }

/* success (Mộc) */
#toast-container > .xh-toastr.toast-success {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"),
        linear-gradient(180deg, rgba(6,78,59,.55) 0%, rgba(5,9,18,.96) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 16px center, 0 0 !important;
    background-size: 22px 22px, cover !important;
    border-color: rgba(16,185,129,.55) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(16,185,129,.28) !important;
}
.xh-toastr.toast-success .toast-progress { background: #6ee7b7 !important; }
.xh-toastr.toast-success .toast-title { color: #a7f3d0 !important; text-shadow: 0 0 10px rgba(110,231,183,.4); }

/* error (Hỏa) */
#toast-container > .xh-toastr.toast-error {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fecaca' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>"),
        linear-gradient(180deg, rgba(127,29,29,.55) 0%, rgba(5,9,18,.96) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 16px center, 0 0 !important;
    background-size: 22px 22px, cover !important;
    border-color: rgba(220,38,38,.55) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(220,38,38,.3) !important;
}
.xh-toastr.toast-error .toast-progress { background: #fca5a5 !important; }
.xh-toastr.toast-error .toast-title { color: #fecaca !important; text-shadow: 0 0 10px rgba(252,165,165,.4); }

/* info (Thủy) */
#toast-container > .xh-toastr.toast-info {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>"),
        linear-gradient(180deg, rgba(30,58,138,.55) 0%, rgba(5,9,18,.96) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 16px center, 0 0 !important;
    background-size: 22px 22px, cover !important;
    border-color: rgba(59,130,246,.55) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(59,130,246,.3) !important;
}
.xh-toastr.toast-info .toast-progress { background: #93c5fd !important; }
.xh-toastr.toast-info .toast-title { color: #bfdbfe !important; text-shadow: 0 0 10px rgba(147,197,253,.4); }

/* warning (Kim) */
#toast-container > .xh-toastr.toast-warning {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fde68a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"),
        linear-gradient(180deg, rgba(120,53,15,.55) 0%, rgba(5,9,18,.96) 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 16px center, 0 0 !important;
    background-size: 22px 22px, cover !important;
    border-color: rgba(245,158,11,.55) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 18px rgba(245,158,11,.3) !important;
}
.xh-toastr.toast-warning .toast-progress { background: #fde68a !important; }
.xh-toastr.toast-warning .toast-title { color: #fde68a !important; text-shadow: 0 0 10px rgba(253,230,138,.4); }

/* ══════════════════════════════════════════════════════════════════════
   Auth pages — compact xianxia (login/register/forgot/reset/install)
   Pattern: card gọn giữa màn hình, border hành, title gloss nhẹ.
   KHÔNG dùng 4-corner glow, KHÔNG divider — theo user chốt phương án B.
   ══════════════════════════════════════════════════════════════════════ */
.xh-auth-body {
    min-height: 100vh !important;
    margin: 0 !important;
    background:
        radial-gradient(ellipse 80% 60% at 50% 10%, rgba(14,22,42,.55), transparent 70%),
        radial-gradient(ellipse 60% 45% at 20% 95%, rgba(8,14,28,.5), transparent 70%),
        linear-gradient(180deg, #030611 0%, #050a18 50%, #030611 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    color: #e2e8f0 !important;
    font-family: 'Inter', sans-serif !important;
}
.xh-auth-body #kt_app_root,
.xh-auth-body .app-blank { background: transparent !important; }
.xh-auth-wrap {
    width: 100%;
    max-width: 460px;
    position: relative;
}
.xh-auth-card {
    position: relative;
    padding: 2.25rem 2rem 2rem;
    border-radius: 14px;
}
.xh-auth-card > * { position: relative; z-index: 2; }
.xh-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
    position: relative;
}
.xh-auth-brand::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 120%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, var(--xh-accent-glow, rgba(255,255,255,.12)) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
}
.xh-auth-brand a { position: relative; z-index: 1; display: inline-block; }
.xh-auth-brand img {
    height: 54px;
    width: auto;
    filter:
        drop-shadow(0 0 22px rgba(255,255,255,.45))
        drop-shadow(0 0 10px var(--xh-accent, #3b82f6))
        brightness(1.15);
    margin-bottom: .1rem;
}
.xh-auth-title {
    text-align: center;
    margin-bottom: 1.5rem;
}
.xh-auth-title h1 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 .3rem;
    letter-spacing: .8px;
    color: #f1f5f9;
    text-shadow: 0 0 16px var(--xh-accent-glow, rgba(255,255,255,.3));
}
.xh-auth-title .xh-gloss {
    display: block;
    font-size: .78em;
    font-weight: 500;
    color: var(--xh-accent-light, #93c5fd);
    opacity: .82;
    font-style: italic;
    letter-spacing: 2px;
    margin-top: .1rem;
    text-transform: uppercase;
}
.xh-auth-title .xh-auth-sub {
    display: block;
    font-size: .82rem;
    color: rgba(203,213,225,.65);
    font-weight: 500;
    margin-top: .55rem;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}
.xh-auth-card .fv-row { margin-bottom: 1rem; }
.xh-auth-card .form-control,
.xh-auth-card input[type="text"],
.xh-auth-card input[type="email"],
.xh-auth-card input[type="password"],
.xh-auth-card input[type="tel"] {
    background: rgba(2,6,15,.55) !important;
    border: 1px solid var(--xh-accent-border, rgba(255,255,255,.2)) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    padding: .75rem 1rem !important;
    font-size: .95rem !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.xh-auth-card .form-control::placeholder { color: rgba(148,163,184,.55) !important; }
.xh-auth-card .form-control:hover {
    border-color: var(--xh-accent, #3b82f6) !important;
    background: rgba(2,6,15,.7) !important;
}
.xh-auth-card .form-control:focus {
    border-color: var(--xh-accent, #3b82f6) !important;
    box-shadow: 0 0 0 3px var(--xh-accent-inner, rgba(59,130,246,.18)) !important;
    background: rgba(2,6,15,.8) !important;
    outline: none !important;
}
.xh-auth-card [data-kt-password-meter-control="visibility"] {
    background: transparent !important;
    border: none !important;
    color: var(--xh-accent-light, #93c5fd) !important;
}
.xh-auth-card [data-kt-password-meter-control="visibility"] i {
    color: var(--xh-accent-light, #93c5fd) !important;
}
.xh-auth-btn {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    border: none;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    cursor: pointer;
    font-size: .95rem;
    transition: transform .15s, box-shadow .2s, background .2s;
    background: linear-gradient(135deg, var(--xh-accent, #3b82f6), color-mix(in srgb, var(--xh-accent, #3b82f6) 65%, #000));
    box-shadow: 0 6px 18px var(--xh-accent-glow, rgba(59,130,246,.32));
}
.xh-auth-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px var(--xh-accent-glow, rgba(59,130,246,.45));
}
.xh-auth-btn:disabled { opacity: .6; cursor: not-allowed; }
.xh-auth-card .form-check-input {
    background-color: rgba(2,6,15,.6) !important;
    border-color: var(--xh-accent-border, rgba(255,255,255,.3)) !important;
}
.xh-auth-card .form-check-input:checked {
    background-color: var(--xh-accent, #3b82f6) !important;
    border-color: var(--xh-accent, #3b82f6) !important;
}
.xh-auth-card .form-check-label { color: #cbd5e1 !important; }
.xh-auth-card a,
.xh-auth-card .link-primary {
    color: var(--xh-accent-light, #93c5fd) !important;
    text-decoration: none;
    transition: text-shadow .2s, color .2s;
    font-weight: 600;
}
.xh-auth-card a:hover,
.xh-auth-card .link-primary:hover {
    color: #fff !important;
    text-shadow: 0 0 10px var(--xh-accent, #3b82f6);
}
.xh-auth-stack {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: .88rem;
}
.xh-auth-foot {
    text-align: center;
    color: rgba(148,163,184,.7);
    font-size: .85rem;
    margin-top: 1rem;
}
.xh-auth-trial {
    position: relative;
    margin-top: 1.4rem;
    padding: 1.2rem 1.1rem 1.1rem;
    border-radius: 12px;
    border: 1px dashed var(--xh-accent-border, rgba(255,255,255,.28));
    background:
        radial-gradient(ellipse at top, var(--xh-accent-inner, rgba(59,130,246,.08)), transparent 70%),
        rgba(2,6,15,.45);
    text-align: center;
    overflow: hidden;
}
.xh-auth-trial::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 10%, var(--xh-accent-glow, rgba(59,130,246,.18)), transparent 40%),
                radial-gradient(circle at 85% 90%, var(--xh-accent-glow, rgba(59,130,246,.15)), transparent 45%);
    pointer-events: none; opacity: .6;
}
.xh-auth-trial > * { position: relative; z-index: 1; }

.xh-auth-trial-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: .5rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--xh-accent-inner, rgba(59,130,246,.25)), transparent 70%);
    animation: xh-trial-pulse 2.8s ease-in-out infinite;
}
.xh-auth-trial-icon i {
    font-size: 2.2rem;
    color: var(--xh-accent-light, #93c5fd) !important;
    filter: drop-shadow(0 0 12px var(--xh-accent-glow, rgba(59,130,246,.55)));
}
@keyframes xh-trial-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: .85; }
}

.xh-auth-trial-title {
    display: flex; align-items: center; justify-content: center;
    gap: .6rem; margin: .2rem 0 .15rem;
}
.xh-auth-trial-title h5 {
    color: #f1f5f9;
    font-weight: 800;
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: 1px;
    text-shadow: 0 0 14px var(--xh-accent-glow, rgba(59,130,246,.5));
}
.xh-auth-trial-deco {
    color: var(--xh-accent-light, #93c5fd);
    font-size: .9rem;
    text-shadow: 0 0 10px var(--xh-accent-glow, rgba(59,130,246,.6));
}
.xh-auth-trial-gloss {
    display: block;
    color: var(--xh-accent-light, #93c5fd);
    font-size: .74rem;
    font-style: italic;
    opacity: .82;
    letter-spacing: .5px;
    margin-bottom: .55rem;
}
.xh-auth-trial p {
    color: #cbd5e1;
    font-size: .82rem;
    line-height: 1.5;
    margin-bottom: .95rem;
}
.xh-auth-trial-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .65rem 1rem;
    background: linear-gradient(135deg, var(--xh-accent-inner, rgba(59,130,246,.2)), rgba(2,6,15,.6)) !important;
    border: 1px solid var(--xh-accent-border, rgba(59,130,246,.55)) !important;
    color: #f1f5f9 !important;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255,255,255,.06);
}
.xh-auth-trial-btn i {
    color: var(--xh-accent-light, #93c5fd) !important;
    filter: drop-shadow(0 0 6px var(--xh-accent-glow, rgba(59,130,246,.5)));
    transition: transform .3s;
}
.xh-auth-trial-btn:hover {
    background: linear-gradient(135deg, var(--xh-accent, #3b82f6), var(--xh-accent-inner, rgba(59,130,246,.35))) !important;
    color: #fff !important;
    border-color: var(--xh-accent-light, #93c5fd) !important;
    text-shadow: 0 0 10px rgba(255,255,255,.5);
    box-shadow: 0 6px 22px var(--xh-accent-glow, rgba(59,130,246,.45)), inset 0 1px 0 rgba(255,255,255,.15);
    transform: translateY(-1px);
}
.xh-auth-trial-btn:hover i {
    color: #fff !important;
    transform: translateX(3px);
}
@media (max-width: 576px) {
    .xh-auth-body { padding: 1rem .75rem !important; }
    .xh-auth-card { padding: 1.5rem 1.25rem; }
    .xh-auth-title h1 { font-size: 1.2rem; }
    .xh-auth-brand img { height: 40px; }
}

/* Swal variant Thổ (cho install page nếu cần) */
.xh-swal-tho.swal2-popup {
    background: linear-gradient(160deg, #1a1408 0%, #2a2210 50%, #1a1408 100%) !important;
    border: 1px solid rgba(161,98,7,.4) !important;
    box-shadow: 0 0 40px rgba(161,98,7,.15) inset, 0 10px 40px rgba(0,0,0,.45) !important;
}
.xh-swal-tho .swal2-icon.swal2-info,
.xh-swal-tho .swal2-icon.swal2-question { border-color: #a16207 !important; color: #d4a574 !important; }
.xh-swal-btn-tho {
    background: linear-gradient(135deg, #a16207, #78350f) !important;
    color: #fef3c7 !important;
    border: none !important;
    padding: .55rem 1.4rem !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(161,98,7,.3) !important;
}
.xh-swal-btn-tho:hover { background: linear-gradient(135deg, #78350f, #92400e) !important; transform: translateY(-1px); }

/* ── Banner card (Tiên Duyên Các — Huyền) ──────────────────────────
   Mobile-safe: fixed aspect-ratio frame prevents image overflow. */
.xh-orb-huyen {
    background: linear-gradient(135deg, #312e81, #6366f1) !important;
    box-shadow: 0 0 12px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.xh-banner-title {
    color: #c7d2fe;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 0 14px rgba(129,140,248,.7);
}
.xh-banner-sub {
    color: #a5b4fc;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
    text-shadow: 0 0 8px rgba(99,102,241,.35);
}
.xh-banner-count {
    background: rgba(99,102,241,.18);
    border: 1px solid rgba(165,180,252,.3);
    color: #c7d2fe;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    letter-spacing: .3px;
}
.xh-banner-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.xh-banner-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(15,13,42,.6));
    border: 1px solid rgba(165,180,252,.2);
    text-decoration: none !important;
    color: inherit !important;
    transition: box-shadow .25s ease, border-color .25s ease;
}
a.xh-banner-frame:hover {
    border-color: rgba(165,180,252,.5);
    box-shadow: 0 10px 28px rgba(99,102,241,.28), 0 0 0 1px rgba(165,180,252,.35);
}
.xh-banner-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease, filter .25s ease;
}
a.xh-banner-frame:hover .xh-banner-img {
    transform: scale(1.03);
    filter: brightness(1.05);
}
/* Carousel indicators — subtle moonlight dots */
.xh-banner-indicators {
    margin-bottom: .35rem;
    gap: .3rem;
}
.xh-banner-indicators button {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(165,180,252,.35) !important;
    border: 0 !important;
    opacity: 1 !important;
    transition: all .2s;
}
.xh-banner-indicators button.active {
    background: #a5b4fc !important;
    box-shadow: 0 0 8px rgba(165,180,252,.7);
    transform: scale(1.2);
}
/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .xh-banner-frame { padding-top: 56.25%; }
}
@media (max-width: 576px) {
    .xh-banner-title { font-size: .92rem; }
    .xh-banner-sub { font-size: .72rem; }
    .xh-banner-count { font-size: .68rem; padding: .15rem .45rem; }
}

/* ── Affiliate steps (3-step flow numbered pills) ─────────────────── */
.xh-aff-steps .xh-aff-step-num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: 999px;
    border: 1px solid;
    font-weight: 800; font-size: .8rem;
    line-height: 1;
    text-shadow: 0 0 8px currentColor;
}
.xh-aff-steps li { transition: transform .18s ease; }
.xh-aff-steps li:hover { transform: translateX(3px); }

/* Affiliate pitch callout */
.xh-aff-pitch {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .6rem .8rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(251,191,36,.35);
    border-left: 3px solid #fbbf24;
    background: linear-gradient(135deg, rgba(251,191,36,.12) 0%, rgba(217,119,6,.05) 50%, rgba(251,191,36,.08) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 12px rgba(251,191,36,.08);
    overflow: hidden;
    text-align: center;
}
.xh-aff-pitch::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right, rgba(251,191,36,.18), transparent 60%);
    pointer-events: none;
}
.xh-aff-pitch-icon {
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251,191,36,.6);
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.xh-aff-pitch-text {
    position: relative; z-index: 1;
    color: #e5e7eb; font-weight: 600; font-size: .92rem;
    line-height: 1.35;
}
.xh-aff-pitch-hl {
    color: #fbbf24; font-weight: 900;
    font-size: 1.08em;
    letter-spacing: .5px;
    text-shadow: 0 0 12px rgba(251,191,36,.5);
    margin: 0 .15rem;
}
.xh-aff-pitch-sub {
    font-size: .82rem;
    color: #d1d5db; font-weight: 500; font-style: italic;
    opacity: .9;
}
.xh-aff-pitch-sub::before {
    content: "·";
    color: rgba(251,191,36,.5);
    margin: 0 .5rem;
    font-weight: 900;
}
@media (max-width: 576px) {
    .xh-aff-pitch-sub { display: block; font-size: .75rem; margin-top: .15rem; }
    .xh-aff-pitch-sub::before { display: none; }
}