/* ============================================
   BÓI TAROT DẠNG TRÒ CHUYỆN (page-tarot-tro-chuyen.php, assets/js/tarot-chat.js)
   Luồng như Mèo Béo, giao diện Boitarot: nền đêm + vàng kim, font của site.
   Thẻ lá (.flow-pp-*) và thẻ mở khoá (.flow-pp-pay) lấy từ flow-shell.css.
   ============================================ */
.tarot-chat-page { padding: 1.2rem 1rem 3rem; }
.tc-wrap { max-width: 760px; margin: 0 auto; }
.tc-hero { text-align: center; margin: 0.4rem 0 1.2rem; }
.tc-title { margin: 0 0 0.35rem; font-size: 2rem; line-height: 1.25; color: var(--theme-text-primary); }
.tc-sub { margin: 0 auto; max-width: 560px; font-size: 1rem; line-height: 1.6; color: var(--theme-text-secondary); }

.tc-chat {
    padding: 1.3rem 1.2rem 1.1rem;
    border-radius: 26px;
    border: 1px solid var(--theme-border-strong, rgba(212, 165, 116, 0.3));
    background: var(--theme-surface-1, rgba(255, 255, 255, 0.025));
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8);
}
[data-theme="light"] .tc-chat { background: rgba(255, 255, 255, 0.6); box-shadow: 0 30px 60px -44px rgba(110, 74, 34, 0.45); }
.tc-log { display: flex; flex-direction: column; gap: 0.7rem; }

/* ---------- Tin nhắn ---------- */
.tc-row { display: flex; align-items: flex-end; gap: 0.55rem; animation: tc-in 0.32s ease both; }
@keyframes tc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tc-row.is-me { justify-content: flex-end; }
.tc-ava {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--theme-bg-elevated, #16121d); border: 1px solid var(--theme-border-strong, rgba(212, 165, 116, 0.4));
    color: var(--theme-gold-text);
}
.tc-ava img { width: 80%; height: 80%; object-fit: contain; }
.tc-ava svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tc-bubble {
    max-width: 84%;
    padding: 0.75rem 1rem;
    border-radius: 4px 20px 20px 20px;
    border: 1px solid var(--theme-border, rgba(212, 165, 116, 0.2));
    background: var(--theme-bg-elevated, #16121d);
    color: var(--theme-text-body, var(--theme-text-primary));
    font-size: 0.98rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.tc-bubble p { margin: 0 0 0.55rem; }
.tc-bubble p:last-child { margin-bottom: 0; }
.tc-bubble strong { color: var(--theme-gold-text); }
.tc-row.is-me .tc-bubble { border-radius: 20px 20px 4px 20px; border-color: transparent; background: rgba(212, 165, 116, 0.2); color: var(--theme-text-primary); }
[data-theme="light"] .tc-row.is-me .tc-bubble { background: rgba(196, 138, 78, 0.18); }
.tc-row.is-wide .tc-bubble { max-width: none; flex: 1; min-width: 0; }
.tc-bubble.is-plain { padding: 0; border: 0; background: none; }
.tc-bubble.is-dashed { border: 1px dashed var(--theme-border-strong, rgba(212, 165, 116, 0.5)); background: rgba(212, 165, 116, 0.07); }
.tc-bubble.is-ghost { padding: 0.2rem 0; border: 0; background: none; flex: 1; max-width: none; }
.tc-head { font-weight: 800; font-size: 1.05rem; color: var(--theme-gold-text) !important; margin-bottom: 0.7rem !important; }
.tc-q { font-style: italic; color: var(--theme-text-secondary); }
.tc-label { margin: 0.8rem 0 0.35rem !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-gold-text); }
.tc-label:first-child { margin-top: 0 !important; }
.tc-card-head { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 0.6rem; }
.tc-card-head img { width: 40px; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 5px; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.7); }
.tc-card-head div { display: flex; flex-direction: column; line-height: 1.3; }
.tc-card-pos { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-gold-text); }
.tc-card-head b { color: var(--theme-text-primary); }
.tc-card-head small { color: var(--theme-text-secondary); font-size: 0.82rem; }
.tc-me-cards { display: inline-flex; gap: 0.25rem; margin-right: 0.55rem; vertical-align: middle; }
.tc-me-cards img { width: 22px; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 3px; }
.tc-blur { display: grid; gap: 0.55rem; filter: blur(3px); opacity: 0.75; }
.tc-blur span { display: block; height: 0.8rem; border-radius: 999px; background: rgba(212, 165, 116, 0.22); }
.tc-blur span:nth-child(1) { width: 92%; }
.tc-blur span:nth-child(2) { width: 78%; }
.tc-blur span:nth-child(3) { width: 86%; }

