/**
 * BÓI BÀI LENORMAND — giao diện
 *
 * File này CHỈ bổ sung phần riêng của Lenormand. Toàn bộ khung sườn
 * (.tarot-step, .step-title, .step-indicator, .shuffle-circle,
 * .selected-cards-area, .selected-card-slot, .deck-container, .deck-row,
 * .deck-card, .continue-btn, .retry-btn, .card-content-section,
 * .result-header...) dùng lại nguyên từ boi-tarot.css — file đó được
 * enqueue TRƯỚC file này nên mọi style và hoạt ảnh của trang Tarot đều
 * tự động áp dụng, hai trang vì thế đồng nhất trải nghiệm.
 *
 * Màu sắc dùng biến --theme-* nên chạy đúng ở cả giao diện sáng lẫn tối.
 * Cỡ chữ dùng biến --fs-* (khai báo trong boi-tarot.css).
 */

/* ============================================
   BƯỚC 1: CHỌN KIỂU TRẢI BÀI
   ============================================ */

.leno-spread-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.leno-spread-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--theme-surface-0);
    border: 2px solid rgba(212, 165, 116, 0.3);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    backdrop-filter: blur(10px);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    min-height: 180px;
}

.leno-spread-option:hover {
    border-color: var(--theme-gold-text);
    transform: translateY(-3px);
}

.leno-spread-option.active {
    border-color: var(--theme-gold-text);
    border-width: 3px;
    background: rgba(212, 165, 116, 0.12);
    box-shadow: 0 0 30px var(--tarot-glow);
}

.leno-spread-label {
    color: var(--theme-gold-text);
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: 1px;
}

.leno-spread-count {
    color: var(--theme-text-faint);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.leno-spread-desc {
    color: var(--theme-text-body);
    font-size: var(--fs-small);
    font-style: italic;
    line-height: 1.6;
    margin-top: 0.4rem;
}

/* Ảnh lá bài minh hoạ trong mỗi lựa chọn — xếp chồng lệch nhau như bộ bài
   thật để nhìn là biết ngay trải mấy lá. Dùng margin âm cho các lá sau
   tạo hiệu ứng chồng lên nhau. */
.leno-spread-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    height: 68px;
}

.leno-spread-preview-card {
    width: 44px;
    height: auto;
    border-radius: 5px;
    border: 1px solid rgba(212, 165, 116, 0.45);
    box-shadow: 0 4px 12px var(--theme-shadow);
    transition: transform 0.3s ease;
}

.leno-spread-preview-card:not(:first-child) {
    margin-left: -18px;
}

/* Khi hover/chọn, các lá xoè rộng ra một chút cho sinh động */
.leno-spread-option:hover .leno-spread-preview-card:not(:first-child),
.leno-spread-option.active .leno-spread-preview-card:not(:first-child) {
    margin-left: -12px;
}

/* ============================================
   NHẬP CÂU HỎI
   ============================================ */

.leno-question-hint {
    color: var(--theme-text-faint);
    font-size: var(--fs-small);
    margin: 1.5rem 0 0.8rem;
    text-align: center;
}

