/*
Theme Name: TVSK Theme
Theme URI: https://tvsk-lite.local
Author: TVSK
Description: Custom theme for TVSK website. Tailwind v4 standalone (không cần Node).
Version: 0.1.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tvsk
*/

.kk-star-ratings .kksr-legend {
    font-size: 15px !important;
}

/* Tools widget ([tvsk_tools_widget]): mobile gọn / desktop đầy đủ.
   Plugin render cả 2 block; CSS này quyết định block nào hiển thị theo breakpoint. */
.tools-mobile-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.tools-desktop-row {
    display: none;
}

@media (min-width: 768px) {
    .tools-mobile-row {
        display: none;
    }

    .tools-desktop-row {
        display: block;
    }
}

/* Sidebar lá số: đường kẻ ngang tiêu đề các widget (Công cụ, danh sách đại vận, TOC...). */
.tvsk-laso-sidebar .border-t {
    border-top-color: #e8e8e8 !important;
}

/* Box "Đơn hàng" ([tvsk_order_info]) hardcode bg-white — bỏ nền để ăn theo sidebar (ivory/slate). */
.tvsk-laso-sidebar .bg-white {
    background-color: transparent !important;
}

/* Sidebar lá số — dark mode: widget plugin hardcode chữ xám đậm + border sáng (không có dark:),
   nên cần làm sáng chữ và dịu đường kẻ trên nền tối. */
[data-theme="dark"] .tvsk-laso-sidebar .text-gray-900 {
    color: #f1f5f9 !important;   /* tiêu đề widget: Công cụ, Các đại vận... */
}
[data-theme="dark"] .tvsk-laso-sidebar .text-gray-800 {
    color: #e2e8f0 !important;   /* link TOC cấp h3 */
}
[data-theme="dark"] .tvsk-laso-sidebar .text-gray-700 {
    color: #cbd5e1 !important;   /* item danh sách (chưa active) */
}
[data-theme="dark"] .tvsk-laso-sidebar .text-gray-600 {
    color: #cbd5e1 !important;   /* nhãn "Mã đơn hàng:", "Tình trạng:" */
}
[data-theme="dark"] .tvsk-laso-sidebar .text-gray-500 {
    color: #94a3b8 !important;   /* chú thích nút (Sửa/Tải/Share) */
}
[data-theme="dark"] .tvsk-laso-sidebar .border-t {
    border-top-color: #334155 !important;   /* divider dịu thay cho #e8e8e8 chói */
}
[data-theme="dark"] .tvsk-laso-sidebar .border-gray-100 {
    border-color: rgba(148, 163, 184, 0.18) !important;   /* kẻ giữa các item trong danh sách đại vận */
}

/* Danh sách đại vận: remap biến màu indigo của Tailwind sang jade (màu nhận diện UI kit)
   trong phạm vi widget. Đổi GIÁ TRỊ biến mà utility đọc (var(--color-indigo-*)) nên
   thắng cả utility !important — không cần đấu specificity/layer.
   indigo-500 (border trái) = indigo-700 (chữ) → border cùng màu text. */
.tvsk-laso-sidebar .daivan-list-widget {
    --color-indigo-50: #d6ecf0;   /* nền active/hover */
    --color-indigo-500: #206864;  /* border trái active */
    --color-indigo-700: #206864;  /* chữ active */
}
[data-theme="dark"] .tvsk-laso-sidebar .daivan-list-widget {
    --color-indigo-50: rgba(76, 179, 168, 0.16);
    --color-indigo-500: #4cb3a8;
    --color-indigo-700: #4cb3a8;
}

/* TOC desktop ([tvsk_toc_widget]): biến thành panel ivory/slate + 4 góc atlas giống box sidebar.
   Chỉ bật nền + góc khi TOC đã build (#luan-giai-toc nhận class .block từ JS) để không hiện hộp rỗng. */
.tvsk-laso-toc .tvsk-toc-corners {
    display: none;
}
.tvsk-laso-toc:has(#luan-giai-toc.block) {
    background-color: var(--color-ivory);
    padding: 1.25rem;   /* = p-5 như box sidebar */
}
[data-theme="dark"] .tvsk-laso-toc:has(#luan-giai-toc.block) {
    background-color: #1e293b;   /* slate-800 */
}
.tvsk-laso-toc:has(#luan-giai-toc.block) .tvsk-toc-corners {
    display: block;
}
/* Card gốc của widget: bỏ nền/đổ bóng/viền/bo/padding/sticky để ăn vào panel ngoài. */
.tvsk-laso-toc #luan-giai-toc {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ảnh lá số (SVG) giãn vừa khít cột nội dung mới, có cap để không quá khổ.
   Ảnh gốc 780px; cap 880px ≈ vùng nội dung cột chính (trừ p-5). */
