/*
Theme Name: Tarot Reading World
Description: Landing page bói Tarot online 1 trang duy nhất cho Tarot Reading World (bản quốc tế, đa ngôn ngữ) — tích hợp AI luận giải Tarot, miễn phí, không giới hạn.
Author: Hieu
Version: 1.0.0
Text Domain: tarotreadingworld
*/

/* ============================================
   THIẾT KẾ: "DEEP MYSTIC GOLD"
   Theo ảnh mẫu tham khảo — tím than rất sâu làm nền, vàng đồng ấm
   là màu nhấn DUY NHẤT (không còn tím sáng ở vai trò accent/nút):
   bg #120A1F / bg-2 #180F26 / card #1E1530 / card-hover #271C3D
   primary (vàng đồng) #C9A05A / primary-light #E0BC7A / primary-dark #A67F3F
   gold #D4A574 / gold-light #E6C18A
   text #F5F0E8 / text-secondary #B0A8C0
   border rgba(212,165,116,.18) — vàng mảnh thay vì trắng mờ

   Font: Playfair Display (tiêu đề) + Inter (nội dung) — được load qua thẻ
   <link> trong header.php (kèm preconnect) thay vì @import ở đây, vì
   preconnect giúp trình duyệt kết nối tới Google Fonts sớm hơn, tải nhanh
   hơn. Đổi từ Cinzel sang Playfair Display vì Cinzel thiếu glyph dấu
   tiếng Việt đầy đủ ở dạng hoa, gây lỗi hiển thị lem nhem với tiêu đề dài.
   ============================================ */

:root {
    /* Nền — tím than rất sâu theo ảnh mẫu */
    --bg: #120a1f;
    --bg-2: #180f26;
    --card: #1e1530;
    --card-hover: #271c3d;
    --bg-void: var(--bg);
    --bg-deep: var(--bg-2);
    --bg-panel: var(--card);
    --bg-panel-light: var(--card-hover);

    /* Màu nhấn DUY NHẤT: vàng đồng ấm — không còn tím sáng làm accent
       (giữ biến --primary/--primary-light/--primary-dark để không phải
       sửa hàng trăm chỗ tham chiếu, nhưng giờ trỏ về sắc vàng đồng) */
    --primary: #c9a05a;
    --primary-light: #e0bc7a;
    --primary-dark: #a67f3f;
    --gold: #d4a574;
    --gold-light: #e6c18a;
    /* Màu chữ đặt TRÊN nền vàng đồng — tím than đậm, không dùng trắng
       (đúng theo ảnh mẫu: nút "Bói bài ngay" chữ màu tối, không phải trắng) */
    --on-primary: #1a1024;
    /* Alias giữ tương thích với tên biến cũ trong file */
    --accent-purple: var(--primary);
    --accent-purple-light: var(--primary-light);
    --accent-purple-dark: var(--primary-dark);
    --accent-gold: var(--gold);
    --accent-gold-light: var(--gold-light);

    /* Glow — đổi từ tím sang vàng đồng cho đồng bộ */
    --glow-purple: rgba(201, 160, 90, 0.3);
    --glow-purple-soft: rgba(201, 160, 90, 0.15);
    --glow-gold: rgba(212, 165, 116, 0.3);

    /* Chữ */
    --text: #f5f0e8;
    --text-secondary: #b0a8c0;
    --text-primary: var(--text);
    --text-muted: rgba(176, 168, 192, 0.65);

    /* Viền dùng chung — vàng mảnh thay vì trắng mờ */
    --border: rgba(212, 165, 116, 0.18);
    --success: #4ade80;

    /* Card: nền + viền phát sáng vàng đồng */
    --card-bg: var(--card);
    --card-bg-hover: var(--card-hover);
    --card-border: var(--border);
    --card-border-accent: rgba(201, 160, 90, 0.55);
    --card-glow: 0 0 0 1px rgba(212, 165, 116, 0.12), 0 0 20px rgba(212, 165, 116, 0.06);
    --card-glow-hover: 0 0 0 1px rgba(212, 165, 116, 0.35), 0 0 32px rgba(212, 165, 116, 0.18);

    /* Font */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', -apple-system, system-ui, sans-serif;

    /* Bán kính bo góc chuẩn cho card */
    --radius-card: 20px;

    /* Nền body dạng gradient — tách riêng biến để light theme override được */
    --body-gradient: linear-gradient(135deg, #120a1f, #180f26, #1f1433);

    /* Header / nav mobile — tách riêng khỏi --bg vì cần độ mờ (alpha) khác */
    --header-bg: rgba(8, 6, 15, 0.72);
    --header-bg-scrolled: rgba(8, 6, 15, 0.94);
    --header-border: rgba(255, 255, 255, 0.06);
    --mobile-nav-bg: rgba(8, 6, 15, 0.98);

    /* Chữ luôn trắng bất kể theme (dùng cho vùng nền tối cố định như nút primary) */
    --text-on-dark: #ffffff;

    /* Logo: nền tối -> logo hoá trắng hoàn toàn để nổi bật trên nền tối.
       brightness(0) đưa mọi pixel không trong suốt về đen, invert(1) đảo
       thành trắng — giữ nguyên độ trong suốt (alpha) của nền ảnh gốc. */
    --logo-filter: brightness(0) invert(1);

    /* Nền input (textarea/select) — mờ trắng nhẹ trên nền tối */
    --input-bg: rgba(255, 255, 255, 0.03);

    /* Bóng đổ dùng chung, đổi nhẹ theo theme để không bị "nặng" trên nền sáng */
    --shadow-soft: rgba(0, 0, 0, 0.45);
}

/* ============================================
   LIGHT THEME — kích hoạt qua [data-theme="light"] trên <html>
   Giữ đúng vai trò từng biến của bản tối, chỉ đổi giá trị:
   nền sáng ngà ấm (không trắng tinh, giữ chất "mystic"),
   card trắng ngà với viền vàng đồng đậm hơn để đủ tương phản,
   chữ chuyển sang tím than đậm thay vì kem sáng.
   ============================================ */
[data-theme="light"] {
    --bg: #faf6ef;
    --bg-2: #f3ecdf;
    --card: #ffffff;
    --card-hover: #fbf5e8;
    --bg-void: var(--bg);
    --bg-deep: var(--bg-2);
    --bg-panel: var(--card);
    --bg-panel-light: var(--card-hover);

    /* Vàng đồng giữ nguyên vai trò accent, chỉ đậm hơn chút để nổi trên nền sáng */
    --primary: #b8863f;
    --primary-light: #c9a05a;
    --primary-dark: #8f6a2f;
    --gold: #b8863f;
    --gold-light: #c9a05a;
    --on-primary: #fffaf0;
    --accent-purple: var(--primary);
    --accent-purple-light: var(--primary-light);
    --accent-purple-dark: var(--primary-dark);
    --accent-gold: var(--gold);
    --accent-gold-light: var(--gold-light);

    --glow-purple: rgba(184, 134, 63, 0.22);
    --glow-purple-soft: rgba(184, 134, 63, 0.12);
    --glow-gold: rgba(184, 134, 63, 0.25);

    /* Chữ — tím than đậm thay cho kem sáng, đủ tương phản trên nền trắng ngà */
    --text: #241a35;
    --text-secondary: #5c5268;
    --text-primary: var(--text);
    --text-muted: rgba(92, 82, 104, 0.75);
    --text-on-dark: #ffffff;

    --border: rgba(184, 134, 63, 0.28);
    --success: #16a34a;

    --card-bg: var(--card);
    --card-bg-hover: var(--card-hover);
    --card-border: var(--border);
    --card-border-accent: rgba(184, 134, 63, 0.55);
    --card-glow: 0 0 0 1px rgba(184, 134, 63, 0.1), 0 2px 14px rgba(60, 40, 10, 0.06);
    --card-glow-hover: 0 0 0 1px rgba(184, 134, 63, 0.3), 0 8px 28px rgba(60, 40, 10, 0.12);

    --body-gradient: linear-gradient(135deg, #faf6ef, #f3ecdf, #f7efe0);

    --header-bg: rgba(255, 251, 244, 0.82);
    --header-bg-scrolled: rgba(255, 251, 244, 0.96);
    --header-border: rgba(184, 134, 63, 0.16);
    --mobile-nav-bg: rgba(255, 251, 244, 0.98);

    --shadow-soft: rgba(60, 40, 10, 0.18);

    /* Logo: nền sáng -> giữ nguyên màu gốc của ảnh logo, không filter gì. */
    --logo-filter: none;

    /* Nền input trên theme sáng: mờ nâu vàng nhạt thay vì mờ trắng (mờ trắng
       trên nền trắng ngà gần như vô hình, mất luôn phân biệt input/card) */
    --input-bg: rgba(184, 134, 63, 0.05);
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Chặn tràn ngang ở cấp document — overflow-x trên body KHÔNG chặn
       được các phần tử position:fixed/absolute vượt viewport (chúng
       tính theo html/viewport, không theo body), nên cần đặt ở cả 2 cấp. */
    overflow-x: hidden;
    width: 100%;
}

body {
    background: var(--body-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.65;
    overflow-x: hidden;
    /* Phòng thủ toàn cục chống tràn ngang: hệ thống có nhiều nội dung
       ĐỘNG không kiểm soát được độ dài chính xác (câu hỏi user tự
       nhập, văn bản AI sinh ra cho từng lá bài...) — 1 từ dài bất
       thường (không có khoảng trắng để browser wrap tự nhiên) có thể
       đẩy tràn ngang bất kỳ lúc nào nếu không có lớp bảo vệ này. */
    overflow-wrap: break-word;
    word-break: break-word;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Nội dung mặc định theo spec: Inter 17px, line-height 1.8, màu text-secondary.
   Các đoạn có class riêng (card desc, subtitle...) vẫn override được nhờ
   CSS specificity cao hơn thẻ p thuần. */
p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

h1, h2, h3 {
    font-family: var(--font-heading);
}

/* Hiệu ứng galaxy nền — radial glow rất nhẹ, cố định khi cuộn */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 800px 500px at 15% -8%, rgba(201, 160, 90, 0.1), transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 20%, rgba(201, 160, 90, 0.06), transparent 60%),
        radial-gradient(ellipse 600px 450px at 50% 100%, rgba(212, 175, 55, 0.04), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.tarot-page-wrapper {
    position: relative;
    z-index: 1;
}

/* ============================================
   TIỆN ÍCH DÙNG CHUNG
   ============================================ */
.hidden {
    display: none !important;
}

.disabled {
    opacity: 0.42;
    pointer-events: none;
    filter: grayscale(0.25);
}

/* Section header dùng chung */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Đường phân cách mảnh, phát sáng nhẹ — thay cho khung vàng dày */
.decorative-line {
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    box-shadow: 0 0 8px var(--glow-gold);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    color: var(--accent-gold);
}

.section-subtitle {
    text-align: center;
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: 1.8;
    max-width: 760px;
    margin: 0 auto 3rem;
}

/* Sao nhỏ + bụi ánh sáng dùng chung cho các lớp hiệu ứng nền */
.stars-container div,
.tarot-stars-bg div {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 50%;
    animation: twinkle 3.5s infinite;
}

.mystical-particles div,
.tarot-particles-bg div {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 8px var(--glow-gold);
    opacity: 0.4;
    animation: floatParticle 14s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.9; }
}

@keyframes floatParticle {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-24px) translateX(10px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.06); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 0.9s ease forwards; }

/* ============================================
   HEADER
   ============================================ */
.bbt-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--header-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bbt-header.scrolled {
    background: var(--header-bg-scrolled);
    box-shadow: 0 4px 28px var(--shadow-soft);
}

.bbt-header-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.1rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
}

.bbt-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Logo đổi filter theo theme: nền tối -> hoá trắng hoàn toàn (dễ đọc trên
   nền tối), nền sáng -> giữ nguyên màu gốc của ảnh (định nghĩa 2 giá trị
   --logo-filter tương ứng ở :root và khối [data-theme="light"] đầu file).
   Áp dụng cho mọi ảnh logo trong theme (header + footer dùng chung 1 file). */
.bbt-logo img,
.bbt-footer-brand img {
    filter: var(--logo-filter);
    transition: filter 0.3s ease;
}

.bbt-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
}

.bbt-nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.bbt-nav-link:hover {
    color: var(--text-primary);
    background: rgba(201, 160, 90, 0.12);
}

.bbt-header-cta:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--glow-purple);
}

