/* ============ SKIN: NGÂN HÀNG SỐ ============ */
[data-skin="nhso"] {
  --navy: #14336B; --orange: #F37021; --bg: #F1F2F6;
  font-family: 'Mulish', 'Google Sans Flex', system-ui, sans-serif;
}
[data-skin="nhso"] .btn { border-radius: 30px; height: 52px; font-size: 17px; }
[data-skin="nhso"] .btn.white { background: #fff; color: var(--p); box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
[data-skin="nhso"] .nav-title { font-size: 18px; font-weight: 800; }
[data-skin="nhso"] .footer { border-top: 0; background: var(--bg); padding-left: 28px; padding-right: 28px; }

/* ---------- Trang chủ ---------- */
.sc-home { background: #fff; }
.sc-home .body { overflow: hidden; }
.sc-hero {
  position: relative; height: 422px; padding: 55px 11px 0 17px; color: #fff; overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 38px 38px;
  background: #6FA8E8 url(../assets/hero.jpg) top center / 100% auto no-repeat;
}
.sc-top { display: flex; align-items: center; gap: 0; }
.sc-search {
  width: 252px; height: 46px; border-radius: 6px; background: rgba(46, 92, 170, .42); color: #fff;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 14px;
}
.sc-bell { color: #fff; flex: 1; height: 46px; display: grid; place-items: center; }
.sc-bell svg { fill: #fff; }
.sc-ava { width: 46px; height: 46px; border-radius: 50%; background: #F1F2F4; display: grid; place-items: center; border: 2px solid #fff; overflow: hidden; }
.sc-ava svg { fill: #D0D3D9; stroke: #D0D3D9; margin-top: 6px; }
.sc-greet { margin-top: 9px; font-size: 15.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(20, 50, 110, .4); }

.sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 0 14px; margin-top: -71px; position: relative; z-index: 2; }
.sc-tile {
  position: relative; height: 101px; border-radius: 16px; text-align: left; padding: 0 22px 14px; display: flex; align-items: flex-end;
  font-size: 16.5px; font-weight: 700; line-height: 1.32; border: 1px solid rgba(255, 255, 255, .85); transition: transform .1s;
}
.sc-tile:active { transform: scale(.97); }
.sc-tile.or { color: #E8641B; background: linear-gradient(180deg, #FBDDBE 0%, #FFF4E8 30%, #FFFBF6 58%, #FCE4CC 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 16px -10px rgba(232, 130, 50, .55); }
.sc-tile.bl { color: #1877C9; background: linear-gradient(180deg, #BFDCF7 0%, #E9F4FE 30%, #F8FCFF 58%, #C9E3F8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 16px -10px rgba(40, 130, 210, .55); }
.sc-tile .ti { position: absolute; top: 20px; right: 18px; color: var(--p); }
.sc-tile .ti.new { top: 21px; background: var(--orange); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; line-height: 1.4; }

.sc-svc { display: grid; grid-template-columns: repeat(4, 1fr); padding: 54px 20px 0; }
.sc-svc button { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.2; color: #111827; text-align: center; }
.sc-svc .si {
  position: relative; width: 76px; height: 54px; border-radius: 12px; display: grid; place-items: center; color: var(--p);
  background: linear-gradient(180deg, #fff 0%, #F6F7F9 100%); border: 1px solid #ECEEF2; border-top-color: #DADDE3; box-shadow: 0 3px 0 #DFE2E8;
}
.sc-svc .si .new { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--orange); padding: 1px 6px; border-radius: 6px; }

.sc-tab { display: flex; align-items: flex-end; background: #fff; padding: 0 12px 20px; flex-shrink: 0; }
.sc-tab button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13.5px; color: #111827; }
.sc-tab button svg { color: var(--p); }
.sc-tab .mid { gap: 22px; }
.sc-tab .qr {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #FF9D52, var(--orange) 72%); box-shadow: 0 14px 22px -4px rgba(243, 112, 33, .5);
}
.sc-tab .qr svg { color: #fff; }

/* ---------- Chuyển tiền ---------- */
.sc-tf { background: var(--bg); }
.sc-head { background: var(--p); color: #fff; padding-top: 54px; flex-shrink: 0; }
.sc-nav, .sc-auth-nav { display: flex; align-items: center; height: 52px; padding: 0 8px; }
.sc-nav > div, .sc-auth-nav > div { flex: 1; text-align: center; font-size: 19px; font-weight: 800; }
.sc-nav button, .sc-nav span, .sc-auth-nav button, .sc-auth-nav span { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; }
.sc-tabs { display: flex; gap: 6px; padding: 4px 12px 12px; }
.sc-tabs button { flex: 1; height: 38px; border-radius: 20px; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.sc-tabs button.on { background: #fff; color: var(--p); font-weight: 800; }

.sc-form { padding: 0 16px 20px; }
.sc-form::before { content: ''; display: block; height: 46px; margin: 0 -16px -46px; background: var(--p); }
.sc-bgbody { flex: 1; overflow: hidden; }
.sc-src { position: relative; background: #fff; border-radius: 14px; padding: 16px 16px 0; box-shadow: 0 6px 18px rgba(16, 24, 40, .12); }
.sc-src .sr1 { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; }
.sc-src .thumb {
  width: 62px; height: 40px; border-radius: 5px; flex-shrink: 0; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1A6FC4 0%, #0B56A4 55%, #2E8BE0 100%);
}
.sc-src .thumb::after { content: ''; position: absolute; right: -14px; bottom: -18px; width: 44px; height: 44px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .22); }
.sc-src .thumb i { position: absolute; left: 5px; top: 5px; font-style: normal; font-size: 3.6px; font-weight: 700; color: rgba(255, 255, 255, .9); letter-spacing: .03em; }
.sc-src .sr1 b { display: block; font-size: 18px; font-weight: 800; color: #111827; }
.sc-src .sr1 small { display: block; font-size: 14.5px; color: #8A8F99; margin-top: 1px; }
.sc-src .sr2 { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid #EEF0F3; border-bottom: 1px solid #EEF0F3; font-size: 15.5px; color: #1F2937; }
.sc-src .sr2 b { font-size: 18px; font-weight: 500; color: #111827; }
.sc-src .sr3 { height: 26px; display: grid; place-items: center; color: #C3C7CF; }

.sc-lbl { display: block; font-size: 15px; color: #1F2937; margin: 16px 2px 8px; }
.sc-box {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 16px; text-align: left;
  background: #fff; border-radius: 12px; font-size: 17px; color: #111827; border: 1.5px solid transparent; transition: border-color .15s;
}
.sc-box:focus-within { border-color: var(--p); }
.sc-box input, .sc-box textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; color: #111827; resize: none; padding: 0; }
.sc-box input::placeholder { color: #B6BCC8; }
.sc-box .bt { flex: 1; min-width: 0; }
.sc-box .bt.ph { color: #B6BCC8; }
.sc-box .bt b { display: block; font-weight: 500; font-size: 17px; }
.sc-box .bt small { display: block; font-size: 13.5px; color: #8A8F99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-box .ud { color: #C3C7CF; flex-shrink: 0; display: grid; }
.sc-box .ic { color: var(--p); width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.sc-box .cur { color: #8A8F99; font-weight: 600; }
.sc-bank { position: relative; padding-top: 10px; padding-bottom: 10px; }
.sc-blogo {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(16, 24, 40, .18);
}
.sc-bank .napas { position: absolute; top: 7px; right: 44px; font-size: 9px; font-weight: 800; font-style: italic; color: #1670C4; }
.sc-form .namerow { margin: 0; min-height: 22px; font-size: 17px; font-weight: 400; color: #111827; }
.sc-form .namerow.ok { color: #111827; font-weight: 500; }
.sc-form .namerow.ok svg { color: var(--ok); }
.sc-form .namerow:empty::before { content: 'Tự động hiển thị theo số tài khoản'; color: #B6BCC8; font-size: 15px; }
.sc-form .words { margin: 6px 4px 0; }
.sc-foot { padding: 12px 36px 30px; background: var(--bg); flex-shrink: 0; }

/* ---------- Xác nhận giao dịch (bottom sheet) ---------- */
.sc-cf { animation: none; }
.sc-cf-bg { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.sc-dim { position: absolute; inset: 0; z-index: 2; background: rgba(20, 30, 50, .45); animation: fadeIn .25s ease; }
.sc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 88%; display: flex; flex-direction: column;
  background: #fff; border-radius: 28px 28px 0 0; animation: scUp .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes scUp { from { transform: translateY(100%); } to { transform: none; } }
.sc-cf.still .sc-dim, .sc-cf.still .sc-sheet { animation: none; }
.sc-sheet .grab { width: 34px; height: 4px; border-radius: 2px; background: #DDE0E6; margin: 14px auto 0; flex-shrink: 0; }
.sc-sheet h3 { text-align: center; font-size: 20px; font-weight: 800; color: var(--navy); margin: 18px 0 10px; flex-shrink: 0; }
.sc-rows { padding: 0 26px 4px; }
.sc-rows .r { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; font-size: 16px; line-height: 1.35; }
.sc-rows .r span:first-child { color: #8A8F99; flex-shrink: 0; }
.sc-rows .r span:last-child { text-align: right; color: #111827; }
.sc-rows .r.total span:first-child { font-size: 14.5px; }
.sc-rows .r.total span:last-child { color: var(--navy); font-weight: 800; font-size: 17px; }
.sc-rows .offer { margin: 8px -10px 10px; }
.sc-total { flex-shrink: 0; padding-bottom: 0; }
.sc-sheet-f { padding: 10px 44px 34px; flex-shrink: 0; }

/* ---------- Xác thực giao dịch ---------- */
.sc-auth {
  color: #111827;
  background:
    radial-gradient(ellipse 60% 22% at 105% 26%, rgba(255, 255, 255, .0) 0 99%, transparent 100%),
    radial-gradient(ellipse 85% 46% at 62% 30%, rgba(255, 255, 255, .85) 0 99%, transparent 100%),
    radial-gradient(ellipse 60% 16% at 110% 24%, rgba(241, 242, 246, 1) 0 99%, transparent 100%),
    #F1F2F6;
}
.sc-auth-nav { margin-top: 54px; flex-shrink: 0; }
.sc-auth .body { padding: 0 32px 12px; }
.sc-auth-ic { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--p); margin-top: 26px; }
.sc-auth-ic i { width: 86px; height: 3px; border-radius: 2px; background: #C9D8EC; position: relative; overflow: hidden; }
.sc-auth-ic i::after { content: ''; position: absolute; inset: 0 20% 0 0; background: var(--p); border-radius: 2px; }
.sc-auth-msg { text-align: center; font-size: 16px; margin: 22px -8px 26px; }
.sc-auth-list .ah { font-size: 17px; margin-bottom: 16px; }
.sc-auth-list .ai { margin-bottom: 16px; }
.sc-auth-list .ai span { display: block; font-size: 15.5px; color: #374151; }
.sc-auth-list .ai b { display: block; font-size: 17px; font-weight: 500; margin-top: 3px; line-height: 1.4; }
.sc-auth-f { padding: 12px 36px 30px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

/* ---------- Điện thoại thật (không khung) ---------- */
body.native .sc-hero { padding-top: 14px; height: 381px; background-position: center -41px; }
body.native .sc-home .body { overflow-y: auto; }
body.native .sc-head { padding-top: 4px; }
body.native .sc-auth-nav { margin-top: 4px; }
body.native .sc-tab { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
body.native .sc-foot, body.native .sc-auth-f, body.native .sc-sheet-f { padding-bottom: max(16px, env(safe-area-inset-bottom)); }