/* ============================================
   VÀNG KIM — lớp gradient dùng chung toàn site (nạp SAU mọi CSS khác).
   Mặc định là nền TỐI: nút vàng kim chữ tối, khối số dư / hạng nền đêm.
   Nền SÁNG giữ màu nền cũ (kem), chỉ đổi gradient sang tông vàng sáng
   hợp nền kem — không có mảng tối (chủ site chốt 22/09/2026).
   Đổi màu cả site: chỉ sửa các biến --gk-* dưới đây.
   ============================================ */
:root {
    --gk-btn: linear-gradient(135deg, #f3d9a4 0%, #d4a574 50%, #a8743f 100%);
    --gk-btn-hover: linear-gradient(135deg, #f7e3b8 0%, #dcb07e 50%, #b8834a 100%);
    --gk-btn-ink: #2a1a08;
    --gk-btn-border: transparent;
    --gk-btn-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
    --gk-text: linear-gradient(90deg, #f7e3b8 0%, #d4a574 55%, #b07a44 100%);
    --gk-line: linear-gradient(90deg, transparent, #a8743f 25%, #f3d9a4 50%, #a8743f 75%, transparent);
    --gk-bar: linear-gradient(90deg, #a8743f 0%, #d4a574 60%, #f3d9a4 100%);
    --gk-soft: linear-gradient(135deg, rgba(243, 217, 164, 0.13) 0%, rgba(168, 116, 63, 0.04) 100%);
    --gk-night: linear-gradient(135deg, #2a2016 0%, #1b150e 55%, #110d08 100%);
    --gk-night-border: rgba(212, 165, 116, 0.35);
}
[data-theme="light"] {
    --gk-btn: linear-gradient(135deg, #e8c27e 0%, #c48a4e 55%, #94602f 100%);
    --gk-btn-hover: linear-gradient(135deg, #efcd8e 0%, #cd9559 55%, #a06a35 100%);
    --gk-btn-ink: #ffffff;
    --gk-btn-border: transparent;
    --gk-btn-shadow: 0 8px 22px -10px rgba(110, 74, 34, 0.45);
    --gk-text: linear-gradient(90deg, #b07a44 0%, #8a5a2c 60%, #6e4a22 100%);
    --gk-line: linear-gradient(90deg, transparent, #c48a4e 25%, #6e4a22 50%, #c48a4e 75%, transparent);
    --gk-bar: linear-gradient(90deg, #6e4a22 0%, #a8743f 55%, #d9a864 100%);
    --gk-soft: linear-gradient(135deg, rgba(232, 194, 126, 0.24) 0%, rgba(196, 138, 78, 0.06) 100%);
}

/* ---------- Nút chính ---------- */
.cta-button, a.cta-button, .book-btn,
.feature-btn:hover, a.feature-btn:hover, .mystical-btn:hover, a.mystical-btn:hover, .view-all-btn:hover, a.view-all-btn:hover,
.tarot-account-widget-login-container, .tarot-account-btn-primary, .tarot-account-btn-sm.is-primary,
.shuffle-btn-main:not(.disabled), .continue-btn, .reveal-combined-btn, .follow-up-custom-submit, .retry-btn, .cta-btn,
.continue-reading-btn, .tarot-account-gate-btn, .tarot-login-google-btn-container,
.tarot-unlock-card-recommended .tarot-unlock-card-btn, .tarot-payment-confirm-btn, .home-card-all,
.flow-actionbar-primary, .flow-locked-btn, .cp-btn-gold, .kl-hub-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--gk-btn) !important;
    color: var(--gk-btn-ink) !important;
    border-color: var(--gk-btn-border) !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: var(--gk-btn-shadow);
}
/* Ánh sáng lướt qua nút khi rê chuột / focus (như demo) */
.cta-button::after,
a.cta-button::after,
.book-btn::after,
.tarot-account-widget-login-container::after,
.tarot-account-btn-primary::after,
.tarot-account-btn-sm.is-primary::after,
.shuffle-btn-main:not(.disabled)::after,
.continue-btn::after,
.reveal-combined-btn::after,
.follow-up-custom-submit::after,
.retry-btn::after,
.cta-btn::after,
.continue-reading-btn::after,
.tarot-account-gate-btn::after,
.tarot-login-google-btn-container::after,
.tarot-unlock-card-recommended .tarot-unlock-card-btn::after,
.tarot-payment-confirm-btn::after,
.home-card-all::after,
.flow-actionbar-primary::after,
.flow-locked-btn::after,
.cp-btn-gold::after,
.kl-hub-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
}
.cta-button:hover::after,
a.cta-button:hover::after,
.book-btn:hover::after,
.tarot-account-widget-login-container:hover::after,
.tarot-account-btn-primary:hover::after,
.tarot-account-btn-sm.is-primary:hover::after,
.shuffle-btn-main:not(.disabled):hover::after,
.continue-btn:hover::after,
.reveal-combined-btn:hover::after,
.follow-up-custom-submit:hover::after,
.retry-btn:hover::after,
.cta-btn:hover::after,
.continue-reading-btn:hover::after,
.tarot-account-gate-btn:hover::after,
.tarot-login-google-btn-container:hover::after,
.tarot-unlock-card-recommended .tarot-unlock-card-btn:hover::after,
.tarot-payment-confirm-btn:hover::after,
.home-card-all:hover::after,
.flow-actionbar-primary:hover::after,
.flow-locked-btn:hover::after,
.cp-btn-gold:hover::after,
.kl-hub-cta:hover::after,
.cta-button:focus-visible::after,
a.cta-button:focus-visible::after,
.book-btn:focus-visible::after,
.tarot-account-widget-login-container:focus-visible::after,
.tarot-account-btn-primary:focus-visible::after,
.tarot-account-btn-sm.is-primary:focus-visible::after,
.shuffle-btn-main:not(.disabled):focus-visible::after,
.continue-btn:focus-visible::after,
.reveal-combined-btn:focus-visible::after,
.follow-up-custom-submit:focus-visible::after,
.retry-btn:focus-visible::after,
.cta-btn:focus-visible::after,
.continue-reading-btn:focus-visible::after,
.tarot-account-gate-btn:focus-visible::after,
.tarot-login-google-btn-container:focus-visible::after,
.tarot-unlock-card-recommended .tarot-unlock-card-btn:focus-visible::after,
.tarot-payment-confirm-btn:focus-visible::after,
.home-card-all:focus-visible::after,
.flow-actionbar-primary:focus-visible::after,
.flow-locked-btn:focus-visible::after,
.cp-btn-gold:focus-visible::after,
.kl-hub-cta:focus-visible::after { transform: translateX(120%); }

/* Gói "Khuyên dùng": viền gradient vàng kim (như demo) */
.tarot-unlock-card.tarot-unlock-card-recommended {
    border: 2px solid transparent !important;
    background: linear-gradient(var(--theme-bg-elevated), var(--theme-bg-elevated)) padding-box, var(--gk-btn) border-box !important;
}
.cta-button:hover,
a.cta-button:hover,
.book-btn:hover,
.tarot-account-widget-login-container:hover,
.tarot-account-btn-primary:hover,
.tarot-account-btn-sm.is-primary:hover,
.shuffle-btn-main:not(.disabled):hover,
.continue-btn:hover,
.reveal-combined-btn:hover,
.follow-up-custom-submit:hover,
.retry-btn:hover,
.cta-btn:hover,
.continue-reading-btn:hover,
.tarot-account-gate-btn:hover,
.tarot-login-google-btn-container:hover,
.tarot-unlock-card-recommended .tarot-unlock-card-btn:hover,
.tarot-payment-confirm-btn:hover,
.home-card-all:hover,
.flow-actionbar-primary:hover,
.flow-locked-btn:hover,
.cp-btn-gold:hover,
.kl-hub-cta:hover {
    background: var(--gk-btn-hover) !important;
    color: var(--gk-btn-ink) !important;
}
/* Chữ/icon con bên trong nút ăn theo màu nút */
.tarot-account-widget-login-container *, .tarot-login-google-btn-container .tarot-login-google-btn,
.flow-actionbar-primary *, .shuffle-btn-main:not(.disabled) * { color: inherit !important; }

/* ---------- Huy hiệu, số thứ tự, avatar chữ ---------- */
.tarot-menu-badge-new, .tarot-unlock-card-badge, .tk-rank-card-tag, .dl-streak-badge,
.tarot-review-avatar, .tarot-account-profile-avatar, .tk-avatar > span, .tk-step-num, .tk-balance-how li::before {
    background: var(--gk-btn) !important;
    color: var(--gk-btn-ink) !important;
}

/* Bước đang ở trên thanh tiến độ quy trình bói */
.flow-step.is-current .flow-step-dot { background: var(--gk-btn) !important; color: var(--gk-btn-ink) !important; border-color: transparent !important; }

/* ---------- Thanh tiến độ, đường kẻ ---------- */
.tarot-wallet-rank-bar i, .dl-progress i, .tk-tile-bar i, .tk-rank-progress i { background: var(--gk-bar) !important; }
.decorative-line, .feature-card::before, .benefit-card::before, .topic-item::before, .reader-card::before,
.news-card::before, .flow-panel::before, .follow-up-divider { background: var(--gk-line) !important; }

/* ---------- Tiêu đề chữ vàng kim ---------- */
.section-title, .benefits-title, .tarot-page-wrapper h2.section-title, .tarot-page-wrapper h2.benefits-title,
.tarot-page-wrapper h2.tarot-reviews-title, .gradient-text {
    background: var(--gk-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--theme-gold-text);
    text-shadow: none !important;
    filter: drop-shadow(0 4px 18px rgba(212, 165, 116, 0.22));
}
[data-theme="light"] .section-title, [data-theme="light"] .benefits-title,
[data-theme="light"] .tarot-page-wrapper h2.section-title, [data-theme="light"] .tarot-page-wrapper h2.benefits-title,
[data-theme="light"] .tarot-page-wrapper h2.tarot-reviews-title { filter: none; }

/* ---------- Khối nền ấm ---------- */
.tarot-unlock-prompt, .home-card-today, .flow-prose-advice, .cp-profile, .cp-side-cta, .kl-hub, .tarot-wallet-card { background: var(--gk-soft) !important; }

/* ---------- Khối số dư / hạng: nền đêm (chỉ nền tối; nền sáng giữ màu cũ) ---------- */
:root:not([data-theme="light"]) .tk-balance,
:root:not([data-theme="light"]) .tk-rank-hero { background: var(--gk-night); border-color: var(--gk-night-border); }

/* ---------- Khối số dư ví nền sáng: tấm vàng ấm như demo ---------- */
[data-theme="light"] .tk-balance {
    background: linear-gradient(135deg, #fbf0dc 0%, #f3dfbc 55%, #ecd2a6 100%);
    border-color: rgba(196, 138, 78, 0.35);
}

/* ---------- Khuyến mãi & giảm giá ----------
   Nhãn % dùng tông trầm cùng họ với theme (đất nung · đồng · ô liu · vàng), kiểu
   "nền nhạt + chữ đậm + viền mảnh" thay vì màu đặc chói. Phân biệt bằng sắc:
   đất nung = giảm giá đợt · đồng = giảm theo hạng · ô liu = tiền thưởng · vàng = tổng/lời. */
:root {
    --gk-sale-ink: #e0a08c; --gk-sale-bg: rgba(178, 86, 62, 0.20); --gk-sale-line: rgba(178, 86, 62, 0.45);
    --gk-rank-ink: #dcb877; --gk-rank-bg: rgba(168, 128, 52, 0.20); --gk-rank-line: rgba(168, 128, 52, 0.45);
    --gk-bonus-ink: #b3cc8e; --gk-bonus-bg: rgba(122, 148, 84, 0.20); --gk-bonus-line: rgba(122, 148, 84, 0.45);
    --gk-total-ink: #f0cd92; --gk-total-bg: rgba(212, 165, 116, 0.22); --gk-total-line: rgba(212, 165, 116, 0.5);
}
[data-theme="light"] {
    --gk-sale-ink: #9c4227; --gk-sale-bg: rgba(178, 86, 62, 0.13); --gk-sale-line: rgba(156, 66, 39, 0.35);
    --gk-rank-ink: #7d5a16; --gk-rank-bg: rgba(168, 128, 52, 0.15); --gk-rank-line: rgba(125, 90, 22, 0.35);
    --gk-bonus-ink: #4f6b2c; --gk-bonus-bg: rgba(122, 148, 84, 0.16); --gk-bonus-line: rgba(79, 107, 44, 0.35);
    --gk-total-ink: #8a5a2c; --gk-total-bg: rgba(212, 165, 116, 0.26); --gk-total-line: rgba(138, 90, 44, 0.35);
}
/* Nhãn chung: mặc định là "tiền thưởng" (ô liu) */
.tarot-pct, .tarot-wallet-package-pct, .tk-pk-table td em, .tarot-unlock-card-save {
    background: var(--gk-bonus-bg) !important;
    color: var(--gk-bonus-ink) !important;
    border: 1px solid var(--gk-bonus-line) !important;
    font-weight: 700 !important;
    padding: 0.08rem 0.5rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
.tarot-unlock-card-save, .tarot-pct.is-promo {
    background: var(--gk-sale-bg) !important;
    color: var(--gk-sale-ink) !important;
    border-color: var(--gk-sale-line) !important;
}
.tarot-pct.is-rank {
    background: var(--gk-rank-bg) !important;
    color: var(--gk-rank-ink) !important;
    border-color: var(--gk-rank-line) !important;
}
.tarot-pct.is-total, .tk-pk-table td em {
    background: var(--gk-total-bg) !important;
    color: var(--gk-total-ink) !important;
    border-color: var(--gk-total-line) !important;
}
.tk-pk-chips .tarot-pct.is-pack, .tk-pk-chips .tarot-pct.is-first, .tarot-wallet-package-pct {
    background: var(--gk-bonus-bg) !important;
    color: var(--gk-bonus-ink) !important;
    border-color: var(--gk-bonus-line) !important;
}
.tarot-calc-row em.tarot-pct, .tarot-calc-row.is-bonus strong { color: var(--gk-bonus-ink) !important; }
.tarot-calc-row em.tarot-pct.is-promo { color: var(--gk-sale-ink) !important; }
.tarot-calc-row em.tarot-pct.is-rank { color: var(--gk-rank-ink) !important; }
.tarot-calc-row em.tarot-pct.is-total { color: var(--gk-total-ink) !important; }
/* Ô "ưu đãi đang áp dụng" ở trang Ví: cùng bộ màu trầm */
.tk-offer.is-promo { border-color: var(--gk-sale-line); background: var(--gk-sale-bg); }
.tk-offer.is-promo > strong, :root:not([data-theme="light"]) .tk-offer.is-promo > strong { color: var(--gk-sale-ink); }
.tk-offer.is-first { border-color: var(--gk-bonus-line); background: var(--gk-bonus-bg); }
.tk-offer.is-first > strong, :root:not([data-theme="light"]) .tk-offer.is-first > strong { color: var(--gk-bonus-ink); }
.tk-offer.is-rank { border-color: var(--gk-rank-line); background: var(--gk-rank-bg); }
.tk-offer.is-rank > strong { color: var(--gk-rank-ink); }
.tk-pk-table tr.is-best td { background: var(--gk-total-bg); }
/* Chữ số tiền thưởng trong cửa sổ nạp + ghi chú nhắc mốc */
.tarot-wallet-package-bonus { color: var(--gk-bonus-ink) !important; }
.tarot-wallet-package-bonus.is-none { color: var(--theme-text-faint) !important; }
.tarot-calc-note.is-warn { color: var(--gk-sale-ink); }
.tarot-unlock-card-price-now { font-variant-numeric: tabular-nums; }
.tarot-unlock-card-price-old, .tarot-wallet-pay-row s, .tk-combo-price s { color: var(--theme-text-faint); font-weight: 500; }
/* Dải khuyến mãi: nền thẻ + viền mảnh, tên đợt chữ vàng kim, đồng hồ vàng */
.tarot-promo-banner {
    background: var(--theme-bg-elevated) !important;
    border: 1px solid var(--theme-border-strong) !important;
    color: var(--theme-text-body) !important;
}
.tarot-promo-banner strong {
    background: var(--gk-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tarot-promo-cd { color: var(--theme-gold-text); }

/* ---------- Phần đầu trang bói: quầng sáng vàng kim + phụ đề chữ vàng ---------- */
:root { --gk-glow1: rgba(212, 165, 116, 0.16); --gk-glow2: rgba(168, 116, 63, 0.14); }
[data-theme="light"] { --gk-glow1: rgba(232, 194, 126, 0.30); --gk-glow2: rgba(196, 138, 78, 0.16); }
/* Lớp quầng tràn ra ngoài khung tiêu đề và mờ dần — không lộ cạnh hộp */
.flow-hero { position: relative; isolation: isolate; }
.flow-hero::before {
    content: "";
    position: absolute;
    inset: -90px -6% -40px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 22% 45%, var(--gk-glow1), transparent),
        radial-gradient(closest-side at 80% 40%, var(--gk-glow2), transparent);
}
.tarot-subtitle {
    background: var(--gk-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* Khối giá trên thẻ gói mở khoá: giá bán to, giá gốc + số tiền tiết kiệm nhỏ bên dưới */
.tarot-unlock-card-priceblock { margin: 0 0 0.9rem; }
.tarot-unlock-card-price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 !important; flex-wrap: wrap; }
.tarot-unlock-card-price-now { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: var(--theme-gold-text); font-variant-numeric: tabular-nums; }
.tarot-unlock-card-price-unit { font-size: 0.8rem; font-weight: 500; color: var(--theme-text-muted); }
.tarot-unlock-card-price-sub { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; flex-wrap: wrap; }
.tarot-unlock-card-price-old { font-size: 0.9rem; font-weight: 500; color: var(--theme-text-faint); text-decoration: line-through; }
.tarot-unlock-card-save {
    align-self: center;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: #b2392c !important;
    color: #fff !important;
    border: 1px solid #b2392c !important;
}
[data-theme="light"] .tarot-unlock-card-save { background: #a8331f !important; border-color: #a8331f !important; }
.tarot-unlock-card-rank { margin: 0.4rem 0 0 !important; font-size: 0.85rem; font-weight: 600; color: var(--theme-text-body); }
.tarot-unlock-card-rank strong { color: var(--theme-gold-text); }
.tarot-unlock-card-once { margin: 0.35rem 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--theme-text-faint); }

/* Link trong nội dung: bỏ màu xanh mặc định của Nevo (--nvt-link), dùng vàng của site */
:root {
    --nvt-link: var(--theme-gold-text) !important;
    --nvt-link-hover: #e6c18a !important;
}
[data-theme="light"] { --nvt-link-hover: #8a5a2c !important; }
#content a:not(.cta-button):not(.tarot-unlock-card-btn):not(.tarot-account-btn-primary):hover,
.site-footer a:hover,
.nevo-breadcrumb a:hover { color: var(--nvt-link-hover) !important; }

/* Thanh khuyến mãi chạy trên mọi trang (tarot-promo-system.php) */
.tarot-promo-bar {
    position: relative; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.5rem 2.6rem 0.5rem 1rem;
    background: var(--gk-btn); color: var(--gk-btn-ink);
    font-size: 0.9rem; line-height: 1.4; text-align: center;
}
.tarot-promo-bar.is-hot { background: linear-gradient(100deg, #8f2d22 0%, #b2392c 55%, #d2593f 100%); color: #fff; }
.tarot-promo-bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.7rem; color: inherit; text-decoration: none; }
.tarot-promo-bar-tag { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.tarot-promo-bar.is-hot .tarot-promo-bar-tag { background: rgba(0, 0, 0, 0.22); }
.tarot-promo-bar-text { font-weight: 700; }
.tarot-promo-bar-cd { font-variant-numeric: tabular-nums; opacity: 0.95; }
.tarot-promo-bar-go { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.tarot-promo-bar-x { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: 0.75; }
.tarot-promo-bar-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }
@media (max-width: 600px) {
    .tarot-promo-bar { font-size: 0.82rem; padding: 0.45rem 2.2rem 0.45rem 0.8rem; }
    .tarot-promo-bar-go { display: none; }
}

/* Nhãn ở bước chọn option: một dòng nhẹ, nói rõ bói miễn phí — chỉ trả khi mở lời giải */
.tarot-opt-from {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--theme-text-muted);
}
.tarot-opt-free {
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: var(--gk-bonus-bg);
    color: var(--gk-bonus-ink);
    border: 1px solid var(--gk-bonus-line);
    font-weight: 700;
    white-space: nowrap;
}
.tarot-opt-price { white-space: nowrap; }
.tarot-opt-price b { color: var(--theme-gold-text); font-weight: 800; }
.leno-spread-option .tarot-opt-from { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
.cta-button::after,
a.cta-button::after,
.book-btn::after,
.tarot-account-widget-login-container::after,
.tarot-account-btn-primary::after,
.tarot-account-btn-sm.is-primary::after,
.shuffle-btn-main:not(.disabled)::after,
.continue-btn::after,
.reveal-combined-btn::after,
.follow-up-custom-submit::after,
.retry-btn::after,
.cta-btn::after,
.continue-reading-btn::after,
.tarot-account-gate-btn::after,
.tarot-login-google-btn-container::after,
.tarot-unlock-card-recommended .tarot-unlock-card-btn::after,
.tarot-payment-confirm-btn::after,
.home-card-all::after,
.flow-actionbar-primary::after,
.flow-locked-btn::after,
.cp-btn-gold::after,
.kl-hub-cta::after { display: none; }
}