/* Trang tài khoản: nơi người dùng biết mình đang sở hữu gì và đã trả bao nhiêu.
   Tách khỏi app.css vì trang này không dùng bố cục hai cột của question bank. */
.account-page{max-width:720px; margin:0 auto; padding:36px 24px 64px;}
.account-page[hidden]{display:none;}

.acct-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:34px;}
.acct-top nav{display:flex; align-items:center; gap:18px; font-size:.84rem;}
.linkish{
  background:none; border:none; padding:0; font:inherit; color:var(--ink-faint);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.linkish:hover{color:var(--ink);}

.account-page h1{font-family:var(--font-serif); font-size:1.7rem; margin:0 0 22px;}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px; margin-bottom:18px;
}
.card h2{font-size:1rem; margin:0 0 12px;}
.card .hint{font-size:.8rem; color:var(--ink-faint); line-height:1.6; margin:0 0 14px;}
.muted{color:var(--ink-faint); font-size:.86rem;}

/* ---------- Gói hiện tại ---------- */
.plan-card.is-pro{border-color:var(--accent); box-shadow:var(--shadow);}
.plan-head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.plan-label{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px;
}
.plan-card.is-pro .plan-label{color:var(--accent-ink);}
.plan-head h2{font-family:var(--font-serif); font-size:1.25rem; margin:0 0 4px;}
.plan-sub{margin:0; font-size:.85rem; color:var(--ink-soft); line-height:1.6;}
.plan-perks{margin:16px 0 0; padding-left:18px; font-size:.85rem; line-height:1.9; color:var(--ink-soft);}
.plan-perks li.off{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line-strong);}

/* ---------- Đơn hàng ---------- */
.orders-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.orders-table th{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600;
}
.orders-table td{padding:11px 10px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top;}
.orders-table td.num{font-variant-numeric:tabular-nums; white-space:nowrap;}
.orders-table tr.refunded td{color:var(--ink-faint);}
.order-plan{color:var(--ink); font-weight:600;}
.order-inv{display:block; font-size:.72rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.tag{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.tag.ok{background:var(--accent-soft); color:var(--accent-ink);}
.tag.refunded{background:var(--surface-3); color:var(--ink-faint);}

/* ---------- Hồ sơ ---------- */
.field-row{margin-bottom:16px;}
.field-row:last-of-type{margin-bottom:0;}
.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.inline .text-input{flex:1 1 240px;}
.readonly{margin:2px 0 0; font-size:.88rem; color:var(--ink);}
.msg{font-size:.8rem; color:var(--accent-ink); min-height:16px; margin-top:10px;}
.msg.error{color:var(--danger);}

/* ---------- Vùng nguy hiểm ---------- */
.card.danger{border-color:#E7C6C6;}
.card.danger p{font-size:.84rem; line-height:1.7; color:var(--ink-soft); margin:0 0 16px;}
.btn.danger-btn{background:var(--danger); color:#fff;}
.btn.danger-btn:hover{background:#9B2C2C;}
.btn.danger-btn[disabled]{opacity:.45; cursor:not-allowed;}

.acct-foot{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  margin-top:30px; font-size:.78rem;
}
.acct-foot a{color:var(--ink-faint);}
.acct-foot a:hover{color:var(--ink);}

/* ---------- Hộp xác nhận xoá ---------- */
.confirm-backdrop{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(27,35,32,.45);
}
/* BẮT BUỘC: display:flex ở trên đè mất [hidden]{display:none} của trình duyệt. */
.confirm-backdrop[hidden]{display:none;}
.confirm-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px 28px;
}
.confirm-card h2{margin:0 0 8px; font-family:var(--font-serif); font-size:1.1rem;}
.confirm-card p{margin:0 0 14px; font-size:.86rem; line-height:1.6; color:var(--ink-soft);}
.confirm-card .text-input{width:100%; margin-bottom:14px;}
.confirm-card .btn{width:100%; margin-bottom:8px;}

@media (max-width:520px){
  .account-page{padding:26px 18px 52px;}
  .orders-table thead{display:none;}
  .orders-table tr{display:block; padding:10px 0; border-bottom:1px solid var(--line);}
  .orders-table td{display:flex; justify-content:space-between; gap:14px; border:none; padding:3px 0;}
  .orders-table td::before{content:attr(data-label); color:var(--ink-faint); font-size:.72rem;}
}