/* --- Đăng nhập bằng Google --- */
.bbt-google-login-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.bbt-google-login-btn:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
    transform: translateY(-2px);
}

/* --- Vùng phải header: nhóm thưởng/credit + CTA + avatar --- */
.bbt-header-right {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-shrink: 0;
}

/* Khối gộp "Thưởng" + số Credit thành 1 viên thuốc duy nhất, có đường
   phân cách dọc ở giữa (đúng bố cục tham khảo) — thay vì 2 phần tử
   tách rời với viền/nền riêng như trước. */
.bbt-reward-credit-group {
    display: flex;
    align-items: center;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    overflow: hidden;
}

.bbt-reward-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease;
}

.bbt-reward-btn:hover {
    background: var(--card-bg);
}

.bbt-reward-btn-icon {
    font-size: 0.95rem;
}

.bbt-reward-btn-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 9px;
    height: 9px;
    background: #ff5a2c;
    border: 2px solid var(--card-bg-hover);
    border-radius: 50%;
}

.bbt-reward-credit-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.5rem 0;
    background: var(--card-border);
    flex-shrink: 0;
}

.bbt-credit-badge-header {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.bbt-credit-badge-icon {
    font-size: 0.9rem;
}

.bbt-credit-badge-unit {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
}

.bbt-header-cta {
    display: inline-flex;
    padding: 0.55rem 1.3rem;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple-light));
    border-radius: 30px;
    color: var(--on-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.bbt-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--glow-purple-soft);
}

/* --- Avatar (trigger dropdown) --- */
.bbt-user-menu {
    position: relative;
    flex-shrink: 0;
}

.bbt-user-menu-trigger {
    display: flex;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.bbt-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--card-border);
    transition: border-color 0.25s ease;
}

.bbt-user-menu-trigger:hover .bbt-user-avatar {
    border-color: var(--card-border-accent);
}

.bbt-user-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
}

/* --- Dropdown desktop (bấm avatar) --- */
.bbt-user-dropdown {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    width: 260px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--card-glow-hover);
    padding: 1rem;
    display: none;
    flex-direction: column;
    z-index: 1001;
}

.bbt-user-dropdown.open {
    display: flex;
}

.bbt-user-dropdown-header {
    padding-bottom: 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

.bbt-user-dropdown-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.bbt-user-dropdown-email {
    font-size: 0.78rem;
    color: var(--text-muted);
    word-break: break-all;
}

.bbt-user-dropdown-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

.bbt-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbt-user-dropdown-item:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

.bbt-user-dropdown-cta {
    display: block;
    text-align: center;
    padding: 0.7rem;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple-light));
    border-radius: 12px;
    color: var(--on-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.bbt-user-dropdown-cta:hover {
    transform: translateY(-1px);
}

.bbt-user-dropdown-logout {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbt-user-dropdown-logout:hover {
    background: var(--card-bg-hover);
    color: #e08a8a;
}

/* ============================================
   MODAL NẠP CREDIT — chỉ còn .bbt-modal-title (dùng làm tiêu đề trong
   trang /bang-gia/), phần modal-overlay/modal/modal-close đã bỏ khi
   tách nạp credit thành trang riêng (không còn hiện dạng modal/popup).
   ============================================ */
.bbt-modal-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-gold);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* --- Bảng so sánh gói (thay thế 3 card đơn giản cũ) — mỗi gói là 1
   cột, mỗi tính năng là 1 hàng, cột "Phổ biến nhất" được làm nổi bật.
   Dùng CSS custom property --bbt-compare-cols để số cột linh hoạt
   theo số gói thực tế (hiện tại luôn là 3, nhưng không hardcode). --- */
.bbt-compare-table {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.bbt-compare-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(var(--bbt-compare-cols, 3), 1fr);
    border-bottom: 1px solid var(--card-border);
}

.bbt-compare-row:last-child {
    border-bottom: none;
}

.bbt-compare-label-cell {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.bbt-compare-value-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    border-left: 1px solid var(--card-border);
}

.bbt-compare-col-featured {
    background: rgba(201, 160, 90, 0.06);
}

.bbt-compare-header-row {
    background: var(--card-bg-hover);
}

/* Hàng nhóm phía trên header — "MIỄN PHÍ" (1 cột) và "NÂNG CAO (30
   NGÀY)" (trải rộng bao trùm toàn bộ cột gói trả phí, dùng
   grid-column: span N tính động theo JS). */
.bbt-compare-group-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(var(--bbt-compare-cols, 3), 1fr);
    border-bottom: 1px solid var(--card-border);
}

.bbt-compare-group-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-left: 1px solid var(--card-border);
}

.bbt-compare-group-cell-pro {
    color: var(--accent-gold);
    background: rgba(201, 160, 90, 0.06);
}

.bbt-compare-col-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem 1rem;
    border-left: 1px solid var(--card-border);
}

.bbt-compare-featured-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.8rem;
    background: var(--accent-gold);
    color: #1a1410;
    border-radius: 0 0 10px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.bbt-compare-icon {
    font-size: 1.8rem;
    margin-top: 0.75rem;
}

.bbt-compare-label {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.bbt-compare-price {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 1.15rem;
    font-family: var(--font-heading);
}

.bbt-compare-check {
    color: #6fd19a;
    font-weight: 700;
    font-size: 1.1rem;
}

.bbt-compare-cross {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.bbt-compare-tier-badge {
    font-size: 1.3rem;
}

.bbt-compare-savings {
    color: #6fd19a;
    font-weight: 700;
}

.bbt-compare-cta-row {
    background: var(--card-bg-hover);
}

.bbt-compare-buy-btn {
    width: 100%;
    padding: 0.65rem 0.5rem;
    background: var(--primary);
    border: none;
    border-radius: 20px;
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.bbt-compare-buy-btn:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

.bbt-compare-col-featured .bbt-compare-buy-btn {
    background: var(--accent-gold);
    color: #1a1410;
}

.bbt-compare-col-featured .bbt-compare-buy-btn:hover {
    background: #e0b876;
}

/* --- Layout CARD cho mobile — thay thế hoàn toàn cách "chữa cháy"
   bảng grid cũ (đổi grid-template-columns riêng từng hàng khiến các
   hàng không đồng nhất, gây vỡ chữ/lệch cột trên màn hình hẹp). Giờ:
   trên mobile ẨN HẲN bảng grid desktop, hiện 2 box card riêng biệt —
   "Miễn Phí" (1 card đơn giản) + "Nâng Cao (30 ngày)" (3 card con xếp
   dọc, dễ đọc/cuộn). --- */
.bbt-compare-mobile {
    display: none;
}

.bbt-compare-mobile-card {
    position: relative;
    padding: 1.5rem 0;
    border-top: 1px solid var(--card-border);
    text-align: center;
}

.bbt-compare-mobile-card:first-child {
    padding-top: 0;
    border-top: none;
}

.bbt-compare-mobile-card-featured {
    /* Không còn viền/nền riêng — chỉ khác biệt bằng tiêu đề màu vàng
       đồng (.bbt-compare-mobile-group-title) để không tạo thêm 1 lớp
       khung nữa bên trong khung ngoài đã có sẵn
       (.bbt-pricing-select-block). */
}

.bbt-compare-mobile-card-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.bbt-compare-mobile-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bbt-compare-mobile-card-price {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 1.3rem;
    font-family: var(--font-heading);
}

.bbt-compare-mobile-card-credits {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    margin-bottom: 1.25rem;
}

.bbt-compare-mobile-feature-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.bbt-compare-mobile-feature-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--card-border);
    font-size: 0.85rem;
}

.bbt-compare-mobile-feature-list li:last-child {
    border-bottom: none;
}

.bbt-compare-mobile-feature-label {
    color: var(--text-secondary);
    flex-shrink: 1;
}

.bbt-compare-mobile-feature-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.bbt-compare-mobile-group-title {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-gold);
    margin-bottom: 1.25rem;
}

/* --- Thanh tab chọn gói — 3 ô ngang (giống ảnh mẫu), bấm đổi động
   nội dung bên dưới không cần tải lại. --- */
.bbt-compare-mobile-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.bbt-compare-mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.65rem 0.4rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbt-compare-mobile-tab-credits {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.bbt-compare-mobile-tab-unit {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.bbt-compare-mobile-tab-active {
    background: rgba(201, 160, 90, 0.14);
    border-color: var(--accent-gold);
}

.bbt-compare-mobile-tab-active .bbt-compare-mobile-tab-credits {
    color: var(--accent-gold);
}

/* Badge "Phổ biến nhất" trong ngữ cảnh MOBILE — đặt trong luồng bình
   thường (không absolute như bản desktop), nằm trên 1 dòng riêng phía
   trên tên gói, không chồng lấn với thanh tab hay bất kỳ phần tử nào
   khác. */
.bbt-compare-mobile-badge-row {
    margin-bottom: 0.75rem;
}

.bbt-compare-mobile-badge-row .bbt-compare-featured-badge {
    position: static;
    display: inline-block;
    transform: none;
    border-radius: 20px;
}

.bbt-compare-mobile-buy-btn {
    margin-top: 0;
}

@media (max-width: 720px) {
    .bbt-compare-table {
        display: none;
    }
    .bbt-compare-mobile {
        display: block;
    }
}

.bbt-topup-custom {
    padding-top: 1.25rem;
    border-top: 1px dashed var(--card-border);
}

.bbt-topup-custom label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

.bbt-topup-custom-row {
    display: flex;
    gap: 0.6rem;
}

.bbt-topup-custom-row input {
    flex: 1;
    padding: 0.7rem 1rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.bbt-topup-custom-btn {
    padding: 0.7rem 1.3rem;
    background: var(--primary);
    border: none;
    border-radius: 12px;
    color: var(--on-primary);
    font-weight: 700;
    cursor: pointer;
}

.bbt-topup-unit-price {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.bbt-topup-qr-img {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--card-border);
}

.bbt-topup-order-info {
    background: var(--card-bg-hover);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.bbt-topup-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.bbt-topup-info-label {
    color: var(--text-muted);
    flex-shrink: 0;
}

.bbt-topup-info-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.bbt-topup-info-amount {
    color: var(--accent-gold);
    font-size: 1.05rem;
}

.bbt-topup-info-divider {
    border-top: 1px dashed var(--card-border);
    margin: 0.6rem 0;
}

.bbt-topup-copyable {
    cursor: pointer;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: var(--card-bg);
    border: 1px dashed var(--card-border-accent);
    transition: all 0.2s ease;
}

.bbt-topup-copyable:hover {
    background: var(--glow-purple-soft);
}

.bbt-topup-hint {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    font-style: italic;
    margin-top: 0.5rem;
}

.bbt-topup-waiting {
    text-align: center;
    color: var(--accent-gold);
    font-size: 0.9rem;
}

.bbt-topup-waiting::after {
    content: '...';
}

.bbt-topup-success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 50%;
    font-size: 1.8rem;
}

#bbtTopupStepSuccess {
    text-align: center;
}

#bbtTopupStepSuccess p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.bbt-pricing-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2.2rem;
    margin-bottom: 0.85rem;
    background: var(--accent-gold);
    border: none;
    border-radius: 30px;
    color: #1a1410;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 6px 20px var(--glow-purple-soft);
    transition: all 0.25s ease;
}

.bbt-pricing-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--glow-purple-soft);
}

.bbt-topup-done-btn {
    padding: 0.75rem 2rem;
    background: var(--primary);
    border: none;
    border-radius: 30px;
    color: var(--on-primary);
    font-weight: 700;
    cursor: pointer;
}

/* ============================================
   TRANG BẢNG GIÁ (page-bang-gia.php) — dùng lại toàn bộ CSS
   .bbt-topup-* ở trên (không phụ thuộc .bbt-modal), chỉ thêm khung bố
   cục riêng cho ngữ cảnh "trang đầy đủ" thay vì modal nhỏ.
   ============================================ */
.bbt-page-container.bbt-pricing-container {
    max-width: 1500px;
}

.bbt-pricing-guest-notice {
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 2.5rem 2rem;
}

.bbt-pricing-guest-notice p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.bbt-pricing-login-btn {
    display: inline-flex;
    margin: 0 auto;
}

