/* ============================================================
   TREN TAY — giao dien trang tai khoan
   Dung kem style.css, khong thay the
   ============================================================ */

.btn-sm{padding:7px 14px; font-size:.88rem}

.auth-wrap{
  min-height:calc(100vh - 66px); display:grid; place-items:center;
  padding:40px 20px 70px;
}
.auth-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); width:100%; max-width:430px; padding:34px;
}
.auth-card h1{font-size:1.65rem; margin-bottom:6px}
.auth-card .sub{color:var(--muted); font-size:.94rem; margin-bottom:26px}
.auth-card .foot{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--border);
  text-align:center; font-size:.92rem; color:var(--muted);
}
.auth-logo{display:flex; justify-content:center; margin-bottom:22px}

/* ---------- O nhap ---------- */
.f{margin-bottom:17px}
.f label{display:block; font-size:.88rem; font-weight:600; margin-bottom:6px}
.f .hint{font-size:.8rem; color:var(--muted); font-weight:400}
.f input{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text); font-size:.98rem; font-family:inherit;
}
.f input:focus{
  outline:2px solid color-mix(in srgb,var(--primary) 45%, transparent);
  outline-offset:1px; border-color:var(--primary);
}
.f .err{color:var(--danger); font-size:.83rem; margin-top:5px; display:none}
.f.bad .err{display:block}
.f.bad input{border-color:var(--danger)}
.f-pw{position:relative}
.f-pw .eye{
  position:absolute; right:8px; top:31px; background:none; border:0; cursor:pointer;
  font-size:1rem; color:var(--muted); padding:6px;
}

.meter{height:4px; border-radius:99px; background:var(--panel-2); margin-top:8px; overflow:hidden}
.meter i{display:block; height:100%; width:0; transition:.25s; background:var(--danger)}
.meter.ok i{background:var(--success)}
.meter.mid i{background:#e8a13a}

.agree{display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--muted); margin:4px 0 20px}
.agree input{margin-top:3px; flex-shrink:0}

/* ---------- Thong bao ---------- */
.alert{
  border-radius:var(--radius-sm); padding:13px 16px; font-size:.9rem;
  margin-bottom:20px; border:1px solid var(--border); background:var(--panel-2);
}
.alert.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));
           background:color-mix(in srgb,var(--danger) 9%,transparent); color:var(--text)}
.alert.good{border-color:color-mix(in srgb,var(--success) 45%,var(--border));
            background:color-mix(in srgb,var(--success) 9%,transparent)}
.alert.warn{border-color:color-mix(in srgb,#e8a13a 50%,var(--border));
            background:color-mix(in srgb,#e8a13a 11%,transparent)}
.alert p:last-child{margin:0}
.alert b{display:block; margin-bottom:3px}

/* ---------- Man hinh cho xac minh mail ---------- */
.mailbox{text-align:center; padding:12px 0}
.mailbox .ico{font-size:3.4rem; margin-bottom:14px}
.mailbox .addr{
  display:inline-block; background:var(--panel-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 16px; font-weight:700; margin:10px 0 18px;
  word-break:break-all;
}

/* ---------- Chip nguoi dung tren header ---------- */
.user-chip .avatar{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  font-size:.78rem; font-weight:800;
}
.user-chip{color:var(--text); text-decoration:none}
.user-chip:hover{text-decoration:none; background:var(--panel-2)}

/* ---------- Trang tai khoan ---------- */
.acc-grid{display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:start}
.acc-side{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); text-align:center; position:sticky; top:90px;
}
.acc-side .big-avatar{
  width:72px; height:72px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  font-size:1.7rem; font-weight:800;
}
.acc-side .who{font-weight:700; margin-bottom:2px}
.acc-side .mail{font-size:.85rem; color:var(--muted); word-break:break-all; margin-bottom:16px}

.lic{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin-bottom:16px; box-shadow:var(--shadow);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.lic .ic{font-size:2rem}
.lic .body{flex:1; min-width:190px}
.lic .name{font-weight:700; margin-bottom:3px}
.lic .meta{font-size:.87rem; color:var(--muted)}
.pill{
  font-size:.76rem; font-weight:700; padding:4px 11px; border-radius:999px;
  background:color-mix(in srgb,var(--success) 15%,transparent); color:var(--success);
}
.pill.warn{background:color-mix(in srgb,#e8a13a 18%,transparent); color:#b9761a}
.pill.bad{background:color-mix(in srgb,var(--danger) 13%,transparent); color:var(--danger)}
.pill.free{background:var(--panel-2); color:var(--muted)}

@media (max-width:820px){
  .acc-grid{grid-template-columns:1fr}
  .acc-side{position:static}
}
@media (max-width:460px){
  .auth-card{padding:26px 20px}
}