/* ============================================
   BÓI BÀI TÂY — style riêng (nạp SAU boi-tarot.css + lenormand.css)
   Chỉ chứa phần KHÔNG có ở hai file kia: chọn bộ bài, chọn giới tính,
   bước lá chủ, lưới bốc theo tên, khối lá chủ trong kết quả.
   ============================================ */

/* Ẩn khung breadcrumb như trang Lenormand */
body.page-template-page-boi-bai-tay .page-header,
body.page-template-page-boi-bai-tay .nevo-breadcrumb,
body.page-template-page-boi-bai-tay .rank-math-breadcrumb {
    display: none !important;
}

/* --- Chọn bộ bài --- */
.tay-deck-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.tay-deck-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    background: var(--theme-surface-0);
    border: 2px solid rgba(212, 165, 116, 0.3);
    border-radius: 16px;
    padding: 1.8rem 1.4rem 1.6rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--theme-text-primary);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tay-deck-option:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 165, 116, 0.6);
}

.tay-deck-option.active {
    border-color: var(--theme-gold-text);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18), 0 12px 30px rgba(0, 0, 0, 0.25);
    background: rgba(212, 165, 116, 0.08);
}

.tay-deck-fan {
    position: relative;
    height: 96px;
    width: 140px;
    margin-bottom: 0.6rem;
}

.tay-deck-fan-card {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 58px;
    height: 87px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transform-origin: bottom center;
    transition: transform 0.35s ease;
}

.tay-deck-fan-card:nth-child(1) { transform: translateX(-50%) rotate(-24deg); }
.tay-deck-fan-card:nth-child(2) { transform: translateX(-50%) rotate(-12deg); }
.tay-deck-fan-card:nth-child(3) { transform: translateX(-50%) rotate(0deg); }
.tay-deck-fan-card:nth-child(4) { transform: translateX(-50%) rotate(12deg); }
.tay-deck-fan-card:nth-child(5) { transform: translateX(-50%) rotate(24deg); }

.tay-deck-option:hover .tay-deck-fan-card:nth-child(1),
.tay-deck-option.active .tay-deck-fan-card:nth-child(1) { transform: translateX(-50%) rotate(-32deg) translateY(-4px); }
.tay-deck-option:hover .tay-deck-fan-card:nth-child(5),
.tay-deck-option.active .tay-deck-fan-card:nth-child(5) { transform: translateX(-50%) rotate(32deg) translateY(-4px); }

.tay-deck-label {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--theme-gold-text);
}

.tay-deck-sub {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}

.tay-deck-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--theme-text-soft);
    margin-top: 0.3rem;
}

/* --- Giới tính --- */
.tay-gender-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 560px;
    margin: 0 auto;
}

.tay-gender-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: var(--theme-surface-0);
    border: 2px solid rgba(212, 165, 116, 0.3);
    border-radius: 14px;
    padding: 1.1rem 1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--theme-text-primary);
    transition: all 0.25s ease;
}

.tay-gender-option:hover {
    border-color: rgba(212, 165, 116, 0.6);
}

.tay-gender-option.active {
    border-color: var(--theme-gold-text);
    background: rgba(212, 165, 116, 0.1);
}

.tay-gender-label {
    font-size: 1.1rem;
    font-weight: 800;
}