.bbt-pricing-guest-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: 14px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.bbt-pricing-current-credit {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.bbt-pricing-current-credit strong {
    color: var(--accent-gold);
    font-size: 1.15rem;
}

.bbt-pricing-select-block,
.bbt-pricing-qr-block,
.bbt-pricing-success-block {
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 2rem;
    text-align: center;
}


.bbt-pricing-back-btn {
    display: block;
    margin: 1rem auto 0;
    padding: 0.6rem 1.5rem;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.bbt-pricing-back-btn:hover {
    border-color: var(--card-border-accent);
    color: var(--text-primary);
}

.bbt-pricing-home-link {
    display: block;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
}

/* ============================================
   TRANG TÀI KHOẢN CỦA TÔI (page-my-account.php) — dạng dashboard
   ============================================ */
.bbt-page-container.bbt-account-dashboard-container {
    max-width: 1500px;
}

.bbt-account-profile-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
}

/* --- Badge hạng thành viên TÍCH HỢP TRỰC TIẾP lên avatar (góc dưới
   phải, giống rank badge trong game) — thay cho cách hiển thị rời
   (dòng text riêng) trước đây. Dùng gradient VÀNG KIM (giống màu
   vương miện) thay vì màu chữ mặc định đen/tối trước đây, nổi bật và
   sang trọng hơn nhiều. .bbt-avatar-wrap là container relative để
   badge định vị đúng theo avatar bên trong nó (áp dụng chung cho MỌI
   nơi có avatar: header desktop, panel mobile, trang Tài khoản). --- */
.bbt-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.bbt-avatar-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* KHÔNG còn nền/viền/bo tròn phía sau — chỉ CHÍNH KÝ TỰ huy hiệu
       (★/♛) mang màu vàng kim, nổi trực tiếp trên avatar. text-shadow
       tạo viền tối mỏng xung quanh ký tự để vẫn đọc rõ trên mọi nền
       avatar (sáng/tối/ảnh phức tạp) mà không cần khối nền riêng. */
    color: #ffd700;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.bbt-avatar-badge-sm {
    font-size: 0.85rem;
    top: -4px;
    right: -4px;
}

.bbt-avatar-badge-lg {
    font-size: 1.5rem;
    top: -8px;
    right: -8px;
}

.bbt-account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bbt-account-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.bbt-account-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.bbt-account-email {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Trạng thái tài khoản: khối bọc ngoài + huy hiệu hạng thành viên --- */
.bbt-account-status-card {
    margin-bottom: 1.5rem;
}

.bbt-account-status-tier {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.bbt-account-status-tier-badge {
    font-size: 1.3rem;
}

.bbt-account-status-tier-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Tiêu đề panel thứ 2/3 trong cùng 1 panel (vd "Thông Tin Tài Khoản"
   sau "Trạng Thái Tài Khoản") — thêm khoảng cách phía trên để tách
   biệt rõ 2 khối nội dung khác nhau trong cùng panel. */
.bbt-dashboard-panel-title-spaced {
    margin-top: 2rem;
}

.bbt-account-credit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.bbt-account-credit-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.bbt-account-credit-value {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.bbt-account-credit-expiry-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    max-width: 320px;
}

.bbt-account-topup-link {
    padding: 0.7rem 1.5rem;
    background: var(--primary);
    border-radius: 30px;
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.bbt-account-topup-link:hover {
    background: var(--primary-light);
}

/* --- Modal điểm danh (nút "Thưởng" trên header) --- */
.bbt-checkin-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.bbt-checkin-modal-overlay.open {
    display: flex;
}

.bbt-checkin-modal {
    position: relative;
    width: 100%;
    max-width: 1430px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow-hover);
}

/* Nút đóng modal — dùng position:sticky (không phải fixed) để LUÔN
   CỐ ĐỊNH đúng góc trên-phải của MODAL khi cuộn nội dung dài lên/
   xuống (không bị trôi mất khỏi tầm nhìn như absolute cũ, và không bị
   lệch ra góc MÀN HÌNH THẬT như fixed — vì modal không chiếm full màn
   hình, có padding/margin căn giữa). Sticky bám theo trục cuộn của
   .bbt-checkin-modal (cha gần nhất có overflow-y:auto).
   float:right + margin-bottom âm là kỹ thuật để nút "nổi" phía trên
   nội dung mà không cần position:absolute (vốn sẽ mất tác dụng sticky
   khi kết hợp) — đã xác minh hoạt động đúng bằng đo lường thực tế
   (không trôi khi cuộn, luôn click được, không bị phần tử khác che). */
.bbt-checkin-modal-close {
    position: sticky;
    float: right;
    top: 0.9rem;
    margin-right: 0.9rem;
    margin-bottom: -34px;
    z-index: 10;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* Modal điểm danh — nội dung nằm bên trong khung .bbt-checkin-modal
   đã có nền/viền riêng ở trên, chỉ cần padding cho thoáng. */
.bbt-checkin-modal .bbt-checkin-modal-body {
    padding: 2rem;
}

@media (max-width: 640px) {
    .bbt-checkin-modal {
        max-height: 85vh;
    }
    .bbt-checkin-modal .bbt-checkin-modal-body {
        padding: 1.25rem 1rem;
    }
}

/* --- Modal đăng nhập (dùng chung mọi trang) --- */
.bbt-login-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.bbt-login-modal-overlay.open {
    display: flex;
}

.bbt-login-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow-hover);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

.bbt-login-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.bbt-login-modal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.bbt-login-modal-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.bbt-login-modal-btn {
    width: 100%;
    justify-content: center;
}

/* --- Modal cứu chuỗi điểm danh (dùng chung mọi trang) --- */
.bbt-rescue-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.bbt-rescue-modal-overlay.open {
    display: flex;
}

.bbt-rescue-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow-hover);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

.bbt-rescue-modal-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.bbt-rescue-modal-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.bbt-rescue-modal-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.bbt-rescue-modal-btn {
    display: block;
    width: 100%;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.bbt-rescue-modal-btn-primary {
    background: #ff5a2c;
    color: #fff;
    margin-bottom: 0.75rem;
}

.bbt-rescue-modal-btn-primary:hover {
    background: #ff7043;
    transform: translateY(-2px);
}

.bbt-rescue-modal-btn-secondary {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.bbt-rescue-modal-btn-secondary:hover {
    border-color: var(--card-border-accent);
    color: var(--text-primary);
}

.bbt-daily-message-section {
    margin-bottom: 1.25rem;
}

.bbt-daily-message-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.bbt-daily-message-section-title-do {
    color: #6fd19a;
}

.bbt-daily-message-section-title-avoid {
    color: #ff7a45;
}

.bbt-daily-message-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.bbt-daily-message-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.8;
}

.bbt-daily-message-list-do li::marker {
    color: #6fd19a;
}

.bbt-daily-message-list-avoid li::marker {
    color: #ff7a45;
}

.bbt-daily-message-quote {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--accent-gold);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    padding: 0 0.5rem;
}

/* --- Hành Trình 30 Ngày (khối "ngày hiện tại" riêng + lưới 5 cột) --- */
.bbt-journey-wrapper {
    position: relative;
}

/* Họa tiết trang trí mặt trời/mặt trăng góc khung — dùng currentColor
   để MÀU TỰ ĐỘNG KHỚP theo theme sáng/tối hiện tại của site (không
   hardcode màu cố định), đặt color qua var(--card-border-accent) vốn
   đã tự đổi đúng sắc thái ở cả 2 chế độ. */
.bbt-journey-deco {
    position: absolute;
    width: 70px;
    height: 70px;
    color: var(--card-border-accent);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.bbt-journey-deco-sun {
    top: -10px;
    left: -10px;
    animation: bbtJourneyDecoSpin 40s linear infinite;
}

.bbt-journey-deco-moon {
    top: -10px;
    right: -10px;
    opacity: 0.4;
}

@keyframes bbtJourneyDecoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .bbt-journey-deco {
        width: 44px;
        height: 44px;
    }
}

.bbt-journey-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 1.75rem;
}

.bbt-journey-cycle-tag {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    border-radius: 20px;
    color: var(--accent-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.bbt-journey-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.5rem 0 0.4rem;
}

.bbt-journey-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    max-width: 480px;
    margin: 0 auto;
}

/* --- Chuỗi nhận thưởng — hiển thị streak hiện tại/30, thanh tiến
   trình với marker tại các mốc thưởng lớn, và mốc tiếp theo. --- */
.bbt-journey-streak-box {
    position: relative;
    z-index: 1;
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    text-align: center;
}

.bbt-journey-streak-count {
    margin-bottom: 0.85rem;
}

.bbt-journey-streak-number {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent-gold);
}

.bbt-journey-streak-total {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.bbt-journey-streak-bar {
    position: relative;
    height: 8px;
    background: var(--card-bg-hover);
    border-radius: 999px;
    margin-bottom: 0.85rem;
    overflow: visible;
}

.bbt-journey-streak-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold), #ff5a2c);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.bbt-journey-streak-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border: 2px solid var(--card-border-accent);
    border-radius: 50%;
}

.bbt-journey-streak-marker-reached {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
}