/* Đang gõ… */
.tc-dots { display: inline-flex; gap: 0.3rem; padding: 0.2rem 0.1rem; }
.tc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--theme-gold-text); opacity: 0.35; animation: tc-dot 1s infinite ease-in-out; }
.tc-dots i:nth-child(2) { animation-delay: 0.15s; }
.tc-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tc-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Nút chọn nhanh ---------- */
.tc-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -0.1rem 0 0.2rem 2.7rem; animation: tc-in 0.32s ease both; }
.tc-chip {
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border-strong, rgba(212, 165, 116, 0.45));
    background: transparent;
    color: var(--theme-text-primary);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.35;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.tc-chip:hover:not(:disabled) { background: rgba(212, 165, 116, 0.12); border-color: var(--theme-gold-text); transform: translateY(-1px); }
.tc-chip:focus-visible { outline: 2px solid var(--theme-gold-text); outline-offset: 2px; }
.tc-chip.is-ghost { border-style: dashed; color: var(--theme-text-secondary); }
.tc-chip.is-hot { border-color: var(--theme-gold-text); }
.tc-chips.is-done .tc-chip { opacity: 0.4; cursor: default; }
.tc-chips.is-done .tc-chip.is-picked { opacity: 1; background: rgba(212, 165, 116, 0.2); border-color: var(--theme-gold-text); }
.tc-chips.is-spreads .tc-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; border-radius: 16px; padding: 0.7rem 1rem; text-align: left; }
.tc-chips.is-spreads .tc-chip.is-ghost { flex-direction: row; align-self: center; border-radius: 999px; padding: 0.5rem 0.95rem; }
.tc-chip-main { font-weight: 800; }
.tc-chip-sub { font-size: 0.8rem; color: var(--theme-text-secondary); }
.tc-chip-sub b { color: var(--theme-gold-text); }
.tc-chip-badge { position: absolute; top: -0.55rem; right: 0.8rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-style: normal; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--gk-btn, #d4a574); color: var(--gk-btn-ink, #2a1a08); }

/* ---------- Bộ bài trong khung chat ---------- */
.tc-bubble.is-deck { padding: 1rem 0.9rem 0.9rem; }
.tc-slots { display: flex; justify-content: center; gap: 0.9rem; margin-bottom: 0.7rem; }
.tc-slot { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 84px; text-align: center; }
.tc-slot-card { width: 72px; aspect-ratio: 5 / 8; border-radius: 8px; border: 1px dashed var(--theme-border-strong, rgba(212, 165, 116, 0.5)); background: rgba(212, 165, 116, 0.05); overflow: hidden; }
.tc-slot.is-filled .tc-slot-card { border-style: solid; animation: tc-flip 0.5s ease both; }
.tc-slot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes tc-flip { from { transform: rotateY(90deg); } to { transform: none; } }
.tc-slot-pos { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--theme-gold-text); }
.tc-slot-name { font-size: 0.74rem; line-height: 1.25; color: var(--theme-text-secondary); min-height: 1.9em; }
.tc-deck-hint { text-align: center; font-size: 0.86rem; color: var(--theme-text-secondary); margin: 0 0 0.5rem !important; }
.tc-deck-hint b { color: var(--theme-gold-text); }
.tc-fan {
    display: flex;
    overflow-x: auto;
    padding: 0.9rem 0.4rem 0.7rem 0.4rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tc-back {
    flex: 0 0 auto;
    width: 56px;
    aspect-ratio: 5 / 8;
    margin-left: -26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform 0.18s ease, opacity 0.2s ease;
    box-shadow: -3px 3px 8px -4px rgba(0, 0, 0, 0.7);
}
.tc-back:first-child { margin-left: 0; }
.tc-back img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; pointer-events: none; }
.tc-back:hover:not(:disabled), .tc-back:focus-visible { transform: translateY(-10px); z-index: 2; }
.tc-back:focus-visible { outline: 2px solid var(--theme-gold-text); outline-offset: 2px; }
.tc-back.is-taken { opacity: 0.15; transform: translateY(-14px); cursor: default; }
.tc-fan.is-done .tc-back:not(.is-taken) { opacity: 0.45; pointer-events: none; }
.tc-fan.is-shuffling .tc-back { animation: tc-deal 0.8s ease both; animation-delay: calc(var(--i) * 6ms); }
@keyframes tc-deal { from { opacity: 0; transform: translateX(calc(var(--i) * -18px)) rotate(-4deg); } to { opacity: 1; transform: none; } }