.tay-gender-sub {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

/* --- Tên người ấy --- */
.tay-name-input {
    height: auto;
    min-height: 0;
    padding: 0.9rem 1.1rem;
    font-size: 1.05rem;
    text-align: center;
    letter-spacing: 1px;
}

/* --- Lá chủ --- */
.tay-master-note {
    max-width: 640px;
    margin: 1rem auto 0.5rem;
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    background: rgba(212, 165, 116, 0.08);
    color: var(--theme-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.tay-master-note strong {
    color: var(--theme-gold-text);
}

.selected-card-slot.tay-master-chosen {
    border: 3px solid var(--theme-gold-text);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.18), 0 0 24px rgba(212, 165, 116, 0.35);
}

.selected-card-slot.tay-master-chosen .slot-label::after {
    content: ' · Lá chủ';
    color: var(--theme-gold-text);
    font-weight: 800;
}

/* --- Bốc theo tên: lưới cột = số chữ cái, 2 hàng --- */
.selected-cards-area.tay-name-grid {
    display: grid;
    grid-template-columns: repeat(var(--tay-cols, 5), minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    gap: 0.8rem;
    justify-items: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.selected-cards-area.tay-name-grid .selected-card-slot {
    width: 110px;
    height: 172px;
}

.selected-cards-area.tay-name-grid .slot-label {
    font-size: 0.68rem;
}

.selected-cards-area.tay-name-grid .slot-card-name {
    font-size: 0.72rem;
}

/* Đã–Đang–Sẽ: 7 ô, xuống hàng đẹp trên desktop */
.selected-cards-area.tay-dadangse-grid {
    flex-wrap: wrap;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.selected-cards-area.tay-dadangse-grid .selected-card-slot {
    width: 128px;
    height: 200px;
}

/* --- Kết quả: khối lá chủ --- */
.tay-master-result {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 640px;
    margin: 0 auto 1.6rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    border: 1px solid var(--theme-border);
    background: rgba(212, 165, 116, 0.07);
}

.tay-master-result-img {
    width: 84px;
    height: 126px;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.tay-master-result-label {
    color: var(--theme-gold-text);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
}

.tay-master-result-name {
    color: var(--theme-text-primary);
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 0.3rem;
}

.tay-master-result-note {
    color: var(--theme-text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* Mặt lá SVG trong kết quả: nền trắng, cần viền nhẹ để nổi trên nền tối */
.baitay-page .result-card-img,
.baitay-page .slot-card-img {
    background: #fffdf7;
    border-radius: 12px;
}

/* --- Bảng nghĩa 4 chất (nội dung tĩnh) --- */
.tay-suit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
}

.tay-suit-card {
    background: var(--theme-surface-1);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    padding: 1.6rem 1.2rem;
    text-align: center;
}

.tay-suit-symbol {
    display: block;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    color: var(--theme-text-primary);
}

.tay-suit-symbol.is-red {
    color: #e05a55;
}

.tay-suit-card h3 {
    color: var(--theme-gold-text);
    font-size: 1.2rem;
    margin: 0 0 0.6rem;
}

.tay-suit-card p {
    color: var(--theme-text-soft);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

.tay-suit-card strong {
    color: var(--theme-text-secondary);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .tay-suit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tay-deck-options,
    .tay-gender-options {
        grid-template-columns: 1fr;
    }

    .tay-deck-option {
        padding: 1.3rem 1rem 1.2rem;
    }

    .selected-cards-area.tay-name-grid {
        grid-template-columns: repeat(var(--tay-cols, 5), minmax(0, 1fr));
        gap: 0.4rem;
    }

    .selected-cards-area.tay-name-grid .selected-card-slot {
        width: 100%;
        max-width: 64px;
        height: 100px;
    }

    .selected-cards-area.tay-name-grid .slot-label {
        font-size: 0.55rem;
    }

    .selected-cards-area.tay-name-grid .slot-card-name {
        display: none;
    }

    .selected-cards-area.tay-dadangse-grid .selected-card-slot {
        width: 84px;
        height: 132px;
    }

    .tay-master-result {
        flex-direction: column;
        text-align: center;
    }

    .tay-suit-grid {
        grid-template-columns: 1fr;
    }

    .tay-suit-card p {
        text-align: center;
    }
}

/* ============================================
   XÀO TAY KIỂU RIFFLE (đếm 7/9 lần) + CẮT BÀI
   ============================================ */
.tay-shuffle-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 0 1rem;
}

.tay-riffle {
    position: relative;
    width: min(520px, 100%);
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tay-riffle-half,
.tay-riffle-center {
    position: absolute;
    top: 50%;
    width: 90px;
    height: 135px;
    margin-top: -67px;
}

.tay-riffle-left   { left: 12%; }
.tay-riffle-right  { right: 12%; }
.tay-riffle-center { left: 50%; margin-left: -45px; }

.tay-riffle-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 135px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    /* Xếp chồng lệch nhẹ để thấy độ dày của nửa bộ bài. */
    transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px));
}

.tay-riffle-center .tay-riffle-card {
    opacity: 0.35;
}

/* Một lần đan bài: lá của 2 nửa bay vào giữa, so le nhau, rồi trở về. */
.tay-riffle.is-riffling .tay-riffle-left .tay-riffle-card {
    animation: tayRiffleLeft 0.56s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: calc(var(--i) * 28ms);
}

.tay-riffle.is-riffling .tay-riffle-right .tay-riffle-card {
    animation: tayRiffleRight 0.56s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: calc(var(--i) * 28ms + 14ms);
}

.tay-riffle.is-riffling .tay-riffle-center .tay-riffle-card {
    animation: tayRifflePulse 0.56s ease-out both;
}

@keyframes tayRiffleLeft {
    0%   { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(-6deg); }
    55%  { transform: translate(calc(190px + var(--i) * 2px), calc(var(--i) * -3px)) rotate(4deg); }
    100% { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(0deg); }
}

@keyframes tayRiffleRight {
    0%   { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(6deg); }
    55%  { transform: translate(calc(-190px + var(--i) * 2px), calc(var(--i) * -3px)) rotate(-4deg); }
    100% { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(0deg); }
}

@keyframes tayRifflePulse {
    0%   { opacity: 0.35; transform: scale(1); }
    55%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0.35; transform: scale(1); }
}

/* Số lần xào — chữ lớn ở giữa, nhấp nhẹ mỗi lần đếm. */
.tay-riffle-counter {
    position: absolute;
    margin: 0;
    pointer-events: none;
    color: var(--theme-gold-text);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(212, 165, 116, 0.5);
    transform: translateY(-40px);
}

.tay-riffle.is-riffling + .tay-riffle-counter {
    animation: tayCountPop 0.56s ease-out both;
}

@keyframes tayCountPop {
    0%   { transform: translateY(-40px) scale(0.8); opacity: 0.4; }
    40%  { transform: translateY(-40px) scale(1.15); opacity: 1; }
    100% { transform: translateY(-40px) scale(1); opacity: 0.9; }
}

/* --- Cắt bài --- */
.tay-cut-stage {
    padding: 1rem 0;
}

.tay-cut-options {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin: 1.5rem 0 1rem;
}

.tay-cut-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 2px dashed rgba(212, 165, 116, 0.35);
    border-radius: 18px;
    padding: 1.4rem 2rem 1.2rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--theme-text-primary);
    transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
}

.tay-cut-option:hover {
    transform: translateY(-4px);
    border-color: var(--theme-gold-text);
}

.tay-cut-option.is-picked {
    border-style: solid;
    border-color: var(--theme-gold-text);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.18), 0 0 30px rgba(212, 165, 116, 0.35);
}

.tay-cut-option.is-dim {
    opacity: 0.35;
    transform: scale(0.94);
}

.tay-cut-stack {
    position: relative;
    width: 110px;
    height: 165px;
}

.tay-cut-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 150px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    transform: translate(calc(var(--i) * 2px), calc(var(--i) * -2.5px));
}