.bbt-journey-streak-milestone {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.bbt-journey-streak-milestone strong {
    color: var(--accent-gold);
    font-weight: 700;
}

/* --- Carousel mobile: 1 lá bài/slide, gộp chung 30 ngày thành 1
   chuỗi tuần tự, mặc định cuộn tới đúng "ngày hiện tại" khi mở. Mặc
   định ẨN — chỉ hiện trên mobile qua media query (max-width: 640px)
   ở cuối file. --- */
.bbt-journey-carousel-mobile {
    display: none;
}

.bbt-journey-carousel-viewport {
    position: relative;
}

.bbt-journey-carousel-track {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bbt-journey-carousel-track::-webkit-scrollbar {
    display: none;
}

.bbt-journey-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.75rem;
}

.bbt-journey-carousel-day-label {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    border-radius: 20px;
    margin-bottom: 1rem;
}

.bbt-journey-carousel-card-frame {
    width: calc(100% - 3.5rem);
    max-width: 360px;
    aspect-ratio: 0.588;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.bbt-journey-carousel-card-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bbt-journey-carousel-card-back {
    position: relative;
}

.bbt-journey-carousel-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.bbt-journey-carousel-card-date {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.bbt-journey-carousel-reward {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-top: 0.3rem;
}

.bbt-journey-carousel-reward-locked {
    color: var(--text-muted);
}

.bbt-journey-carousel-message {
    position: relative;
    width: 100%;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-primary);
    font-style: italic;
    margin-top: 1rem;
    max-width: 500px;
    padding: 0.9rem 1.1rem 0.9rem 1.3rem;
    background: var(--card-bg-hover);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    text-align: left;
}

.bbt-journey-carousel-message::before {
    content: '\2726';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: 50%;
    font-size: 0.6rem;
    color: var(--accent-gold);
}

.bbt-journey-carousel-slide-locked .bbt-journey-carousel-card-date {
    margin-top: 0;
}

.bbt-journey-carousel-slide-today .bbt-journey-open-btn {
    margin-top: 0.25rem;
}

.bbt-journey-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 1.2rem;
    opacity: 0.85;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbt-journey-carousel-nav-prev {
    left: 0;
}

.bbt-journey-carousel-nav-next {
    right: 0;
}

.bbt-journey-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

.bbt-journey-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--card-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbt-journey-carousel-dot-active {
    width: 18px;
    border-radius: 4px;
    background: #ff5a2c;
}

.bbt-journey-scroll-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.bbt-journey-body {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

/* --- Khối "NGÀY HIỆN TẠI" — tách riêng, to hơn, bên trái --- */
.bbt-journey-current-box {
    flex-shrink: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.25rem;
}

.bbt-journey-current-tag {
    display: inline-block;
    padding: 0.3rem 1rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    border-radius: 20px;
    color: var(--accent-gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.bbt-journey-current-face {
    width: 160px;
    aspect-ratio: 0.588;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.bbt-journey-current-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bbt-journey-current-quote {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    padding: 0;
    border: none;
    position: relative;
}

.bbt-journey-current-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.bbt-journey-current-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.bbt-journey-view-btn {
    padding: 0.6rem 1.5rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbt-journey-view-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* --- Lưới 5 cột cho các ngày còn lại (đã thu thập trước đó / chưa
   tới lượt) — cố định 5 cột theo màn hình rộng, tự giảm cột khi hẹp
   hơn, có thể cuộn dọc nếu nội dung dài hơn khung nhìn. --- */
.bbt-journey-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem 1rem;
    align-content: start;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Hiệu ứng chuyển trang khi bấm nút lùi/tiếp — mờ dần + trượt nhẹ
   theo đúng hướng đang di chuyển, để không còn cảm giác "đổi số cứng"
   khi phân trang. JS thêm/xóa các class này đúng thời điểm (xem
   window.bbtInitJourneyGridPagination() trong header.php). */
.bbt-journey-grid-out-left {
    opacity: 0;
    transform: translateX(-24px);
}

.bbt-journey-grid-out-right {
    opacity: 0;
    transform: translateX(24px);
}

.bbt-journey-grid-in-left {
    opacity: 0;
    transform: translateX(-24px);
}

.bbt-journey-grid-in-right {
    opacity: 0;
    transform: translateX(24px);
}

.bbt-journey-card-lock-icon {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.bbt-journey-nav-btn {
    flex-shrink: 0;
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.bbt-journey-nav-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.bbt-journey-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
    border-color: var(--card-border);
    color: var(--text-primary);
}

.bbt-journey-nav-btn:disabled:hover {
    border-color: var(--card-border);
    color: var(--text-primary);
}

.bbt-journey-scroll-hint {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Thanh điều hướng riêng cho MOBILE — thay thế 2 nút prev/next ở rìa
   (ẩn trên mobile vì khó bấm/layout rối). Mặc định ẩn, chỉ hiện qua
   media query bên dưới khi màn hình đủ nhỏ. */
.bbt-journey-mobile-pager {
    display: none;
}

@media (max-width: 640px) {
    .bbt-journey-mobile-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 0.5rem;
    }
    .bbt-journey-mobile-pager-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--card-bg-hover);
        border: 1px solid var(--card-border);
        color: var(--text-primary);
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bbt-journey-mobile-pager-btn:disabled {
        opacity: 0.3;
        cursor: default;
    }
    .bbt-journey-mobile-pager-label {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-secondary);
        min-width: 80px;
        text-align: center;
    }
}

.bbt-journey-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bbt-journey-card-day {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.bbt-journey-card-face {
    width: 100%;
    aspect-ratio: 0.588;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.bbt-journey-card-collected .bbt-journey-card-face {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.bbt-journey-card-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bbt-journey-card-back {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    position: relative;
}

.bbt-journey-card-back-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 9px;
}

/* Hiệu ứng trôi nhẹ lên xuống cho mọi thẻ trong hành trình — animation-delay
   riêng từng thẻ được JS gán qua style inline (item.day % 5), để cả
   dãy không trôi đồng loạt cùng nhịp, trông tự nhiên hơn. */
@keyframes bbtJourneyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.bbt-journey-card-float {
    animation: bbtJourneyFloat 3.2s ease-in-out infinite;
}

/* Thẻ đã thu thập có thể bấm vào để xem lại thông điệp — báo hiệu
   bằng con trỏ tay + hiệu ứng nhấc nhẹ khi hover (thêm vào animation
   trôi nền, không thay thế nó). */
.bbt-journey-card-collected {
    cursor: pointer;
}

.bbt-journey-card-collected:hover .bbt-journey-card-face {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    border-color: var(--accent-gold);
}

.bbt-journey-open-btn {
    position: relative;
    z-index: 1;
    padding: 0.5rem 0.9rem;
    background: #ff5a2c;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.bbt-journey-open-btn:hover {
    transform: translateY(-2px);
}

.bbt-journey-card-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.bbt-journey-card-locked .bbt-journey-card-name,
.bbt-journey-card-locked .bbt-journey-card-date {
    color: var(--text-muted);
}

.bbt-journey-card-date {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.bbt-journey-card-reward {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-top: 0.2rem;
}

.bbt-journey-card-reward-locked {
    color: var(--text-muted);
}

@media (max-width: 640px) {
    /* Trên mobile: ẨN HẲN khối desktop (khối "Ngày hiện tại" tách
       riêng + lưới 5 cột phân trang) — thay bằng carousel 1 lá/slide
       riêng biệt (.bbt-journey-carousel-mobile, hiện qua rule bên
       dưới), đúng theo yêu cầu UX mới: mobile chỉ có 1 lá bài của
       ngày hiện tại + 2 nút trái/phải để xem các ngày khác. */
    .bbt-journey-scroll-wrap {
        display: none;
    }
    .bbt-journey-carousel-mobile {
        display: block;
    }
    .bbt-journey-streak-box {
        padding: 1rem;
        margin: 0 0 1.5rem;
    }
}

@media (min-width: 641px) {
    /* Trên desktop/tablet: ẨN carousel mobile, chỉ hiện khối desktop
       như thiết kế gốc. */
    .bbt-journey-carousel-mobile {
        display: none;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .bbt-journey-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Popup xem lại thông điệp (bấm vào 1 lá đã thu thập trong hành
   trình) — nổi lên TRÊN modal chính, không rời khỏi giao diện hành
   trình. Dùng var(--card-bg)/var(--text-primary)... để tự động khớp
   đúng theo chế độ sáng/tối user đang chọn. --- */
.bbt-journey-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 20, 10, 0.55);
    align-items: flex-start;
    justify-content: center;
    z-index: 3000;
    padding: 3vh 1.5rem;
    overflow-y: auto;
}

.bbt-journey-popup-overlay.open {
    display: flex;
}

/* --- Khung popup: nền BE/KEM SÁNG thanh lịch (không phải tối), viền
   vàng kim mảnh, bo góc lớn — thiết kế để CHỤP ẢNH ĐẸP, đăng lên
   fanpage MXH được ngay. Theo đúng ảnh mẫu tham khảo. --- */
.bbt-journey-popup {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #fdfaf3 0%, #faf5e8 100%);
    border: 1px solid rgba(201, 160, 90, 0.4);
    border-radius: 28px;
    box-shadow:
        0 0 0 1px rgba(201, 160, 90, 0.12),
        0 30px 80px rgba(120, 90, 40, 0.22);
    padding: 3rem 3.5rem 9rem;
    text-align: left;
    margin: auto;
    overflow: hidden;
    color: #3a3428;
}

.bbt-journey-popup-close {
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(201, 160, 90, 0.35);
    color: #7a6a4a;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(120, 90, 40, 0.12);
}

/* --- Tia sáng trang trí góc trên trái/phải — mô phỏng ánh hào quang
   toả ra, đúng theo ảnh mẫu. Màu vàng kim rất nhạt, đặt phía SAU nội
   dung (z-index thấp), không cạnh tranh với chữ. --- */
.bbt-journey-popup-rays {
    position: absolute;
    top: 0;
    width: 220px;
    height: 220px;
    color: #d4af6a;
    pointer-events: none;
    z-index: 0;
}

.bbt-journey-popup-rays-left {
    left: 0;
}

.bbt-journey-popup-rays-right {
    right: 0;
    transform: scaleX(-1);
}

/* --- Phần đầu popup: tiêu đề + tên lá + badge ngày/trạng thái, căn giữa --- */
.bbt-journey-popup-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 2rem;
}

.bbt-journey-popup-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #c9a05a;
    margin-bottom: 0.75rem;
}

.bbt-journey-popup-card-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: #2b2340;
    margin: 0 0 1.1rem;
}

.bbt-journey-popup-header .bbt-journey-popup-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.3rem;
    background: #fff;
    border: 1px solid rgba(201, 160, 90, 0.4);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #8a7a52;
    margin: 0;
}

/* --- 2 cột: ảnh + nội dung --- */
.bbt-journey-popup-columns {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2.5rem;
}

.bbt-journey-popup-image-col {
    flex-shrink: 0;
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Khung viền KÉP vàng kim quanh ảnh lá bài — viền ngoài mảnh cách 1
   khoảng với ảnh, mô phỏng khung tranh cổ điển, đúng theo ảnh mẫu. */
.bbt-journey-popup-image-frame {
    position: relative;
    width: 100%;
    margin-bottom: 1.1rem;
    padding: 12px;
    border: 2px solid #c9a05a;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(120, 90, 40, 0.12);
}

.bbt-journey-popup-image-frame::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(201, 160, 90, 0.6);
    border-radius: 10px;
    pointer-events: none;
}

/* 4 dấu ✦ nhỏ ở góc khung — chi tiết "đóng đinh" trang trí đặc trưng khung tranh cổ. */
.bbt-journey-popup-image-frame .bbt-journey-popup-frame-corner {
    position: absolute;
    font-size: 0.6rem;
    color: #c9a05a;
    z-index: 1;
}

.bbt-journey-popup-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(120, 90, 40, 0.25);
}

.bbt-journey-popup-orientation-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(201, 160, 90, 0.45);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #c9a05a;
}

.bbt-journey-popup-orientation-tag::before,
.bbt-journey-popup-orientation-tag::after {
    content: '✦';
    font-size: 0.65rem;
}

.bbt-journey-popup-content-col {
    flex: 1;
    min-width: 0;
}

.bbt-journey-popup-message {
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4a4436;
    margin-bottom: 1.6rem;
}

/* --- Khối "Nên làm" / "Nên tránh" — nền màu nhạt, icon tròn bên
   trái, cành lá trang trí mờ góc phải, đúng theo ảnh mẫu. --- */
.bbt-journey-popup-box {
    position: relative;
    border-radius: 16px;
    padding: 1.4rem 1.7rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.bbt-journey-popup-box-do {
    background: linear-gradient(135deg, #eef7ef, #f5faf3);
    border: 1px solid rgba(120, 180, 130, 0.3);
}

.bbt-journey-popup-box-avoid {
    background: linear-gradient(135deg, #fdedee, #fcf3f0);
    border: 1px solid rgba(220, 130, 130, 0.3);
}

.bbt-journey-popup-box-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    pointer-events: none;
}

.bbt-journey-popup-box-do .bbt-journey-popup-box-deco {
    color: #7cae6e;
}

.bbt-journey-popup-box-avoid .bbt-journey-popup-box-deco {
    color: #d98a8a;
}

.bbt-journey-popup-box-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bbt-journey-popup-box-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.bbt-journey-popup-box-icon-do {
    color: #4f9e5f;
    border: 1px solid rgba(120, 180, 130, 0.4);
}

.bbt-journey-popup-box-icon-avoid {
    color: #d15b5b;
    border: 1px solid rgba(220, 130, 130, 0.4);
}

.bbt-journey-popup-box .bbt-daily-message-section-title {
    margin-bottom: 0.5rem;
}

.bbt-journey-popup-box .bbt-daily-message-section-title-do {
    color: #3f8a4f;
}

.bbt-journey-popup-box .bbt-daily-message-section-title-avoid {
    color: #c94f4f;
}

.bbt-journey-popup-box .bbt-daily-message-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bbt-journey-popup-box .bbt-daily-message-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.35rem;
    color: #5a5240;
}

.bbt-journey-popup-box .bbt-daily-message-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    font-size: 0.75rem;
}

.bbt-journey-popup-box-do .bbt-daily-message-list li::before {
    color: #4f9e5f;
}

.bbt-journey-popup-box-avoid .bbt-daily-message-list li::before {
    color: #d15b5b;
}

/* --- Khối trích dẫn — nền vàng nhạt, dấu ✦ nổi trên viền trên, dấu
   ngoặc kép lớn 2 bên, đúng theo ảnh mẫu. --- */
.bbt-journey-popup-quote-box {
    position: relative;
    background: linear-gradient(135deg, #fbf3e0, #f7ecd4);
    border: 1px solid rgba(201, 160, 90, 0.35);
    border-radius: 16px;
    padding: 1.7rem 2.75rem;
    text-align: center;
}

.bbt-journey-popup-quote-star {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbf3e0;
    border: 1px solid rgba(201, 160, 90, 0.5);
    border-radius: 50%;
    color: #c9a05a;
    font-size: 0.7rem;
}

.bbt-journey-popup-quote-box::before,
.bbt-journey-popup-quote-box::after {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    color: #c9a05a;
    opacity: 0.55;
    line-height: 1;
}

.bbt-journey-popup-quote-box::before {
    content: '\201C';
    top: 0.75rem;
    left: 0.9rem;
}

.bbt-journey-popup-quote-box::after {
    content: '\201D';
    bottom: 0.75rem;
    right: 0.9rem;
}

.bbt-journey-popup-quote-box .bbt-daily-message-quote {
    text-align: center;
    padding: 0;
    color: #6b5a3a;
    font-style: italic;
}

/* --- Footer: 2 nút cạnh nhau — "Bói Tarot Ngay" (CTA chính, NỀN TÍM
   ĐẬM theo đúng ảnh mẫu, không phải vàng) và "Quay lại chuỗi 30
   ngày" (viền, icon reload). --- */
.bbt-journey-popup-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.bbt-journey-popup-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 2.1rem;
    background: linear-gradient(135deg, #4a3878, #382a5e);
    color: #fdfaf3;
    border: none;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(56, 42, 94, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bbt-journey-popup-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(56, 42, 94, 0.45);
}

.bbt-journey-popup-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 2.1rem;
    background: #fff;
    color: #4a4436;
    border: 1px solid rgba(201, 160, 90, 0.4);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bbt-journey-popup-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(120, 90, 40, 0.18);
}

/* --- Trang trí góc dưới: trăng lưỡi liềm + mây (trái), quả cầu pha
   lê tím + cành lá (phải) — điểm nhấn "huyền bí" đặc trưng, đúng
   theo ảnh mẫu. Đặt tuyệt đối trong popup, phía SAU nội dung. --- */
.bbt-journey-popup-corner-deco {
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 130px;
    z-index: 0;
    opacity: 0.95;
    pointer-events: none;
}

.bbt-journey-popup-corner-deco-moon {
    left: 0;
}

.bbt-journey-popup-corner-deco-orb {
    right: 0;
}

@media (max-width: 480px) {
    .bbt-journey-popup-footer {
        flex-direction: column;
        align-items: center;
    }
    .bbt-journey-popup-cta-btn,
    .bbt-journey-popup-back-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 780px) {
    .bbt-journey-popup {
        padding: 2rem 1.5rem;
    }
    .bbt-journey-popup-columns {
        flex-direction: column;
        gap: 1.5rem;
    }
    .bbt-journey-popup-image-col {
        width: 200px;
        margin: 0 auto;
    }
    .bbt-journey-popup-card-title {
        font-size: 1.75rem;
    }
    .bbt-journey-popup-rays,
    .bbt-journey-popup-corner-deco {
        display: none;
    }
}

/* --- Mời bạn (Referral) --- */
.bbt-referral-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

/* Dùng chung cho các dòng chú thích nhỏ, hiện tại chỉ còn panel Mời
   bạn sử dụng (panel Điểm danh đã chuyển sang cấu trúc roadmap riêng). */
.bbt-checkin-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 380px;
}

.bbt-referral-count {
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.bbt-referral-count strong {
    color: var(--accent-gold);
}

.bbt-referral-link-row {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.bbt-referral-link-input {
    flex: 1;
    padding: 0.7rem 1rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.bbt-referral-copy-btn {
    flex-shrink: 0;
    padding: 0.7rem 1.4rem;
    background: var(--primary);
    border: none;
    border-radius: 12px;
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.bbt-referral-copy-btn:hover {
    background: var(--primary-light);
}

.bbt-account-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.bbt-account-stat-item {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bbt-account-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.bbt-account-stat-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bbt-account-history-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 1.5rem 0;
}

.bbt-account-status-badge {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.bbt-account-status-paid {
    background: rgba(90, 180, 120, 0.15);
    color: #6fd19a;
}

/* --- Lịch sử bói — dùng details/summary thuần HTML, không cần JS --- */
.bbt-reading-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bbt-reading-history-item {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
}

.bbt-reading-history-item[open] {
    border-color: var(--card-border-accent);
}

.bbt-reading-history-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

.bbt-reading-history-summary::-webkit-details-marker {
    display: none;
}

.bbt-reading-history-summary::before {
    content: '▸';
    color: var(--accent-gold);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.bbt-reading-history-item[open] .bbt-reading-history-summary::before {
    transform: rotate(90deg);
}

.bbt-reading-history-topic {
    padding: 0.2rem 0.65rem;
    background: var(--glow-purple-soft);
    color: var(--accent-purple-light);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bbt-reading-history-listening-mode {
    padding: 0.2rem 0.65rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    color: var(--accent-gold);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.bbt-reading-history-question {
    flex: 1;
    min-width: 140px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.bbt-reading-history-date {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.bbt-reading-history-detail {
    padding: 0 1.1rem 1.1rem;
}

.bbt-reading-history-answer {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.85rem;
}

.bbt-reading-history-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bbt-reading-history-card-badge {
    padding: 0.25rem 0.7rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.bbt-reading-history-followup-count {
    margin-top: 0.85rem;
    font-size: 0.82rem;
    color: var(--accent-purple-light);
}

.bbt-reading-history-continue-btn {
    display: inline-flex;
    margin-top: 1rem;
    padding: 0.55rem 1.2rem;
    background: var(--primary);
    border-radius: 20px;
    color: var(--on-primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.bbt-reading-history-continue-btn:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

/* ============================================
   DASHBOARD LAYOUT — sidebar trái + nội dung phải
   ============================================ */
.bbt-dashboard-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.bbt-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 1rem 0.85rem;
    position: sticky;
    top: 100px;
}

.bbt-dashboard-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

.bbt-account-avatar-sm {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}

.bbt-dashboard-sidebar-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbt-dashboard-sidebar-credit {
    font-size: 0.78rem;
    color: var(--accent-gold);
    font-weight: 600;
}

.bbt-dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbt-dashboard-nav-item:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

.bbt-dashboard-nav-item.active {
    background: var(--primary);
    color: var(--on-primary);
}

.bbt-dashboard-nav-logout {
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--card-border);
    color: var(--text-muted);
}

.bbt-dashboard-nav-logout:hover {
    background: transparent;
    color: #e08a8a;
}

.bbt-dashboard-content {
    min-width: 0; /* tránh grid item tràn ngang khi nội dung con dài (bảng, text dài...) */
}

.bbt-dashboard-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.bbt-dashboard-panel.active {
    display: block;
}

.bbt-dashboard-panel-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 1.5rem;
}

/* --- Thanh toán gần đây: lưới thẻ card --- */
.bbt-order-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.bbt-order-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}

.bbt-order-card-paid {
    border-left: 3px solid #6fd19a;
}

.bbt-order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.bbt-order-card-credits {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.bbt-order-card-price {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.bbt-order-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* --- Lịch sử dùng Energy: danh sách dạng "sao kê", mỗi dòng 1 giao
   dịch (nạp/điểm danh/mời bạn/hỏi tiếp/bói bài...). --- */
.bbt-energy-tx-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 480px;
    overflow-y: auto;
}

.bbt-energy-tx-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}

.bbt-energy-tx-info {
    flex: 1;
    min-width: 0;
}

.bbt-energy-tx-desc {
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbt-energy-tx-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.bbt-energy-tx-amount-group {
    flex-shrink: 0;
    text-align: right;
}

.bbt-energy-tx-amount {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.bbt-energy-tx-amount-positive {
    color: #6fd19a;
}

.bbt-energy-tx-amount-negative {
    color: #e08a8a;
}

.bbt-energy-tx-balance {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .bbt-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .bbt-dashboard-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .bbt-dashboard-sidebar-profile {
        width: 100%;
        border-bottom: none;
        padding-bottom: 0.5rem;
    }

    .bbt-dashboard-nav-item {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.6rem 0.75rem;
        font-size: 0.82rem;
    }

    .bbt-dashboard-nav-logout {
        margin-top: 0;
        padding-top: 0.6rem;
        border-top: none;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    /* Bỏ hẳn box menu sidebar nhỏ trên mobile — menu tài khoản đã có
       sẵn trong dropdown/menu header (mọi trang), lặp lại ở đây chỉ
       chiếm chỗ mà không cần thiết. */
    .bbt-dashboard-sidebar {
        display: none;
    }

    .bbt-account-profile-card {
        flex-direction: column;
        text-align: center;
    }

    .bbt-account-credit-card {
        flex-direction: column;
        text-align: center;
    }

    .bbt-checkin-hint {
        max-width: 100%;
    }

    .bbt-referral-link-row {
        flex-direction: column;
    }

    .bbt-referral-copy-btn {
        width: 100%;
    }

    .bbt-account-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Nút chuyển giao diện sáng/tối — hình tròn viền vàng đồng mảnh,
   đồng bộ phong cách với các nút icon khác trong theme (vd .bbt-social-link) */
.bbt-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--accent-gold);
    padding: 0;
    transition: all 0.3s ease;
}

.bbt-theme-toggle:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
    transform: translateY(-2px);
}

/* Mặc định (theme tối): hiện icon mặt trời (bấm để sang sáng), ẩn mặt trăng */
.bbt-theme-toggle .theme-icon-moon {
    display: none;
}

/* Theme sáng: hiện icon mặt trăng (bấm để sang tối), ẩn mặt trời */
[data-theme="light"] .bbt-theme-toggle .theme-icon-sun {
    display: none;
}

[data-theme="light"] .bbt-theme-toggle .theme-icon-moon {
    display: flex;
}

.bbt-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    flex-shrink: 0;
    padding: 0;
}

.bbt-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--accent-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.bbt-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.bbt-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.bbt-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
    .bbt-header-inner {
        padding: 0.85rem 1.25rem;
    }

    /* Nav ngang cũ, CTA "Nạp Energy", và avatar/dropdown desktop ẨN
       trên mobile — đã gộp vào panel trượt từ phải (.bbt-mobile-panel),
       mở qua nút hamburger. Khối "Thưởng + Energy" (.bbt-reward-credit-group)
       VẪN HIỆN ngay trên header mobile — đây là thông tin quan trọng
       user cần thấy ngay, không nên giấu sau 1 cú bấm mở menu. */
    .bbt-nav {
        display: none;
    }

    .bbt-header-cta {
        display: none;
    }

    .bbt-user-menu {
        display: none;
    }

    /* CHỈ ẩn nút Google TRONG HEADER (.bbt-header) — nhường chỗ cho
       hamburger menu. Dùng selector giới hạn phạm vi vì
       .bbt-google-login-btn là class DÙNG CHUNG cho mọi nút Google
       trên site (header, trang Bảng giá, trang Tài khoản, modal đăng
       nhập...) — nếu ẩn không giới hạn phạm vi sẽ vô tình ẩn luôn nút
       ở những nơi khác không liên quan gì tới header. */
    .bbt-header .bbt-google-login-btn {
        display: none;
    }

    .bbt-menu-toggle {
        display: flex;
    }

    /* Thu gọn khối Thưởng+Energy trên màn hình hẹp — giảm padding, ẩn
       bớt chữ (giữ icon + số quan trọng nhất), tránh tràn ngang khi
       cộng chung với logo + hamburger trên viewport nhỏ. */
    .bbt-header-right {
        gap: 0.5rem;
    }

    .bbt-reward-btn,
    .bbt-credit-badge-header {
        padding: 0.45rem 0.6rem;
        font-size: 0.78rem;
    }

    .bbt-reward-btn-text {
        display: none;
    }

    .bbt-credit-badge-unit {
        display: none;
    }
}

@media (max-width: 380px) {
    /* Màn hình rất hẹp — ẩn hẳn nút Thưởng, chỉ giữ badge Energy (quan
       trọng hơn), tránh tràn ngang trên các máy màn hình nhỏ nhất. */
    .bbt-reward-credit-group {
        gap: 0;
    }

    .bbt-reward-btn,
    .bbt-reward-credit-divider {
        display: none;
    }
}

/* ============================================
   PANEL MOBILE — trượt từ phải, gộp tài khoản + nav
   ============================================ */
.bbt-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1998;
}

.bbt-mobile-overlay.open {
    display: block;
}

.bbt-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
    z-index: 1999;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.bbt-mobile-panel.open {
    transform: translateX(0);
}

.bbt-mobile-panel-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.bbt-mobile-panel-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.bbt-mobile-panel-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bbt-mobile-panel-email {
    font-size: 0.78rem;
    color: var(--text-muted);
    word-break: break-all;
}

.bbt-mobile-panel-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.bbt-mobile-panel-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbt-mobile-panel-item:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

.bbt-mobile-panel-guest {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.bbt-mobile-panel-guest .bbt-google-login-btn {
    display: flex;
    width: 100%;
    justify-content: center;
}

.bbt-mobile-panel-divider {
    border-top: 1px solid var(--card-border);
    margin: 1rem 0;
}

.bbt-mobile-panel-nav {
    display: flex;
    flex-direction: column;
}

.bbt-mobile-panel-logout {
    color: var(--text-muted);
}

.bbt-mobile-panel-logout:hover {
    color: #e08a8a;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    position: relative;
    padding: 5rem 2rem 4rem;
    overflow: hidden;
}

.stars-container,
.mystical-particles,
.tarot-stars-bg,
.tarot-particles-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mystic-symbol {
    position: absolute;
    width: 130px;
    height: 130px;
    opacity: 0.35;
    pointer-events: none;
}

.symbol-top-left { top: 5%; left: 3%; }
.symbol-top-right { top: 8%; right: 5%; }
.symbol-bottom-left { bottom: 10%; left: 8%; }

.mystic-symbol svg path,
.mystic-symbol svg circle {
    stroke: var(--accent-gold) !important;
}

.rotate-slow { animation: spin 34s linear infinite; }
.rotate-reverse { animation: spin 42s linear infinite reverse; }
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
}

/* Hero rút gọn: chỉ H1, canh giữa toàn chiều rộng, không còn ảnh minh họa */
.content-wrapper.hero-title-only {
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 1500px;
    margin: 0 auto;
}

.hero-title-only .title {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 0;
    color: var(--accent-gold);
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

@media (max-width: 1200px) {
    .hero-title-only .title {
        font-size: 48px;
    }
}

@media (max-width: 900px) {
    .hero-title-only .title {
        font-size: 2.1rem;
        letter-spacing: 0.02em;
    }
}

@media (max-width: 480px) {
    .hero-title-only .title {
        font-size: 1.75rem;
        letter-spacing: 0.01em;
    }
}

/* ============================================
   KHUNG BÓI BÀI — 5 BƯỚC
   ============================================ */
.tarot-reading-wrapper {
    position: relative;
    padding: 3rem 0 5rem;
    overflow: hidden;
}

.tarot-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tarot-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tarot-step.active {
    display: block;
}

/* Bước 4 (kết quả trải bài) trước đây từng "break out" khỏi khung 900px
   của .tarot-container để rộng hơn — giờ .tarot-container đã đồng bộ lên
   1200px cùng các khung container chính khác trên site, nên step4 dùng
   chung khung với 3 bước còn lại, không cần kỹ thuật thoát khung riêng. */

/* --- STEP 1: chọn phương thức --- */
.tarot-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tarot-main-title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.tarot-subtitle {
    color: var(--accent-gold);
    font-size: 0.88rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 0.6rem;
}

.selection-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.spread-section-title,
.selection-label {
    display: block;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Tiêu đề câu hỏi "Bạn muốn được lắng nghe theo cách nào?" — KHÔNG
   dùng chung .spread-section-title vì đó là uppercase (chữ HOA toàn
   bộ), không phù hợp với câu hỏi tự nhiên có dấu. */
.listening-mode-title {
    display: block;
    text-align: center;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.listening-mode-subtitle {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.mode-cards-row,
.spread-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.reading-mode-selection,
.spread-selection-wrapper,
.listening-mode-wrapper {
    width: 100%;
}

/* --- Chọn cách được lắng nghe — layout 3 cột, nằm CHUNG trong step1
   với phần chọn câu hỏi/lá bài (không phải bước riêng biệt). --- */
.listening-mode-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .listening-mode-cards-row {
        grid-template-columns: 1fr;
    }
}

.listening-mode-option {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.listening-mode-option:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
    box-shadow: var(--card-glow-hover);
    transform: translateY(-3px);
}

.listening-mode-option.selected {
    border-color: var(--accent-purple);
    background: rgba(201, 160, 90, 0.12);
    box-shadow: 0 0 0 1px var(--accent-purple), 0 12px 30px var(--glow-purple-soft);
}

.reading-mode-option,
.card-count-option {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.reading-mode-option:hover,
.card-count-option:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
    box-shadow: var(--card-glow-hover);
    transform: translateY(-3px);
}

.reading-mode-option.active,
.card-count-option.active {
    border-color: var(--accent-purple);
    background: rgba(201, 160, 90, 0.12);
    box-shadow: 0 0 0 1px var(--accent-purple), 0 12px 30px var(--glow-purple-soft);
}

.mode-content,
.option-content {
    width: 100%;
}

.mode-title,
.option-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.mode-desc,
.option-desc {
    color: var(--text-primary);
    font-size: 0.89rem;
    line-height: 1.65;
}

.option-energy-note {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border-accent);
    border-radius: 20px;
    color: var(--accent-gold);
    font-size: 0.78rem;
    font-weight: 700;
}

.option-image {
    margin-bottom: 1rem;
}

.option-image img {
    max-height: 78px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px var(--glow-purple-soft));
}

.selection-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 1.5rem;
}

.selection-header {
    margin-bottom: 0.5rem;
}

.custom-textarea,
.custom-select {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    resize: vertical;
    transition: border-color 0.25s ease;
}

.custom-textarea:focus,
.custom-select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px var(--glow-purple-soft);
}

.custom-select:disabled,
.custom-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-select option {
    background: var(--bg-panel);
    color: var(--text-primary);
}

.char-counter {
    text-align: right;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.question-mode-container,
.topic-mode-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* Nút xáo bài: gradient tím, glow tím khi hover — đúng spec CTA */
.shuffle-btn-main {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0.5rem auto 0;
    padding: 1.1rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
    border: none;
    border-radius: 40px;
    font-size: 1.03rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 26px var(--glow-purple);
    transition: all 0.3s ease;
}

.shuffle-btn-main:not(.disabled):hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px var(--glow-purple);
}

.step-indicator {
    text-align: center;
    color: var(--text-primary);
    font-size: 0.85rem;
    margin-top: 1.5rem;
}

/* --- STEP 2: xáo bài --- */
.card-back-display {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

.shuffle-circle {
    position: relative;
    width: 220px;
    height: 220px;
}

/* Kiểu XÒE QUẠT — thay cho animation cũ (20 lá xoay 180°+trượt ngang
   lộn xộn, trông như "hạt tung tóe" hơn là đang xào bài). Giờ: mọi lá
   xếp chồng khít ở giữa (0deg) rồi xòe dần ra 2 bên theo đúng góc quạt
   riêng (--fan-angle, gán từ JS theo vị trí), xoay quanh ĐIỂM DƯỚI
   CÙNG của lá bài (transform-origin: bottom center) — giống hệt động
   tác tay thật khi trải 1 cỗ bài Tarot thành hình quạt. Nhịp chậm hơn
   (2.4s) và có animation-delay lệch dần ra 2 bên (--fan-delay) để tạo
   cảm giác "lan tỏa" từ từ, huyền bí hơn thay vì mọi lá giật cùng lúc. */
.shuffle-card {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 72px;
    height: 108px;
    margin-left: -36px;
    border-radius: 8px;
    box-shadow: 0 8px 22px var(--shadow-soft);
    transform-origin: bottom center;
    animation: shuffleFan 2.4s ease-in-out infinite;
    animation-delay: var(--fan-delay, 0s);
}

@keyframes shuffleFan {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(var(--fan-angle, 0deg)) translateY(-8px); }
}

.shuffle-text {
    text-align: center;
    color: var(--accent-gold);
    font-size: 1.08rem;
    font-weight: 500;
    margin-top: 1.5rem;
    animation: pulseGlow 1.5s ease-in-out infinite;
}

/* --- STEP 3: rút bài --- */
.step-title {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
}

.draw-instruction {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.selected-cards-area {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.selected-card-slot {
    width: 160px;
    text-align: center;
}

.slot-label {
    color: var(--accent-purple-light);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.75rem;
}

.slot-placeholder {
    width: 160px;
    height: 240px;
    border: 1.5px dashed var(--card-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.selected-card-slot.active .slot-placeholder {
    border-color: var(--accent-purple);
    box-shadow: 0 0 22px var(--glow-purple-soft);
    color: var(--accent-purple-light);
}

.selected-card-slot.filled .slot-placeholder {
    border: none;
    padding: 0;
}

.slot-card-img-wrapper {
    padding: 8px;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    margin-bottom: 0.85rem;
}

.slot-card-img {
    display: block;
    width: 100%;
    height: 216px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 26px var(--glow-purple-soft);
}

.slot-card-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-gold);
    line-height: 1.25;
}

.slot-card-name-en {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.2rem;
}

.deck-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.deck-row {
    position: relative;
    height: 130px;
}

.deck-card {
    position: absolute;
    top: 0;
    width: 85px;
    height: 128px;
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease;
    animation: dealCard 0.4s ease backwards;
}

@keyframes dealCard {
    from { opacity: 0; transform: translateY(-18px) scale(0.85); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.deck-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 14px var(--shadow-soft);
}

.deck-card:hover {
    transform: translateY(-16px) scale(1.08);
    z-index: 50 !important;
    filter: drop-shadow(0 12px 22px var(--glow-purple));
}

.deck-card.selected {
    opacity: 0.3;
    pointer-events: none;
}

.continue-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 2.5rem auto 0;
    padding: 1.1rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
    border: none;
    border-radius: 40px;
    font-size: 1.03rem;
    font-weight: 600;
    box-shadow: 0 8px 26px var(--glow-purple);
    transition: all 0.3s ease;
}

.continue-btn:not(.disabled):hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px var(--glow-purple);
}

/* --- STEP 4: kết quả --- */
.result-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1.1rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
}

.result-date-container {
    margin-bottom: 0.5rem;
}

.result-date-title {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.result-topic-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.topic-badge {
    display: inline-flex;
    padding: 0.4rem 1.2rem;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
}

.topic-text {
    color: var(--accent-gold);
    font-size: 0.85rem;
    font-weight: 600;
}

.question-display {
    display: flex;
    justify-content: center;
}

.question-text {
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 600;
    text-align: center;
    max-width: 600px;
}

/* ============================================
   KHUNG KẾT QUẢ CHÍNH — Quick Insight (1 lá) / Deep Analysis (3 lá)
   Nguyên tắc: câu trả lời trực tiếp lên đầu, các "sections" do AI tự
   quyết định số lượng/tên theo ý định câu hỏi (không cố định theo số
   lá bài), ý nghĩa lá bài thuần túy đặt cuối cùng dạng có thể thu gọn.
   ============================================ */
.reading-main-result {
    max-width: 1500px;
    margin: 0 auto 2rem;
}

.loading-text {
    text-align: center;
    color: var(--accent-gold);
    font-size: 0.92rem;
    padding: 2rem 0;
}

/* Câu trả lời — luôn là điều đầu tiên người dùng đọc */
.quick-answer-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow-hover);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.quick-answer-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 0.75rem;
}

.quick-answer-content {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Danh sách sections — số lượng/tên do AI tự quyết theo intent câu hỏi,
   JS chỉ lặp qua mảng nên CSS không gắn với tên cụ thể nào */
.reading-sections-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.reading-section-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    transition: all 0.3s ease;
}

.reading-section-item:hover {
    border-color: var(--card-border-accent);
}

.reading-section-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.reading-section-content {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.85;
}

/* Thanh phần trăm — chỉ xuất hiện ở section nào AI thấy phù hợp định
   lượng (vd. "Nếu bạn chủ động" / "Nếu tiếp tục im lặng") */
.section-percent-bars {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.percent-bar-row {
    display: grid;
    grid-template-columns: minmax(80px, 120px) 1fr 40px;
    align-items: center;
    gap: 0.75rem;
}

.percent-bar-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.percent-bar-track {
    height: 8px;
    background: var(--card-bg-hover);
    border-radius: 10px;
    overflow: hidden;
}

.percent-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease;
}

.percent-fill-positive {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-gold));
}

.percent-fill-risk {
    background: linear-gradient(90deg, #b85c5c, #d98a5f);
}

.percent-bar-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

/* Lời khuyên — khối riêng, nổi bật nhẹ hơn quick-answer nhưng vẫn tách
   biệt khỏi danh sách sections */
.reading-advice-box {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.75rem;
}

.reading-advice-label {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.reading-advice-content {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.98rem;
}

/* --- Câu hỏi gợi ý follow-up — hiện sau kết quả chính, dạng nút chờ
   tính năng "hỏi tiếp bằng credit" (chưa bấm được ở bước này) --- */
.suggested-questions-box {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--card-border);
}

.suggested-questions-label {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.suggested-questions-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.suggested-question-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    text-align: left;
    padding: 0.9rem 1.1rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.25s ease;
}

.suggested-question-btn:hover:not(:disabled) {
    border-color: var(--card-border-accent);
    background: var(--card-bg);
    transform: translateY(-2px);
}

.suggested-question-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.suggested-question-btn.loading {
    opacity: 0.6;
}

.suggested-question-btn.loading span:first-child::after {
    content: '...';
}

.suggested-question-btn.answered {
    border-color: var(--card-border-accent);
    background: var(--card-bg);
}

.suggested-question-cost {
    display: inline-flex;
    padding: 0.15rem 0.6rem;
    background: var(--glow-purple-soft);
    color: var(--accent-purple-light);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.suggested-question-btn-deep {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.06);
}

.suggested-question-btn-deep:hover:not(:disabled) {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.12);
}

.suggested-question-cost-deep {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

@media (max-width: 640px) {
    .suggested-questions-list {
        grid-template-columns: 1fr;
    }
}

/* --- Câu trả lời cho các lượt hỏi tiếp, xuất hiện tuần tự dưới danh
   sách gợi ý mỗi khi user bấm 1 câu --- */
.followup-answers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}

.followup-answer-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border-accent);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    animation: fadeIn 0.4s ease;
}

.followup-question-text {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.followup-answer-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.95rem;
}

.followup-answer-text.followup-error,
p.followup-error {
    color: #e08a8a;
}

.followup-topup-link {
    display: inline-flex;
    margin-top: 0.6rem;
    padding: 0.5rem 1.2rem;
    background: var(--accent-gold);
    border-radius: 20px;
    color: #1a1410;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.followup-topup-link:hover {
    transform: translateY(-1px);
}

.reading-error-box {
    text-align: center;
    padding: 2rem 1.5rem;
}

.restored-reading-notice {
    background: rgba(90, 180, 120, 0.15);
    color: #6fd19a;
    border: 1px solid rgba(90, 180, 120, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    text-align: center;
}

.followup-answer-text.loading-text {
    text-align: left;
    padding: 0;
}

/* --- Ô nhập câu hỏi tự do — nằm sau danh sách gợi ý AI và sau các câu
   trả lời follow-up đã hỏi --- */
.custom-followup-box {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--card-border);
}

.custom-followup-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.custom-followup-input-row {
    display: flex;
    gap: 0.6rem;
}

.custom-followup-input {
    flex: 1;
    padding: 0.75rem 1.1rem;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    color: var(--text-primary);
    font-size: 0.92rem;
}

.custom-followup-input:focus {
    outline: none;
    border-color: var(--card-border-accent);
}

.custom-followup-input::placeholder {
    color: var(--text-muted);
}

.custom-followup-submit-btn {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    border: none;
    border-radius: 30px;
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.custom-followup-submit-btn:hover:not(:disabled) {
    background: var(--primary-light);
}

.custom-followup-submit-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.custom-followup-submit-btn.loading {
    opacity: 0.6;
}

@media (max-width: 480px) {
    .custom-followup-input-row {
        flex-direction: column;
    }

    .custom-followup-submit-btn {
        width: 100%;
    }
}

/* ============================================
   Ý NGHĨA LÁ BÀI — hiện TRƯỚC câu trả lời tổng hợp, style theo dạng
   card cũ: mỗi lá bài là 1 khối grid 2 cột (ảnh + thông tin bên trái,
   nội dung ý nghĩa bên phải), luôn hiện đầy đủ (không thu gọn/toggle).
   ============================================ */
.reading-card-meanings {
    max-width: 1500px;
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-meaning-item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 2rem;
    transition: all 0.3s ease;
}

.card-meaning-item:hover {
    border-color: var(--card-border-accent);
    box-shadow: var(--card-glow-hover);
}

.card-meaning-header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 0;
}

.card-meaning-thumb {
    width: 130px;
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 10px 26px var(--glow-purple-soft);
}

.card-meaning-position {
    display: inline-flex;
    padding: 0.3rem 0.85rem;
    background: var(--glow-purple-soft);
    color: var(--accent-purple-light);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.card-meaning-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.card-meaning-name-en {
    display: block;
    font-size: 0.92rem;
    color: var(--text-muted);
    font-style: italic;
}

.card-meaning-text-content {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
}

@media (max-width: 720px) {
    .card-meaning-item {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .card-meaning-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* --- Result actions --- */
.result-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.retry-btn,
.continue-reading-btn,
.share-btn {
    padding: 0.85rem 1.75rem;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: var(--card-glow);
    transition: all 0.3s ease;
}

.retry-btn:hover,
.share-btn:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
    transform: translateY(-2px);
}

.continue-reading-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
    border: none;
}

.continue-reading-btn:hover {
    background: var(--primary-light);
    border-color: transparent;
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .mode-cards-row,
    .spread-cards-row {
        grid-template-columns: 1fr;
    }

    .deck-card {
        width: 40px;
        height: 60px;
    }

    .selected-card-slot,
    .slot-placeholder {
        width: 92px;
    }

    .slot-placeholder {
        height: 138px;
    }

    .slot-card-img {
        height: 122px;
    }
}

/* ============================================
   INTRO SECTION ("Tarot là gì?") + BENEFITS
   ============================================ */
.intro-section {
    padding: 5rem 2rem;
}

.intro-container {
    max-width: 1500px;
    margin: 0 auto;
}

.intro-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 3rem;
    margin-bottom: 5rem;
}

.intro-image {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.hand-glow {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle, var(--glow-purple-soft), transparent 70%);
    filter: blur(50px);
    z-index: -1;
}

.hand-img {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    filter: drop-shadow(0 20px 46px rgba(201, 160, 90, 0.2));
}

.orbit-symbol {
    position: absolute;
    font-size: 1.4rem;
    color: var(--accent-gold);
    opacity: 0.65;
    animation: pulseGlow 3s ease-in-out infinite;
}

.o1 { top: 5%; left: 0; }
.o2 { top: 15%; right: 0; animation-delay: 0.5s; }
.o3 { bottom: 15%; left: 5%; animation-delay: 1s; }
.o4 { bottom: 5%; right: 10%; animation-delay: 1.5s; }

.intro-text .section-header {
    justify-content: flex-start;
}

.intro-description p {
    color: var(--text-primary);
    line-height: 1.9;
    font-size: 1.04rem;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.mystical-btn {
    display: inline-flex;
    padding: 0.85rem 2rem;
    background: transparent;
    border: 1.5px solid var(--card-border-accent);
    color: var(--text-primary);
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mystical-btn:hover {
    background: var(--primary-light);
    border-color: transparent;
    color: var(--on-primary);
    box-shadow: 0 8px 24px var(--glow-purple);
    transform: translateY(-2px);
}

.benefits-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.benefits-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--accent-gold);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.benefit-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: var(--card-border-accent);
    transform: translateY(-6px);
    box-shadow: var(--card-glow-hover), 0 16px 36px var(--glow-purple-soft);
}

.benefit-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 165, 116, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 165, 116, 0.06);
}

.benefit-icon img {
    width: 44px;
    height: 42px;
    margin: 0;
    filter: drop-shadow(0 4px 10px var(--glow-purple-soft));
}

.benefit-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--accent-gold);
}