/* ---------- Ô nhập ---------- */
.tc-composer { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 0.9rem; padding: 0.45rem 0.45rem 0.45rem 0.9rem; border-radius: 22px; border: 1px solid var(--theme-border-strong, rgba(212, 165, 116, 0.45)); background: var(--theme-bg-elevated, #16121d); }
.tc-composer[hidden] { display: none; }
.tc-composer:focus-within { border-color: var(--theme-gold-text); box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15); }
.tc-composer textarea { flex: 1; min-height: 2.6rem; max-height: 9rem; padding: 0.55rem 0; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--theme-text-primary); font: inherit; font-size: 1rem; line-height: 1.5; }
.tc-send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--gk-btn, #d4a574); color: var(--gk-btn-ink, #2a1a08); }
.tc-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-send:focus-visible { outline: 2px solid var(--theme-gold-text); outline-offset: 2px; }
.tc-noscript { text-align: center; color: var(--theme-text-secondary); }

/* Thẻ mở khoá nằm trong khung chat */
.tc-bubble.is-paywall .flow-pp-pay { margin: 0.2rem 0 0; }

@media (max-width: 600px) {
    .tarot-chat-page { padding: 0.8rem 0.6rem 2.4rem; }
    .tc-title { font-size: 1.6rem; }
    .tc-chat { padding: 0.9rem 0.65rem 0.8rem; border-radius: 20px; }
    .tc-bubble { max-width: 88%; font-size: 0.96rem; }
    .tc-chips { margin-left: 2.55rem; }
    .tc-row.is-wide .tc-ava { display: none; }
    .tc-row.is-wide + .tc-chips, .tc-row.is-wide ~ .tc-chips.is-end { margin-left: 0; }
    .tc-slot { width: 76px; }
    .tc-slot-card { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .tc-row, .tc-chips, .tc-slot.is-filled .tc-slot-card, .tc-fan.is-shuffling .tc-back { animation: none; }
    .tc-dots i { animation-duration: 2.4s; }
}

/* Chữ trong bong bóng: độ đậm thường (CSS trang bói cũ làm đậm đoạn văn) */
.tc-bubble, .tc-bubble p, .tc-bubble .flow-prose p { font-weight: 400; }
.tc-bubble b, .tc-bubble strong, .tc-head, .tc-label, .tc-card-head b { font-weight: 700; }

/* ---------- Khung chat đặt trong phần đầu các trang bói ---------- */
.is-chat-reading .tarot-reading-wrapper .tc-chat { max-width: 760px; margin: 0.4rem auto 0; text-align: left; }
.is-chat-reading .tarot-reading-wrapper .flow-disclaimer { max-width: 760px; margin: 0.9rem auto 0; }

/* Yes/No: ô câu trả lời */
.tc-verdict { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.9rem 0.8rem; margin-bottom: 0.6rem; border-radius: 16px; border: 1px solid var(--theme-border-strong, rgba(212, 165, 116, 0.4)); background: rgba(212, 165, 116, 0.08); text-align: center; }
.tc-verdict span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-text-secondary); }
.tc-verdict b { font-size: 2rem; line-height: 1.2; color: var(--theme-gold-text); }
.tc-verdict.is-yes b { color: #6fd39a; }
.tc-verdict.is-no b { color: #ff8a8a; }
[data-theme="light"] .tc-verdict.is-yes b { color: #1f7a45; }
[data-theme="light"] .tc-verdict.is-no b { color: #b83232; }
.tc-verdict small { margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--theme-text-secondary); }

/* Bài Tây: bộ đếm xào bài */
.tc-count { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.82rem; background: rgba(212, 165, 116, 0.14); color: var(--theme-gold-text); }

/* Trải nhiều lá (Lenormand 9, bói theo tên): ô lá nhỏ, xuống dòng */
.tc-slots.is-many { flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.tc-slots.is-many .tc-slot { width: 64px; }
.tc-slots.is-many .tc-slot-card { width: 52px; }
.tc-slots.is-many .tc-slot-pos { font-size: 0.6rem; letter-spacing: 0.02em; }
.tc-slots.is-many .tc-slot-name { font-size: 0.66rem; }

/* Lượt bói gần đây ở đầu cuộc trò chuyện */
.tc-chips.is-recent .tc-chip { text-align: left; }
.tc-chips.is-save .tc-chip { border-color: var(--theme-gold-text); color: var(--theme-gold-text); }

/* =====================================================================
   Bản 2 — khung rộng hơn, ảnh đại diện hai bên, thẻ kiểu trải có hình lá,
   bộ bài xếp nhiều hàng vừa khung (không kéo ngang), ô lá lớn hơn.
   ===================================================================== */

/* ---------- Khung rộng ---------- */
.tc-wrap { max-width: 1120px; }
.is-chat-reading .tarot-reading-wrapper .tc-chat { width: 100%; max-width: 1120px; box-sizing: border-box; }
.is-chat-reading .tarot-reading-wrapper .flow-disclaimer { max-width: 1120px; }
.tc-chat { padding: 1.7rem 1.8rem 1.4rem; }
.tc-log { gap: 0.85rem; }
.tc-bubble { max-width: min(700px, 76%); }
.tc-row.is-wide .tc-bubble { max-width: none; }

/* ---------- Ảnh đại diện ---------- */
.tc-ava {
    width: 42px; height: 42px;
    border: 0;
    background: radial-gradient(circle at 35% 30%, #3d2e1c 0%, #1b150e 72%);
    box-shadow: 0 0 0 1.5px rgba(212, 165, 116, 0.7), 0 0 0 5px rgba(212, 165, 116, 0.1), 0 8px 16px -8px rgba(0, 0, 0, 0.8);
}
.tc-ava.is-reader img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 0 5px rgba(243, 217, 164, 0.5)); }
.tc-ava.is-me { background: linear-gradient(135deg, #f3d9a4 0%, #d4a574 55%, #a8743f 100%); color: #2a1a08; }
.tc-ava.is-me img { width: 100%; height: 100%; object-fit: cover; }
.tc-ava.is-me svg { width: 56%; height: 56%; stroke-width: 2; stroke-linecap: round; }
.tc-ava.is-initial { font-weight: 800; font-size: 1.05rem; line-height: 1; }
.tc-chips { margin-left: 3.35rem; }

/* ---------- Thẻ chọn kiểu trải: như bước chọn kiểu trải trước đây (ảnh bên trái, chữ bên phải) ---------- */
.tc-chips.is-spreads { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; margin-top: 0.3rem; }
.tc-chips.is-spreads .tc-chip {
    display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 1.1rem;
    min-height: 140px; padding: 1.2rem 1.3rem; border-radius: 16px; text-align: left;
    border: 2px solid rgba(212, 165, 116, 0.3);
    background: var(--theme-surface-0, rgba(255, 255, 255, 0.02));
    transition: border-color 0.3s ease, background 0.3s ease;
}
.tc-chips.is-spreads .tc-chip:hover:not(:disabled) { border-color: var(--theme-gold-text); transform: none; }
.tc-chips.is-spreads .tc-chip.is-hot { border-color: rgba(212, 165, 116, 0.6); }
.tc-chips.is-done.is-spreads .tc-chip.is-picked { border-width: 3px; border-color: var(--theme-gold-text); background: rgba(212, 165, 116, 0.12); }
.tc-chips.is-spreads .tc-chip.is-ghost { display: inline-flex; grid-column: 1 / -1; justify-self: start; min-height: 0; padding: 0.5rem 1rem; border-width: 1px; border-radius: 999px; background: transparent; }
.tc-chips.is-spreads .tc-chip-badge { left: 1.2rem; right: auto; top: -0.7rem; white-space: nowrap; }
.tc-sp-img { display: flex; align-items: center; justify-content: center; }
.tc-sp-img img { width: 100%; height: auto; max-height: 130px; object-fit: contain; }
.tc-sp-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.tc-chips.is-spreads .tc-chip-main { font-size: 1.08rem; line-height: 1.35; color: var(--theme-gold-text); letter-spacing: 0.3px; }
.tc-chips.is-spreads .tc-chip-sub { font-size: 0.88rem; line-height: 1.55; }
.tc-sp-price { margin-top: 0.25rem; padding: 0.18rem 0.75rem; border-radius: 999px; font-size: 0.8rem; background: rgba(212, 165, 116, 0.14); color: var(--theme-text-secondary); }
.tc-sp-price b { color: var(--theme-gold-text); }

/* ---------- Bộ bài: mặt bàn đặt lá + một cánh quạt tròn ---------- */
.tc-bubble.is-deck { padding: 1.2rem 1.1rem 0.6rem; }
.tc-deck { max-width: 860px; margin: 0 auto; }

/* Mặt bàn: các ô đặt lá được rút */
.tc-slots {
    gap: 1.2rem; flex-wrap: wrap; margin: 0 0 0.4rem;
    padding: 1.1rem 1rem 0.9rem; border-radius: 20px;
    background: radial-gradient(ellipse at 50% 0%, rgba(212, 165, 116, 0.12), transparent 70%);
    border: 1px solid rgba(212, 165, 116, 0.16);
}
.tc-slot { width: 104px; }
.tc-slot-card {
    width: 92px; border-radius: 10px;
    border: 1.5px dashed rgba(212, 165, 116, 0.45);
    background: rgba(212, 165, 116, 0.04);
    display: flex; align-items: center; justify-content: center;
}
.tc-slot:not(.is-filled) .tc-slot-card::before { content: attr(data-n); font-size: 1.4rem; font-weight: 700; color: rgba(212, 165, 116, 0.35); }
.tc-slot.is-filled .tc-slot-card { border: 0; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(212, 165, 116, 0.35); }
.tc-slot-name { font-size: 0.8rem; }
@media (min-width: 760px) {
    .tc-slot { width: 128px; }
    .tc-slot-card { width: 110px; }
    .tc-slot-pos { font-size: 0.74rem; }
}
.tc-slots.is-many { gap: 0.6rem 0.7rem; }
.tc-slots.is-many .tc-slot { width: 72px; }
.tc-slots.is-many .tc-slot-card { width: 60px; }
.tc-slots + .tc-fan { margin-top: 0.9rem; }
.tc-deck-hint { position: relative; margin: 0.5rem 0 0.4rem !important; }
.tc-deck-hint.is-inside { font-size: 0.95rem; }
.tc-deck-hint.is-inside b { font-size: 1.15rem; }

/* Cánh quạt: mọi lá quay quanh một tâm phía dưới */
.tc-fan.is-arc { position: relative; display: block; overflow: visible; padding: 0; scroll-snap-type: none; }
.tc-fan.is-arc .tc-back {
    position: absolute;
    top: var(--lift, 20px);
    left: calc(50% - var(--cw, 58px) / 2);
    width: var(--cw, 58px);
    margin: 0;
    rotate: var(--a, 0deg);
    transform-origin: 50% var(--r, 400px);
    border-radius: 7px;
    box-shadow: -3px 2px 6px -2px rgba(0, 0, 0, 0.85);
}
/* Viền vàng mảnh cho từng lá để nhìn rõ từng lá trong cánh quạt */
.tc-fan.is-arc .tc-back img { border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(243, 217, 164, 0.55); outline: 1px solid rgba(243, 217, 164, 0.4); outline-offset: -1px; }
.tc-fan.is-arc::before {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 60%; translate: -50% 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 165, 116, 0.14), transparent 70%);
}
.tc-fan.is-arc .tc-back:hover:not(:disabled), .tc-fan.is-arc .tc-back:focus-visible { transform: translateY(-16px); }
.tc-fan.is-arc .tc-back.is-taken { opacity: 0; transform: translateY(-24px); }
.tc-fan.is-arc.is-shuffling .tc-back { animation: tc-fanout 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 4ms); }
@keyframes tc-fanout { from { rotate: 0deg; opacity: 0; } to { rotate: var(--a, 0deg); opacity: 1; } }

@media (max-width: 600px) {
    .tc-bubble.is-deck { padding: 0.9rem 0.5rem 0.4rem; }
    .tc-slots { gap: 0.5rem; padding: 0.9rem 0.4rem 0.7rem; flex-wrap: nowrap; }
    .tc-slot { width: auto; flex: 0 1 96px; min-width: 0; }
    .tc-slot-card { width: 100%; max-width: 84px; }
    .tc-slots.is-many { flex-wrap: wrap; }
    .tc-slots.is-many .tc-slot { flex: 0 0 62px; }
    .tc-slots.is-many .tc-slot { width: 62px; }
    .tc-slots.is-many .tc-slot-card { width: 52px; }
}

/* Nghĩa gốc: màn rộng xếp theo cột (--cols tính theo số lá), hàng cuối lẻ căn giữa;
   mỗi lá là một thẻ dọc: ảnh lá ở trên, tên + vị trí + nghĩa ở dưới. */
@media (min-width: 760px) {
    .tc-means { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .tc-means > .flow-pp-item {
        flex: 0 1 calc((100% - (var(--cols, 3) - 1) * 1rem) / var(--cols, 3));
        max-width: 420px; min-width: 0; box-sizing: border-box;
        flex-direction: column; align-items: center; gap: 0.75rem;
        padding: 1.2rem 1.1rem 1.1rem; text-align: center;
    }
    .tc-means .flow-pp-img { width: 104px; border-radius: 9px; }
    .tc-means .flow-pp-body { align-items: center; width: 100%; }
    .tc-means .flow-pp-key { flex: 1; }
    .tc-means .flow-pp-link { margin-top: auto; }
}

/* ---------- Thẻ mua gói trong khung chat ---------- */
.tc-bubble.is-paywall { display: flex; justify-content: center; }
.tc-bubble.is-paywall .flow-pp-pay { width: 100%; max-width: 780px; }

@media (max-width: 600px) {
    .tc-chat { padding: 1rem 0.7rem 0.85rem; }
    .tc-ava { width: 34px; height: 34px; box-shadow: 0 0 0 1.5px rgba(212, 165, 116, 0.7), 0 6px 12px -6px rgba(0, 0, 0, 0.8); }
    .tc-bubble { max-width: 80%; }
    .tc-chips { margin-left: 2.7rem; }
    .tc-chips.is-spreads { grid-template-columns: 1fr; gap: 0.8rem; margin-left: 0; }
    .tc-chips.is-spreads .tc-chip { grid-template-columns: 84px 1fr; gap: 0.9rem; min-height: 0; padding: 1rem 0.95rem; }
    .tc-sp-img img { max-height: 110px; }
    .tc-chips.is-spreads .tc-chip-main { font-size: 1rem; }
    .tc-chips.is-spreads .tc-chip-sub { font-size: 0.84rem; }
    .tc-sp-price { font-size: 0.76rem; padding: 0.15rem 0.6rem; }
}

/* Điện thoại: chừa lề hai bên để khung chat không dính mép màn hình */
@media (max-width: 600px) {
    .is-chat-reading .tarot-reading-wrapper .tc-chat { width: auto; margin-left: 10px; margin-right: 10px; }
    .is-chat-reading .tarot-reading-wrapper .flow-disclaimer { padding: 0 14px; }
}

/* =====================================================================
   Cuộc trò chuyện nằm thẳng trong trang (09/10/2026, theo cách Mèo Béo): khung chat cao theo nội dung,
   KHÔNG có thanh cuộn riêng — cả trang chỉ một thanh cuộn nên kéo lên xuống liền mạch.
   Ô nhập dính đáy màn hình khi khách đang ở vùng chat (sticky), cuộn qua hết khung thì trôi theo.
   ===================================================================== */
.tc-chat { display: flex; flex-direction: column; }
.tc-log { position: relative; padding: 0.2rem 0.2rem 1rem; }
.tc-composer {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 6;
    flex-shrink: 0;
    box-shadow: 0 -14px 28px -18px rgba(0, 0, 0, 0.85), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .tc-composer { box-shadow: 0 -12px 26px -18px rgba(110, 74, 34, 0.45), 0 10px 22px -16px rgba(110, 74, 34, 0.4); }

/* Ba lá của trải 3 lá xếp ngang ở đầu phần Tổng quan */
.tc-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 0.9rem; }
.tc-trio-card { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; line-height: 1.3; }
.tc-trio-card img { width: 58px; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.8); margin-bottom: 0.2rem; }
.tc-trio-card b { font-size: 0.82rem; color: var(--theme-text-primary); }
.tc-trio-card small { font-size: 0.72rem; color: var(--theme-gold-text); }
@media (min-width: 760px) { .tc-trio { max-width: 460px; } .tc-trio-card img { width: 68px; } }

/* Nút nâng lên gói Đồng hành (khách đã mở Lắng nghe) */
.tc-chips.is-upgrade .tc-chip { border-color: var(--theme-gold-text); color: var(--theme-gold-text); font-weight: 700; }

/* Lời khuyên Tarot 3 lá dạng danh sách "Tên: việc cụ thể" (tarot-chat.js adviceList). */
.tc-advice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.tc-advice li { position: relative; margin: 0; padding-left: 1.2rem; line-height: 1.65; }
.tc-advice li::before { content: "✦"; position: absolute; left: 0; top: 0.15em; font-size: 0.8em; color: var(--theme-gold-text); }
.tc-advice b { display: block; margin-bottom: 0.1rem; font-weight: 700; color: var(--theme-gold-text); }
.tc-advice-end { margin-top: 0.9rem; font-style: italic; }
.tc-advice-end p { margin: 0; }

/* Ô nhập dính đáy màn hình (sticky) cần các khung bao ngoài không phải "khung cuộn": đổi overflow hidden → clip
   (vẫn chặn tràn ngang như cũ). Cùng cách trang Bói tình yêu (love.css). */
@supports (overflow: clip) {
    body.is-chat-reading #page,
    body.is-chat-reading .tarot-page-wrapper { overflow: clip !important; }
}

/* Ô nhập dính đáy màn hình → nút "lên đầu trang" nâng lên trên ô nhập (điện thoại, máy tính bảng). */
@media (max-width: 900px) {
    body:has(#tcComposer:not([hidden])) .back-to-top { bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
}