/* ==========================================================================
   HPN BOOKS — XANH NGỌC 5D (Mobile App Design)
   Bảng màu: ngọc bích trên nền teal tối, hiệu ứng Glassmorphism.
   ========================================================================== */

:root{
  /* Nền */
  --bg-0:#041512;
  --bg-1:#092520;
  --bg-2:#0d3a33;

  /* Ngọc */
  --jade-100:#b6f7e3;
  --jade-200:#7ff5d0;
  --jade-300:#3ee8b0;
  --jade-400:#17d695;
  --jade-500:#0bb07c;
  --jade-600:#0a8d66;
  --jade-700:#0a6e52;

  /* Bổ trợ */
  --rose:#ff6b8b;
  --violet:#9d8bff;

  /* Chữ */
  --txt:#ffffff;
  --txt-dim:#a6d1c9;
  --txt-mute:#6d9a8f;

  /* Kính Neumorphism */
  --glass:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  --glass-strong:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  --stroke:rgba(255,255,255,.15);
  --stroke-hi:rgba(255,255,255,.3);

  /* Bóng */
  --sh-1:0 4px 12px rgba(0,0,0,.15);
  --sh-2:0 8px 24px rgba(0,0,0,.25);
  --glow:0 0 20px rgba(11,176,124,.4);

  --r-sm:8px; --r-md:16px; --r-lg:20px; --r-xl:24px;
  --f: "Segoe UI", system-ui, -apple-system, sans-serif;
  --fm: "Cascadia Code", "JetBrains Mono", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--f); color:var(--txt); background:var(--bg-0);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
h1,h2,h3,h4{margin:0; font-weight:700}
p{margin:0}
.hidden{display:none !important}

/* ===== KHUNG MOBILE APP ===== */
.app-screen{display:flex; justify-content:center; align-items:center; height:100vh; background:#000}
.mobile-frame{
  width:100%; max-width:414px; height:100%; max-height:896px;
  position:relative; background:var(--bg-0); overflow:hidden;
  display:flex; flex-direction:column;
}
@media (min-width: 415px) {
  .mobile-frame {
    height: 90vh; border-radius: 40px; border: 8px solid #1a1a1a;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
  }
}

/* --- Nền uốn lượn (Waves) --- */
.m-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(160deg, #09342b, #04120f)}
.m-wave{position:absolute; background:radial-gradient(ellipse at center, rgba(11,176,124,.25), transparent 70%); border-radius:50%; filter:blur(40px)}
.w1{width:600px; height:600px; top:-200px; left:-150px; background:radial-gradient(ellipse at center, rgba(23,214,149,.3), transparent 70%)}
.w2{width:500px; height:500px; bottom:-100px; right:-100px}
.w3{width:400px; height:400px; top:40%; left:-100px; opacity:0.6}
.m-particles{position:absolute; inset:0}
.m-particles i{
  position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  box-shadow:0 0 6px #fff; opacity:0; animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0; transform:scale(.5)} 50%{opacity:.8; transform:scale(1.2)}}

/* --- Header --- */
.m-header{
  position:relative; z-index:10; padding:44px 20px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.m-header h2{font-size:17px; font-weight:600; flex:1; text-align:center}
.m-back, .m-action{
  background:none; border:none; color:var(--txt); font-size:15px; cursor:pointer; padding:8px;
}
.m-back{font-size:24px; line-height:1}

/* --- View (Nội dung cuộn) --- */
.m-view{
  position:relative; z-index:10; flex:1; overflow-y:auto; overflow-x:hidden;
  padding:20px 20px 100px; display:flex; flex-direction:column; gap:20px;
}
.m-view::-webkit-scrollbar{display:none} /* Ẩn scrollbar trên mobile */

/* --- Bottom Navigation --- */
.m-nav{
  position:absolute; bottom:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-around; align-items:center;
  padding:10px 10px 24px;
  background:linear-gradient(to top, rgba(4,18,15,.95), rgba(4,18,15,.7));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.05);
}
.m-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--txt-mute); text-decoration:none; cursor:pointer; width:64px;
}
.m-nav-item svg{width:22px; height:22px; fill:currentColor; transition:.2s}
.m-nav-item span{font-size:10px; font-weight:500; transition:.2s}
.m-nav-item.active{color:var(--jade-300)}
.m-nav-item.active svg{filter:drop-shadow(0 0 6px var(--jade-300))}

.m-nav-fab{
  position:relative; top:-20px; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--jade-200), var(--jade-500));
  border:none; color:#000; font-size:28px; font-weight:300; display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(11,176,124,.4), inset 0 2px 4px rgba(255,255,255,.4);
  cursor:pointer; z-index:21;
}