.benefit-desc {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ============================================
   TOPICS SECTION
   ============================================ */
.topics-section {
    padding: 5rem 2rem;
}

.topics-container {
    max-width: 1500px;
    margin: 0 auto;
}

.topics-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
}

.topics-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.topic-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topics-column.right .topic-item {
    flex-direction: row-reverse;
}

.topic-icon img,
.moon-icon-img {
    width: 44px;
    height: 44px;
    opacity: 0.8;
    filter: drop-shadow(0 4px 8px var(--glow-gold)) brightness(0) saturate(100%) invert(75%) sepia(45%) saturate(500%) hue-rotate(2deg) brightness(95%) contrast(92%);
}

.topic-content h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--accent-gold);
    margin-bottom: 0.35rem;
}

.right-align {
    text-align: right;
}

.topic-content p {
    color: var(--text-primary);
    font-size: 0.87rem;
    line-height: 1.6;
}

.topics-center {
    display: flex;
    justify-content: center;
    align-self: center;
}

.center-card-wrapper {
    display: flex;
    justify-content: center;
    max-height: 480px;
}

.center-card-img {
    max-width: 320px;
    max-height: 453px;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-card);
    filter: drop-shadow(0 20px 46px rgba(201, 160, 90, 0.28));
}

@media (max-width: 900px) {
    .intro-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .intro-text .section-header {
        justify-content: center;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .topics-layout {
        grid-template-columns: 1fr;
    }

    .topics-column.right .topic-item {
        flex-direction: row;
    }

    .right-align {
        text-align: left;
    }

    .topics-center {
        order: -1;
    }
}

@media (max-width: 640px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   GUIDE SECTION
   ============================================ */
.guide-section {
    padding: 5rem 2rem;
}

.guide-container {
    max-width: 1500px;
    margin: 0 auto;
}

.guide-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
}

.guide-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 2.25rem;
    transition: all 0.3s ease;
}

.guide-card:hover {
    border-color: var(--card-border-accent);
    box-shadow: var(--card-glow-hover);
}

.guide-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.guide-card p {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 0.98rem;
    margin-bottom: 1rem;
    text-align: justify;
}

.guide-card p:last-child {
    margin-bottom: 0;
}

.guide-card ul {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.1rem;
}

.guide-card ul li {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 0.92rem;
    padding-left: 1.4rem;
    position: relative;
}

.guide-card ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-purple-light);
    font-size: 0.78rem;
}

.guide-card ul li strong {
    color: var(--accent-gold);
    font-weight: 600;
}

/* ============================================
   WHY CHOOSE SECTION
   ============================================ */
.why-choose-section {
    padding: 5rem 2rem;
}

.why-choose-container {
    max-width: 1500px;
    margin: 0 auto;
}

.why-choose-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
}

.why-choose-list li {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 1.5rem 1.75rem 1.5rem 3.25rem;
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.75;
    text-align: justify;
    transition: all 0.3s ease;
}

.why-choose-list li:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
    box-shadow: var(--card-glow-hover);
}

.why-choose-list li::before {
    content: '✓';
    position: absolute;
    left: 1.25rem;
    top: 1.5rem;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 1.05rem;
}

.why-choose-list li strong {
    color: var(--accent-gold);
    font-weight: 600;
}

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */
.how-it-works-section {
    padding: 5rem 2rem;
}