.leno-question-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.leno-question-chip {
    background: var(--theme-surface-0);
    border: 1.5px solid rgba(212, 165, 116, 0.3);
    border-radius: 999px;
    padding: 0.6rem 1.3rem;
    color: var(--theme-text-body);
    font-size: var(--fs-small);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.leno-question-chip:hover {
    border-color: var(--theme-gold-text);
    background: rgba(212, 165, 116, 0.12);
    transform: translateY(-2px);
}

/* ============================================
   BƯỚC 3: Ô SLOT LÁ ĐÃ CHỌN
   ============================================ */

/* Ảnh lá Lenormand có tỉ lệ 239×377 (≈ 2:3.155), hơi khác bài Tarot
   (2:3.4) mà .selected-card-slot được thiết kế ban đầu (180×280 ≈ 2:3.11).
   Chênh lệch ~1.4% tuy nhỏ nhưng vì slot dùng object-fit: cover nên sẽ cắt
   mất một phần viền trắng đặc trưng của lá bài. Chỉnh chiều cao về đúng
   tỉ lệ để ảnh hiện trọn vẹn, không bị xén. */
/* Ảnh lá Lenormand có tỉ lệ 239×377 (≈ 2:3.155), khác bài Tarot (2:3.4)
   mà .selected-card-slot được thiết kế ban đầu.
   Dùng aspect-ratio thay vì height cố định: theme gốc có nhiều breakpoint
   đổi kích thước slot (150×240, 140×220, 100×160...) với tỉ lệ khác nhau,
   nếu để height cố định thì ở mỗi breakpoint ảnh lại bị cắt một kiểu.
   Với aspect-ratio, chỉ cần width thay đổi là chiều cao TỰ tính đúng tỉ
   lệ — ảnh không bao giờ bị xén, không cần sửa từng breakpoint. */
.lenormand-page .selected-card-slot {
    width: 180px;
    height: auto;
    aspect-ratio: 239 / 377;
}

/* Trải 9 lá: slot xếp lưới 3×3 cho khớp bố cục đặc trưng của Lenormand,
   thay vì dàn hàng ngang như trải 3/5 lá. */
.leno-slots-grid3 {
    display: grid !important;
    /* Cố định 180px MỖI CỘT thay vì 1fr. Dùng 1fr thì bề rộng cột phụ
       thuộc bề rộng container — mà container nằm trong flex cha nên bị co
       lại, khiến ô slot teo còn vài chục pixel và nhãn xuống dòng từng
       chữ. Cố định px + justify-content: center đảm bảo lưới luôn đúng
       kích thước và vẫn nằm giữa. */
    grid-template-columns: repeat(3, 180px);
    justify-content: center;
    /* Khoảng cách DỌC lớn hơn ngang (3.2rem vs 1rem) để chừa chỗ cho nhãn
       vị trí — nhãn nằm absolute phía trên ô slot, nếu gap dọc nhỏ sẽ đè
       lên hàng bên trên. !important để thắng row-gap của rule flex bên
       dưới (rule đó dành cho trải 3/5 lá, không áp cho lưới này). */
    gap: 3.2rem 1rem !important;
    width: 100%;
    max-width: 100%;
    /* Chừa chỗ cho nhãn của HÀNG ĐẦU TIÊN (nhãn nằm trên ô slot 44px). */
    margin-top: 3.5rem;
}

/* Trải 5 lá cần tới ~1092px (5×180px + 4 gap) nên tràn ngang trên nhiều
   màn hình. CSS gốc của Tarot để flex-wrap: nowrap vì Tarot tối đa chỉ 3
   lá. Cho phép xuống dòng để không bị cắt mất lá ở rìa phải. */
.lenormand-page .selected-cards-area {
    flex-wrap: wrap;
    row-gap: 3.5rem;
}

/* CỐ ĐỊNH KÍCH THƯỚC KHUNG SLOT
   CSS gốc của Tarot cho ô đang chờ chọn (.active) phóng to 105% bằng
   transform: scale(1.05). Khi chọn xong ô chuyển sang .filled thì mất
   .active nên co về 100% — gây cảm giác khung "to ra rồi nhỏ lại" liên
   tục trong lúc rút bài, nhất là với Lenormand cần chọn tới 9 lá.
   Bỏ phóng to, chỉ giữ viền sáng + quầng glow để vẫn nhận biết được ô
   đang tới lượt. */
.lenormand-page .selected-card-slot.active {
    transform: none;
}

/* Đường kẻ ngang trang trí giữa khu vực slot chỉ hợp khi các lá xếp một
   hàng (trải 3/5 lá). Với lưới 3×3 nó cắt ngang giữa bảng trông rối, nên
   ẩn đi. */
.leno-slots-grid3::before {
    display: none;
}

/* Slot gốc cố định 180px, nhưng mỗi cột của lưới chỉ rộng ~176px nên bị
   tràn nhẹ. Cho slot co theo bề rộng cột, chiều cao tính theo đúng tỉ lệ
   ảnh Lenormand (239:377) bằng aspect-ratio. */
.leno-slots-grid3 .selected-card-slot {
    /* Khớp đúng bề rộng cột đã cố định ở trên (180px), không dùng 100%
       để tránh phụ thuộc bề rộng container. */
    width: 180px;
    height: auto;
    aspect-ratio: 239 / 377;
}

/* Nhãn vị trí của Lenormand DÀI hơn Tarot nhiều ("Suy nghĩ · quá khứ" so
   với "Quá khứ"). CSS gốc dùng white-space: nowrap nên nhãn bị ép thành
   một dòng dài, tràn sang ô lá bên cạnh. Cho phép xuống dòng và giới hạn
   bề ngang đúng bằng ô slot. */
.lenormand-page .slot-label {
    white-space: normal;
    width: 100%;
    left: 0;
    right: 0;
    top: -44px;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.35;
    text-transform: none;
}

/* Thẻ bài nhỏ hiển thị trong ô slot sau khi chọn — Lenormand chưa dùng
   ảnh lá bài nên hiện số thứ tự + tên lá thay cho <img>. */



.leno-deck-error {
    color: var(--theme-danger);
    text-align: center;
    padding: 2rem 0;
}

/* ============================================
   TRẠNG THÁI ĐANG LUẬN GIẢI
   ============================================ */

.leno-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 6rem 1rem;
    color: var(--theme-text-body);
    font-size: var(--fs-body);
    font-style: italic;
}