/* ===== CÁC KHỐI THÀNH PHẦN (GLASS) ===== */
.m-card{
  background:var(--glass); border:1px solid var(--stroke);
  border-radius:var(--r-lg); padding:20px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-1);
}
.m-card-title{font-size:14px; font-weight:600; color:var(--txt-dim); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center}
.m-card-title .act{color:var(--txt-mute); font-size:16px; letter-spacing:2px}

/* --- Nhóm Tiêu đề Trang chủ --- */
.m-hero{display:flex; justify-content:space-between; align-items:center; margin-top:20px; margin-bottom:10px}
.m-hero h1{font-size:22px; font-weight:700}
.m-hero-actions{display:flex; gap:12px}
.m-circle-btn{
  width:36px; height:36px; border-radius:50%; background:var(--glass); border:1px solid var(--stroke);
  display:grid; place-items:center; color:var(--jade-200); font-weight:700;
}

/* --- Khối Số dư & Dòng tiền --- */
.m-split-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.m-bal-card{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--r-lg); padding:16px; position:relative; overflow:hidden}
.m-bal-label{font-size:12px; color:var(--txt-dim); margin-bottom:8px}
.m-bal-val{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:4px}
.m-bal-sub{font-size:11px; color:var(--jade-300); display:flex; align-items:center; gap:4px}

.m-flow-card{background:var(--glass-strong); border:1px solid rgba(255,255,255,.25); border-radius:var(--r-lg); padding:16px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--sh-2)}
.m-flow-col{display:flex; flex-direction:column; gap:6px}
.m-flow-item{font-size:11px; color:var(--txt-dim)}
.m-flow-item span{color:var(--txt); font-weight:600; margin-left:4px; font-variant-numeric:tabular-nums}
.m-donut{width:40px; height:40px; border-radius:50%; background:conic-gradient(var(--jade-300) 65%, var(--rose) 65%); position:relative}
.m-donut::after{content:""; position:absolute; inset:6px; background:var(--bg-1); border-radius:50%}

