/**
 * Lá số Tử Vi — bổ sung các class không có trong Tailwind mặc định.
 * Template `templates/la-so.php` dùng một số class theo bảng màu riêng
 * (error / success / warning / primary, font-inter-serif). Định nghĩa ở đây
 * để hiển thị đúng kể cả khi không có bản Tailwind build sẵn các màu này.
 *
 * Giá trị màu chọn trùng với hệ ngũ hành đang dùng trong chart:
 *   Hỏa = đỏ (error)   Mộc = xanh lá (success)   Thổ = vàng (warning)
 */

/* ── Bảng màu ── */
.text-error-500   { color: #ef4444; }            /* đỏ — Hỏa / nhãn chú thích */
.text-success-500 { color: #16a34a; }            /* xanh lá — Mộc */
.text-warning-500 { color: #eab308; }            /* vàng — Thổ */
.text-primary-red { color: #dc2626; }            /* đỏ đậm — Lưu Tiểu Hạn */

.bg-error-500     { background-color: #ef4444; } /* Hỏa */
.bg-success-500   { background-color: #16a34a; } /* Mộc */
.bg-warning-500   { background-color: #eab308; } /* Thổ */

/* first-letter:text-error-500 — tô đỏ chữ cái viết tắt đầu (M/V/Đ/B/H) */
.first-letter\:text-error-500::first-letter { color: #ef4444; }

/* ── Font ── */
.font-inter-serif {
    font-family: "Be Vietnam Pro", "Inter", ui-serif, Georgia, serif;
}

/* ── Responsive mobile ──
 * Trên mobile giữ lá số ở bề rộng gốc 800px và scale từ góc trái-trên.
 * transform: scale() do la-so-scale.js đặt; transform-origin: left top
 * giúp mép trái không bị đẩy ra ngoài màn hình khi thu nhỏ.
 */
@media (max-width: 640px) {
    #la-so-tu-vi {
        transform-origin: left top;
        width: 800px;
    }
}

/* ── Tùy chỉnh lá số ───────────────────────────────────────────────────────
 * Các lớp thông tin phụ (sao lưu đại vận, lưu tứ đức, tứ hóa phái) luôn được
 * render vào DOM nhưng ẩn mặc định — giống tuvi.vn, người xem tự bật.
 * assets/js/la-so-options.js gắn class .tv-on-<key> lên khối .tv-laso.
 */
.tv-opt { display: none !important; }

.tv-laso.tv-on-dv    .tv-dv,
.tv-laso.tv-on-tuduc .tv-tuduc,
.tv-laso.tv-on-thp   .tv-thp { display: block !important; }

/* Bảng tuỳ chỉnh (nằm ở cột phải của lá số) */
.tv-tuychinh summary::marker { color: #9ca3af; }

/* Cung chiếu: cung đang trỏ, tam hợp, xung chiếu */
.cung-cell.tv-chieu-goc  { background-color: rgba(220, 38, 38, .10); }
.cung-cell.tv-chieu-tam  { background-color: rgba(22, 163, 74, .10); }
.cung-cell.tv-chieu-xung { background-color: rgba(37, 99, 235, .10); }

/* Bảng chi tiết cung khi click */
.tv-cung-panel {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #fff;
    font-size: .85rem;
}
.tv-cung-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid #f3f4f6;
}
.tv-cung-panel-close {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: #6b7280;
}
.tv-cung-panel-body { padding: .5rem .75rem; }
.tv-cung-panel-body p { margin: 0 0 .25rem; }
.tv-cung-nhan { font-weight: 600; color: #374151; }