/* =====================================================================
   Đại học Ngân hàng TP.HCM 360° — "Tờ bạc polymer × Thẻ sinh viên chip × Sao kê"
   Libre Bodoni (chữ in tiền) · Inter Tight · DM Mono (số sê-ri)
   ===================================================================== */
:root {
  --ink: #0d2b2a; --ink2: #163f3c; --paper: #f4efe1; --paper2: #e9e1cb; --line: rgba(13, 43, 42, .16);
  --gold: #c9a24a; --gold2: #f1d58a; --red: #b3261e; --mint: #9fd8c0;
  --cc: #1d6b52;               /* màu cơ sở hiện tại (đặt bằng JS) */
  --serif: 'Libre Bodoni', 'Times New Roman', serif;
  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--ink); font: 15px/1.45 var(--sans); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
[hidden] { display: none !important; }
.i { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
#pano { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; background: #0b1f1e; }
#pano.grabbing { cursor: grabbing; }

/* ---------- hoa văn bảo an (guilloche) dùng chung ---------- */
.gl-bg { background-image: var(--gl); background-size: cover; background-position: center; }

/* ================= MÀN CHÀO ================= */
.ld { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: auto; color: var(--paper);
  background: radial-gradient(120% 90% at 50% 0%, #1f5a4e 0%, #0d2b2a 55%, #081c1b 100%); transition: opacity .8s ease, visibility .8s; }
.ld.out { opacity: 0; visibility: hidden; }
.ld-bg { position: absolute; inset: 0; opacity: .5; background-image: var(--gl); background-size: 900px auto; background-position: center 30%; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); }
.ld-in { position: relative; width: min(560px, 100%); padding: calc(28px + var(--sat)) 20px calc(22px + var(--sab)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.ld-kick { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold2); }
.ld-title { margin: 0; font: 600 clamp(26px, 6.4vw, 40px)/1.08 var(--serif); letter-spacing: -.01em; }
.ld-title em { display: block; font-style: italic; font-weight: 400; font-size: .62em; color: var(--mint); margin-top: 6px; letter-spacing: .02em; }

.card-stage { position: relative; width: min(360px, 88vw); aspect-ratio: 85.6 / 54; margin: 6px 0 4px; perspective: 1200px; }
.card { position: absolute; inset: 0; border-radius: 16px; padding: 16px 18px; color: #fdf8ea; overflow: hidden; text-align: left;
  background: linear-gradient(135deg, #1f6d57 0%, #12463d 48%, #0e3431 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 24px 50px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  transform: rotateX(8deg) rotateY(-10deg); transform-style: preserve-3d; transition: transform 1s cubic-bezier(.6, .05, .3, 1); animation: cardFloat 6s ease-in-out infinite; }
@keyframes cardFloat { 50% { transform: rotateX(4deg) rotateY(-4deg) translateY(-4px); } }
.card-gl { position: absolute; inset: -10%; opacity: .32; background-image: var(--gl2); background-size: cover; background-position: 70% 40%; pointer-events: none; mix-blend-mode: screen; }
.card-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.card-mark b { display: block; font: 700 26px/1 var(--serif); letter-spacing: .04em; color: var(--gold2); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.card-mark small { font: 500 9px/1 var(--mono); letter-spacing: .25em; text-transform: uppercase; opacity: .8; }
.card-type { font: 600 10px/1 var(--mono); letter-spacing: .2em; padding: 5px 8px; border: 1px solid rgba(241, 213, 138, .55); border-radius: 4px; color: var(--gold2); }
.card-chip { position: absolute; left: 20px; top: 34%; width: 46px; height: 35px; }
.card-nfc { position: absolute; left: 76px; top: 37%; width: 24px; height: 24px; opacity: .8; transform: rotate(0deg); }
.holo { position: absolute; right: 18px; top: 32%; width: 58px; height: 42px; border-radius: 8px; display: grid; place-items: center;
  background: conic-gradient(from var(--ha, 0deg), #ffd3f0, #c6f5ff, #d8ffc6, #fff2b8, #ffcfe0, #c8d6ff, #ffd3f0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); animation: holo 5s linear infinite; }
.holo span { font: 700 13px/1 var(--serif); color: rgba(13, 43, 42, .55); mix-blend-mode: multiply; }
@property --ha { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes holo { to { --ha: 360deg; } }
.card-no { position: absolute; left: 20px; right: 20px; bottom: 28%; display: flex; justify-content: space-between; font: 500 clamp(15px, 4.6vw, 20px)/1 var(--mono); letter-spacing: .08em;
  color: #f7ecd0; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .25); }
.card-foot { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; }
.card-foot small { display: block; font: 500 8.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.card-foot b { font: 600 12.5px/1 var(--mono); letter-spacing: .14em; }
.pos { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 64%; height: 30px; border-radius: 0 0 14px 14px; background: linear-gradient(#1a1f1f, #0b0e0e);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.pos i { width: 8px; height: 8px; border-radius: 50%; background: #e0a32c; box-shadow: 0 0 10px #e0a32c; }
.pos span { font: 500 11px/1 var(--mono); letter-spacing: .2em; color: #8fe3b8; }
.ld.tap .pos { opacity: 1; }
.ld.tap .card { animation: none; transform: rotateX(62deg) translateY(30px) scale(.86); }
.ld.ok .pos i { background: #39d07f; box-shadow: 0 0 14px #39d07f; }

.ld-stats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
.ld-stats li { padding: 8px 4px; border-top: 1px solid rgba(241, 213, 138, .3); }
.ld-stats b { display: block; font: 600 22px/1.1 var(--serif); color: var(--gold2); }
.ld-stats span { font-size: 11.5px; opacity: .8; line-height: 1.25; display: block; }
.ld-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.seg { display: inline-flex; border: 1px solid rgba(244, 239, 225, .3); border-radius: 999px; padding: 3px; }
.seg button { padding: 7px 13px; border-radius: 999px; font-size: 13px; opacity: .75; }
.seg button.on { background: var(--paper); color: var(--ink); opacity: 1; font-weight: 600; }
.sw { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 14px; border: 1px solid rgba(244, 239, 225, .3); border-radius: 999px; font-size: 13px; }
.sw-t { display: inline-flex; align-items: center; gap: 6px; }
.sw-t .i { width: 17px; height: 17px; }
.sw-k { width: 36px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, .2); position: relative; transition: background .25s; }
.sw-k i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s; }
.sw[aria-checked="true"] .sw-k { background: #2fa36f; }
.sw[aria-checked="true"] .sw-k i { transform: translateX(16px); }
.sw b { font: 600 12px/1 var(--mono); min-width: 26px; }
.ld-go { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font: 600 16px/1 var(--sans); letter-spacing: .01em;
  color: var(--ink); background: linear-gradient(180deg, #f6dd94, #d9ad4f); box-shadow: 0 10px 26px -10px rgba(241, 213, 138, .7), inset 0 1px 0 rgba(255, 255, 255, .6); min-width: 250px; justify-content: center; }
.ld-go .i { width: 22px; height: 22px; }
.ld-go:disabled { cursor: progress; background: rgba(244, 239, 225, .14); color: rgba(244, 239, 225, .8); box-shadow: none; }
.ld-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--gold2); transition: width .3s; }
.ld-go:not(:disabled) .ld-bar { display: none; }
.ld-foot { margin: 0; font-size: 11.5px; opacity: .62; max-width: 440px; line-height: 1.5; }
@media (max-height: 640px) and (orientation: landscape) {
  .ld-in { width: min(820px, 100%); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px 26px; text-align: left; }
  .ld-kick, .ld-title { grid-column: 2; justify-self: start; }
  .card-stage { grid-column: 1; grid-row: 1 / span 5; width: min(320px, 40vw); justify-self: center; }
  .ld-stats { grid-column: 2; margin: 0; } .ld-opts, .ld-go, .ld-foot { grid-column: 2; justify-self: start; }
}

/* ================= TỜ BẠC: TÊN CẢNH ================= */
.note { position: fixed; z-index: 10; left: calc(12px + var(--sal)); top: calc(12px + var(--sat)); width: min(440px, calc(100vw - 150px)); display: flex; align-items: stretch;
  background: var(--paper); border-radius: 6px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .06);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--cc) 14%, transparent), transparent 40%), var(--gl3); background-size: auto, 520px auto; background-position: 0 0, right -40px center; }
.note::before { content: ''; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); border-radius: 3px; pointer-events: none; }
.note-denom { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); background: var(--cc);
  background-image: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .22) 0 17px, transparent 18px), repeating-radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .12) 0 1px, transparent 1px 4px); position: relative; }
.note-denom b { font: 700 28px/1 var(--serif); letter-spacing: -.02em; }
.note-denom small { font: 500 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-top: 4px; opacity: .85; }
.note-main { min-width: 0; flex: 1; padding: 10px 14px 9px 13px; position: relative; }
.note-kick { margin: 0; font: 600 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-title { margin: 3px 0 4px; font: 600 20px/1.15 var(--serif); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note-sub { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.serial { font: 500 12.5px/1 var(--mono); color: var(--red); letter-spacing: .08em; }
.note-idx { display: inline-flex; align-items: center; gap: 2px; font: 500 11.5px/1 var(--mono); color: rgba(13, 43, 42, .7); }
.note-idx button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.note-idx button:hover { background: rgba(13, 43, 42, .08); }
.note-idx .i { width: 15px; height: 15px; }
.note-info { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 600; }
.note-info .i { width: 15px; height: 15px; }
.note-micro { position: absolute; left: 70px; right: 8px; bottom: 5px; height: 6px; overflow: hidden; font: 600 4.6px/6px var(--mono); letter-spacing: .08em; color: color-mix(in srgb, var(--cc) 60%, transparent); white-space: nowrap; pointer-events: none; }

/* ---------- số dư ---------- */
.bal { position: fixed; z-index: 10; right: calc(12px + var(--sar)); top: calc(12px + var(--sat)); display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px;
  color: var(--paper); background: rgba(10, 30, 29, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(241, 213, 138, .28), 0 10px 26px -12px rgba(0, 0, 0, .6); }
.bal-ring { width: 34px; height: 34px; }
.bal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bal-ring circle { fill: none; stroke-width: 3.4; stroke: rgba(255, 255, 255, .15); }
.bal-ring #balArc { stroke: var(--gold2); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .8s ease; }
.bal-t { text-align: left; }
.bal-t small { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.bal-t b { font: 600 18px/1.15 var(--mono); color: var(--gold2); }
.bal-t b i { font-style: normal; font-size: 12px; color: var(--paper); opacity: .6; }
.bal.bump .bal-ring { animation: bump .6s; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ---------- công cụ ---------- */
.tools { position: fixed; z-index: 10; right: calc(12px + var(--sar)); top: calc(68px + var(--sat)); display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 16px;
  background: rgba(10, 30, 29, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.tools button { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--paper); position: relative; }
.tools button:hover { background: rgba(255, 255, 255, .1); }
.tools button.on { color: var(--gold2); }
.tools button.off { opacity: .45; }
.tools button.off::after { content: ''; position: absolute; width: 22px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.tools .lang span { font: 600 12px/1 var(--mono); letter-spacing: .06em; border: 1.5px solid currentColor; border-radius: 6px; padding: 4px 5px; }
.tools button[data-tip]:hover::before { content: attr(data-tip); position: absolute; right: 48px; white-space: nowrap; padding: 5px 9px; border-radius: 6px; background: var(--ink); font-size: 12px; pointer-events: none; }

/* ================= VÍ: ĐỒNG XU CƠ SỞ + TỜ BẠC KHU VỰC ================= */
.wallet { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 0 calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  background: linear-gradient(transparent, rgba(6, 20, 19, .55) 60%); }
.coins { display: flex; gap: 8px; pointer-events: auto; align-self: flex-start; padding-top: 18px; }
.coin { --c: #1d6b52; display: flex; align-items: center; gap: 8px; padding: 4px 13px 4px 4px; border-radius: 999px; color: var(--paper); font-size: 12.5px; font-weight: 600;
  background: rgba(10, 30, 29, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); white-space: nowrap; }
.coin i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 12.5px/1 var(--serif); font-style: normal; color: #3a2a06;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2bd62 45%, #a9822f 100%); box-shadow: inset 0 0 0 2px rgba(120, 85, 20, .35), inset 0 0 0 4px rgba(255, 240, 190, .35); }
.coin.cur { background: var(--c); box-shadow: 0 0 0 1.5px var(--gold2); }
.notes { display: flex; gap: 8px; overflow-x: auto; pointer-events: auto; padding: 4px 2px 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.notes::-webkit-scrollbar { display: none; }
.bn { --c: #1d6b52; flex: none; scroll-snap-align: start; width: 152px; height: 70px; border-radius: 5px; position: relative; overflow: hidden; text-align: left; color: var(--ink);
  background: var(--paper); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .05); transition: transform .25s, box-shadow .25s; }
.bn::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--c) 92%, #000) 0 44px, transparent 44px), var(--gl3); background-size: auto, 300px auto; background-position: 0 0, 60px center; opacity: 1; }
.bn img { position: absolute; left: 44px; top: 0; width: calc(100% - 44px); height: 100%; object-fit: cover; opacity: .2; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.bn-d { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); }
.bn-d b { font: 700 19px/1 var(--serif); }
.bn-d small { font: 500 7.5px/1 var(--mono); letter-spacing: .14em; margin-top: 3px; text-transform: uppercase; opacity: .85; }
.bn-n { position: absolute; left: 52px; right: 8px; top: 9px; font: 600 13.5px/1.15 var(--serif); }
.bn-p { position: absolute; left: 52px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; background: rgba(13, 43, 42, .12); overflow: hidden; }
.bn-p i { display: block; height: 100%; background: var(--c); }
.bn-s { position: absolute; right: 8px; bottom: 15px; font: 500 9px/1 var(--mono); color: var(--red); letter-spacing: .06em; }
.bn::after { content: ''; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 3px; pointer-events: none; }
.bn.cur { transform: translateY(-6px); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .8), 0 0 0 2px var(--gold2); }
.bn:hover { transform: translateY(-4px); }

/* ================= ĐIỂM NÓNG ================= */
.hs-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.hs { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.hs > * { pointer-events: auto; }
/* đồng xu đi tới */
.hs-go { width: 0; height: 0; }
.hs-go .cn { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #3e2d06;
  background: radial-gradient(circle at 34% 28%, #fff6cf 0, #ecc96f 38%, #b48a33 78%, #8a6420 100%);
  box-shadow: 0 0 0 2px rgba(255, 245, 210, .9), 0 0 0 3.5px rgba(120, 85, 20, .55), 0 6px 14px rgba(0, 0, 0, .45); transition: transform .2s; }
.hs-go .cn::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: repeating-conic-gradient(rgba(110, 78, 20, .28) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 13.5px); mask: radial-gradient(circle, transparent 13px, #000 13.5px); }
.hs-go .cn .i { width: 18px; height: 18px; position: relative; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); }
.hs-go:hover .cn { transform: scale(1.12); }
.hs-go .cn::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(241, 213, 138, .7); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.tip { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(6px); width: 170px; border-radius: 5px; overflow: hidden; background: var(--paper); color: var(--ink);
  box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; text-align: left; }
.tip img { display: block; width: 100%; height: 92px; object-fit: cover; background: #0d2b2a; }
.tip b { display: block; padding: 6px 9px 1px; font: 600 13px/1.2 var(--serif); }
.tip small { display: block; padding: 0 9px 7px; font: 500 9.5px/1.2 var(--mono); color: var(--red); letter-spacing: .06em; }
.hs:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
body.touch .tip { display: none; }
/* đồng xu số (toàn cảnh) */
.hs-big { display: flex; align-items: center; transform-origin: 0 0; }
.hs-big .cn { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--serif); color: #3e2d06;
  background: radial-gradient(circle at 34% 28%, #fff6cf 0, #ecc96f 38%, #b48a33 80%); box-shadow: 0 0 0 2px #fff7dc, 0 0 0 3.5px var(--cc), 0 5px 12px rgba(0, 0, 0, .5); }
.hs-big .cn .i { width: 16px; height: 16px; }
.hs-big .lab { position: absolute; left: 22px; top: -14px; height: 28px; display: flex; align-items: center; padding: 0 12px 0 10px; white-space: nowrap; font: 600 13px/1 var(--serif); color: var(--ink);
  background: var(--paper); border-radius: 0 5px 5px 0; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5); border-left: 3px solid var(--cc); }
.hs-big:hover .cn { transform: scale(1.1); }
/* nút thang máy */
.hs-lift .btn { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #ffbf47;
  background: radial-gradient(circle at 40% 30%, #f3f5f5, #b8bfc0 55%, #7d8586 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), inset 0 0 0 9px #2a2f30, 0 6px 14px rgba(0, 0, 0, .5); }
.hs-lift .btn .i { width: 16px; height: 16px; filter: drop-shadow(0 0 4px #ffb02e); }
.hs-lift .lab { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); white-space: nowrap; padding: 4px 9px; border-radius: 4px; background: #111; color: #ffbf47; font: 500 11.5px/1 var(--mono);
  letter-spacing: .06em; box-shadow: 0 0 0 1px #333; }
/* flycam */
.hs-fly .pill { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; padding: 7px 13px 7px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--paper); background: rgba(10, 30, 29, .85); box-shadow: 0 0 0 1.5px var(--gold2), 0 8px 18px rgba(0, 0, 0, .45); font: 600 13px/1 var(--sans); }
.hs-fly .pill .i { color: var(--gold2); }
.hs-fly:hover .pill { background: var(--cc); }

/* ================= TẤM TRƯỢT ================= */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(4, 14, 13, .45); }
.sheet { position: fixed; z-index: 31; top: calc(12px + var(--sat)); right: calc(12px + var(--sar)); bottom: calc(12px + var(--sab)); width: min(460px, calc(100vw - 24px)); background: var(--paper);
  border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); display: flex; flex-direction: column; overflow: hidden; animation: shIn .35s cubic-bezier(.2, .8, .2, 1); }
.sheet.wide { width: min(760px, calc(100vw - 24px)); }
@keyframes shIn { from { transform: translateX(30px); opacity: 0; } }
.sh-x { position: absolute; z-index: 3; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 43, 42, .08); }
.sh-x:hover { background: rgba(13, 43, 42, .16); }
.sh-body { flex: 1; overflow: auto; overscroll-behavior: contain; }
.sh-head { padding: 22px 56px 14px 22px; border-bottom: 1px dashed var(--line); }
.sh-kick { margin: 0 0 4px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cc); }
.sh-title { margin: 0; font: 600 22px/1.2 var(--serif); }
.sh-pad { padding: 16px 22px 24px; }

/* phiếu (giấy nộp tiền) = giới thiệu khu vực */
.slip { margin: 16px; border: 1.5px solid var(--cc); border-radius: 4px; background: #fbf8ef; position: relative; }
.slip::before { content: ''; position: absolute; inset: 3px; border: .5px solid color-mix(in srgb, var(--cc) 50%, transparent); pointer-events: none; }
.slip-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--cc) 10%, #fbf8ef); border-bottom: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); }
.slip-h h3 { margin: 0; font: 700 15px/1.2 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--cc); }
.slip-h small { font: 500 10px/1.3 var(--mono); color: rgba(13, 43, 42, .65); text-align: right; }
.slip-f { display: grid; grid-template-columns: 96px 1fr; gap: 0; padding: 4px 14px 2px; }
.slip-f dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(13, 43, 42, .6); padding: 8px 0 6px; }
.slip-f dd { margin: 0; padding: 7px 0 6px; border-bottom: 1px dotted rgba(13, 43, 42, .35); font-weight: 600; }
.slip-t { padding: 10px 14px 16px; }
.slip-t p { margin: 0 0 9px; font-size: 14.5px; line-height: 1.6; }
.slip-t .li { padding-left: 4px; }
.slip-stamp { position: absolute; right: 14px; bottom: -14px; transform: rotate(-9deg); padding: 6px 10px; border: 2.5px solid var(--red); color: var(--red); border-radius: 6px;
  font: 700 12px/1 var(--mono); letter-spacing: .14em; background: rgba(251, 248, 239, .85); opacity: .85; }
.slip-go { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 16px 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; }
.chip:hover { border-color: var(--cc); color: var(--cc); }
.chip .i { width: 15px; height: 15px; }
.audio-row { display: flex; align-items: center; gap: 10px; margin: 0 16px 6px; padding: 10px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.audio-row button { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }

/* sao kê */
.stm-sum { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 22px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.stm-sum div { padding: 9px 10px; border-right: 1px solid var(--line); }
.stm-sum div:last-child { border: 0; background: var(--ink); color: var(--gold2); }
.stm-sum small { display: block; font: 500 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.stm-sum b { font: 600 18px/1.2 var(--mono); }
.stm-tools { display: flex; gap: 8px; padding: 14px 22px 8px; flex-wrap: wrap; }
.stm-q { flex: 1 1 180px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.stm-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; padding: 9px 0; }
.stm-f { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.stm-f button { padding: 7px 11px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line); background: #fff; }
.stm-f button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stm { width: 100%; border-collapse: collapse; font-size: 13px; }
.stm th { position: sticky; top: 0; z-index: 1; background: var(--paper2); text-align: left; font: 600 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 6px; color: rgba(13, 43, 42, .7); }
.stm th:first-child, .stm td:first-child { padding-left: 22px; }
.stm th:last-child, .stm td:last-child { padding-right: 22px; text-align: right; }
.stm td { padding: 8px 6px; border-bottom: 1px dotted rgba(13, 43, 42, .22); vertical-align: middle; }
.stm tr.z td { background: color-mix(in srgb, var(--zc) 12%, var(--paper)); font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zc); border-bottom: 1px solid color-mix(in srgb, var(--zc) 40%, transparent); }
.stm tr.r { cursor: pointer; }
.stm tr.r:hover td { background: rgba(13, 43, 42, .05); }
.stm tr.cur td { background: color-mix(in srgb, var(--gold) 22%, transparent); }
.stm .sn { font: 500 11px/1.2 var(--mono); color: var(--red); white-space: nowrap; }
.stm .dt { font: 500 11px/1.2 var(--mono); color: rgba(13, 43, 42, .6); white-space: nowrap; }
.stm .nm { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.stm .nm img { width: 46px; height: 30px; object-fit: cover; border-radius: 3px; flex: none; background: #0d2b2a; }
.stm .cr { font: 600 12px/1 var(--mono); white-space: nowrap; }
.stm .cr.y { color: #1f7a4f; }
.stm .cr.n { color: rgba(13, 43, 42, .35); }
.stm-foot { padding: 14px 22px 26px; font-size: 12px; color: rgba(13, 43, 42, .65); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stm-foot button { text-decoration: underline; font-size: 12px; }

/* bản đồ */
.sheet.map .sh-body { display: flex; flex-direction: column; overflow: hidden; }
#map { flex: 1; min-height: 300px; background: #dfe6e2; }
.map-bar { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 22px 12px; }
.mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--mono); color: #3e2d06; border: 2px solid #fff7dc;
  background: radial-gradient(circle at 34% 28%, #fff6cf 0, #ecc96f 40%, #b48a33 90%); box-shadow: 0 0 0 1.5px var(--c, #1d6b52), 0 3px 8px rgba(0, 0, 0, .4); }
.mk.seen { background: radial-gradient(circle at 34% 28%, #c9f2dc, #49b483 50%, #1d6b52); color: #fff; }
.mk.here { width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--red), 0 0 0 7px rgba(179, 38, 30, .25), 0 3px 8px rgba(0, 0, 0, .4); }
.leaflet-tooltip.mt { font: 600 12.5px/1.2 var(--sans); padding: 5px 8px; border-radius: 5px; }
.leaflet-container { font-family: var(--sans); }

/* chia sẻ */
.share { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.share-qr { width: 150px; height: 150px; padding: 8px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.share-qr img, .share-qr canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.share-l { display: flex; flex-direction: column; gap: 8px; }
.share-url { font: 500 11.5px/1.4 var(--mono); word-break: break-all; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.ck { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.btn-p { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 13.5px; }

/* ---------- biến động số dư (SMS) + toast ---------- */
.sms { position: fixed; z-index: 40; left: 50%; bottom: calc(158px + var(--sab)); transform: translate(-50%, 30px); opacity: 0; width: min(360px, calc(100vw - 24px)); padding: 10px 14px 11px 12px; border-radius: 14px;
  display: flex; gap: 11px; align-items: center; color: var(--paper); background: rgba(14, 33, 32, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s cubic-bezier(.2, .9, .2, 1.1), opacity .35s; pointer-events: none; }
.sms.show { transform: translate(-50%, 0); opacity: 1; }
.sms .ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--cc); color: var(--gold2); }
.sms .tx { min-width: 0; font-size: 12.5px; line-height: 1.35; }
.sms .tx b { display: flex; justify-content: space-between; gap: 8px; font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); margin-bottom: 2px; }
.sms .tx b span { color: rgba(244, 239, 225, .55); font-weight: 500; text-transform: none; }
.sms .tx em { font-style: normal; color: #7ee2a8; font-family: var(--mono); font-weight: 600; }
.toast { position: fixed; z-index: 41; left: 50%; bottom: calc(150px + var(--sab)); transform: translateX(-50%) translateY(10px); padding: 9px 16px; border-radius: 999px; background: rgba(10, 30, 29, .92);
  color: var(--paper); font-size: 13.5px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- di động ---------- */
@media (max-width: 640px) {
  .note { width: calc(100vw - 24px - var(--sal) - var(--sar)); right: calc(12px + var(--sar)); }
  .note-denom { width: 52px; } .note-denom b { font-size: 22px; }
  .note-title { font-size: 17px; -webkit-line-clamp: 1; }
  .note-micro { left: 56px; }
  .bal { top: auto; bottom: calc(150px + var(--sab)); right: calc(12px + var(--sar)); padding: 5px 11px 5px 5px; }
  .bal-ring { width: 28px; height: 28px; } .bal-t b { font-size: 15px; }
  .tools { top: auto; bottom: calc(196px + var(--sab)); flex-direction: column; }
  .tools button { width: 38px; height: 38px; }
  .tools #tbRotate, .tools #tbFull { display: none; }
  .bn { width: 136px; height: 62px; }
  .bn-n { font-size: 12.5px; }
  .coin { font-size: 11.5px; padding-right: 10px; }
  .coin span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .sheet { left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 86vh; height: 86dvh; border-radius: 16px 16px 0 0; animation-name: shUp; }
  .sheet.wide { width: 100%; }
  @keyframes shUp { from { transform: translateY(40px); opacity: 0; } }
  .share { grid-template-columns: 1fr; justify-items: center; }
  .stm .dt { display: none; }
  .toast { bottom: calc(240px + var(--sab)); }
  .sms { bottom: auto; top: calc(122px + var(--sat)); }
  .coin:not(.cur) span { display: none; }
  .coin:not(.cur) { padding-right: 4px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .bn { height: 50px; width: 128px; } .bn-n { font-size: 12px; top: 6px; } .bn-s { display: none; }
  .wallet { flex-direction: row; align-items: flex-end; }
  .coins { padding-top: 0; flex-direction: column; gap: 4px; align-self: flex-end; }
  .coin span { display: none; } .coin { padding: 3px; } .coin i { width: 26px; height: 26px; font-size: 11px; }
  .note-title { -webkit-line-clamp: 1; font-size: 17px; }
  .tools { top: calc(60px + var(--sat)); bottom: auto; max-height: calc(100vh - 180px); overflow: auto; }
  .tools button { width: 34px; height: 34px; }
  .bal { top: calc(12px + var(--sat)); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }