/* ============================================
   PAGES.CSS - Style riêng cho từng trang
   ============================================ */

/* ---------- 404 / Bảo trì ---------- */
.error-page, .maintenance-page {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-5);
}
.error-page .code { font-size: 7rem; font-weight: 900; color: var(--color-primary); line-height: 1; }
.error-page p, .maintenance-page p { max-width: 420px; margin: var(--space-3) 0 var(--space-5); }
.maintenance-page .icon-wrap { width: 96px; height: 96px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.1); display: flex; align-items: center; justify-content: center; color: var(--color-primary); margin-bottom: var(--space-5); }

/* ---------- Blog ---------- */
.blog-card img { border-radius: var(--radius-md); margin-bottom: var(--space-3); aspect-ratio: 16/9; object-fit: cover; background: var(--color-surface-alt); }
.blog-card .meta { font-size: var(--font-size-xs); color: var(--color-text-light); margin-bottom: var(--space-2); }
.blog-card h4 { margin-bottom: var(--space-2); }
.blog-detail h1 { margin-bottom: var(--space-3); }
.blog-detail .meta { color: var(--color-text-light); margin-bottom: var(--space-5); }
.blog-detail .content p { margin-bottom: var(--space-4); color: var(--color-text); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.contact-info-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.contact-info-item .icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); height: 260px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Điều khoản / Chính sách ---------- */
.legal-page { max-width: 780px; margin: 0 auto; }
.legal-page h2 { margin: var(--space-6) 0 var(--space-3); }
.legal-page p, .legal-page li { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.legal-page li { padding-left: var(--space-4); position: relative; }
.legal-page li::before { content: '•'; position: absolute; left: 0; color: var(--color-primary); }

/* ---------- Thanh toán ---------- */
.payment-box { max-width: 460px; margin: 0 auto; text-align: center; }
.qr-frame { width: 220px; height: 220px; margin: var(--space-5) auto; border: 2px dashed var(--color-border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: var(--color-surface-alt); }
.payment-status-pending { color: var(--color-warning); }
.payment-status-paid { color: var(--color-success); }
.payment-status-failed { color: var(--color-danger); }

/* ---------- Quản lý box (dashboard) ---------- */
.box-card { display: flex; flex-direction: column; gap: var(--space-3); }
.box-card .box-header { display: flex; justify-content: space-between; align-items: center; }
.box-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.box-toggle-row:last-child { border-bottom: none; }

/* Switch */
.switch { position: relative; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--color-border); border-radius: var(--radius-full); transition: var(--transition-fast); cursor: pointer; }
.switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition-fast); }
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------- Form nhập trận đấu ---------- */
.match-entry-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
@media (max-width: 700px) { .match-entry-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Admin ---------- */
.admin-filter-bar { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.revenue-chart-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }

/* ---------- Nạp lượt tính điểm ---------- */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); max-width: 860px; margin: 0 auto; }
.credit-card { text-align: center; }
.credit-card .credits { font-size: 28px; font-weight: 700; color: var(--color-primary); }
.credit-card .credits span { font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
.credit-card .credit-price { font-size: 18px; font-weight: 600; margin: var(--space-2) 0 var(--space-4); }
.contact-info-item a { color: var(--color-primary); }

.qr-holder { display: flex; justify-content: center; margin: var(--space-3) 0; }