.tay-cut-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--theme-gold-text);
}

.tay-cut-sub {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

@media (max-width: 768px) {
    .tay-riffle { height: 200px; }
    .tay-riffle-half, .tay-riffle-center, .tay-riffle-card { width: 64px; height: 96px; }
    .tay-riffle-half, .tay-riffle-center { margin-top: -48px; }
    .tay-riffle-center { margin-left: -32px; }
    .tay-riffle-left  { left: 6%; }
    .tay-riffle-right { right: 6%; }
    @keyframes tayRiffleLeft {
        0%   { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(-6deg); }
        55%  { transform: translate(calc(120px + var(--i) * 2px), calc(var(--i) * -3px)) rotate(4deg); }
        100% { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(0deg); }
    }
    @keyframes tayRiffleRight {
        0%   { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(6deg); }
        55%  { transform: translate(calc(-120px + var(--i) * 2px), calc(var(--i) * -3px)) rotate(-4deg); }
        100% { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(0deg); }
    }
    .tay-cut-options { gap: 1rem; }
    .tay-cut-option { padding: 1rem 1.1rem 0.9rem; }
    .tay-cut-stack { width: 84px; height: 126px; }
    .tay-cut-card { width: 76px; height: 114px; }
}

/* Bốc theo tên trên điện thoại: tên dài (5–8 chữ cái) → 5–8 cột không đủ
   chỗ, ô bị ép nhỏ và nhãn đè lên nhau. Chuyển sang lưới 4 cột xếp theo
   hàng: mỗi hàng 2 chữ cái, mỗi chữ cái = 2 ô liền nhau (lá trên · lá dưới). */
@media (max-width: 768px) {
    .selected-cards-area.tay-name-grid.tay-name-grid-wide {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-template-rows: none;
        gap: 2.4rem 0.5rem;
        margin-top: 2.6rem;
    }

    .selected-cards-area.tay-name-grid.tay-name-grid-wide .selected-card-slot {
        max-width: 80px;
        height: auto;
        aspect-ratio: 110 / 172;
    }

    .selected-cards-area.tay-name-grid.tay-name-grid-wide .slot-label {
        top: -34px;
        font-size: 0.6rem;
        white-space: normal;
        line-height: 1.25;
    }
}