.tvsk-laso-main #laso-image {
    width: 100%;
    max-width: 880px;
}

/* Overlay loading khi bấm toggle xoay trục (gốc ↔ đại vận). Phủ lên #laso-image
   trong lúc fetch SVG mới. Bật/tắt bằng JS qua .is-active (xem page-1627.php). */
.laso-chart-container .tvsk-laso-loading {
    position: absolute;
    inset: 0;
    z-index: 20;                 /* trên #laso-image (z-index:10) */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;          /* khớp bo góc ảnh */
    background: rgba(255, 251, 240, 0.78);
    backdrop-filter: blur(1px);
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}
.laso-chart-container .tvsk-laso-loading.is-active {
    display: flex;
}
[data-theme="dark"] .laso-chart-container .tvsk-laso-loading {
    background: rgba(15, 23, 42, 0.78);
    color: #cbd5e1;
}
.laso-chart-container .tvsk-laso-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(75, 85, 99, 0.25);
    border-top-color: #4b5563;
    animation: tvsk-laso-spin 0.7s linear infinite;
}
[data-theme="dark"] .laso-chart-container .tvsk-laso-spinner {
    border-color: rgba(203, 213, 225, 0.25);
    border-top-color: #cbd5e1;
}
@keyframes tvsk-laso-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .laso-chart-container .tvsk-laso-spinner { animation-duration: 1.5s; }
}

/* Cách cục / phá cách ([tvsk_cachcuc]): widget hardcode `bg-white` không hợp nền card.
   Bỏ nền trắng (ăn theo bg-ivory / slate-800) + làm sáng chữ xám ở dark mode.
   Scope qua :has(.cach-cuc-item) để không đụng nút toggle / ảnh lá số (cũng dùng bg-white). */
.tvsk-laso-main .bg-white:has(.cach-cuc-item) {
    background-color: transparent !important;
}
[data-theme="dark"] .tvsk-laso-main .bg-white:has(.cach-cuc-item) .text-gray-900 {
    color: #f1f5f9 !important;   /* tiêu đề "TỔNG QUÁT CÁCH CỤC" */
}
[data-theme="dark"] .tvsk-laso-main .bg-white:has(.cach-cuc-item) .text-gray-700 {
    color: #cbd5e1 !important;   /* mô tả cách cục */
}

