/* Bottom Menu Bar */
.tabbar{position:fixed; left:0; right:0;
    bottom: max(12px, calc(env(safe-area-inset-bottom,0) + 12px));
    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; display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--dock-bg); border:1px solid var(--dock-border); border-radius:18px; box-shadow:var(--dock-shadow); backdrop-filter: saturate(160%) blur(12px); position:relative}
.tabbar .indicator{position:absolute; bottom:8px; left:10px; height:34px; width:0; background: radial-gradient(120% 100% at 50% -30%, rgba(255,255,255,.9), rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 60%), linear-gradient(180deg,#f1ffe1 0%, #ffffff 100%); border:1px solid rgba(89,174,33,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(159,236,83,.28); border-radius:12px; 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:3px; padding:10px 6px; border-radius:12px; text-decoration:none; color:#0f172a; font-weight:800; font-size:12px; letter-spacing:.2px}
.tab-item i{font-size:20px; line-height:1; opacity:.95}
.tab-item span{color:#64748b; font-weight:700}
.tab-item.active{color:var(--brand-ink)}
.tab-item.active span{color:var(--brand-ink)}



/* ===== Transactions (last 30) ===== */
.tx-table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); background:#fff}
.tx-table thead th{background:#f9fafb; font-size:12px; letter-spacing:.3px; color:#64748b; padding:10px 12px; border-bottom:1px solid var(--border); text-transform:uppercase}
.tx-table tbody td{padding:12px; border-bottom:1px solid #f1f5f9; vertical-align:middle}
.tx-table tbody tr:last-child td{border-bottom:0}
.tx-id{font-weight:800; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tx-time{color:#64748b; font-size:13px; white-space:nowrap}
.tx-qty{font-weight:800}
.status-badge{padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid var(--border); display:inline-block; white-space:nowrap}
.status-badge[data-s="pending"]{background:#fff7e6; color:#9f5800; border-color:#ffd79f}
.status-badge[data-s="paid"]{background:#e6f8e7; color:#0f5132; border-color:#bfe6c4}
.status-badge[data-s="processing"]{background:#eef5ff; color:#0b3b7a; border-color:#bcd3ff}
.status-badge[data-s="success"]{background:#e8fff1; color:#065f46; border-color:#b5f4ce}
.status-badge[data-s="failed"]{background:#ffecec; color:#7a0b0b; border-color:#ffc3c3}
.status-badge[data-s="qrexpire"]{background: #f57c7c; color: #0a0a0a; border-color: #e5d7c9
}
.status-badge[data-s="refund"]{background: #f12121; color: #ffffff; border-color: #ef0000
}

/* 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){
    .tx-table{display:none}
    .tx-cards{display:flex; flex-direction:column; gap:10px}
    .tx-card{background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:12px}
    .tx-card .row1{display:flex; align-items:center; justify-content:space-between}
    .tx-card .row2{display:flex; gap:12px; color:#64748b; font-size:13px}
    .tx-card .row2 .pill{background:#f8fafc; border:1px solid var(--border); padding:4px 8px; border-radius:999px; font-weight:700}
}
@media (min-width: 541px){
    .tx-cards{display:none}
}
.tx-idx {
    font-weight: 600;
    text-align: center;
    color: #555;
    width: 40px;
}






:root{
    --brand:#9FEC53;           /* xanh chuối */
    --brand-ink:#0f5132;
    --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:#9FEC53;          /* xanh chuối */
    --ink:#0f5132;            /* mực xanh đậm */
    --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}
}
/* === 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}
