/* ===================================================
   CSS cho những gì Tailwind không làm được:
   wp_nav_menu output, ::after pseudo-elements, :hover dropdowns
   =================================================== */

/* --- Cuộn mượt khi bấm anchor link (vd #lap-la-so về form ở hero) --- */
html { scroll-behavior: smooth; }

/* --- Alpine: ẩn phần tử x-show trước khi Alpine khởi tạo --- */
[x-cloak] { display: none !important; }

/* --- Panel thông tin sao (output plugin) — skin thương hiệu wine/gold + Lora ---
   CSS nền tảng (vị trí, bottom-sheet/drawer, no-print) nằm trong plugin la-so.css;
   ở đây chỉ override màu/typography cho khớp thương hiệu. */
.tuvi-sao-panel__sheet { background: var(--color-cream); }
.tuvi-sao-panel__cta   { background: var(--color-cream); }
.tuvi-sao-panel__title {
    font-family: "Lora", Georgia, serif;
    color: var(--color-wine);
}
.tuvi-sao-panel__badge {
    background: var(--color-gold-pale);
    color: var(--color-gold-dark);
}
.tuvi-sao-panel__sec h4   { color: var(--color-gold-dark); }
.tuvi-sao-panel__btn--cung {
    color: var(--color-wine);
    border-color: var(--color-gold);
}
.tuvi-sao-panel__btn--cung:hover { background: var(--color-gold-pale); }
.tuvi-sao-panel__btn--all {
    background: var(--color-wine);
    border-color: var(--color-wine);
}
.tuvi-sao-panel__btn--all:hover { background: var(--color-wine-dark); }

