/* Bottom Menu Bar */
.tabbar{position:fixed; left:0; right:0;
    bottom: max(10px, calc(env(safe-area-inset-bottom,0) + 10px));
    z-index:1030; padding:0 14px; pointer-events:none}
.tabbar .tabbar-inner{pointer-events:auto; isolation:isolate; box-sizing:border-box; max-width:520px; margin:0 auto; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0)); display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:rgba(255,255,255,.94); border:1px solid rgba(226,232,240,.9); border-radius:22px; box-shadow:0 16px 40px rgba(15,23,42,.12); backdrop-filter:saturate(160%) blur(14px); position:relative}
.tabbar .indicator{position:absolute; bottom:calc(8px + env(safe-area-inset-bottom,0)); left:10px; height:36px; width:0; background:#ecfdf5; border:1px solid rgba(0,200,83,.22); box-shadow:0 8px 18px rgba(0,200,83,.14); border-radius:16px; transition:left .28s cubic-bezier(.25,.8,.25,1), width .28s cubic-bezier(.25,.8,.25,1); z-index:0}
.tab-item{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; padding:8px 6px; border-radius:16px; text-decoration:none; color:#111827; font-weight:800; font-size:12px; letter-spacing:0}
.tab-item i{font-size:20px; line-height:1; opacity:.95}
.tab-item span{color:#64748b; font-weight:700}
.tab-item.active{color:#00C853}
.tab-item.active span{color:#047857}



/* ===== Transactions (last 30) ===== */
#page-transactions .tx-shell{border:1px solid #dbeafe;border-radius:24px;padding:20px;background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 18px 44px rgba(15,23,42,.08);overflow:hidden}
.tx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.tx-title{display:flex;align-items:center;gap:10px;margin:0;color:#0f172a;font-size:22px;font-weight:900;line-height:1.18;letter-spacing:0}
.tx-title svg{width:26px;height:26px;fill:#00C853;filter:drop-shadow(0 6px 12px rgba(0,200,83,.18))}
.tx-subtitle{margin-top:5px;color:#64748b;font-size:13px;font-weight:600}
.tx-table-wrap{max-width:100%;overflow:hidden;border-radius:18px}
.tx-table{width:100%;max-width:100%;min-width:0;table-layout:fixed;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #e2e8f0;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.05);box-sizing:border-box}
.tx-table th,.tx-table td{box-sizing:border-box}
.tx-table thead th{background:#f8fafc;font-size:10px;letter-spacing:.025em;color:#64748b;padding:11px 6px;border-bottom:1px solid #e2e8f0;text-transform:uppercase;font-weight:900}
.tx-table tbody td{padding:12px 6px;border-bottom:1px solid #eef2f7;vertical-align:middle}
.tx-table th:nth-child(1),.tx-table td:nth-child(1){width:32px}
.tx-table th:nth-child(2),.tx-table td:nth-child(2){width:122px}
.tx-table th:nth-child(3),.tx-table td:nth-child(3){width:112px}
.tx-table th:nth-child(4),.tx-table td:nth-child(4){width:66px;text-align:center}
.tx-table th:nth-child(5),.tx-table td:nth-child(5){width:88px;text-align:center}
.tx-table tbody tr:last-child td{border-bottom:0}
.tx-table tbody tr{transition:background .14s ease}
.tx-table tbody tr:hover{background:#fbfdff}
.tx-id{font-weight:900;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;color:#0f172a;font-size:13px}
.tx-id-btn{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:32px;border:1px solid transparent;border-radius:10px;background:transparent;color:#0f172a;padding:4px;cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.tx-id-btn svg{width:13px;height:13px;fill:#94a3b8;transition:fill .14s ease}
.tx-id-btn:hover{background:#f8fafc;border-color:#e2e8f0}
.tx-id-btn:hover svg{fill:#00C853}
.tx-id-btn:active,.status-badge:active{transform:scale(.98)}
.tx-label{display:none}
.tx-time{display:block;color:#64748b;font-size:11px;white-space:normal;font-weight:700;line-height:1.25;overflow:hidden}
.tx-qty{font-weight:900;color:#020617}
.status-badge{min-height:32px;padding:7px 8px;border-radius:999px;font-weight:900;font-size:11px;border:1px solid #e2e8f0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:#f8fafc;color:#334155;cursor:default}
button.status-badge{font-family:inherit}
.status-badge.is-clickable{
    position:relative;
    isolation:isolate;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(15,23,42,.05);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease;
}
.status-badge.is-clickable::after{
    content:"";
    position:absolute;
    inset:-4px;
    z-index:-1;
    border-radius:999px;
    background:currentColor;
    opacity:0;
    filter:blur(12px);
    transition:opacity .16s ease;
}
.status-badge.is-clickable:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px rgba(15,23,42,.12);
    filter:saturate(1.08);
}
.status-badge.is-clickable:hover::after{opacity:.16}
.status-badge.is-clickable:focus-visible{
    outline:0;
    box-shadow:0 0 0 4px rgba(0,200,83,.16),0 12px 24px rgba(15,23,42,.12);
}
.status-badge[data-s="pending"]{background:#fffbeb;color:#b45309;border-color:#fde68a}
.status-badge[data-s="paid"]{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.status-badge[data-s="processing"]{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.status-badge[data-s="success"]{background:#ecfdf5;color:#047857;border-color:#86efac}
.status-badge[data-s="failed"]{background:#fef2f2;color:#b42318;border-color:#fecaca}
.status-badge[data-s="qrexpire"],.status-badge[data-s="QRexpire"],.status-badge[data-s="hết hạn qr"]{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.status-badge[data-s="refund"]{background:#fff1f2;color:#e11d48;border-color:#fecdd3}
.status-badge[data-s="manual"],.status-badge[data-s="manual_required"]{background:#fefce8;color:#a16207;border-color:#fde68a}
.status-badge[data-s="cancel"],.status-badge[data-s="cancelled"],.status-badge[data-s="canceled"],.status-badge[data-s="cancelled_order"],.status-badge[data-s="huy"],.status-badge[data-s="hủy"],.status-badge[data-s="da_huy"]{background:#f1f5f9;color:#475569;border-color:#cbd5e1}

/* Loading skeleton rows */
.tx-skel{height:14px; border-radius:6px; background: linear-gradient(90deg,#f2f4f7 25%,#e9eef5 37%,#f2f4f7 63%); background-size:400% 100%; animation: shimmer 1.1s infinite}
@keyframes shimmer{ from{background-position:100% 0} to{background-position:-100% 0} }

/* Responsive: mobile hiển thị cards */
@media (max-width: 540px){
    .container-narrow{
        max-width:none;
        padding:8px 0 110px;
    }
    #page-settings .card-ux,
    #page-transactions .card-ux{
        border-left:0;
        border-right:0;
        border-radius:0;
        box-shadow:none;
    }
    .tx-table-wrap{display:none}
    #page-transactions .tx-shell{padding:16px;border-radius:22px}
    .tx-title{font-size:20px}
    .tx-subtitle{font-size:12px}
    .tx-cards{display:flex;flex-direction:column;gap:10px}
    .tx-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 8px 20px rgba(15,23,42,.05);padding:13px}
    .tx-card .row1{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .tx-card .tx-id-btn{padding:0;border:0;background:transparent;display:grid;grid-template-columns:auto auto;grid-template-areas:"label icon" "code icon";align-items:center;gap:2px 7px;min-height:0}
    .tx-card .tx-label{grid-area:label;display:block;color:#64748b;font-size:11px;font-weight:800}
    .tx-card .tx-id{grid-area:code;font-size:14px}
    .tx-card .tx-id-btn svg{grid-area:icon}
    .tx-card .row2{display:flex;gap:8px;color:#64748b;font-size:12px;margin-top:10px;flex-wrap:wrap}
    .tx-card .row2 .pill{background:#f8fafc;border:1px solid #e2e8f0;padding:6px 9px;border-radius:999px;font-weight:800}
}
@media (min-width: 541px){
    .tx-cards{display:none}
}
.tx-idx {
    font-weight: 600;
    text-align: center;
    color: #64748b;
    width: 40px;
}
.tx-modal{text-align:left;color:#0f172a}
.tx-modal-alert{padding:11px 13px;border-radius:14px;margin-bottom:12px;font-size:14px;font-weight:700;line-height:1.45}
.tx-modal-alert--warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.tx-modal-alert--danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.tx-modal-grid{display:grid;gap:8px;margin:12px 0}
.tx-modal-grid div{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:9px 11px}
.tx-modal-grid span{color:#64748b;font-size:12px;font-weight:800}
.tx-modal-grid b{font-size:13px;text-align:right}
.tx-modal-note{margin-top:10px;color:#475569;font-size:13px;line-height:1.5}
.swal2-popup .swal2-confirm,
.swal2-popup .swal2-deny,
.swal2-popup .swal2-cancel{
    border-radius:999px !important;
    font-weight:900 !important;
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
.swal2-popup .swal2-confirm:hover,
.swal2-popup .swal2-deny:hover,
.swal2-popup .swal2-cancel:hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
}
.swal2-popup .swal2-confirm:hover{box-shadow:0 12px 24px rgba(0,200,83,.22) !important}
.swal2-popup .swal2-deny:hover{box-shadow:0 12px 24px rgba(37,99,235,.20) !important}
.swal2-popup .swal2-cancel:hover{box-shadow:0 12px 24px rgba(15,23,42,.12) !important}






:root{
    --brand:#00C853;
    --brand-ink:#047857;
    --ink:#0f172a;
    --muted:#6b7280;
    --card:#fff;
    --border:rgba(17,24,39,.08);
    --shadow:0 12px 30px rgba(0,0,0,.08);
}

.tabview.hidden{display:none;}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:16px;
    margin:12px 8px;
}

.card.profile{
    padding:18px;
    background:linear-gradient(180deg, rgba(159,236,83,.10), #fff 48%);
}

.profile-row{
    display:flex; align-items:center; gap:14px; margin-bottom:12px;
}

.avatar-wrap{
    position:relative; width:76px; height:76px; flex:0 0 76px;
    border-radius:999px; overflow:hidden;
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    border:1px solid var(--border);
}

.avatar-wrap img{
    width:100%; height:100%; object-fit:cover; display:none;
}

.avatar-fb{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:28px; color:#334155;
}

.who .ttid{
    font-weight:800; font-size:18px; color:var(--ink);
}
.who .mkh{ margin-top:4px; font-size:13px; color:var(--muted); }
.mkh .label{ opacity:.75; margin-right:6px; }

.btn{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border); border-radius:14px;
    background:#fff; padding:10px 14px; font-weight:600;
    transition:.2s ease; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn.wide{ width:100%; justify-content:center; }

.btn.primary{
    background:var(--brand); color:var(--brand-ink); border-color:transparent;
}
.btn.danger{
    background:#ffe9e9; color:#b42318; border-color:#ffd2d2;
}

.formcard .card-title{ margin:0 0 8px; font-size:16px; font-weight:700; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field input{
    border:1px solid var(--border); border-radius:12px; background:#fff;
    padding:12px 14px; font-size:14px;
}

#amount, #tiktok_id
{
    border:1px solid var(--border); border-radius:12px; background:#fff;
    padding:12px 14px; font-size:14px;
}
.field input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(159,236,83,.22); }

.grid2{
    display:grid; grid-template-columns:1fr; gap:10px;
}
@media(min-width:680px){
    .grid2{ grid-template-columns:1fr 1fr; }
}

.form-actions{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.muted{ color:var(--muted); }

.skeleton{
    background:linear-gradient(90deg,#eee,#f5f5f5 40%,#eee 80%);
    background-size:200% 100%; animation:shine 1.2s infinite;
}
@keyframes shine{ to{ background-position:-200% 0;} }


.skeleton {
    position: relative; color: transparent;
}
.skeleton::after{
    content:""; position:absolute; inset:0; border-radius:8px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
    background-size:400% 100%; animation: sh 1.2s infinite;
}
@keyframes sh { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }

:root{
    --brand:#00C853;
    --ink:#047857;
    --line:#e5e7eb;           /* viền nhạt */
    --muted:#64748b;
}

.profile-card{
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    border:1px solid #f1f5f9;
    background:linear-gradient(180deg,#fff,#f6fff0);
}

/* Header */
.profile-head{
    display:flex; gap:12px; align-items:center;
}
.profile-ava-wrap{ position:relative; flex:0 0 56px }
.profile-ava{
    width:56px;height:56px;border-radius:50%;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.profile-ava-fallback{
    display:flex;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--brand),#ffd37a);
    color:#0f5132;font-weight:700;letter-spacing:.5px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.head-info{ flex:1; min-width:0 }
.head-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.title-sub{ font-size:13px; color:#6b7280 }
.btn-logout{
    background:#fff;border:1px solid #fecaca;color:#dc2626;
    border-radius:12px;padding:6px 10px;font-weight:600;
}
.btn-logout:hover{ background:#fff5f5 }

.head-bottom{
    display:flex; gap:16px; flex-wrap:wrap; margin-top:6px;
    font-size:14px;
}
.line-item{ display:flex; align-items:center; gap:6px }
.line-label{ color:#6b7280; font-size:12px }
.line-value{ font-weight:600 }

.mkh-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:999px; font-weight:600;
    background:#f8fafc; border:1px dashed var(--line);
    color:#0f172a; cursor:pointer; text-decoration:none;
}
.mkh-badge:hover{ background:#eef2ff; border-color:#c7d2fe }

.nx-hr{ border-color:var(--line); margin:14px 0 }

/* Inputs đẹp như ảnh 2 */
.nx-field{ display:flex; flex-direction:column; gap:6px }
.nx-label{ font-size:12px; color:var(--muted); font-weight:600 }
.nx-input{
    width:100%; border:1px solid var(--line); background:#fff;
    border-radius:14px; padding:12px 14px; font-size:15px;
    transition:box-shadow .2s, border-color .2s;
    outline:none;
}
.nx-input::placeholder{ color:#94a3b8 }
.nx-input:focus{
    border-color:#b1f8a5;
    box-shadow:0 0 0 4px rgba(159,236,83,.20);
}

.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:576px){ .row-2{ grid-template-columns:1fr } }

.form-actions{
    display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:4px
}
.save-hint{ font-size:13px; color:#374151 }
.btn-brand{
    background:var(--brand); color:var(--ink); border:1px solid #b1f8a5;
    border-radius:12px; padding:10px 14px; font-weight:700;
}
.btn-brand:hover{ filter:brightness(.98) }
.mkh-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 8px;border-radius:999px;
    background:#f8fafc;border:1px dashed #e5e7eb;color:#0f172a;
    text-decoration:none;cursor:pointer;font-weight:600;
}
.mkh-badge:hover{ background:#eef2ff; border-color:#c7d2fe }

/* ==== TikTok-like dropdown ==== */
.nx-select{position:relative}
.nx-select select.form-control{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    border-radius:12px;border:1px solid var(--border);padding:10px 34px 10px 12px;
    font-weight:600;
}
.nx-select .chev{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    pointer-events:none;color:#111;opacity:.6;font-size:18px;line-height:1;
}
.input-with-icon {
    position: relative;
}
.input-with-icon input {
    padding-right: 42px; /* chừa chỗ cho icon */
}
.input-with-icon .toggle-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #888;
}
.input-with-icon .toggle-icon.active {
    color: #ffb300; /* màu nổi bật khi chọn */
}

.card{background:#fff;border:1px solid #e8edf2;border-radius:16px;padding:14px;box-shadow:0 6px 16px rgba(15,23,42,.06)}

.gas-card {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    margin-top: 12px;
}

.gas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.gas-head .ttl {
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gas-card .bal {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.gas-mode {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.gas-note {
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #6b7280;
}
.gas-card {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    margin-top: 12px;
}

.gas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.gas-head .ttl {
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gas-card .bal {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.gas-mode {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.gas-note {
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #6b7280;
}


.ttl{font-weight:800;color:#0f172a}
.ttl span{margin-right:6px}
.bal{font-size:14px;color:#0f172a;margin-top:2px}
.btn-ghost{border:1px solid #9FEC53;background:#f6fff1;padding:8px 12px;border-radius:12px;font-weight:700}
.gas-mode{display:flex;gap:10px;margin:12px 0 6px}
.chk-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid #e6efe2;background:#fff;user-select:none;cursor:pointer;font-weight:700;box-shadow:0 4px 10px rgba(15,23,42,.04)}
.chk-pill input{display:none}
.chk-pill .box{width:18px;height:18px;border-radius:6px;border:2px solid #cbd5e1;display:inline-block;position:relative;transition:.15s}
.chk-pill input:checked + .box{border-color:#9FEC53;background:#9FEC53}
.chk-pill input:checked + .box::after{
    content:"";position:absolute;inset:3px;background:#fff;border-radius:3px;transform:rotate(0)
}
.chk-pill .txt{font-size:14px}
.chk-pill:has(input#sportCheck:checked){border-color:#ffb300;box-shadow:0 6px 16px rgba(255,179,0,.22)}
.chk-pill:has(input#ecoCheck:checked){border-color:#9FEC53;box-shadow:0 6px 16px rgba(159,236,83,.22)}
.badge{display:inline-block;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700}
.badge.light{background:#f2f4f7;color:#475569}
.badge.warn{background:#ffe29a;color:#7a4e00}
.muted{color:#6b7280;font-size:13px}
@media (min-width:480px){
    .btn-ghost{padding:8px 14px}
    .chk-pill{padding:10px 16px}
}

.settings-mkh-qr{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 112px;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid #e5f7d6;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#fbfff6);
}
.settings-mkh-qr__info{display:flex;align-items:center;gap:10px;min-width:0}
.settings-mkh-qr__title{font-weight:800;color:#0f172a;line-height:1.2}
.settings-mkh-qr__sub{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.settings-mkh-qr__code{font-size:12px;color:#64748b;margin-top:4px}
.settings-mkh-qr__code b{
    display:inline-block;color:#0f172a;background:#f8fafc;border:1px dashed #cbd5e1;
    border-radius:999px;padding:3px 7px;margin-left:2px;
}
.settings-mkh-qr__img{
    width:112px;height:112px;object-fit:contain;border:1px solid #e5e7eb;border-radius:12px;
    background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.08);
}
.settings-link-btn{
    border:0;background:transparent;color:#2563eb;font-weight:800;padding:2px 4px;cursor:pointer;
}
.settings-link-btn:hover{text-decoration:underline}

.nick-switch-card{
    border:1px solid #e5e7eb;border-radius:16px;padding:12px;background:#fff;
}
.nick-switch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.nick-switch-title{font-weight:800;color:#0f172a}
.nick-switch-sub{font-size:12px;color:#64748b}
.nick-list{display:flex;flex-direction:column;gap:8px}
.nick-empty{
    padding:12px;border:1px dashed #dbe5ef;border-radius:12px;color:#64748b;background:#f8fafc;font-size:13px;
}
.nick-item{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px;border:1px solid #eef2f7;border-radius:14px;background:#fbfdff;
}
.nick-main{min-width:0}
.nick-name{font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nick-meta{font-size:12px;color:#64748b;margin-top:2px}
.nick-active{
    display:inline-flex;align-items:center;border:1px solid #bbf7d0;background:#ecfdf5;color:#047857;
    font-size:11px;font-weight:800;border-radius:999px;padding:2px 7px;margin-left:6px;
}
.nick-switch-btn{
    flex:0 0 auto;border:1px solid #9FEC53;background:#f6fff1;color:#0f172a;
    border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;cursor:pointer;
}
.nick-switch-btn:disabled{opacity:.6;cursor:default}
@media (max-width:520px){
    .settings-mkh-qr{grid-template-columns:1fr 92px;padding:10px}
    .settings-mkh-qr__img{width:92px;height:92px}
    .settings-mkh-qr__sub{max-width:160px}
}

#page-settings .card-ux{
    border:1px solid #e5e7eb;
    border-radius:24px;
    background:#ffffff;
    box-shadow:0 18px 44px rgba(15,23,42,.08);
}
#page-settings .card-body{padding:5px !important}
#page-settings .profile-head{
    padding:4px 2px 18px;
    border-bottom:1px solid #eef2f7;
    margin-bottom:18px;
    gap:16px;
}
#page-settings .profile-ava,
#page-settings .profile-ava-fallback{
    width:68px;
    height:68px;
    border:3px solid #ffffff;
    box-shadow:0 12px 28px rgba(15,23,42,.14);
}
#page-settings .profile-ava-wrap{flex-basis:68px}
#page-settings .title-sub{
    font-size:13px;
    font-weight:800;
    color:#64748b;
}
#page-settings .btn-logout{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:9px 14px;
    border:1px solid rgba(255,77,79,.34);
    border-radius:999px;
    font-weight:800;
    background:#ffffff;
    color:#d92d20;
    box-shadow:0 8px 18px rgba(255,77,79,.08);
    transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
#page-settings .btn-logout svg{
    width:17px;
    height:17px;
    fill:currentColor;
}
#page-settings .btn-logout:hover{
    background:#fff1f2;
    box-shadow:0 10px 22px rgba(255,77,79,.14);
}
#page-settings button:active,
#page-settings .mkh-badge:active{
    transform:scale(.98);
}
#page-settings .head-bottom{
    gap:12px 16px;
    margin-top:12px;
}
#page-settings .line-item{
    min-width:0;
    min-height:36px;
}
#page-settings .mkh-badge,
#page-settings .line-value{
    max-width:166px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:800;
}
#page-settings .mkh-badge{
    border:1px solid #e5e7eb;
    background:#f8fafc;
    padding:7px 11px;
}
#page-settings .line-value{
    color:#111827;
}
#page-settings .settings-icon-btn{
    width:34px;
    height:34px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    color:#64748b;
    cursor:pointer;
    transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
#page-settings .settings-icon-btn:hover{
    background:#ecfdf5;
    color:#00C853;
    border-color:#bbf7d0;
}
#page-settings .settings-icon-btn svg{
    width:16px;
    height:16px;
    fill:currentColor;
}
.settings-grid{
    display:grid;
    gap:16px;
    padding-bottom:96px;
}
#page-settings .settings-mkh-qr{
    margin:0;
    grid-template-columns:1fr;
    gap:18px;
    padding:22px;
    border:1px solid #bbf7d0;
    border-radius:24px;
    background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 64%);
    box-shadow:0 12px 28px rgba(0,200,83,.08);
}
#page-settings .settings-mkh-qr__info{
    align-items:center;
    justify-content:center;
    min-height:0;
}
#page-settings .settings-mkh-qr__body{
    min-width:0;
    width:100%;
    max-width:360px;
}
#page-settings .settings-mkh-qr__title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:19px;
    font-weight:900;
    color:#0f172a;
    line-height:1.15;
    white-space:nowrap;
}
#page-settings .settings-mkh-qr__title svg{
    width:22px;
    height:22px;
    flex:0 0 auto;
    fill:#00C853;
}
#page-settings .settings-mkh-qr__sub{
    max-width:100%;
    color:#64748b;
    margin-top:8px;
    font-weight:600;
    text-align:center;
}
#page-settings .settings-mkh-qr__hidden-code{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}
#page-settings .settings-mkh-qr__actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:0;
}
#page-settings .settings-mkh-qr__preview{
    display:flex;
    justify-content:center;
}
#page-settings .settings-mkh-qr__frame{
    width:248px;
    border:1px solid #e5e7eb;
    border-radius:24px;
    background:#ffffff;
    padding:14px 14px 16px;
    box-shadow:0 16px 32px rgba(15,23,42,.10);
}
#page-settings .settings-mkh-qr__img{
    width:220px;
    height:220px;
    border-radius:16px;
    border:0;
    box-shadow:none;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#page-settings .settings-mkh-qr__img:hover{
    transform:scale(1.015);
}
#page-settings .settings-mkh-qr__caption{
    margin-top:9px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
}
#page-settings .settings-action-btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid #00C853;
    border-radius:999px;
    padding:10px 13px;
    background:#00C853;
    color:#ffffff;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(0,200,83,.18);
    transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
#page-settings .settings-action-btn svg{
    width:16px;
    height:16px;
    fill:currentColor;
}
#page-settings .settings-action-btn:hover{
    background:#00b84c;
    box-shadow:0 12px 26px rgba(0,200,83,.24);
}
#page-settings .settings-action-btn--ghost{
    background:#ffffff;
    color:#047857;
    border-color:#bbf7d0;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
}
#page-settings .settings-link-btn{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #dbeafe;
    background:#f8fafc;
    color:#2563eb;
    border-radius:999px;
    padding:8px 12px;
    font-size:12px;
    line-height:1.1;
    transition:background .14s ease, transform .14s ease, color .14s ease;
}
#page-settings .settings-link-btn svg{
    width:15px;
    height:15px;
    fill:currentColor;
}
#page-settings .settings-link-btn:hover{
    text-decoration:none;
    background:#eff6ff;
}
#page-settings .settings-link-btn.is-loading svg{
    animation:settingsSpin .8s linear infinite;
}
@keyframes settingsSpin{
    to{transform:rotate(360deg)}
}
#page-settings .nick-switch-card{
    border:1px solid rgba(148,163,184,.18);
    border-radius:24px;
    padding:5px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    box-shadow:0 18px 40px rgba(15,23,42,.07);
}
#page-settings .nick-switch-head{
    margin-bottom:16px;
}
#page-settings .nick-switch-title{
    font-size:20px;
    font-weight:900;
    letter-spacing:-.02em;
}
#page-settings .nick-switch-sub{
    margin-top:2px;
    color:#64748b;
}
#page-settings .nick-list{
    gap:12px;
    max-height:calc(100dvh - 240px);
    overflow:auto;
    padding-right:4px;
}
#page-settings .nick-item{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-height:96px;
    padding:16px;
    border-radius:20px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid rgba(203,213,225,.72);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#page-settings .nick-item:hover{
    transform:translateY(-1px);
    border-color:rgba(96,165,250,.36);
    box-shadow:0 16px 30px rgba(15,23,42,.08);
}
#page-settings .nick-item.is-active{
    background:linear-gradient(135deg,rgba(239,248,255,.96) 0%,rgba(244,255,249,.98) 100%);
    border-color:rgba(34,197,94,.34);
    box-shadow:0 18px 34px rgba(14,165,233,.09), 0 10px 24px rgba(34,197,94,.12);
}
#page-settings .nick-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0f172a;
    font-weight:900;
    font-size:18px;
    background:linear-gradient(135deg,#eef6ff 0%,#dbeafe 52%,#dcfce7 100%);
    border:1.5px solid rgba(255,255,255,.95);
    box-shadow:0 10px 22px rgba(37,99,235,.10);
    overflow:hidden;
}
#page-settings .nick-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:inherit;
}
#page-settings .nick-item.is-active .nick-avatar{
    border-color:rgba(255,255,255,.98);
    box-shadow:0 0 0 4px rgba(37,99,235,.10), 0 0 0 7px rgba(34,197,94,.10), 0 12px 24px rgba(37,99,235,.16);
}
#page-settings .nick-name{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    font-size:15px;
    font-weight:900;
}
#page-settings .nick-topline{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}
#page-settings .nick-identity{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
#page-settings .nick-label{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#94a3b8;
}
#page-settings .nick-name-text{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.01em;
    color:#0f172a;
}
#page-settings .nick-meta{
    font-size:12px;
    color:#64748b;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#page-settings .nick-active{
    flex:0 0 auto;
    border:1px solid rgba(59,130,246,.16);
    background:linear-gradient(135deg,rgba(37,99,235,.10) 0%,rgba(34,197,94,.12) 100%);
    color:#166534;
    font-size:11px;
    font-weight:900;
    border-radius:999px;
    padding:6px 10px;
    box-shadow:0 8px 18px rgba(14,165,233,.08);
}
#page-settings .nick-switch-btn{
    flex:0 0 auto;
    min-height:40px;
    padding:8px 13px;
    border-radius:12px;
    border:1px solid rgba(37,99,235,.14);
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    color:#0f172a;
    font-weight:800;
    font-size:13px;
    line-height:1;
    box-shadow:0 12px 22px rgba(37,99,235,.10);
    white-space:nowrap;
}
#page-settings .nick-switch-btn:not(:disabled):hover{
    background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);
    border-color:transparent;
    color:#ffffff;
}
#page-settings .nick-switch-btn:disabled{
    opacity:1;
    color:#ffffff;
    background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
    border-color:transparent;
    box-shadow:0 14px 28px rgba(34,197,94,.26);
}
@media (max-width:520px){
    #page-settings .card-ux,
    #page-transactions .card-ux{
        width:100%;
        margin-left:0;
        margin-right:0;
    }
    #page-settings .card-body{padding:10px !important}
    #page-settings .settings-grid{
        width:100%;
    }
    #page-settings .profile-head{
        align-items:flex-start;
    }
    #page-settings .head-top{
        align-items:flex-start;
    }
    #page-settings .btn-logout{
        min-width:106px;
    }
    #page-settings .settings-mkh-qr{
        grid-template-columns:1fr;
        gap:16px;
        padding:16px;
    }
    #page-settings .settings-mkh-qr__info{
        min-height:0;
    }
    #page-settings .settings-mkh-qr__title{
        font-size:18px;
    }
    #page-settings .settings-mkh-qr__sub{
        max-width:100%;
    }
    #page-settings .settings-mkh-qr__frame{
        width:232px;
        padding:13px;
        border-radius:24px;
    }
    #page-settings .settings-mkh-qr__img{
        width:204px;
        height:204px;
    }
    #page-settings .settings-action-btn{
        min-height:40px;
        padding:9px 11px;
    }
    #page-settings .settings-action-btn span{
        max-width:116px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    #page-settings .nick-item{
        grid-template-columns:48px minmax(0,1fr);
        align-items:flex-start;
        gap:12px;
        padding:14px;
        border:1px solid rgba(226,232,240,.94);
        border-radius:18px;
        background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
        box-shadow:0 10px 24px rgba(15,23,42,.05);
    }
    #page-settings .nick-switch-card{
        width:100%;
        padding:14px 12px 12px;
        border-radius:18px;
    }
    #page-settings .nick-list{
        padding-right:0;
        gap:10px;
        max-height:calc(100dvh - 196px);
    }
    #page-settings .nick-switch-head{
        gap:12px;
        align-items:flex-start;
    }
    #page-settings .nick-item:last-child{
        margin-bottom:0;
    }
    #page-settings .nick-item:hover{
        transform:none;
        border-color:rgba(226,232,240,.94);
        box-shadow:0 10px 24px rgba(15,23,42,.05);
    }
    #page-settings .nick-item.is-active{
        background:linear-gradient(135deg,rgba(239,248,255,.98) 0%,rgba(244,255,249,.98) 100%);
        border-color:rgba(34,197,94,.28);
        box-shadow:0 14px 28px rgba(14,165,233,.08), 0 10px 22px rgba(34,197,94,.10);
    }
    #page-settings .nick-avatar{
        width:48px;
        height:48px;
        min-width:0;
    }
    #page-settings .nick-main{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:0;
    }
    #page-settings .nick-topline{
        min-width:0;
        align-items:flex-start;
        gap:8px;
        flex-wrap:wrap;
    }
    #page-settings .nick-identity{
        flex:1 1 100%;
    }
    #page-settings .nick-name-text{
        font-size:14px;
        line-height:1.2;
        font-weight:900;
    }
    #page-settings .nick-switch-btn{
        grid-column:1 / -1;
        width:100%;
        min-height:38px;
        margin-top:0;
        padding:8px 12px;
        font-size:12px;
        justify-self:stretch;
    }
}
/* === QR BOX FIX === */
#order .tab-content {
    background: #fff;
    border-radius: 0 0 12px 12px;
}

