/**
 * 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;
    }
}

/* ── Sao có thể bấm để xem chi tiết ── */
.tuvi-sao-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: opacity .15s ease;
}
.tuvi-sao-link:hover,
.tuvi-sao-link:focus-visible {
    opacity: .7;
    outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Panel thông tin sao — CSS nền tảng (vị trí, chuyển động, no-print).
 * Màu sắc / typography thương hiệu do THEME override (xem main.css của theme).
 * Mobile = bottom sheet; ≥768px = drawer trượt từ phải.
 * ────────────────────────────────────────────────────────────────────────── */
.tuvi-sao-panel {
    position: fixed;
    /* Neo từ TOP + cao đúng viewport đang nhìn thấy (dvh). Không dùng inset:0
       vì trên mobile bottom:0 của fixed neo vào đáy layout viewport → bị thanh
       công cụ trình duyệt che, kéo theo đáy sheet (nội dung + CTA) bị giấu và
       không cuộn tới được. */
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 2147483600;
}
.tuvi-sao-panel[hidden] { display: none; }

.tuvi-sao-panel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 18, 48, .45);
    opacity: 0;
    transition: opacity .25s ease;
}
.tuvi-sao-panel.is-open .tuvi-sao-panel__overlay { opacity: 1; }

.tuvi-sao-panel__sheet {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: #fffcf5;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
    /* Mobile: dán đáy, cao tối đa 80% màn hình */
    left: 0;
    right: 0;
    bottom: 0;
    /* dvh = viewport thực đang nhìn thấy (trừ thanh công cụ trình duyệt mobile).
       Dùng vh làm fallback cho trình duyệt cũ. Nếu để 80vh, trên mobile sheet
       cao hơn vùng nhìn → nội dung + CTA bị giấu sau thanh công cụ và scroll
       trong không kích hoạt. */
    max-height: 80vh;
    max-height: 80dvh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.tuvi-sao-panel.is-open .tuvi-sao-panel__sheet { transform: translateY(0); }

@media (min-width: 768px) {
    .tuvi-sao-panel__sheet {
        left: auto;
        top: 0;
        bottom: 0;
        right: 0;
        width: 420px;
        max-width: 90vw;
        max-height: none;
        border-radius: 0;
        box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
        transform: translateX(100%);
    }
    .tuvi-sao-panel.is-open .tuvi-sao-panel__sheet { transform: translateX(0); }

    /* Chừa chỗ cho thanh admin bar WordPress (drawer cao full màn hình) */
    body.admin-bar .tuvi-sao-panel__sheet { top: 32px; }
}
@media (min-width: 768px) and (max-width: 960px) {
    body.admin-bar .tuvi-sao-panel__sheet { top: 46px; }
}

.tuvi-sao-panel__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: #4b5563;
    background: rgba(0, 0, 0, .06);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
    padding: 6px;
}
.tuvi-sao-panel__close:hover { color: #111827; background: rgba(0, 0, 0, .12); }

.tuvi-sao-panel__scroll {
    flex: 1 1 auto;   /* lấp đầy không gian → đẩy phần CTA xuống đáy dù nội dung ngắn */
    min-height: 0;    /* cho phép co lại & cuộn trong flex column */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* không "xì" scroll ra nền sau khi chạm mép */
    touch-action: pan-y;           /* cho phép cuộn dọc bằng chạm trên mobile */
    padding: 20px 20px 8px;
}

.tuvi-sao-panel__head { padding-right: 36px; margin-bottom: 12px; }
.tuvi-sao-panel__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #232a5c;
    margin: 0 0 8px;
}
.tuvi-sao-panel__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tuvi-sao-panel__badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3e7c6;
    color: #8a6b14;
}
.tuvi-sao-panel__badge[hidden] { display: none; }
/* Màu badge theo ngũ hành (gắn qua JS từ data.ngu_hanh) */
.tuvi-sao-panel__badge--kim  { background: #e9eef2; color: #5b6b7a; } /* Kim — kim loại */
.tuvi-sao-panel__badge--moc  { background: #e3f4e4; color: #2f7a37; } /* Mộc — xanh lá */
.tuvi-sao-panel__badge--thuy { background: #e4edf6; color: #2b5c8a; } /* Thủy — xanh nước */
.tuvi-sao-panel__badge--hoa  { background: #fae3e1; color: #b23a2e; } /* Hỏa — đỏ */
.tuvi-sao-panel__badge--tho  { background: #f6ecd2; color: #8a6b14; } /* Thổ — vàng đất */
.tuvi-sao-panel__chom {
    margin: 8px 0 0;
    font-size: .85rem;
    font-style: italic;
    color: #6b7280;
}
.tuvi-sao-panel__chom[hidden] { display: none; }

.tuvi-sao-panel__state { padding: 24px 0; color: #9ca3af; font-size: .9rem; text-align: center; }
.tuvi-sao-panel__state[hidden] { display: none; }
.tuvi-sao-panel__content[hidden] { display: none; }

.tuvi-sao-panel__sec { margin-top: 16px; }
.tuvi-sao-panel__sec[hidden] { display: none; }
.tuvi-sao-panel__sec h4 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #c4922a;
    margin: 0 0 4px;
}
.tuvi-sao-panel__sec p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: #374151;
}

.tuvi-sao-panel__cta {
    flex: 0 0 auto;   /* luôn dính đáy, không co theo nội dung */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #fffcf5;
}
.tuvi-sao-panel__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}
.tuvi-sao-panel__btn strong { font-weight: 800; }
.tuvi-sao-panel__btn--cung {
    color: #232a5c;
    background: transparent;
    border: 1px solid #c4922a;
}
.tuvi-sao-panel__btn--cung:hover { background: #f6e6b8; }
.tuvi-sao-panel__btn--all {
    color: #fff;
    background: #232a5c;
    border: 1px solid #232a5c;
}
.tuvi-sao-panel__btn--all:hover { background: #0d1230; }

@media print {
    .tuvi-sao-panel { display: none !important; }
}