.leno-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(212, 165, 116, 0.2);
    border-top-color: var(--tarot-gold);
    border-radius: 50%;
    animation: lenoSpin 0.9s linear infinite;
}

@keyframes lenoSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   BƯỚC 4: LÁ BÀI TRONG KẾT QUẢ
   ============================================ */


/* Trải 9 lá xếp đúng lưới 3×3 — kiểu trải đặc trưng của Lenormand, phải
   giữ đúng bố cục lưới thì người đọc mới hiểu ý nghĩa hàng/cột. */








/* ẨN KHUNG BREADCRUMB CÒN SÓT
   Filter PHP (trong functions.php) đã xoá NỘI DUNG breadcrumb, nhưng khung
   bọc nó do Nevo builder render vẫn còn — để lại một dải nền xám trống
   ngay trên tiêu đề H1. Ẩn hẳn các khung này trên trang Lenormand.
   Dùng nhiều selector vì tuỳ cấu hình theme/plugin mà khung có tên khác
   nhau (.page-header của theme, .nevo-breadcrumb của builder, hoặc
   .rank-math-breadcrumb do plugin SEO tự chèn). */
.lenormand-page .page-header,
.lenormand-page .nevo-breadcrumb,
.lenormand-page .rank-math-breadcrumb,
.lenormand-page .breadcrumb,
body.page-template-page-boi-bai-lenormand .page-header,
body.page-template-page-boi-bai-lenormand .nevo-breadcrumb,
body.page-template-page-boi-bai-lenormand .rank-math-breadcrumb,
body.page-template-page-boi-bai-lenormand .breadcrumb {
    display: none !important;
}

/* ============================================
   HỎI ĐÀO SÂU (chỉ mở cho gói Đồng hành)
   ============================================ */

