/* Trang pricing công khai. Tách riêng khỏi app.css vì trang này khách chưa
   đăng nhập cũng xem được, không cần kéo theo CSS của cả ứng dụng. */
.pricing-page{max-width:820px; margin:0 auto; padding:48px 24px 72px;}
.pricing-page header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:52px;
}
.pricing-page h1{font-family:var(--font-serif); font-size:1.95rem; line-height:1.25; margin:0 0 14px;}
.pricing-page .lede{
  font-size:.95rem; line-height:1.7; color:var(--ink-soft); margin:0 0 34px; max-width:58ch;
}

.notice{
  margin:0 0 26px; padding:11px 14px; border-radius:var(--radius);
  background:var(--accent-soft); color:var(--accent-ink); font-size:.85rem; line-height:1.6;
}
.notice[hidden]{display:none;}
.notice.warn{background:#FDF3E3; color:#8A5B12;}

.plan-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-bottom:56px;
}
.plan-card{
  display:flex; flex-direction:column; gap:4px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px 22px;
}
.plan-card.best{border-color:var(--accent); box-shadow:var(--shadow); position:relative;}
.plan-card .ribbon{
  position:absolute; top:-10px; left:22px; background:var(--accent); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.plan-card h3{margin:0; font-size:.85rem; color:var(--ink-faint); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;}
.plan-card .price{font-family:var(--font-serif); font-size:2rem; line-height:1.1; margin:8px 0 2px;}
.plan-card .per{font-size:.76rem; color:var(--ink-faint);}
.plan-card .blurb{font-size:.84rem; color:var(--ink-soft); margin:10px 0 18px; flex:1;}
.plan-card .btn{width:100%;}
.plan-card .btn[disabled]{opacity:.5; cursor:not-allowed;}

.compare{margin-bottom:52px;}
.compare h2, .faq h2{font-size:1.05rem; margin:0 0 14px;}
.compare table{width:100%; border-collapse:collapse; font-size:.86rem;}
.compare th, .compare td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink-soft);
}
.compare thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
}
.compare tbody td:first-child{color:var(--ink);}

.faq{margin-bottom:52px;}
.faq details{border-bottom:1px solid var(--line); padding:12px 0;}
.faq summary{cursor:pointer; font-size:.88rem; font-weight:600;}
.faq p{margin:10px 0 0; font-size:.85rem; line-height:1.7; color:var(--ink-soft);}

.pricing-page footer{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding-top:24px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-faint);
}
.pricing-page footer a{color:var(--ink-faint);}
.pricing-page footer a:hover{color:var(--ink);}

@media (max-width:560px){
  .pricing-page{padding:32px 20px 56px;}
  .pricing-page h1{font-size:1.6rem;}
  .pricing-page header{margin-bottom:36px;}
}