.how-it-works-container {
    max-width: 1500px;
    margin: 0 auto;
}

.how-it-works-intro {
    text-align: center;
    color: var(--text-primary);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.how-it-works-list {
    counter-reset: how-it-works-counter;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.how-it-works-list li {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 1.5rem 1.75rem 1.5rem 4.75rem;
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.75;
    text-align: justify;
    counter-increment: how-it-works-counter;
    transition: all 0.3s ease;
}

.how-it-works-list li:hover {
    border-color: var(--card-border-accent);
    box-shadow: var(--card-glow-hover);
}

.how-it-works-list li::before {
    content: counter(how-it-works-counter);
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--on-primary);
    font-size: 0.92rem;
}

.how-it-works-list li strong {
    color: var(--accent-gold);
    font-weight: 600;
}

.how-it-works-outro {
    text-align: center;
    color: var(--text-primary);
    margin-top: 2.5rem;
    font-size: 0.98rem;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
    padding: 5rem 2rem;
}

.faq-container {
    max-width: 1500px;
    margin: 0 auto;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
}

.faq-item {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--card-border-accent);
    box-shadow: var(--card-glow-hover);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: none;
    padding: 1.4rem 1.75rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    text-align: left;
}

.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent-gold);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 400px;
}

.faq-answer p {
    padding: 0 1.75rem 1.5rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.95rem;
    font-family: var(--font-body);
    text-align: justify;
}

/* ============================================
   FOOTER
   ============================================ */
.bbt-footer {
    position: relative;
    z-index: 1;
    background: var(--bg-panel);
    border-top: 1px solid var(--card-border);
    padding: 3.5rem 1.5rem 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.bbt-footer-inner {
    max-width: 1500px;
    margin: 0 auto;
}

.bbt-footer a {
    color: var(--accent-gold);
    text-decoration: none;
}

.bbt-footer a:hover {
    text-decoration: underline;
}

.bbt-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.bbt-footer-brand {
    max-width: 480px;
}

.bbt-footer-desc {
    margin-top: 0.75rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.bbt-footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.bbt-footer-social-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbt-social-links {
    display: flex;
    gap: 0.75rem;
}

.bbt-social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--accent-gold);
    transition: all 0.3s ease;
}

.bbt-social-link:hover {
    background: var(--primary-light);
    border-color: transparent;
    color: var(--on-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--glow-purple);
}

.bbt-footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--card-border), transparent);
    margin: 2.5rem 0 1.5rem;
}

.bbt-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.bbt-footer-copyright {
    margin: 0;
}

.bbt-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}

@media (max-width: 640px) {
    .bbt-footer-top {
        flex-direction: column;
    }

    .bbt-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--card-border-accent);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    color: var(--accent-gold);
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background: var(--primary-light);
    color: var(--on-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 28px var(--glow-purple);
}