/* --- Danh sách Hoạt động --- */
.m-list{display:flex; flex-direction:column; gap:14px}
.m-item{display:flex; justify-content:space-between; align-items:center}
.m-item-left{display:flex; align-items:center; gap:12px}
.m-item-ic{width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.1); display:grid; place-items:center; color:var(--txt-dim); font-size:13px}
.m-item-info h4{font-size:13px; font-weight:500; margin-bottom:2px}
.m-item-info p{font-size:11px; color:var(--txt-mute)}
.m-item-val{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.m-item-val.pos{color:var(--jade-300)}
.m-item-val.neg{color:var(--rose)}

/* --- Biểu đồ Cột --- */
.m-chart-bars{display:flex; align-items:flex-end; justify-content:space-between; height:100px; margin-top:16px; padding:0 4px}
.m-bar-col{display:flex; flex-direction:column; align-items:center; gap:8px}
.m-bar{width:16px; background:linear-gradient(to top, var(--jade-600), var(--jade-300)); border-radius:4px; box-shadow:0 0 10px rgba(11,176,124,.3)}
.m-bar-label{font-size:10px; color:var(--txt-mute)}

/* ===== FORM TẠO GIAO DỊCH ===== */
.m-segment{display:flex; background:rgba(0,0,0,.2); border-radius:var(--r-md); padding:4px; margin-bottom:20px}
.m-seg-btn{flex:1; padding:10px; text-align:center; font-size:13px; font-weight:600; color:var(--txt-dim); border-radius:12px; transition:.2s}
.m-seg-btn.active{background:var(--jade-500); color:#fff; box-shadow:0 2px 8px rgba(11,176,124,.4)}

.m-input-group{display:flex; flex-direction:column; gap:16px}
.m-input-box{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px}
.m-input-box input{width:100%; background:transparent; border:none; color:var(--txt); font-size:14px; outline:none; font-family:var(--f)}
.m-input-box input::placeholder{color:var(--txt-mute)}

.m-amount-box{
  background:var(--glass-strong); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-lg); padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; box-shadow:var(--sh-2);
}
.m-amount-box span{font-size:14px; color:var(--txt-dim)}
.m-amount-box input{
  background:transparent; border:none; color:var(--txt); font-size:24px; font-weight:700; text-align:right; width:60%; outline:none; font-family:var(--fm)
}

.m-banks{display:flex; gap:12px; margin-top:12px; overflow-x:auto; padding-bottom:8px}
.m-bank{
  min-width:48px; height:48px; border-radius:14px; background:#fff; display:grid; place-items:center;
  border:2px solid transparent; transition:.2s;
}
.m-bank.active{border-color:var(--jade-400); transform:translateY(-2px); box-shadow:0 4px 12px rgba(11,176,124,.3)}
.m-bank img{width:28px; height:28px; object-fit:contain}

.m-btn-submit{
  background:linear-gradient(90deg, var(--jade-400), var(--jade-200)); border:none; border-radius:16px;
  color:#000; font-size:15px; font-weight:700; padding:18px; width:100%; margin-top:20px;
  box-shadow:0 6px 20px rgba(11,176,124,.4); cursor:pointer;
}

/* ========================================================================== */
/* Giữ lại style cơ bản cho auth screen (Login) */
.auth-screen{min-height:100vh; display:grid; place-items:center; padding:28px; position:absolute; inset:0; z-index:100; background:var(--bg-0)}
.auth-card{width:min(360px,100%); background:var(--glass); border:1px solid var(--stroke); border-radius:var(--r-xl); padding:36px 32px 26px; text-align:center; backdrop-filter:blur(16px)}
.auth-form{display:flex; flex-direction:column; gap:16px; text-align:left; margin-top:24px}
.field span{font-size:12px; color:var(--txt-dim); margin-bottom:6px; display:block}
.field input{width:100%; background:rgba(0,0,0,.2); border:1px solid var(--stroke); color:var(--txt); padding:12px; border-radius:12px; outline:none}
.btn-primary{background:var(--jade-500); color:#fff; border:none; padding:14px; border-radius:12px; font-weight:600; margin-top:10px; cursor:pointer}

/* ==========================================================================
   HPN BOOKS — LỚP 7D
   Khối nổi 7 lớp: nền → lưới → vệt sáng → kính → viền phát quang → holo → đèn
   ========================================================================== */

:root{
  --holo: conic-gradient(from var(--spin,0deg),
    rgba(127,245,208,.95), rgba(43,217,209,.85), rgba(157,139,255,.75),
    rgba(23,214,149,.95), rgba(255,206,107,.6), rgba(127,245,208,.95));
  --depth-1: 0 1px 2px rgba(0,0,0,.5);
  --depth-2: 0 4px 10px rgba(0,0,0,.45);
  --depth-3: 0 14px 30px rgba(0,0,0,.5);
  --depth-4: 0 30px 60px -18px rgba(0,0,0,.7);
  --rim: inset 0 1px 0 rgba(214,255,242,.28), inset 0 -1px 0 rgba(0,0,0,.42);
}

@property --spin { syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* --- Tầng nền bổ sung: hạt sáng trôi --- */
.stage .particles{position:absolute; inset:0; pointer-events:none; opacity:.7}
.stage .particles i{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle,#b6f7e3,#17d695 60%,transparent 70%);
  box-shadow:0 0 10px rgba(127,245,208,.9);
  animation:drift linear infinite;
}
@keyframes drift{
  from{transform:translate3d(0,110vh,0) scale(.6); opacity:0}
  10%{opacity:1}
  90%{opacity:.9}
  to{transform:translate3d(40px,-10vh,0) scale(1.15); opacity:0}
}

/* --- Khối 7D: nghiêng theo con trỏ + đèn rọi --- */
.card,.kpi{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  will-change:transform;
}
.card:hover,.kpi:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(14px);
  box-shadow:var(--depth-4), var(--glow-strong), var(--rim);
  border-color:var(--stroke-hi);
}
/* Đèn rọi theo con trỏ */
.card::after,.kpi::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
    rgba(180,255,235,.16), rgba(23,214,149,.06) 40%, transparent 68%);
  opacity:0; transition:opacity .3s ease;
}
.card:hover::after,.kpi:hover::after{opacity:1}

