body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f0f2f5; color: #1c1e21; margin: 0; line-height: 1.6; }
.container { max-width: 1000px; margin: 2rem auto; padding: 2rem; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.navbar { background-color: #fff; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dddfe2; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.navbar .brand { font-weight: bold; font-size: 1.5rem; color: #0056b3; text-decoration: none; }
.navbar ul { list-style: none; margin: 0; padding: 0; display: flex; }
.navbar ul li a { display: block; padding: 1rem; text-decoration: none; color: #606770; font-weight: 500; }
.navbar ul li a:hover { background-color: #f0f2f5; }
.site-footer { text-align: center; padding: 1.5rem; color: #606770; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: 600; }
.form-group input, .form-group select { width: 100%; padding: .75rem; border: 1px solid #dddfe2; border-radius: 6px; box-sizing: border-box; }
button { display: inline-block; background-color: #007bff; color: white; border: none; padding: .75rem 1.5rem; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; }
button:hover { background-color: #0056b3; }
.error { color: #d92b2b; background-color: #ffdfe0; border: 1px solid #ffb8bb; padding: .75rem; border-radius: 6px; }
.success { color: #0f5132; background-color: #d1e7dd; border: 1px solid #badbcc; padding: .75rem; border-radius: 6px; }
.service-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.service-table th, .service-table td { padding: .9rem; border: 1px solid #dddfe2; text-align: left; }
.service-table thead th { background-color: #f5f6f7; }
.price { font-weight: 600; color: #d92b2b; }
code { background-color: #eef; padding: 3px 6px; border-radius: 4px; }

/* CSS mới cho Lịch sử Giao dịch */
.status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    text-align: center;
}
.status-completed { background-color: #28a745; } /* Xanh lá */
.status-failed { background-color: #dc3545; } /* Đỏ */
.status-deposit { background-color: #007bff; } /* Xanh dương */
.status-other { background-color: #6c757d; } /* Xám */

.amount-positive { color: #28a745; font-weight: bold; }
.amount-negative { color: #dc3545; }
.amount-neutral { color: #6c757d; }