/* CTA thanh toán "Gói Luận Giải Đại Vận" (payment-cta) — dark mode.
   Container nhận diện qua .bg-indigo-50.border-indigo-200 trong cột nội dung.
   Nút "Thanh toán" (bg-indigo-600 text-white) + checkmark giữ nguyên (đã hợp dark). */
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 {
    background-color: rgba(99, 102, 241, 0.10) !important;   /* panel indigo trầm */
    border-color: rgba(129, 140, 248, 0.35) !important;
    color: #e2e8f0 !important;   /* chữ mặc định (heading không set màu) */
}
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-gray-900,
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-gray-800 {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-gray-700,
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-gray-600 {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-indigo-600,
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-indigo-800 {
    color: #a5b4fc !important;   /* accent/tiêu đề/giá indigo — sáng hơn để nổi trên nền tối */
}
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .text-blue-600 {
    color: #60a5fa !important;
}
[data-theme="dark"] .tvsk-laso-main .bg-indigo-50.border-indigo-200 .border-gray-200 {
    border-color: rgba(148, 163, 184, 0.25) !important;   /* các divider trong box */
}

/* Luận giải miễn phí ([tvsk_luangiai_free]) — dark mode.
   Container = .luangiai-free-container (bg-gray-100). Nút "thanh toán" cam giữ nguyên. */
[data-theme="dark"] .tvsk-laso-main .luangiai-free-container {
    background-color: rgba(255, 255, 255, 0.04) !important;   /* panel nhạt trên nền slate */
    color: #e2e8f0 !important;
}
[data-theme="dark"] .tvsk-laso-main .luangiai-free-container .text-gray-800 {
    color: #e2e8f0 !important;   /* sao / cung in đậm */
}
[data-theme="dark"] .tvsk-laso-main .luangiai-free-container .text-gray-700 {
    color: #cbd5e1 !important;   /* nội dung luận giải */
}
[data-theme="dark"] .tvsk-laso-main .luangiai-free-container .text-gray-600 {
    color: #94a3b8 !important;   /* tiêu đề cung, tên sách */
}
[data-theme="dark"] .tvsk-laso-main .luangiai-free-container .text-blue-600 {
    color: #60a5fa !important;   /* dòng thông báo bản free */
}
[data-theme="dark"] .tvsk-laso-main .luangiai-free-container .border-gray-200 {
    border-color: rgba(148, 163, 184, 0.2) !important;   /* hr + kẻ dashed giữa nhóm */
}

/* Luận giải miễn phí — mobile: bỏ nền + padding để liền mạch với card .tvsk-laso-main.
   Áp cho cả light/dark. Selector dark phải lặp [data-theme="dark"] để đủ specificity
   thắng rule dark ở trên (0,3,0) — nếu không vùng rgba(255,255,255,0.04) vẫn hiện trên mobile. */
@media (max-width: 767px) {
    .tvsk-laso-main .luangiai-free-container,
    [data-theme="dark"] .tvsk-laso-main .luangiai-free-container {
        background-color: transparent !important;
        padding: 0 !important;
    }
}

/* Luận giải đại vận trả phí ([tvsk_dai_van]) — dark mode. Scope: #luan-giai-content.
   Remap biến nền (-50/white) để các box (kể cả md:bg-*) tự thành tint trầm; chữ làm sáng. */
[data-theme="dark"] .tvsk-laso-main #luan-giai-content {
    color: #cbd5e1;
    --color-white: transparent;                    /* box highlight bg-white (mobile) */
    --color-slate-50: rgba(255, 255, 255, 0.04);   /* panel "Tổng quan đương số" */
    --color-red-50: rgba(248, 113, 113, 0.10);
    --color-green-50: rgba(74, 222, 128, 0.10);
    --color-yellow-50: rgba(250, 204, 21, 0.10);
    --color-teal-50: rgba(45, 212, 191, 0.10);
}
/* Chữ xám → sáng */
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-gray-900 { color: #f1f5f9 !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-gray-800 { color: #e2e8f0 !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-gray-700 { color: #cbd5e1 !important; }
/* Tiêu đề section màu đậm → sáng để nổi trên nền tối */
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-blue-500,
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-blue-600,
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-blue-800 { color: #93c5fd !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-indigo-800 { color: #a5b4fc !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-amber-700,
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-amber-800 { color: #fcd34d !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-teal-800 { color: #5eead4 !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-green-600 { color: #4ade80 !important; }
/* Chữ trong box điểm nhấn (rủi ro/cơ hội/giằng co) — badge dùng *-800 nên không đụng */
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-red-700 { color: #fca5a5 !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-green-700 { color: #86efac !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .text-yellow-700 { color: #fde68a !important; }
[data-theme="dark"] .tvsk-laso-main #luan-giai-content .format-html-content.text-yellow-800 { color: #fde68a !important; }

/* Mobile TOC của plugin ([tvsk_toc_widget] generateLuanGiaiTOC) — dark mode.
   Plugin tô item bằng INLINE style (không dùng class .active như single.php) nên CSS dark
   của theme bị inline đè. Nhắm đúng link có inline color của plugin để không đụng single.php. */
body[data-theme="dark"] .mobile-toc-content a[style*="rgb(55, 65, 81)"] {
    color: #d6d3d1 !important;                              /* item thường: #374151 → sáng */
}
body[data-theme="dark"] .mobile-toc-content a[style*="rgb(37, 99, 235)"] {
    color: #93c5fd !important;                              /* item active: #2563eb → xanh sáng */
    background-color: rgba(96, 165, 250, 0.14) !important;  /* thay nền #eff6ff sáng */
}
body[data-theme="dark"] .mobile-toc-content li {
    background-color: transparent !important;              /* bỏ pill bg-gray-50/50 ở item h4 */
}
body[data-theme="dark"] .mobile-toc-content a {
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;   /* kẻ giữa item dịu lại */
}

/* Luận giải đại vận: khôi phục hiển thị danh sách cho ul/ol/li trong HTML từ API
   (Tailwind preflight reset bỏ bullet + padding). Áp cho cả light/dark. */
.tvsk-laso-main #luan-giai-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}
.tvsk-laso-main #luan-giai-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}
.tvsk-laso-main #luan-giai-content li {
    display: list-item;
    margin-bottom: 0.35rem;
}