.leno-followup {
    max-width: 80%;
    width: 80%;
    margin: 2.5rem auto 0;
    padding: 2rem;
    background: var(--theme-surface-0);
    border: 2px solid rgba(212, 165, 116, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.leno-followup-title {
    color: var(--theme-gold-text);
    font-size: var(--fs-h4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
}

.leno-followup-title::before {
    content: '\2726';
    margin-right: 0.7rem;
}

.leno-followup-desc {
    color: var(--theme-text-faint);
    font-size: var(--fs-small);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.leno-followup-history {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.leno-followup-turn {
    border-left: 3px solid var(--tarot-gold);
    padding-left: 1.2rem;
}

.leno-followup-q {
    color: var(--theme-gold-text);
    font-size: var(--fs-small);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.leno-followup-q::before {
    content: 'Bạn hỏi: ';
    color: var(--theme-text-faint);
    font-weight: 400;
}

.leno-followup-a {
    color: var(--theme-text-secondary);
    font-size: var(--fs-body);
    line-height: 1.9;
}

/* ============================================
   NỘI DUNG TĨNH (phần SEO)
   ============================================ */

/* CHUẨN HOÁ KHOẢNG CÁCH GIỮA CÁC SECTION
   Các section trong theme có padding không đồng đều: .intro-section,
   .topics-section, .faq-section đều 7rem nhưng .tarot-reviews-section chỉ
   3rem, còn .benefits-section không có padding riêng nào — khiến trang bị
   chỗ thưa chỗ dày. Ép tất cả về cùng một giá trị, giới hạn trong
   .lenormand-page để KHÔNG ảnh hưởng trang chủ Tarot.
   Dùng 4rem (thay vì 7rem như theme gốc) vì trang Lenormand có nhiều
   section liên tiếp, để 7rem thì phải cuộn rất nhiều mới hết trang. */
.lenormand-page .tarot-reviews-section,
.lenormand-page .benefits-section,
.lenormand-page .intro-section,
.lenormand-page .topics-section,
.lenormand-page .tarot-news-section,
.lenormand-page .faq-section {
    padding: 4rem 2rem;
}

/* Section đầu tiên sau khu vực công cụ không cần padding-top lớn, vì khu
   vực bói phía trên đã có khoảng trống kết thúc riêng. */
.lenormand-page .tarot-reviews-section {
    padding-top: 2.5rem;
}

/* .benefits-header của theme có margin 4rem trên / 3rem dưới, trong khi
   .section-header của các khối khác chỉ margin-bottom 2rem — khiến riêng
   khối "Lợi ích" bị đẩy xa hẳn so với phần còn lại. Đồng bộ lại. */
.lenormand-page .benefits-header {
    margin: 0 0 2rem;
}

/* Trang Tarot đặt .intro-description trong cột văn bản cạnh ảnh minh hoạ
   nên tự có độ rộng vừa phải. Trang Lenormand không có ảnh, nếu để nguyên
   sẽ dàn ngang hết 1400px rất khó đọc — giới hạn lại và căn giữa khối. */
.lenormand-page .intro-description {
    max-width: var(--site-w-text, 1200px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2rem;
    text-align: center;
}







/* Lưới 3 card giới thiệu kiểu trải — trình bày giống khối "Tính năng nổi
   bật" của trang Tarot (3 cột card có viền, thay vì danh sách dọc). */










/* FAQ dùng chung class .faq-* của trang Tarot (đã có sẵn style trong
   main.css) nên không cần định nghĩa lại. Chỉ reset thẻ <h3> bao ngoài
   nút bấm — thẻ này có mặt để giữ đúng cấp tiêu đề cho SEO/trình đọc màn
   hình, còn toàn bộ giao diện nằm ở <button> bên trong, nên phải gỡ
   margin/font mặc định của trình duyệt để không làm lệch bố cục. */
.faq-question-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Trên mobile màn hình hẹp, khoảng cách còn cần gọn hơn nữa để không
       phải cuộn quá nhiều giữa các section. */
    .lenormand-page .tarot-reviews-section,
    .lenormand-page .benefits-section,
    .lenormand-page .intro-section,
    .lenormand-page .topics-section,
    .lenormand-page .tarot-news-section,
    .lenormand-page .faq-section {
        padding: 2.5rem 1.2rem;
    }

    .lenormand-page .tarot-reviews-section {
        padding-top: 1.8rem;
    }

    .leno-spread-options {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .leno-spread-option {
        min-height: auto;
        padding: 1.8rem 1.5rem;
    }

    .leno-followup {
        width: 94%;
        max-width: 94%;
        padding: 1.4rem 1.2rem;
    }



    .leno-slots-grid3 {
        /* 180px×3 = 572px không vừa màn hình nhỏ — thu cột xuống 92px và
           tăng gap dọc vì nhãn dài sẽ thành 2-3 dòng ở bề rộng này. */
        grid-template-columns: repeat(3, 92px);
        gap: 3.6rem 0.6rem !important;
        margin-top: 3.2rem;
    }

    .leno-slots-grid3 .selected-card-slot {
        width: 92px;
    }

    .lenormand-page .slot-label {
        top: -40px;
        font-size: 0.68rem;
        letter-spacing: 0;
        line-height: 1.3;
    }

    /* Bảng so sánh chuyển sang xếp dọc trên mobile cho dễ đọc */



}
/* ============================================
   XÀO BÀI LENORMAND — 6 hàng trượt ngược chiều như dòng chảy, rồi gom về giữa
   ============================================ */
.leno-stream-stage {
    min-height: 460px;
}

.leno-stream {
    position: relative;
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;
    overflow: hidden;
    /* Mờ dần hai mép để hàng bài trông như chảy vào/ra khỏi khung. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.leno-stream-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    animation: lenoStreamSlide 1.3s ease-in-out infinite alternate;
    will-change: transform;
}

.leno-stream-row.is-reverse {
    animation-name: lenoStreamSlideReverse;
}

@keyframes lenoStreamSlide {
    from { transform: translateX(-110px); }
    to   { transform: translateX(110px); }
}

@keyframes lenoStreamSlideReverse {
    from { transform: translateX(110px); }
    to   { transform: translateX(-110px); }
}

.leno-stream-card {
    width: 54px;
    height: 85px;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    animation: lenoStreamIn 0.5s ease-out both;
}

@keyframes lenoStreamIn {
    from { opacity: 0; transform: translateY(14px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pha gom: cả 6 hàng trượt dọc về hàng giữa (hàng r dịch (2.5 - r) hàng),
   đồng thời các lá trong hàng chồng lên nhau → toàn bộ thành MỘT chồng. */
.leno-stream.is-gathering .leno-stream-row {
    animation: lenoStreamGather 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0s;
}

.leno-stream.is-gathering .leno-stream-card {
    animation: lenoStreamStack 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0s;
}

@keyframes lenoStreamGather {
    to { transform: translate(0, calc((2.5 - var(--r, 0)) * 95px)); }
}

@keyframes lenoStreamStack {
    to { margin: 0 -25px; transform: translateY(0) rotate(0deg); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
}

@media (max-width: 768px) {
    .leno-stream-stage { min-height: 380px; }
    .leno-stream-card { width: 40px; height: 63px; }
    .leno-stream-row { gap: 6px; }
    @keyframes lenoStreamSlide { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
    @keyframes lenoStreamSlideReverse { from { transform: translateX(60px); } to { transform: translateX(-60px); } }
    @keyframes lenoStreamGather { to { transform: translate(0, calc((2.5 - var(--r, 0)) * 69px)); } }
    @keyframes lenoStreamStack { to { margin: 0 -18px; transform: translateY(0); } }
}

/* ============================================
   MOBILE: ô lá bài của Lenormand/Bài Tây (dùng chung .lenormand-page)
   Rule .lenormand-page .selected-card-slot {width:180px} ở trên có độ ưu
   tiên cao hơn rule mobile của boi-tarot.css nên trên điện thoại ô vẫn
   180px → 3–5 lá thành 2 ô/hàng to đùng, tràn màn hình. Thu về 100px /
   92px để 3 ô nằm vừa một hàng, 5 lá thành 3 + 2.
   ============================================ */
@media (max-width: 768px) {
    .lenormand-page .selected-cards-area:not(.leno-slots-grid3):not(.tay-name-grid) {
        gap: 0.8rem;
        row-gap: 2.8rem;
        margin: 2.4rem 0.25rem 1.5rem;
    }

    .lenormand-page .selected-cards-area:not(.leno-slots-grid3):not(.tay-name-grid) .selected-card-slot {
        width: 100px;
    }

    .lenormand-page .selected-cards-area:not(.leno-slots-grid3) .slot-label {
        top: -40px;
        font-size: 0.66rem;
        letter-spacing: 0;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .lenormand-page .selected-cards-area:not(.leno-slots-grid3):not(.tay-name-grid) .selected-card-slot {
        width: 92px;
    }
}


/* --- Lenormand: chọn giới tính (tuỳ chọn) ở bước câu hỏi --- */
.leno-gender {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--theme-border);
}

.leno-gender-label {
    color: var(--theme-text-secondary);
    font-size: 0.92rem;
    font-weight: 700;
}

.leno-gender-options {
    display: inline-flex;
    gap: 0.4rem;
}

.leno-gender-option {
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-1);
    color: var(--theme-text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.leno-gender-option:hover {
    border-color: var(--theme-gold-text);
    color: var(--theme-gold-text);
}

.leno-gender-option.active {
    background: var(--theme-gold-text);
    border-color: var(--theme-gold-text);
    color: #0a0a0f;
}

[data-theme="light"] .leno-gender-option.active {
    color: #ffffff;
}

.leno-gender-hint {
    flex-basis: 100%;
    color: var(--theme-text-muted);
    font-size: 0.82rem;
}

.leno-gender {
    justify-content: center;
    text-align: center;
}