/* --- prose-sao: style cho nội dung WYSIWYG/ACF trang single-sao --- */
.prose-sao > :first-child { margin-top: 0; }
.prose-sao > :last-child { margin-bottom: 0; }
.prose-sao p { margin: 0 0 0.85em; }
.prose-sao ul,
.prose-sao ol { margin: 0 0 0.85em; padding-left: 1.35em; }
.prose-sao ul { list-style: disc; }
.prose-sao ol { list-style: decimal; }
.prose-sao li { margin: 0.25em 0; }
.prose-sao strong,
.prose-sao b { font-weight: 700; color: #232a5c; } /* wine */
.prose-sao em,
.prose-sao i { font-style: italic; }
.prose-sao a { color: #c4922a; text-decoration: underline; } /* gold-dark */
.prose-sao a:hover { color: #232a5c; }
.prose-sao h2,
.prose-sao h3,
.prose-sao h4 {
    font-family: 'Lora', serif;
    font-weight: 700;
    color: #1a2150; /* wine-mid */
    margin: 1.1em 0 0.5em;
    line-height: 1.3;
}
.prose-sao blockquote {
    margin: 0 0 0.85em;
    padding: 0.5em 1em;
    border-left: 3px solid rgba(224, 176, 63, 0.5); /* gold/50 */
    background: #fdf9f4; /* cream */
    color: #57534e;
}

/* --- Header (site masthead) --- */
/* Lưu ý: KHÔNG đặt background-filter/transform/filter lên .tvtl-header —
   nó là cha của drawer/scrim mobile (position:fixed); những thuộc tính đó sẽ
   biến header thành containing block khiến fixed bị co lại. Nền+blur đặt ở
   .tvtl-header__bar (chỉ bọc thanh bar, KHÔNG bọc drawer). */
.tvtl-header__bar {
    background: linear-gradient(
        to bottom,
        #f4f4f4 0%,
        #fafafa 20%,
        #ffffff 100%
    );
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Sticky: nền bán trong suốt + blur để nội dung cuộn phía sau không lẫn chữ */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .tvtl-header__bar {
        background: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        backdrop-filter: blur(8px) saturate(140%);
    }
}

/* --- Desktop nav (wp_nav_menu output) --- */
.tvtl-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.tvtl-nav-list > li {
    position: relative;
}

.tvtl-nav-list > li > a {
    display: block;
    padding: 0.375rem 0;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
    font-family: 'Lora', Georgia, serif;
}

/* Gạch chân ngắn, bo tròn, căn giữa dưới chữ */
.tvtl-nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 22px;
    height: 2px;
    background: #e0b03f;
    border-radius: 999px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.tvtl-nav-list > li > a:hover { color: #e0b03f; }

.tvtl-nav-list > li > a:hover::after { transform: translateX(-50%) scaleX(1); }

.tvtl-nav-list > li.current-menu-item > a,
.tvtl-nav-list > li.current-menu-ancestor > a { color: #e0b03f; }

/* Dropdown */
.tvtl-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    background: #5e0c0f;
    border: 1px solid rgba(224, 176, 63, 0.25);
    border-top: 2px solid #e0b03f;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    z-index: 200;
    border-radius: 0 0 8px 8px;
}

.tvtl-nav-list > li:hover > .sub-menu { display: block; }

.tvtl-nav-list .sub-menu a {
    display: block;
    padding: 0.5rem 1.1rem;
    color: rgba(251, 230, 184, 0.85);
    text-decoration: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.2s, padding-left 0.2s;
}

.tvtl-nav-list .sub-menu a:hover {
    color: #e0b03f;
    padding-left: 1.4rem;
}

/* --- Mobile nav: accordion drawer (wp_nav_menu output) --- */
.tvtl-mobile-nav-list,
.tvtl-mobile-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hàng mỗi mục: link chiếm phần lớn + nút chevron (nếu có con) */
.tvtl-m-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(35, 42, 92, 0.1); /* wine @10% — nền drawer sáng */
}

.tvtl-m-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 48px; /* tap target ≥ 44px (Apple HIG) */
    padding: 0.5rem 0;
    color: #232a5c; /* wine */
    text-decoration: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.tvtl-m-link:hover,
.tvtl-m-link:active,
.tvtl-mobile-nav-list li.current-menu-item > .tvtl-m-row > .tvtl-m-link {
    color: #c4922a; /* gold-dark — tương phản tốt trên nền sáng */
}

/* Nút mở/đóng nhánh con */
.tvtl-m-toggle {
    flex: 0 0 auto;
    width: 48px;
    min-height: 48px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: rgba(35, 42, 92, 0.6);
    cursor: pointer;
}
.tvtl-m-toggle:hover { color: #c4922a; }

.tvtl-m-chevron {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.2s ease;
}
.tvtl-m-chevron.is-open { transform: rotate(180deg); }

/* Submenu: thụt lề + viền trái cho rõ phân cấp */
.tvtl-mobile-nav-list .sub-menu {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(224, 176, 63, 0.35);
}
.tvtl-mobile-nav-list .sub-menu .tvtl-m-link {
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(35, 42, 92, 0.75);
}

/* --- Footer bottom nav (wp_nav_menu output) --- */
.tvtl-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.tvtl-footer-menu a {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.78rem;
    color: rgba(35, 42, 92, 0.6); /* wine #232a5c @60% — nền footer sáng */
    text-decoration: none;
    transition: color 0.2s;
}

.tvtl-footer-menu a:hover { color: #232a5c; }

/* --- WP custom logo --- */
.custom-logo-link { display: inline-flex; flex: 0 0 auto; align-items: center; }
.custom-logo-link img { height: 40px; width: auto; }
@media (min-width: 640px) {
    .custom-logo-link img { height: 56px; }
}

/* --- Gold gradient text (dùng trong logo header/footer) --- */
.gold-grad-text {
    background: linear-gradient(180deg, #fbe7a6 0%, #e9bb4e 45%, #c4902a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ===================================================
   DESIGN SYSTEM — components dùng lại cho front-page redesign
   (mockup nền kem + navy/gold, phong cách thủy mặc)
   Dùng biến màu @theme (functions.php). Component class vì các
   pattern này lặp nhiều và cần pseudo-element / state.
   =================================================== */

/* --- Spacing section chuẩn --- */
.tvtl-section { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* --- Tiêu đề section: ◈ gold + 2 đường kẻ mảnh hai bên ---
   Markup:
   <div class="tvtl-heading">
       <span class="tvtl-heading__deco tvtl-heading__deco--l"></span>
       <h2 class="tvtl-heading__text">14 CHÍNH TINH</h2>
       <span class="tvtl-heading__deco tvtl-heading__deco--r"></span>
   </div> */
.tvtl-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.tvtl-heading__text {
    margin: 0;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.65rem);
    line-height: 1.2;
    color: var(--color-wine, #232a5c);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tvtl-heading__deco {
    position: relative;
    flex: 0 1 auto;
}

/* Đường kẻ gold giãn 2 bên — chỉ bật khi heading có modifier .tvtl-heading--deco */
.tvtl-heading--deco .tvtl-heading__deco {
    flex: 1 1 auto;
    height: 1px;
}

.tvtl-heading__deco--l { background: linear-gradient(to right, transparent, var(--color-gold, #e0b03f)); }
.tvtl-heading__deco--r { background: linear-gradient(to left, transparent, var(--color-gold, #e0b03f)); }

/* viên kim cương ◈ nằm ở đầu trong (sát chữ) của mỗi đường kẻ */
.tvtl-heading__deco::after {
    content: '◈';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    line-height: 1;
    color: var(--color-gold, #e0b03f);
}

.tvtl-heading__deco--l::after { right: -0.2rem; }
.tvtl-heading__deco--r::after { left: -0.2rem; }

/* phụ đề mảnh dưới tiêu đề (tùy chọn) */
.tvtl-heading__sub {
    margin: 0.6rem 0 0;
    text-align: center;
    color: #78716c;
    font-size: 0.9rem;
}

/* --- Khung panel có viền nối vào tiêu đề (kiểu legend) ---
   Markup:
   <div class="tvtl-framed">
       <div class="tvtl-heading"> ... </div>   ← nhô lên cạnh trên, che đường viền
       ... nội dung ...
   </div>
   Tiêu đề được đặt absolute giữa cạnh trên; nền tiêu đề trùng nền panel để
   "cắt" đường viền, tạo cảm giác viền nối liền vào tiêu đề. */
.tvtl-framed {
    position: relative;
    margin-top: 0.9rem;
    border: 1px solid rgba(224, 176, 63, 0.45);
    border-radius: 1.25rem;
    background: var(--color-cream, #fdf9f4);
    box-shadow: var(--shadow-card, 0 6px 22px -10px rgba(13, 18, 48, 0.22));
    padding: 2.75rem 1.25rem 2rem;
}
@media (min-width: 1024px) {
    .tvtl-framed {
        padding: 3.25rem 2.5rem 2.75rem;
    }
}
.tvtl-framed > .tvtl-heading {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 1.5rem);
    margin: 0;
    padding-inline: 1rem;
    background: var(--color-cream, #fdf9f4);
}

/* --- Select trong form: mũi tên tùy chỉnh, cách mép phải 1 khoảng --- */
.tvtl-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a8a29e' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    padding-right: 2rem;
}

/* --- Khung viền gold sang trọng (border.png, raster) ---
   border-image: 4 góc ornament giữ nguyên tỉ lệ, chỉ phần cạnh (đường line thẳng)
   stretch theo chiều dài.
   PNG intrinsic 264×264, vùng góc ~64px → slice 64. Slice lớn hơn border-image-width
   nên góc bị thu nhỏ (downscale) → giữ độ nét. Chỉnh slice nếu góc bị cắt/thừa.

   Quan trọng: nội dung form KHÔNG nằm sát viền — padding lớn tạo khoảng trống
   giữa viền ornament và form, cho cảm giác sang trọng cổ điển. */
.tvtl-luxury-frame {
    border-style: solid;
    border-width: 18px;
    border-image-source: url('/wp-content/uploads/2026/06/border.png');
    border-image-slice: 80;
    border-image-width: 18px;
    border-image-repeat: stretch;
    padding: 15px 0;
}
@media (min-width: 640px) {
    .tvtl-luxury-frame {
        border-width: 30px;
        border-image-width: 30px;
        padding: 1rem;
    }
}
/* Biến thể gọn cho sidebar: viền ornament + padding nhỏ lại để form không bị
   bóp chật trong cột hẹp (giữ nguyên hoa văn, chỉ thu kích thước). */
.tvtl-luxury-frame--compact {
    border-width: 12px;
    border-image-width: 12px;
    padding: 0.625rem 0.5rem;
}
@media (min-width: 640px) {
    .tvtl-luxury-frame--compact {
        border-width: 16px;
        border-image-width: 16px;
        padding: 0.75rem;
    }
}
/* --- Card chung --- */
.tvtl-card {
    background: #fff;
    border: 1px solid rgba(224, 176, 63, 0.18);
    border-radius: 0.9rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tvtl-card:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 176, 63, 0.45);
    box-shadow: 0 16px 34px -14px rgba(13, 18, 48, 0.30);
}

/* --- Buttons --- */
.tvtl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.tvtl-btn:active { transform: translateY(1px); }

/* gold đặc — CTA chính
   LƯU Ý: Tailwind v4 (CDN browser) chỉ phát biến @theme nào được dùng qua
   utility class. gold-light/gold không chắc luôn có → mỗi var() phải kèm
   fallback hex, nếu không cả khai báo background bị bỏ và nút mất màu. */
.tvtl-btn--gold {
    background: linear-gradient(180deg,
        var(--color-gold-light, #f6d97a) 0%,
        var(--color-gold, #e0b03f) 55%,
        var(--color-gold-dark, #c4922a) 100%);
    color: var(--color-wine-dark, #0d1230);
    box-shadow: 0 8px 20px -10px rgba(224, 176, 63, 0.8);
}
.tvtl-btn--gold:hover {
    filter: brightness(1.05);
    box-shadow: 0 12px 26px -10px rgba(224, 176, 63, 0.9);
}

/* viền — CTA phụ */
.tvtl-btn--outline {
    background: transparent;
    border-color: rgba(196, 146, 42, 0.55);
    color: var(--color-wine, #232a5c);
}
.tvtl-btn--outline:hover {
    border-color: var(--color-gold, #e0b03f);
    background: rgba(224, 176, 63, 0.08);
}

/* navy đặc — nút form / đăng nhập */
.tvtl-btn--navy {
    background: var(--color-wine, #232a5c);
    color: #fff;
}
.tvtl-btn--navy:hover { background: var(--color-wine-dark, #0d1230); }

/* ===================================================
   IN ẤN — trang xem tử vi (Cmd/Ctrl+P)  —  ĐÃ TẠM TẮT
   ---------------------------------------------------
   Toàn bộ khối @media print bên dưới đang được COMMENT OUT
   (vô hiệu hóa) theo yêu cầu. Khi in sẽ dùng style mặc định
   của trình duyệt, KHÔNG áp style in tùy biến.
   Muốn bật lại: bỏ cặp dấu mở "/*" ở ngay dưới và dấu đóng
   "*​/" ở cuối khối, rồi khôi phục các chú thích con thành
   /* ... */ 

/*
@media print {

    -- Khổ giấy A4 dọc, lề mỏng để lá số rộng tối đa
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    html,
    body {
        background: #fff !important;
    }

    -- 1. ẨN mọi thứ ngoài lá số
    --    Kỹ thuật visibility: ẩn toàn bộ cây DOM, chỉ bật lại
    --    #la-so-tu-vi. Nhờ vậy tự loại header/footer/sidebar,
    --    thanh tab, nút "Sao chép", nút "Luận giải", và mọi
    --    phần AI luận nằm ngoài lá số — kể cả khối thêm sau này.
    body * {
        visibility: hidden !important;
    }

    #la-so-tu-vi,
    #la-so-tu-vi * {
        visibility: visible !important;
    }

    -- Đưa lá số lên đầu, chiếm trọn chiều ngang trang giấy
    #la-so-tu-vi {
        position: absolute !important;
        inset: 0 auto auto 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    -- Ẩn hẳn (display:none) các thành phần điều khiển / chrome,
    -- phòng khi trình duyệt vẫn chừa chỗ trống cho phần visibility:hidden
    #masthead,
    #colophon,
    #secondary,
    .widget-area,
    .default-herder,
    .no-print,
    .bg-warning-500 {
        display: none !important;
    }

    -- 2. Lưới 4×4 giữ nguyên — chặn overflow-x can thiệp
    --    Reset min-width của wrapper cuộn ngang (mobile) về auto
    .overflow-x-auto,
    [class*="overflow-x"] {
        overflow: visible !important;
    }

    #la-so-tu-vi [class*="min-w"] {
        min-width: auto !important;
    }

    -- Cho phép các cột bên trong co lại để cả lá số gọn 1 trang
    #la-so-tu-vi [class*="min-h-40"] {
        min-height: 0 !important;
    }

    #la-so-tu-vi [class*="grid-rows-4"] {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(4, 1fr) !important;
        width: 100% !important;
        min-width: auto !important;
    }

    -- 3. ĐEN TRẮNG — nền cung trắng, viền đen 1px
    --    (Ảnh trống đồng & gradient là background-image, trình
    --    duyệt vốn không in — thêm rule cho chắc.)
    #la-so-tu-vi,
    #la-so-tu-vi [class*="bg-["],
    #la-so-tu-vi [style*="background"],
    #thien_ban,
    #thien_ban > div {
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    -- Mọi chữ về đen — bỏ màu ngũ hành để đỡ tốn mực
    #la-so-tu-vi * {
        color: #000 !important;
    }

    -- Viền lưới & từng cung: đen 1px rõ nét
    #la-so-tu-vi [class*="grid-rows-4"],
    #la-so-tu-vi [class*="grid-rows-4"] > div,
    #thien_ban > div,
    #la-so-tu-vi [class*="border-gray"] {
        border-color: #000 !important;
        border-width: 1px !important;
        border-style: solid !important;
    }

    -- Nhãn nền đặc (Thân / Tuần / Triệt) → viền đen + chữ đen
    #la-so-tu-vi [class*="bg-red-600"],
    #la-so-tu-vi [class*="bg-black"] {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }

    -- Độ sáng (Miếu/Vượng/Đắc): mất màu thì nhấn bằng IN ĐẬM
    #la-so-tu-vi [class*="font-bold"],
    #la-so-tu-vi [class*="font-semibold"] {
        font-weight: 700 !important;
    }

    -- 4. KHÔNG cắt cung giữa 2 trang
    #la-so-tu-vi,
    #la-so-tu-vi [class*="grid-rows-4"] > div,
    #thien_ban {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}
*/

/* ===================================================
   THÂN BÀI VIẾT — .tvtl-prose (single.php, content WYSIWYG)
   Kế thừa tinh thần .prose-sao nhưng đầy đủ hơn cho bài blog:
   ảnh, figure, heading phân cấp, bảng, code.
   =================================================== */
.tvtl-prose {
    color: #44403c; /* stone-700 */
    font-size: 1.0625rem;
    line-height: 1.8;
}
.tvtl-prose > :first-child { margin-top: 0; }
.tvtl-prose > :last-child { margin-bottom: 0; }
.tvtl-prose p { margin: 0 0 1.15em; }
.tvtl-prose a {
    color: #c4922a; /* gold-dark */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tvtl-prose a:hover { color: #232a5c; } /* wine */
.tvtl-prose strong,
.tvtl-prose b { font-weight: 700; color: #232a5c; }
.tvtl-prose em,
.tvtl-prose i { font-style: italic; }
.tvtl-prose h2,
.tvtl-prose h3,
.tvtl-prose h4 {
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    color: #1a2150; /* wine-mid */
    line-height: 1.3;
    scroll-margin-top: 5rem;
}
.tvtl-prose h2 { font-size: 1.5rem; margin: 1.6em 0 0.55em; }
.tvtl-prose h3 { font-size: 1.25rem; margin: 1.4em 0 0.5em; }
.tvtl-prose h4 { font-size: 1.08rem; margin: 1.3em 0 0.45em; }
/* viền gold mảnh dưới h2 cho nhịp đọc */
.tvtl-prose h2 {
    padding-bottom: 0.3em;
}
.tvtl-prose ul,
.tvtl-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.tvtl-prose ul { list-style: disc; }
.tvtl-prose ol { list-style: decimal; }
.tvtl-prose li { margin: 0.35em 0; }
.tvtl-prose li::marker { color: #c4922a; }
.tvtl-prose blockquote {
    margin: 1.3em 0;
    padding: 0.75em 1.15em;
    border-left: 3px solid rgba(224, 176, 63, 0.6);
    background: #fdf9f4; /* cream */
    color: #57534e;
    font-style: italic;
    border-radius: 0 0.5rem 0.5rem 0;
}
.tvtl-prose img,
.tvtl-prose figure { margin: 1.5em 0; }
.tvtl-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-card, 0 6px 22px -10px rgba(13, 18, 48, 0.22));
}
.tvtl-prose figcaption {
    margin-top: 0.5em;
    text-align: center;
    font-size: 0.85rem;
    color: #78716c;
    font-style: italic;
}
.tvtl-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95rem;
}
.tvtl-prose th,
.tvtl-prose td {
    border: 1px solid rgba(224, 176, 63, 0.3);
    padding: 0.6em 0.8em;
    text-align: left;
}
.tvtl-prose th { background: #fdf9f4; color: #232a5c; font-weight: 700; }
.tvtl-prose code {
    background: #f5f5f4;
    padding: 0.15em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.9em;
}
.tvtl-prose pre {
    background: #0d1230; /* wine-dark */
    color: #f6d97a;
    padding: 1em 1.15em;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1.5em 0;
}
.tvtl-prose pre code { background: transparent; padding: 0; color: inherit; }

/* ===================================================
   PHÂN TRANG — the_posts_pagination() (.page-numbers)
   =================================================== */
.tvtl-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}
.tvtl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.65rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(224, 176, 63, 0.3);
    background: #fff;
    color: #232a5c; /* wine */
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tvtl-pagination .page-numbers:hover {
    border-color: var(--color-gold, #e0b03f);
    background: rgba(224, 176, 63, 0.1);
}
.tvtl-pagination .page-numbers.current {
    background: var(--color-wine, #232a5c);
    border-color: var(--color-wine, #232a5c);
    color: #fff;
}
.tvtl-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Trang kết quả lá số: ẩn tiêu đề "Tổng quan lá số của {name}" do plugin
   xuất ra (.overview_title) vì template đã có H1 cùng nội dung ở đầu trang. */
.page-template-page-lasotuvi-php .overview_title,
.page-template-page-lasotuvi .overview_title {
    display: none;
}

/* Ẩn button "Luận giải toàn bộ - 219k" (plugin xuất ra, nằm liền sau
   .overview_title ở đầu lá số). */
.page-template-page-lasotuvi-php .overview_title + button,
.page-template-page-lasotuvi .overview_title + button {
    display: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Bản luận giải toàn bộ — render giàu từ schema AI (tuvitailoc_lg_render_schema).
   Chips cách cục · 4 mục có icon · timeline đại hạn · callout lưu ý.
   Dùng biến màu thương hiệu kèm fallback hex (Tailwind v4 @theme).
   ─────────────────────────────────────────────────────────────────────────── */
.tvtl-lg { color: var(--color-wine-dark, #0d1230); }
.tvtl-lg p { margin: 0; }

/* Cách cục — chips gold */
.tvtl-lg-chips {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
    margin: 0 0 0.25rem;
}
.tvtl-lg-chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.875rem; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--color-wine, #232a5c);
    background: linear-gradient(135deg, var(--color-gold-pale, #fbe6b8), #ffffff);
    border: 1px solid rgba(196, 146, 42, 0.5);
    box-shadow: 0 2px 6px -3px rgba(196, 146, 42, 0.6);
}
.tvtl-lg-chip::before { content: "✦"; color: var(--color-gold-dark, #c4922a); }

/* Mục (section) */
.tvtl-lg-sec { margin-top: 1.875rem; }
.tvtl-lg-sec:first-of-type { margin-top: 1.5rem; }
.tvtl-lg-sechead {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.tvtl-lg-ico {
    flex: 0 0 2.375rem; width: 2.375rem; height: 2.375rem;
    display: grid; place-items: center; border-radius: 0.7rem;
    color: var(--color-gold-dark, #c4922a);
    background: rgba(224, 176, 63, 0.14);
    border: 1px solid rgba(224, 176, 63, 0.4);
}
.tvtl-lg-ico svg { width: 1.25rem; height: 1.25rem; }
.tvtl-lg-sectitle {
    font-size: 1.1875rem; font-weight: 700;
    color: var(--color-gold-dark, #c4922a);
}
.tvtl-lg-p {
    margin-bottom: 0.75rem; line-height: 1.75; text-align: justify;
    color: var(--color-wine-dark, #0d1230);
}
.tvtl-lg-p:last-child { margin-bottom: 0; }

/* Đại hạn — timeline dọc */
.tvtl-lg-timeline {
    margin-top: 0.875rem; padding-left: 1.375rem;
    border-left: 2px solid rgba(224, 176, 63, 0.4);
    display: flex; flex-direction: column; gap: 1.125rem;
}
.tvtl-lg-tl-item { position: relative; }
.tvtl-lg-tl-item::before {
    content: ""; position: absolute; left: -1.875rem; top: 0.2rem;
    width: 0.875rem; height: 0.875rem; border-radius: 50%;
    background: var(--color-gold, #e0b03f);
    box-shadow: 0 0 0 4px var(--color-cream, #fdf9f4), 0 0 0 5px rgba(224, 176, 63, 0.4);
}
.tvtl-lg-tl-top {
    display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap;
    margin-bottom: 0.3125rem;
}
.tvtl-lg-tl-age {
    padding: 0.1875rem 0.75rem; border-radius: 0.5rem;
    font-size: 0.8125rem; font-weight: 700;
    color: var(--color-gold-light, #f6d97a);
    background: var(--color-wine, #232a5c);
}
.tvtl-lg-tl-cung {
    font-size: 0.875rem; font-weight: 600; color: var(--color-wine, #232a5c);
}
.tvtl-lg-tl-luan {
    font-size: 0.9rem; line-height: 1.7; text-align: justify;
    color: var(--color-wine-dark, #0d1230);
}

/* Lưu ý — callout */
.tvtl-lg-luuy {
    margin-top: 2rem; padding: 1.25rem 1.375rem; border-radius: 0.875rem;
    background: linear-gradient(135deg, rgba(35, 42, 92, 0.06), rgba(224, 176, 63, 0.08));
    border: 1px solid rgba(224, 176, 63, 0.4);
}
.tvtl-lg-luuy-title {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
    font-size: 1rem; font-weight: 700; color: var(--color-wine, #232a5c);
}
.tvtl-lg-luuy-title .tvtl-lg-ico {
    flex-basis: 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
}
.tvtl-lg-luuy-title .tvtl-lg-ico svg { width: 1rem; height: 1rem; }
.tvtl-lg-luuy p {
    font-size: 0.9rem; line-height: 1.7; font-style: italic; text-align: justify;
    color: var(--color-wine-dark, #0d1230);
}

/* --- Swiper (slider) — tông gold/navy thương hiệu --- */
:root { --swiper-theme-color: var(--color-gold, #e0b03f); }

/* Nút điều hướng prev/next — đồng bộ thẻ .tvtl-card (viền gold mảnh, đổ bóng nhẹ) */
.tvtl-swiper-nav {
    position: absolute;
    top: calc(50% - 1.25rem); /* trừ khoảng pb-10 của hàng dot */
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--color-wine, #232a5c);
    border: 1px solid rgba(224, 176, 63, 0.35);
    box-shadow: 0 10px 26px -12px rgba(13, 18, 48, 0.45);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease,
        border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.tvtl-swiper-nav svg { transition: transform 0.2s ease; }
.tvtl-swiper-nav:hover {
    background: var(--color-wine, #232a5c);
    color: var(--color-gold-light, #f6d97a);
    border-color: var(--color-gold, #e0b03f);
    box-shadow: 0 14px 30px -12px rgba(13, 18, 48, 0.55);
}
.tvtl-swiper-nav--prev { left: -0.5rem; }
.tvtl-swiper-nav--next { right: -0.5rem; }
.tvtl-swiper-nav--prev:hover svg { transform: translateX(-2px); }
.tvtl-swiper-nav--next:hover svg { transform: translateX(2px); }
@media (min-width: 1024px) {
    .tvtl-swiper-nav--prev { left: -1.35rem; }
    .tvtl-swiper-nav--next { right: -1.35rem; }
}
/* Swiper tự thêm class này khi tới đầu/cuối (loop tắt) */
.tvtl-swiper-nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Pagination — dot navy mờ; dot active kéo dài thành thanh gradient gold */
.swiper-pagination-bullets { bottom: 0 !important; }
.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 4px !important;
    background: var(--color-wine, #232a5c);
    opacity: 0.22;
    border-radius: 9999px;
    transition: width 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.swiper-pagination-bullet:hover { opacity: 0.5; }
.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover {
    width: 24px;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--color-gold-light, #f6d97a) 0%,
        var(--color-gold, #e0b03f) 55%,
        var(--color-gold-dark, #c4922a) 100%);
    box-shadow: 0 2px 8px -2px rgba(224, 176, 63, 0.6);
}