@media (max-width: 640px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        /* Đẩy lên cao hơn bình thường — tránh bị .bbt-bottom-nav (menu
           điều hướng cố định đáy màn hình, cao ~64px) che khuất. */
        bottom: calc(64px + env(safe-area-inset-bottom) + 1rem);
        right: 1.25rem;
    }
}

/* --- Nút đổi giao diện sáng/tối nổi — CHỈ mobile, đối xứng với
   .back-to-top ở góc phải. Mặc định ẩn (desktop), chỉ hiện qua media
   query bên dưới. --- */
.bbt-mobile-theme-toggle {
    display: none;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid var(--card-border-accent);
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    color: var(--accent-gold);
    padding: 0;
    transition: all 0.3s ease;
}

.bbt-mobile-theme-toggle:hover {
    background: var(--primary-light);
    color: var(--on-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 28px var(--glow-purple);
}

.bbt-mobile-theme-toggle .theme-icon-moon {
    display: none;
}

[data-theme="light"] .bbt-mobile-theme-toggle .theme-icon-sun {
    display: none;
}

[data-theme="light"] .bbt-mobile-theme-toggle .theme-icon-moon {
    display: flex;
}

@media (max-width: 900px) {
    /* Ẩn nút toggle GỐC trong header trên mobile — nhường chỗ cho
       hamburger, thay bằng nút nổi .bbt-mobile-theme-toggle. */
    .bbt-theme-toggle {
        display: none;
    }

    .bbt-mobile-theme-toggle {
        display: flex;
    }
}

@media (max-width: 640px) {
    .bbt-mobile-theme-toggle {
        width: 44px;
        height: 44px;
        /* Đẩy lên cao hơn bình thường — tránh bị .bbt-bottom-nav (menu
           điều hướng cố định đáy màn hình, cao ~64px) che khuất. */
        bottom: calc(64px + env(safe-area-inset-bottom) + 1rem);
        left: 1.25rem;
    }
}

/* ============================================
   STATIC PAGES — page.php (Chính sách / Điều khoản / Giới thiệu / Liên hệ)
   Dùng chung cho mọi trang tĩnh nhập nội dung qua WP editor. Layout:
   hero rút gọn (tiêu đề + breadcrumb) rồi tới khung nội dung văn bản.
   ============================================ */

/* Hero rút gọn cho trang tĩnh — thấp hơn hero trang chủ vì không cần
   không gian cho khung bói bài phía dưới. */
.bbt-page-hero {
    padding: 3rem 2rem 2.5rem;
    text-align: center;
}

.bbt-page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
}

.bbt-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.bbt-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.bbt-breadcrumb a:hover {
    color: var(--accent-gold);
}

.bbt-breadcrumb-sep {
    color: var(--text-muted);
    opacity: 0.6;
}

.bbt-breadcrumb-current {
    color: var(--accent-gold);
    font-weight: 600;
}

.bbt-page-title {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--accent-gold);
    line-height: 1.25;
}

@media (max-width: 640px) {
    .bbt-page-title {
        font-size: 30px;
    }
}

/* Khung nội dung chính */
.bbt-page-section {
    padding: 0 0 5rem;
}

.bbt-page-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.bbt-page-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 3rem;
}

@media (max-width: 640px) {
    .bbt-page-content {
        padding: 1.75rem;
    }
}

/* --- Định dạng nội dung nhập từ WP editor (Gutenberg/Classic) ---
   Người biên tập chỉ nhập văn bản thuần trong WP admin, không tự thêm
   class — các rule dưới đây phủ mọi thẻ HTML chuẩn mà editor tạo ra,
   để nội dung tự động khớp theme mà không cần chỉnh tay. */
.bbt-page-content > *:first-child {
    margin-top: 0;
}

.bbt-page-content > *:last-child {
    margin-bottom: 0;
}

.bbt-page-content h1,
.bbt-page-content h2,
.bbt-page-content h3,
.bbt-page-content h4,
.bbt-page-content h5,
.bbt-page-content h6 {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    font-weight: 600;
    line-height: 1.35;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.bbt-page-content h1 { font-size: 30px; }
.bbt-page-content h2 { font-size: 26px; }
.bbt-page-content h3 { font-size: 21px; }
.bbt-page-content h4 { font-size: 18px; }
.bbt-page-content h5,
.bbt-page-content h6 { font-size: 16px; }

.bbt-page-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 1.25rem;
}

.bbt-page-content a {
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s ease;
}

.bbt-page-content a:hover {
    color: var(--accent-purple-light);
}

.bbt-page-content strong,
.bbt-page-content b {
    color: var(--text-primary);
    font-weight: 700;
}

.bbt-page-content em,
.bbt-page-content i {
    font-style: italic;
}

.bbt-page-content ul,
.bbt-page-content ol {
    color: var(--text-secondary);
    line-height: 1.85;
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.bbt-page-content ul {
    list-style: disc;
}

.bbt-page-content ol {
    list-style: decimal;
}

.bbt-page-content li {
    margin-bottom: 0.5rem;
}

.bbt-page-content li::marker {
    color: var(--accent-gold);
}

.bbt-page-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--card-bg-hover);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 12px 12px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.bbt-page-content hr {
    border: none;
    border-top: 1px solid var(--card-border);
    margin: 2.5rem 0;
}

.bbt-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

.bbt-page-content th,
.bbt-page-content td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--card-border);
    text-align: left;
    color: var(--text-secondary);
}

.bbt-page-content th {
    background: var(--card-bg-hover);
    color: var(--accent-gold);
    font-weight: 700;
}

.bbt-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 1.5rem 0;
}

.bbt-page-content code {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    font-size: 0.9em;
    color: var(--accent-gold);
}

.bbt-page-content pre {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 0 0 1.5rem;
}

.bbt-page-content pre code {
    background: none;
    border: none;
    padding: 0;
}

/* Gutenberg thường bọc caption ảnh trong figure/figcaption */
.bbt-page-content figure {
    margin: 1.5rem 0;
}

.bbt-page-content figcaption {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
/* ============================================
   BOTTOM NAVIGATION (mobile only)
   ============================================ */
/* Menu điều hướng cố định dưới màn hình — CHỈ hiện trên mobile (kiểu
   bottom nav bar phổ biến trên app), ẨN hoàn toàn trên desktop/tablet
   (nơi đã có menu header đầy đủ, không cần lặp lại). 4 mục: Bói Tarot
   (gộp chung trang chủ), Thông điệp, Bảng giá, Tài khoản. */
.bbt-bottom-nav {
    display: none;
}

@media (max-width: 640px) {
    .bbt-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        background: var(--card-bg);
        border-top: 1px solid var(--card-border);
        /* Chừa khoảng an toàn cho notch/thanh cử chỉ ở đáy màn hình
           trên iPhone/Android hiện đại — không có tác dụng gì trên
           thiết bị không có notch (env() trả về 0). */
        padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
    }

    /* Đẩy nội dung cuối trang (footer) không bị menu này che mất —
       chiều cao ước lượng của nav (~64px) cộng thêm khoảng đệm an
       toàn cho notch. */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

.bbt-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    padding: 0.3rem 0.2rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.bbt-bottom-nav-item svg {
    transition: transform 0.2s ease;
}

.bbt-bottom-nav-item-active {
    color: var(--accent-gold);
}

.bbt-bottom-nav-item-active svg {
    transform: translateY(-2px);
}

/* Chấm báo hiệu nhỏ (guest dot) trên icon "Thông điệp"/"Tài khoản" khi
   CHƯA đăng nhập — báo hiệu nhẹ nhàng cần đăng nhập trước khi bấm vào,
   không chặn hay đổi hành vi link. */
.bbt-bottom-nav-icon-wrap {
    position: relative;
    display: inline-flex;
}

.bbt-bottom-nav-guest-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5a2c;
    border: 1.5px solid var(--card-bg);
}
/* ============================================
   LANGUAGE SWITCHER — chọn ngôn ngữ (header.php)
   Tái dùng biến CSS đã có sẵn để đồng bộ phong cách toàn site.
   ============================================ */
.bbt-lang-switcher {
    position: relative;
    flex-shrink: 0;
}

.bbt-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.5rem 0.9rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.bbt-lang-current:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
}

.bbt-lang-caret {
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.bbt-lang-switcher:has(.bbt-lang-dropdown.open) .bbt-lang-caret {
    transform: rotate(180deg);
}

.bbt-lang-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 170px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
    z-index: 1100;
}

.bbt-lang-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bbt-lang-dropdown li {
    margin: 0;
}

.bbt-lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.bbt-lang-dropdown a:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

.bbt-lang-dropdown a.active {
    background: rgba(212, 165, 116, 0.12);
    color: var(--gold);
    font-weight: 600;
}

@media (max-width: 900px) {
    .bbt-lang-current {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }

    .bbt-lang-dropdown {
        right: auto;
        left: 0;
    }
}

/* ============================================
   FLAG ICONS trong language switcher (header.php > bbt_render_flag_svg())
   ============================================ */
.bbt-flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
    vertical-align: middle;
}


/* ============================================
   THEME TOGGLE MOBILE — nút đổi sáng/tối bên trong menu hamburger
   (header.php > .bbt-nav). Ẩn mặc định (desktop dùng nút
   .bbt-theme-toggle riêng ở hàng header chính), chỉ hiện khi menu
   mobile mở ra dưới breakpoint 900px.
   ============================================ */
.bbt-theme-toggle-mobile {
    display: none;
}

@media (max-width: 900px) {
    .bbt-theme-toggle-mobile {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 10px;
        color: var(--text-primary);
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
    }

    .bbt-theme-toggle-mobile:hover {
        border-color: var(--card-border-accent);
        background: var(--card-bg-hover);
    }

    .bbt-theme-toggle-mobile .theme-icon-sun,
    .bbt-theme-toggle-mobile .theme-icon-moon {
        color: var(--accent-gold);
        flex-shrink: 0;
    }

    /* Mặc định (theme tối): hiện icon mặt trời, ẩn mặt trăng — giống
       hệt logic của nút desktop .bbt-theme-toggle. */
    .bbt-theme-toggle-mobile .theme-icon-moon {
        display: none;
    }

    [data-theme="light"] .bbt-theme-toggle-mobile .theme-icon-sun {
        display: none;
    }

    [data-theme="light"] .bbt-theme-toggle-mobile .theme-icon-moon {
        display: block;
    }
}
/* ============================================
   LOGIN BUTTON — nút "Sign in" khi chưa đăng nhập (header.php)
   ============================================ */
.bbt-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.5rem 0.9rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.bbt-login-btn:hover {
    border-color: var(--card-border-accent);
    background: var(--card-bg-hover);
}

/* ============================================
   USER MENU — avatar + dropdown khi đã đăng nhập (header.php)
   ============================================ */
.bbt-user-menu {
    position: relative;
    flex-shrink: 0;
}

.bbt-user-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s ease;
}

.bbt-user-menu-toggle:hover {
    border-color: var(--card-border-accent);
}

.bbt-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bbt-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 180px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
    z-index: 1100;
}

.bbt-user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bbt-user-dropdown-name {
    padding: 0.55rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbt-user-dropdown a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.bbt-user-dropdown a:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .bbt-login-btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }

    .bbt-login-btn span,
    .bbt-login-btn {
        white-space: nowrap;
    }
}

/* ============================================
   MY ACCOUNT PAGE (page-my-account.php)
   ============================================ */
.bbt-account-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-glow);
    padding: 2.5rem;
}

.bbt-account-card-guest {
    text-align: center;
}

.bbt-account-card-guest p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.bbt-account-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--card-border);
}

.bbt-account-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border-accent);
    flex-shrink: 0;
}

.bbt-account-name {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.bbt-account-email {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.bbt-account-section {
    margin-bottom: 1.75rem;
}

.bbt-account-section h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--gold);
    margin: 0 0 0.85rem;
}

.bbt-account-member-since {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.65rem;
}

.bbt-account-welcome-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
}

.bbt-account-actions {
    display: flex;
    justify-content: flex-end;
}

.bbt-account-logout-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.4rem;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 30px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.bbt-account-logout-btn:hover {
    border-color: var(--card-border-accent);
    color: var(--text-primary);
    background: var(--card-bg-hover);
}

@media (max-width: 640px) {
    .bbt-account-card {
        padding: 1.75rem;
    }

    .bbt-account-header {
        flex-direction: column;
        text-align: center;
    }
}