#order .qr-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

#order img.qr-img {
    width: 100%;
    max-width: 260px;       /* giới hạn QR không tràn */
    height: auto;
    border-radius: 14px;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    background: #fafafa;
    padding: 6px;
}
.below-input-actions{
    display:flex; gap:8px; align-items:center;
}
.below-input-actions .btn{
    border-radius: 8px; font-weight:600; line-height:1.1;
    padding: .35rem .6rem;
}



/* mã khách hàng */
.mkh-box{
    background:#f9fff3;border:1px dashed var(--green);border-radius:10px;
    padding:8px 10px;font-size:14px
}
.mkh-box .label{font-weight:600;color:var(--muted)}
.mkh-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mkh-sub{border-top:1px dashed #dbe7cc;margin-top:6px;padding-top:6px}
.mkh-box code{background:#eaffd4;padding:1px 6px;border-radius:6px}
.mkh-help{border-top:1px dashed #eef5dc;margin-top:6px;padding-top:6px}

/* =====================================================
   NAPXU LIVE – PRO VIP THEME
   Tone: Green Pro – Clean – Trust
===================================================== */

/* ===== CARD ===== */
.nx-pro-card{
    max-width:420px;
    margin:auto;
    background:#ffffff;
    border-radius:18px;
    border:1px solid #e2f2c8;
    box-shadow:0 14px 36px rgba(159,236,83,.22);
    overflow:hidden;
    color:#1f2937;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
}

/* ===== HEADER ===== */
.nx-pro-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    background:var(--grad);
}

/* LEFT */
.nx-pro-left{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:700;
    color:#14532d;
}

/* LIVE DOT */
.nx-pro-dot{
    width:9px;
    height:9px;
    background:#22c55e;
    border-radius:50%;
    animation:pulse 1.5s infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
    70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* PRO TAG */
.nx-pro-tag{
    background:linear-gradient(135deg,#9FEC53,#6EDC3A);
    color: #fdfffd;
    font-size:11px;
    padding:2px 8px;
    border-radius:999px;
    font-weight:800;
    box-shadow:0 2px 6px rgba(34,197,94,.35);
}

/* RIGHT INFO */
.nx-pro-right{
    font-size:13px;
    color:#4b5563;
}

/* ===== TICKER ===== */
.nx-pro-ticker{
    background:#f9fff1;
    border-top:1px solid #e3f2c2;
    border-bottom:1px solid #e3f2c2;
    overflow:hidden;
}

.nx-pro-ticker-track{
    display:flex;
    gap:26px;
    padding:8px 14px;
    white-space:nowrap;
    animation:ticker 26s linear infinite;
}
@keyframes ticker{
    from{transform:translateX(100%)}
    to{transform:translateX(-100%)}
}

.nx-tick{
    font-size:12px;
    color:#6b7280;
}
.nx-tick b{
    color:#78af08











































































































































































































































































































































































+
    ;
    font-weight:700;
}

/* ===== BODY ===== */
.nx-pro-body{
    max-height:350px;
    overflow:hidden;
}

/* ===== TABLE ===== */
.nx-pro-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.nx-pro-table th{
    text-align:left;
    font-weight:500;
    color:#6b7280;
    padding:8px 14px;
    font-size:12px;
}

.nx-pro-table td{
    padding:10px 14px;
    border-top:1px dashed #e5f3c7;
}

/* ROW HOVER */
.nx-pro-table tr:hover td{
    background:#f0fdf4;
}

/* TikTok ID */
.nx-tt{
    color:#1f2937;
    font-weight:600;
    letter-spacing:.2px;
}

/* ===== XU LEVEL ===== */
.nx-xu-mid{
    color:#FFCC02;
    font-weight:700;
}

.nx-xu-up{
    color:#85D940;
    font-weight:800;
}

.nx-xu-vip{
    color:#78af08;
    font-weight:900;
}

/* ===== TIME ===== */
.nx-time{
    color:#1f2937;
    font-size:12px;
    font-weight:500;
}

/* ===== FLASH NEW ORDER ===== */
.nx-flash{
    animation:flash .8s ease-out;
}
@keyframes flash{
    0%{background:rgba(159,236,83,.25)}
    100%{background:transparent}
}

/* ===== MOBILE SAFE ===== */
@media(max-width:480px){
    .nx-pro-card{border-radius:14px}
    .nx-pro-head{padding:10px 12px}
    .nx-pro-table td,.nx-pro-table th{padding:8px 10px}
}