/* Viền holo xoay cho thẻ nhấn mạnh */
.card.accent-7d,.kpi.accent{
  border-color:transparent;
  background:linear-gradient(var(--glass),var(--glass)) padding-box, var(--holo) border-box;
  border:1px solid transparent;
  animation:spinholo 9s linear infinite;
}
@keyframes spinholo{ to{ --spin:360deg } }

/* --- Viền phát quang cho thanh điều hướng / thanh trên --- */
.sidebar,.topbar{
  box-shadow:var(--depth-3), var(--rim), 0 0 0 1px rgba(127,245,208,.10), 0 0 40px -18px rgba(23,214,149,.7);
}
.nav-item{position:relative; overflow:hidden}
.nav-item.active::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:3px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--jade-200),var(--aqua));
  box-shadow:0 0 14px rgba(62,232,176,.9);
}
.nav-item .ic{filter:drop-shadow(0 0 6px rgba(127,245,208,.55))}

/* --- Tiêu đề gradient động --- */
.topbar h2,.card-head h3,.auth-card h1{
  background:linear-gradient(100deg,var(--jade-50),var(--jade-300) 35%,var(--aqua) 60%,var(--jade-100));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 8s ease-in-out infinite;
}
@keyframes sheen{50%{background-position:100% 0}}

/* --- Số liệu KPI: khối chữ có chiều sâu --- */
.kpi .k-value{
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 8px 22px rgba(23,214,149,.35);
}
.kpi .k-label{text-shadow:0 1px 0 rgba(0,0,0,.4)}

/* --- Nút 3D --- */
.btn{transform-style:preserve-3d}
.btn-primary{
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -3px 0 rgba(4,60,45,.55) inset,
             0 8px 18px -6px rgba(23,214,149,.8), 0 18px 34px -18px rgba(0,0,0,.9);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 -3px 0 rgba(4,60,45,.6) inset,
             0 12px 26px -6px rgba(23,214,149,.95), 0 24px 44px -20px rgba(0,0,0,.95)}
.btn:hover{transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px) translateZ(6px)}

/* --- Logo lăng trụ: quay 3D nhiều lớp --- */
.prism{
  position:relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 42%),
    conic-gradient(from 210deg,var(--jade-200),var(--jade-500),var(--aqua),var(--violet),var(--jade-200));
  box-shadow:0 14px 30px -10px rgba(23,214,149,.85), inset 0 0 22px rgba(255,255,255,.28);
}
.prism::after{
  content:""; position:absolute; inset:22%;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.95), rgba(182,247,227,.25) 60%, transparent 72%);
  clip-path:inherit; filter:blur(.4px);
}

/* --- Bảng: hàng nổi khi trỏ vào --- */
tbody tr{transition:background .15s ease, transform .18s ease, box-shadow .18s ease}
tbody tr:hover{transform:translateX(2px); box-shadow:inset 3px 0 0 var(--jade-300)}

/* --- Thanh tiến trình / cột biểu đồ phát sáng --- */
.bar-fill{box-shadow:0 0 16px rgba(23,214,149,.7), inset 0 1px 0 rgba(255,255,255,.35)}
.chart rect{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); transition:opacity .2s}
.chart rect:hover{opacity:1 !important}

/* --- Modal: bay lên 7D --- */
.modal{animation:lift .32s cubic-bezier(.2,.9,.2,1)}
@keyframes lift{from{opacity:0; transform:perspective(1200px) rotateX(7deg) translateY(26px) scale(.97)}}

/* --- Vòng sáng quanh avatar --- */
.avatar{box-shadow:0 0 0 2px rgba(4,36,28,.9), 0 0 0 3px rgba(127,245,208,.6), 0 8px 20px -6px rgba(23,214,149,.8)}

/* --- Hiệu ứng máy quét cho vùng đang tải --- */
.empty strong::after{
  content:""; display:block; width:64px; height:2px; margin:10px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--jade-300),transparent);
  animation:scan 1.6s ease-in-out infinite;
}
@keyframes scan{0%,100%{opacity:.25; transform:scaleX(.5)} 50%{opacity:1; transform:scaleX(1)}}

/* --- Tôn trọng giảm chuyển động --- */
@media (prefers-reduced-motion: reduce){
  .card,.kpi,.btn,.topbar h2,.card-head h3,.auth-card h1,.modal,.prism{animation:none !important; transform:none !important}
  .card::after,.kpi::after{display:none}
  .stage .particles{display:none}
}