/* Bố cục hai cột cho khu tài khoản và khu quản trị, cùng các thành phần dùng chung
   (thẻ nội dung, biểu mẫu, bảng, trang chính sách). Dùng lại biến màu khai báo trong site.css. */

.dash-page { background: var(--paper); min-height: calc(100vh - 76px); padding: 34px 0 70px; }
.dash { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; }

.side { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.side-head { font: 650 9px var(--font-geist-mono), monospace; letter-spacing: 1.4px; color: #7d8c94; margin: 12px 10px 6px; }
.side-head:first-child { margin-top: 2px; }
.side a { padding: 10px 12px; border-radius: 5px; font-size: 13px; font-weight: 560; color: #4a5c66; transition: background .15s, color .15s; }
.side a:hover { background: #f1f5f7; color: var(--ink); }
.side a.on { background: var(--blue); color: #fff; font-weight: 700; }

.dash-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-head h1 { font-size: 27px; letter-spacing: -1px; margin: 9px 0 6px; }
.dash-head p { color: var(--muted); font-size: 14px; margin: 0; }

.card-box { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
.card-box + .card-box { margin-top: 0; }
.card-box h2 { font-size: 17px; margin: 0 0 6px; }
.card-box h3 { font-size: 15px; margin: 0 0 8px; }
.card-box > p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.card-box:last-child { margin-bottom: 0; }

.small { font-size: 12px; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 14px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Biểu mẫu */
.form-grid { display: grid; gap: 14px; max-width: 460px; }
.form-grid.wide { max-width: 100%; }
.form-grid label { display: block; font-size: 12px; font-weight: 650; color: #46585f; margin-bottom: 6px; }
.form-grid input[type=text], .form-grid input[type=email], .form-grid input[type=tel],
.form-grid input[type=password], .form-grid input[type=number], .form-grid input[type=search],
.form-grid select, .form-grid textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #cbd6db; border-radius: 4px; font-size: 14px; background: #fff;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid #9fcdf3; outline-offset: -1px; border-color: var(--blue); }
.form-grid textarea { min-height: 88px; resize: vertical; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #46585f; }
.check input { margin-top: 3px; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 5px 0 0; }
.err { color: #b8434a; font-size: 12px; margin: 5px 0 0; }

/* Bảng */
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th { text-align: left; font: 650 9px var(--font-geist-mono), monospace; letter-spacing: .8px; color: #7d8c94; background: #f8fafb; border-bottom: 1px solid var(--line); padding: 11px 13px; white-space: nowrap; }
.grid-table td { border-bottom: 1px solid #edf1f3; padding: 12px 13px; vertical-align: top; }
.grid-table tr:last-child td { border-bottom: 0; }
.grid-table small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.scroll-x { overflow-x: auto; }
.scroll-x .grid-table { min-width: 720px; }

/* Nhãn trạng thái */
.tag { display: inline-block; padding: 4px 9px; border-radius: 11px; font-size: 11px; font-weight: 700; background: #edf2f4; color: #52646d; }
.tag.ok { background: #e5f6ef; color: #15835c; }
.tag.warn { background: #fff0df; color: #c37024; }
.tag.bad { background: #f8e7e8; color: #b8434a; }
.tag.info { background: #e7f3fc; color: #0a63ba; }

/* Thẻ chỉ số */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.stat-row article { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 17px 19px; }
.stat-row strong { display: block; font-size: 25px; letter-spacing: -1px; }
.stat-row span { font: 650 8px var(--font-geist-mono), monospace; letter-spacing: 1px; color: #85949c; }

/* Khối mã / hướng dẫn */
.code-box { background: #0c1c28; color: #cfe0ea; border-radius: 5px; padding: 16px 18px; overflow-x: auto; }
.code-box pre { margin: 0; font: 12px/1.75 var(--font-geist-mono), monospace; }
.steps { display: grid; gap: 11px; padding-left: 1.25em; color: #4a5c66; font-size: 14px; line-height: 1.7; }
.steps li { list-style: decimal; }
code.inline { background: #eef3f6; border: 1px solid #dde6ea; border-radius: 3px; padding: 1px 6px; font-size: 12px; color: #17689e; }

/* Trang chính sách */
.policy-page { background: #fff; padding: 46px 0 80px; }
.policy { max-width: 760px; margin: auto; }
.policy h1 { font-size: 36px; letter-spacing: -1.6px; margin: 12px 0 8px; }
.policy .updated { color: var(--muted); font-size: 13px; margin-bottom: 30px; }
.policy h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -.4px; }
.policy p, .policy li { color: #46585f; font-size: 15px; line-height: 1.8; }
.policy p { margin: 0 0 13px; }
.policy ul { padding-left: 1.3em; margin: 0 0 13px; }
.policy li { list-style: disc; margin-bottom: 7px; }
.policy strong { color: var(--ink); }
.policy a { color: var(--blue); text-decoration: underline; }
.policy table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.policy th, .policy td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.policy th { background: #f8fafb; font-weight: 700; }

@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .side { position: static; flex-direction: row; flex-wrap: wrap; }
  .side-head { display: none; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; }
  .policy h1 { font-size: 28px; }
}

/* Footer có thêm cột Pháp lý */
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 2fr; gap: 24px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* Khối thông tin chuyển khoản */
.pay-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.pay-details { min-width: 0; }
.pay-qr { width: 232px; }
.pay-qr .vietqr-image { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; }
.pay-table th { width: 190px; vertical-align: top; }
.pay-table td { font-size: 14px; }
.pay-value { font: 700 16px var(--font-geist-mono), monospace; color: var(--ink); letter-spacing: .4px; user-select: all; }
.pay-code { color: var(--blue); }
.copy-btn {
  margin-left: 10px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
  color: var(--blue); background: #eef6fd; border: 1px solid #bcdcf7; border-radius: 3px;
}
.copy-btn:hover { background: #dcecfa; }
.copy-btn:disabled { color: var(--green); background: #e5f6ef; border-color: #b6e2d0; cursor: default; }
@media (max-width: 760px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-qr { width: 100%; max-width: 260px; margin: auto; }
  .pay-table th { width: auto; }
}