/* ============================================
   GIAO DIỆN "KẸO BÔNG" — Boihangngay (06/10/2026) · bảng màu CORAL + CREAM (chủ site chốt 06/10 tối, thay tím-hồng)
   Tinh thần dễ thương kiểu studio khám phá: nền kem ấm, nhấn san hô, chữ nâu espresso, mảng pastel (hồng đào · mơ ·
   đào · bơ · bạc hà · xanh trời), bo tròn lớn, bóng đổ màu ấm (không đen), một font tròn Nunito cho cả site.
   Bản tím-hồng cũ lưu ở app/backups/truoc-coral-2026-10-06/.
   - Nạp SAU gold.css (functions.php, ưu tiên 999) nên ghi đè biến --theme-* (main.css), --gk-* (gold.css),
     --tsh-* (Thần số học), --lv-* (Bói tình yêu). Đổi màu cả site: sửa biến ở đầu file này.
   - Màu vàng kim cũ trong mọi file CSS đã đổi sang biến: rgba(var(--boi-tint-rgb), a) và var(--boi-gold).
   - Mặc định nền SÁNG (<html data-theme="light"> từ máy chủ); nền tối là "đêm ca cao" (nâu ấm) cùng họ màu.
   - Tương phản đã đo (WCAG AA ≥ 4.5:1): chữ #4a2c25 trên nền kem 12.1 · chữ nhấn #b8432c 5.2 (4.8 trên thẻ
     đậm nhất) · chữ phụ #775a50 6.0 · nút: chữ #4a2c25 trên gradient coral ≥ 5.8 · chữ trắng trên #c2452f 5.0.
   ============================================ */

/* ---------- 1. Biến: font, bo góc, pastel dùng chung ---------- */
:root {
    --boi-font-head: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --boi-font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --boi-r-sm: 12px;
    --boi-r-md: 18px;
    --boi-r-lg: 24px;
    --boi-r-xl: 32px;
    /* Mảng pastel cho "nhãn dán" (ô biểu tượng công cụ, chip, nền khối) — giống nhau ở cả hai nền. */
    --boi-pink: #ffd8cf;
    --boi-apricot: #ffe7d6;
    --boi-peach: #ffd2b8;
    --boi-butter: #fff1c9;
    --boi-mint: #d2f2e0;
    --boi-sky: #d9ecf5;
    --boi-sticker-ink: #4a2c25;

    /* ---- Nền TỐI "đêm ca cao" (khi khách tự chọn) ---- */
    --boi-tint-rgb: 255, 180, 160;
    --boi-ink-rgb: 255, 247, 242;
    --boi-gold: #ffb4a0;
    --theme-bg: #221715;
    --theme-bg-elevated: #2e201d;
    --theme-bg-elevated-60: rgba(46, 32, 29, 0.6);
    --theme-bg-elevated-95: rgba(46, 32, 29, 0.95);
    --theme-bg-translucent-95: rgba(34, 23, 21, 0.95);
    --theme-bg-translucent-98: rgba(34, 23, 21, 0.98);
    --theme-bg-translucent-92: rgba(34, 23, 21, 0.92);
    --theme-bg-translucent-90: rgba(34, 23, 21, 0.9);
    --theme-bg-translucent-80: rgba(34, 23, 21, 0.8);
    --theme-bg-translucent-60: rgba(34, 23, 21, 0.6);
    --theme-bg-translucent-50: rgba(34, 23, 21, 0.5);
    --theme-surface-0: rgba(255, 255, 255, 0.035);
    --theme-surface-1: rgba(255, 255, 255, 0.05);
    --theme-surface-2: rgba(255, 255, 255, 0.07);
    --theme-surface-3: rgba(255, 255, 255, 0.09);
    --theme-surface-4: rgba(255, 255, 255, 0.16);
    --theme-border: rgba(255, 180, 160, 0.22);
    --theme-border-strong: rgba(255, 180, 160, 0.4);
    --theme-text-primary: #fff7f2;
    --theme-text-strong: #fbefe9;
    --theme-text-secondary: #f0e2db;
    --theme-text-body: #e8dad3;
    --theme-text-soft: #dccdc6;
    --theme-text-muted: #d4c4bc;
    --theme-text-faint: #bfaea5;
    --theme-overlay: rgba(22, 12, 10, 0.7);
    --theme-shadow: rgba(20, 10, 8, 0.45);
    --theme-danger: #ff9f8f;
    --theme-gold-text: #ffb4a0;
    --gold-text: #ffb4a0;
    --star-color: #ffd98a;
    --tarot-blog-gold: #ffb4a0;

    --gk-btn: linear-gradient(135deg, #ffc7b3 0%, #ffad96 55%, #ff9478 100%);
    --gk-btn-hover: linear-gradient(135deg, #ffb9a3 0%, #ff9f86 55%, #ff8466 100%);
    --gk-btn-ink: #3a2420;
    --gk-btn-border: transparent;
    --gk-btn-shadow: 0 10px 24px -12px rgba(255, 160, 135, 0.75);
    --gk-text: linear-gradient(90deg, #ffd0c2 0%, #ffb9a3 100%);
    --gk-line: linear-gradient(90deg, transparent, #ff9478 25%, #ffc7b3 50%, #ff9478 75%, transparent);
    --gk-bar: linear-gradient(90deg, #ff9478 0%, #ffb9a3 100%);
    --gk-soft: linear-gradient(135deg, rgba(255, 199, 179, 0.12) 0%, rgba(255, 190, 170, 0.08) 100%);
    --gk-night: linear-gradient(135deg, #3a2722 0%, #2f211d 55%, #241815 100%);
    --gk-night-border: rgba(255, 180, 160, 0.35);
    --gk-glow1: rgba(255, 190, 175, 0.14);
    --gk-glow2: rgba(255, 190, 170, 0.16);

    --gk-sale-ink: #ffb3a3; --gk-sale-bg: rgba(255, 130, 110, 0.16); --gk-sale-line: rgba(255, 150, 130, 0.45);
    --gk-rank-ink: #ffb4a0; --gk-rank-bg: rgba(255, 180, 160, 0.16); --gk-rank-line: rgba(255, 180, 160, 0.45);
    --gk-bonus-ink: #a8e6c4; --gk-bonus-bg: rgba(110, 210, 160, 0.14); --gk-bonus-line: rgba(130, 220, 170, 0.4);
    --gk-total-ink: #ffd98a; --gk-total-bg: rgba(255, 217, 138, 0.14); --gk-total-line: rgba(255, 217, 138, 0.45);

    /* Màu chữ ngũ hành (lá số tử vi: Kim xám · Mộc xanh lá · Thủy xanh sẫm · Hỏa đỏ · Thổ cam), nền tối. */
    --boi-hanh-kim: #cbc2bd; --boi-hanh-moc: #86d6a2; --boi-hanh-thuy: #a9c8f2; --boi-hanh-hoa: #ff9a86; --boi-hanh-tho: #f2b866;
    /* Màu 5 đường chỉ tay (Xem chỉ tay, sơ đồ bàn tay), nền tối. */
    --boi-line-tam: #ff8f78; --boi-line-tri: #f2b866; --boi-line-sinh: #6fcf97; --boi-line-menh: #8fb6f0; --boi-line-duong: #c9a6d8;
    --boi-card-shadow: 0 14px 34px -22px rgba(20, 10, 8, 0.8);
    --boi-card-shadow-hover: 0 18px 40px -20px rgba(255, 160, 135, 0.45);
}

/* ---- Nền SÁNG "kẹo bông" (mặc định) ---- */
[data-theme="light"] {
    --boi-tint-rgb: 214, 94, 64;
    --boi-ink-rgb: 74, 44, 37;
    --boi-gold: #f2a48c;
    --theme-bg: #fffaf4;
    --theme-bg-elevated: #ffffff;
    --theme-bg-elevated-60: rgba(255, 255, 255, 0.7);
    --theme-bg-elevated-95: rgba(255, 255, 255, 0.95);
    --theme-bg-translucent-95: rgba(255, 250, 244, 0.95);
    --theme-bg-translucent-98: rgba(255, 250, 244, 0.98);
    --theme-bg-translucent-92: rgba(255, 250, 244, 0.92);
    --theme-bg-translucent-90: rgba(255, 250, 244, 0.9);
    --theme-bg-translucent-80: rgba(255, 250, 244, 0.85);
    --theme-bg-translucent-60: rgba(255, 250, 244, 0.7);
    --theme-bg-translucent-50: rgba(255, 250, 244, 0.6);
    --theme-surface-0: rgba(214, 94, 64, 0.03);
    --theme-surface-1: rgba(214, 94, 64, 0.045);
    --theme-surface-2: rgba(214, 94, 64, 0.06);
    --theme-surface-3: rgba(214, 94, 64, 0.075);
    --theme-surface-4: rgba(214, 94, 64, 0.11);
    --theme-border: rgba(214, 94, 64, 0.16);
    --theme-border-strong: rgba(214, 94, 64, 0.3);
    --theme-text-primary: #4a2c25;
    --theme-text-strong: #4a2c25;
    --theme-text-secondary: #5a3b33;
    --theme-text-body: #5f433b;
    --theme-text-soft: #6a4d44;
    --theme-text-muted: #775a50;
    --theme-text-faint: #7a5e55;
    --theme-overlay: rgba(74, 44, 37, 0.4);
    --theme-shadow: rgba(214, 94, 64, 0.2);
    --theme-danger: #b5352a;
    --theme-danger-bg: rgba(232, 80, 110, 0.08);
    --theme-danger-border: rgba(232, 80, 110, 0.3);
    --theme-gold-text: #b8432c;
    --gold-text: #b8432c;
    --star-color: #e0a100;
    --tarot-blog-gold: #f2a48c;

    --gk-btn: linear-gradient(135deg, #ffc7b3 0%, #ffad96 55%, #ff9478 100%);
    --gk-btn-hover: linear-gradient(135deg, #ffb9a3 0%, #ff9f86 55%, #ff8466 100%);
    --gk-btn-ink: #4a2c25;
    --gk-btn-border: transparent;
    --gk-text: linear-gradient(90deg, #b8432c 0%, #e0634a 100%);
    --gk-text: linear-gradient(90deg, #b8432c 0%, #e0634a 100%);
    --gk-line: linear-gradient(90deg, transparent, #ffc4b0 25%, #ffb9a3 50%, #ffc4b0 75%, transparent);
    --gk-bar: linear-gradient(90deg, #ffb29c 0%, #ff9f8a 100%);
    --gk-soft: linear-gradient(135deg, #fff0ea 0%, #fff3ea 100%);
    --gk-night: linear-gradient(135deg, #fff0ea 0%, #fff1e6 100%);
    --gk-night-border: rgba(214, 94, 64, 0.2);
    --gk-glow1: rgba(255, 190, 175, 0.45);
    --gk-glow2: rgba(255, 190, 170, 0.45);

    --gk-sale-ink: #a8233f; --gk-sale-bg: #ffe4dc; --gk-sale-line: rgba(200, 70, 50, 0.3);
    --gk-rank-ink: #9a3622; --gk-rank-bg: #fff0e4; --gk-rank-line: rgba(184, 67, 44, 0.3);
    --gk-bonus-ink: #1f6b45; --gk-bonus-bg: #dcf5e7; --gk-bonus-line: rgba(31, 107, 69, 0.28);
    --gk-total-ink: #b8432c; --gk-total-bg: #fff3c9; --gk-total-line: rgba(180, 130, 0, 0.32);

    /* Màu chữ ngũ hành, nền sáng (tương phản ≥ 4.5:1 trên nền trắng). */
    --boi-hanh-kim: #6e6661; --boi-hanh-moc: #22783f; --boi-hanh-thuy: #253a5c; --boi-hanh-hoa: #c0362a; --boi-hanh-tho: #a55d0c;
    /* Màu 5 đường chỉ tay (Xem chỉ tay, sơ đồ bàn tay), nền sáng. */
    --boi-line-tam: #d9583f; --boi-line-tri: #c08328; --boi-line-sinh: #3e9a62; --boi-line-menh: #4a7fc9; --boi-line-duong: #8a6a9a;
    --boi-card-shadow: 0 10px 28px -18px rgba(214, 94, 64, 0.35);
    --boi-card-shadow-hover: 0 16px 34px -16px rgba(230, 120, 95, 0.45);
}

/* ---------- 2. Một font cho cả site ---------- */
body,
button, input, select, textarea, optgroup,
.site, .site-content, .entry-content {
    font-family: var(--boi-font-body);
}
body {
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: lining-nums;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .widget-title {
    font-family: var(--boi-font-head);
    letter-spacing: -0.005em;
}
h1, h2, .entry-title, .page-title { font-weight: 800; }
h3, h4 { font-weight: 800; }
::selection { background: #ffd8cf; color: #4a2c25; }

/* Nút: bo tròn hẳn, chữ đậm vừa. */
button, .button, input[type="submit"], input[type="button"] { font-family: var(--boi-font-body); }

/* Ô nhập: bo tròn mềm, viền san hô nhạt, focus san hô. */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], input[type="url"], input[type="password"], select, textarea {
    border-radius: 14px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(255, 160, 140, 0.55);
    outline-offset: 1px;
}

/* ---------- 3. Header ---------- */
.site-header {
    background: var(--theme-bg-translucent-92) !important;
    box-shadow: 0 6px 24px -18px var(--theme-shadow);
    border-bottom: 1px solid var(--theme-border);
}
.site-header.scrolled { box-shadow: 0 10px 30px -20px var(--theme-shadow); }
.site-header::before { display: none; }

.site-branding .main-title,
.site-branding .main-title a {
    font-family: var(--boi-font-head);
    font-weight: 900 !important;
    font-size: 1.7rem !important;
    letter-spacing: -0.01em;
    text-shadow: none !important;
}
.site-branding .main-title a {
    background: var(--gk-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--theme-gold-text) !important;
}
.site-branding .main-title a::before {
    content: "✦";
    content: "✦" / "";
    margin-right: 0.3em;
    font-size: 0.7em;
    vertical-align: 0.15em;
    -webkit-text-fill-color: #ff8a76;
    color: #ff8a76;
}
.site-branding .main-title a:hover { text-shadow: none !important; }
/* Logo (boi-logo.php, 07/10/2026): hình mèo + chữ logo dạng ảnh (bản nền sáng / nền tối) — thay dấu ✦ và chữ gradient.
   Điện thoại ≤ 430px (nút Đăng nhập rộng hơn ảnh đại diện): logo nhỏ thêm một nấc; ≤ 330px: chỉ hình mèo (tên site vẫn có trong .screen-reader-text). */
@media (max-width: 430px) { .site-branding .boi-logo-mark { height: 30px; } .site-branding .boi-logo-word-img { height: 16px; } }
@media (max-width: 370px) { .site-branding .boi-logo-mark { height: 26px; } .site-branding .boi-logo-word-img { height: 14px; } }
@media (max-width: 330px) { .site-branding .boi-logo-word-img { display: none !important; } }
.site-branding .main-title a:has(.boi-logo-mark) {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; -webkit-text-fill-color: currentColor; text-decoration: none;
}
.site-branding .main-title a:has(.boi-logo-mark)::before { display: none; }
.boi-logo-mark { flex: none; width: auto; height: 56px; }
.boi-logo-word-img { flex: none; width: auto; height: 36px; margin-top: 4px; }
.boi-logo-mark.is-dark, .boi-logo-word-img.is-dark { display: none; }
:root:not([data-theme="light"]) .boi-logo-mark.is-light, :root:not([data-theme="light"]) .boi-logo-word-img.is-light { display: none; }
:root:not([data-theme="light"]) .boi-logo-mark.is-dark, :root:not([data-theme="light"]) .boi-logo-word-img.is-dark { display: block; }

/* Header điện thoại / máy tính bảng (Nevo đổi sang header di động dưới 992px): logo gọn lại, nút sáng/tối và
   Đăng nhập xếp hàng ngay trước nút menu ☰ — không đè lên logo. */
@media (max-width: 991px) {
    .site-branding .main-title,
    .site-branding .main-title a { font-size: 1.25rem !important; }
    .site-branding .main-title a::before { display: none; }
    .site-branding .main-title a:has(.boi-logo-mark) { gap: 3px; }
    .boi-logo-mark { height: 34px; }
    .boi-logo-word-img { height: 20px; margin-top: 2px; }
    .tarot-account-widget { right: 76px; }
    .tarot-theme-toggle { right: calc(76px + var(--boi-login-w, 96px) + 8px); width: 34px; height: 34px; font-size: 1rem; }
    body.logged-in .tarot-theme-toggle { --boi-login-w: var(--boi-acct-w, 44px); } /* bề rộng khung tài khoản (avatar + số dư) đo bằng JS, boi-account-system.php */
}
@media (max-width: 768px) {
    #nevo-mobile-header .inside-header { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 420px) {
    .site-branding .main-title,
    .site-branding .main-title a { font-size: 1.05rem !important; }
    .tarot-account-widget { right: 66px; }
    .tarot-account-widget-login-container { padding: 0.42rem 0.75rem !important; font-size: 0.8rem !important; }
    .tarot-theme-toggle { right: calc(66px + var(--boi-login-w, 76px) + 6px); width: 32px; height: 32px; }
}
@media (max-width: 374px) {
    .site-branding .main-title,
    .site-branding .main-title a { font-size: 0.95rem !important; letter-spacing: -0.02em; }
    .tarot-theme-toggle { right: calc(64px + var(--boi-login-w, 76px)); }
}

.nevo-nav-menu .nevo-menu-link {
    font-weight: 700 !important;
    border-radius: 999px;
}
.nevo-nav-menu .nevo-menu-link:hover,
.nevo-nav-menu .nevo-menu-link:focus {
    background: var(--theme-surface-3) !important;
    text-shadow: none;
}
.nevo-nav-menu .current-menu-item .nevo-menu-link,
.nevo-nav-menu .current_page_item .nevo-menu-link {
    background: var(--boi-apricot) !important;
    color: var(--boi-sticker-ink) !important;
    box-shadow: none;
}
.nevo-menu-link:hover .nevo-item-title::after { display: none; }
.nevo-nav-menu .sub-menu {
    background: var(--theme-bg-elevated) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--boi-r-lg);
    box-shadow: 0 20px 44px -22px var(--theme-shadow);
}
#nevo-desktop-header .tarot-menu-group > .sub-menu > li > a { border-radius: 16px; }
.tarot-menu-badge-new { border-radius: 999px; font-weight: 800; }

.tarot-theme-toggle {
    border-radius: 999px !important;
    background: var(--theme-surface-2) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: none !important;
}
.tarot-theme-toggle:hover { background: var(--theme-surface-4) !important; }
.tarot-account-widget-login-container { font-weight: 800; }

/* Dải thông báo trên cùng + nút ảnh đại diện */
[data-theme="light"] .tarot-free-reading-notice { background: linear-gradient(90deg, #ffeee4 0%, #fff1e6 50%, #fff3d6 100%); border-bottom-color: var(--theme-border); }
.header-account .account-toggle { border-radius: 999px !important; }
/* main.css có luật ảnh tác giả 100px cho trang bài viết (body.wp-singular .user-avatar) — lỡ trúng cả ảnh ở header. */
body .header-account .user-avatar {
    width: 26px !important;
    height: 26px !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* Dải breadcrumb của Nevo (lớp phủ tối + chữ trắng từ Customizer) → trong suốt, chữ theo theme. */
.page-header, .page-header.bg-overlay { background: transparent !important; }
.page-header::before, .page-header:before { background: transparent !important; }
.page-header .inside-page-header,
.page-header .inside-page-header a,
.page-header .nevo-breadcrumb { color: var(--theme-text-muted) !important; text-decoration-color: currentColor !important; }
.page-header .inside-page-header a:hover { color: var(--theme-gold-text) !important; }

/* ---------- Nhãn công cụ (trang chủ + menu): Mới · Được chọn nhiều · Miễn phí (boi_studio_badges) ---------- */
.boi-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
}
.boi-tag.is-new { background: #ffe2da; color: #a8233f; }
.boi-tag.is-pop { background: #ffedb8; color: #6e4a00; }
.boi-tag.is-free { background: #dcf5e7; color: #1f6b45; }

/* ---------- Menu "Xem bói ▾" nhiều cột (functions.php boi_header_menu_spec: mục → nhóm → công cụ) ---------- */
#nevo-desktop-header .boi-menu-mega { position: relative; }
#nevo-desktop-header .boi-menu-mega.boi-mega-c1 { --mega-cols: 1; }
#nevo-desktop-header .boi-menu-mega.boi-mega-c2 { --mega-cols: 2; }
#nevo-desktop-header .boi-menu-mega.boi-mega-c3 { --mega-cols: 3; }
#nevo-desktop-header .boi-menu-mega.boi-mega-c4 { --mega-cols: 4; }
#nevo-desktop-header .boi-menu-mega.boi-mega-c5 { --mega-cols: 5; }
#nevo-desktop-header .nevo-nav-menu > .boi-menu-mega > .sub-menu {
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 2), minmax(210px, 1fr));
    gap: 6px 26px;
    width: max-content !important;
    max-width: min(1180px, 94vw);
    min-width: 0;
    padding: 20px 24px !important;
    left: 50%;
    translate: -50% 0;
    border-radius: var(--boi-r-lg);
}
/* Cột nhóm: tiêu đề nhỏ có chấm màu + gạch đứt */
#nevo-desktop-header .boi-menu-mega > .sub-menu > .boi-menu-heading { margin: 0; }
#nevo-desktop-header .boi-menu-mega > .sub-menu > .boi-menu-heading > a {
    padding: 0 0 8px !important;
    margin-bottom: 6px;
    border-radius: 0 !important;
    border-bottom: 2px dashed var(--theme-border) !important;
    background: none !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-strong) !important;
    white-space: nowrap;
}
#nevo-desktop-header .boi-menu-heading > a .nevo-item-title::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    align-self: center;
    flex: none;
    background: var(--sh-dot, #ff9f8a);
}
#nevo-desktop-header .boi-menu-heading:nth-child(2) { --sh-dot: #f2c14e; }
#nevo-desktop-header .boi-menu-heading:nth-child(3) { --sh-dot: #6cc79a; }
#nevo-desktop-header .boi-menu-heading:nth-child(4) { --sh-dot: #f2a48c; }
#nevo-desktop-header .boi-menu-heading:nth-child(5) { --sh-dot: #7fb6e8; }
#nevo-desktop-header .boi-menu-heading > a .nevo-icon,
#nevo-desktop-header .boi-menu-heading > a .nevo-item-title::after { display: none !important; }
/* Danh sách công cụ trong cột: luôn hiện, không bay sang phải như menu con thường */
#nevo-desktop-header .boi-menu-heading > .sub-menu {
    position: static !important;
    opacity: 1 !important;
    /* inherit, KHÔNG visible: menu ngoài đang ẩn thì danh sách này cũng ẩn và không bắt chuột
       (trước 08/10/2026 để visible → tàng hình nhưng vẫn nhận rê chuột dưới header, menu tự bật ra). */
    visibility: inherit !important;
    transform: none !important;
    translate: none;
    float: none;
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
}
#nevo-desktop-header .boi-menu-heading > .sub-menu > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: 0;
}
#nevo-desktop-header .boi-menu-tags { display: inline-flex; gap: 4px; margin: -4px 0 4px; }
#nevo-desktop-header .boi-menu-heading > .sub-menu > li > a + .boi-menu-tags { margin: 0; }
#nevo-desktop-header .boi-menu-heading > .sub-menu > li > a {
    padding: 7px 0 !important;
    border: 0 !important;
    background: none !important;
    white-space: nowrap;
    font-weight: 700;
    color: var(--theme-text-secondary) !important;
}
#nevo-desktop-header .boi-menu-heading > .sub-menu > li > a:hover,
#nevo-desktop-header .boi-menu-heading > .sub-menu > li.current-menu-item > a { color: var(--theme-gold-text) !important; }
#nevo-desktop-header .boi-menu-heading > .sub-menu > li > a .nevo-item-title::after { display: none; }

/* Menu điện thoại: nhóm là tiêu đề, công cụ trong nhóm mở sẵn (khỏi bấm hai lần) */
.menu-mobile .boi-menu-heading > .nevo-menu-link { font-size: 0.8rem !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--theme-gold-text) !important; pointer-events: none; }
.menu-mobile .boi-menu-heading > .nevo-menu-link .nevo-icon,
.menu-mobile .boi-menu-heading > .nevo-toggle,
.menu-mobile .boi-menu-heading > button { display: none !important; }
.menu-mobile .boi-menu-heading > .sub-menu { position: static !important; opacity: 1 !important; left: auto !important; display: block !important; visibility: visible !important; }
.menu-mobile .boi-menu-tags { display: inline-flex; gap: 4px; margin-left: 6px; }

/* Menu di động */
#nevo-vertical-header, .nevo-vertical-header { background: var(--theme-bg-elevated) !important; }

/* ---------- 4. Nút chính & huy hiệu (gold.css đã gán --gk-btn) ---------- */
.cta-button, a.cta-button, .book-btn, .tarot-account-btn-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-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 {
    font-family: var(--boi-font-head);
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta-button:hover, a.cta-button:hover, .book-btn:hover, .tarot-account-btn-primary:hover, .continue-btn:hover,
.cta-btn:hover, .tarot-payment-confirm-btn:hover, .flow-actionbar-primary:hover, .flow-locked-btn:hover, .kl-hub-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(240, 140, 110, 0.7);
}
.tarot-unlock-card-save { background: #c2452f !important; border-color: #c2452f !important; }
[data-theme="light"] .tarot-unlock-card-save { background: #a83c27 !important; border-color: #a83c27 !important; }
.tarot-promo-bar.is-hot { background: linear-gradient(100deg, #a83c27 0%, #c2452f 55%, #d4553d 100%); }

/* Khối số dư ví nền sáng: tấm pastel hồng tím (thay tấm vàng). */
[data-theme="light"] .tk-balance { background: linear-gradient(135deg, #fff0ea 0%, #fff1e6 60%, #ffe7d6 100%); }

/* ---------- 5. Thẻ, khối: bo tròn lớn + bóng pastel ---------- */
.flow-crosslinks { border-radius: var(--boi-r-xl); background: var(--theme-bg-elevated); border-color: var(--theme-border); box-shadow: var(--boi-card-shadow); }
.flow-crosslink { border-radius: var(--boi-r-md); background: var(--theme-surface-1); }
.flow-crosslink:hover { box-shadow: var(--boi-card-shadow-hover); }
.flow-crosslink-name, .flow-crosslink-name .xl-stretch { font-family: var(--boi-font-head); font-weight: 800; }
.flow-crosslink-chip { font-weight: 700; background: var(--theme-bg-elevated); }

.flow-panel, .flow-card, .tarot-unlock-card, .tarot-unlock-prompt, .tarot-wallet-card, .tarot-review-card,
.tk-card, .tk-tile, .tk-balance, .tk-rank-hero, .cp-profile, .cp-side-cta, .kl-hub, .home-card-today,
.tarot-payment-modal-content, .tarot-modal-content, .tarot-wallet-modal-content {
    border-radius: var(--boi-r-lg) !important;
}

/* Khung trò chuyện: avatar người đọc bài là "viên kẹo" sáng thay vì đá đen; quầng chữ tiêu đề nhẹ lại. */
[data-theme="light"] {
    --tarot-glow: rgba(240, 140, 110, 0.16);
}
[data-theme="light"] .tc-ava {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff0e4 75%);
    box-shadow: 0 0 0 1.5px rgba(240, 140, 110, 0.55), 0 0 0 5px rgba(255, 190, 175, 0.25), 0 8px 16px -10px var(--theme-shadow);
}
:root:not([data-theme="light"]) .tc-ava {
    background: radial-gradient(circle at 35% 30%, #41302a 0%, #2a1d1a 72%);
}
.tc-ava.is-me { background: var(--gk-btn); color: var(--gk-btn-ink); }

/* Trang Đăng nhập: ô minh hoạ bên trái là nền đêm cố định — nền sáng đổi sang mảng pastel để chữ đọc được. */
[data-theme="light"] .tarot-login-illustration {
    background: linear-gradient(160deg, #ffe6df 0%, #ffeee2 55%, #fff3d1 100%);
}
[data-theme="light"] .tarot-login-illustration::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.7), transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(255, 190, 170, 0.45), transparent 50%);
}
.tarot-login-illustration-title { font-family: var(--boi-font-head); font-weight: 900; }
[data-theme="light"] .tarot-login-layout { box-shadow: 0 30px 60px -30px rgba(214, 94, 64, 0.35) !important; }
:root:not([data-theme="light"]) .tarot-login-illustration { background: linear-gradient(160deg, #41302a 0%, #2e201d 55%, #221715 100%); }

/* ---------- 6. Footer: dải pastel, chữ tím mận ---------- */
.site-footer.tarot-mystical-footer {
    background: var(--theme-bg-translucent-98) !important;
    border-top: 1px solid var(--theme-border);
}
[data-theme="light"] .site-footer.tarot-mystical-footer {
    background: linear-gradient(180deg, #fffaf3 0%, #fff2e8 45%, #fff0ea 100%) !important;
}
.site-footer.tarot-mystical-footer::after { display: none; }
.footer-overlay { display: none; }
.widget-title {
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-shadow: none;
    letter-spacing: 0;
}
.widget-title::after {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--gk-bar);
    box-shadow: none;
}
.footer-links li::before { content: "♥"; content: "♥" / ""; color: #ff8a76; font-size: 0.62rem; top: 0.32rem; }
.footer-links li a:hover { text-shadow: none; padding-left: 0.25rem; }
.footer-site-name {
    font-family: var(--boi-font-head);
    font-weight: 900;
    background: var(--gk-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- 7. Tiêu đề trang bói ---------- */
.section-title, .benefits-title, .gradient-text, .tarot-subtitle { font-family: var(--boi-font-head); font-weight: 900; }
.flow-hero h1, .tarot-page-wrapper h1 { font-family: var(--boi-font-head); font-weight: 900; letter-spacing: -0.015em; }

/* ---------- 8. Thần số học & Bói tình yêu: cùng họ màu ---------- */
.tsh {
    --tsh-bg: #221715;
    --tsh-card-bg: #2c1f1c;
    --tsh-glow: rgba(255, 190, 170, 0.14);
    --tsh-head: #fff7f2;
    --tsh-gold: #ffb4a0;
    --tsh-gold-hi: #ffc7b3;
    --tsh-label: #ffb4a0;
    --tsh-text: #f0e2db;
    --tsh-text2: #e3d4cc;
    --tsh-muted: #cbbab1;
    --tsh-faint: rgba(255, 247, 242, 0.34);
    --tsh-ink: #3a2420;
}
[data-theme="light"] .tsh {
    --tsh-bg: #fffaf4;
    --tsh-card-bg: #ffffff;
    --tsh-glow: rgba(255, 190, 175, 0.35);
    --tsh-dot1: rgba(240, 140, 110, 0.4);
    --tsh-dot2: rgba(255, 138, 118, 0.45);
    --tsh-dot3: rgba(240, 140, 110, 0.25);
    --tsh-head: #4a2c25;
    --tsh-gold: #b8432c;
    --tsh-gold-hi: #b83a4b;
    --tsh-label: #b8432c;
    --tsh-text: #5a3b33;
    --tsh-text2: #6a4d44;
    --tsh-muted: #775a50;
    --tsh-faint: rgba(74, 44, 37, 0.36);
    --tsh-line: rgba(214, 94, 64, 0.4);
    --tsh-line-soft: rgba(214, 94, 64, 0.18);
    --tsh-off: rgba(214, 94, 64, 0.22);
    --tsh-star-glow: rgba(255, 160, 140, 0.6);
    --tsh-num-shadow: rgba(240, 140, 110, 0.35);
    --tsh-card: linear-gradient(160deg, #fff0ea, #ffffff 60%);
    --tsh-fill: rgba(240, 140, 110, 0.1);
    --tsh-error: #b5352a;
    --tsh-ink: #4a2c25;
}
.love {
    --lv-bg: #221715;
    --lv-paper: #2e201d;
    --lv-paper2: #2a1d1a;
    --lv-paper3: #271b18;
    --lv-field: #1f1513;
    --lv-rose: #ff9f8a;
    --lv-rose-hi: #ffb9a3;
    --lv-rose-soft: #ffd8cf;
    --lv-rose-line: rgba(255, 160, 140, 0.45);
    --lv-gold-line: rgba(255, 180, 160, 0.3);
    --lv-gold-faint: rgba(255, 180, 160, 0.16);
    --lv-head: #fff7f2;
    --lv-text: #f0e2db;
    --lv-text2: #e3d4cc;
    --lv-muted: #cbbab1;
    --lv-seal: linear-gradient(135deg, #ff9f8a, #ff8f73);
    --lv-seal-r: radial-gradient(circle at 40% 35%, #ffb9a3, #ff8f73);
    --lv-on-seal: #3a2420;
    --lv-fill1: #ffc7b3;
    --lv-fill2: #ff8f73;
}
[data-theme="light"] .love {
    --lv-bg: #fff8f3;
    --lv-paper: #ffffff;
    --lv-paper2: #fff7f2;
    --lv-paper3: #fff0ea;
    --lv-field: #ffffff;
    --lv-rose: #b83a4b;
    --lv-rose-hi: #a33a2c;
    --lv-rose-soft: #8c2f22;
    --lv-rose-line: rgba(184, 58, 75, 0.35);
    --lv-gold: #b8432c;
    --lv-gold-hi: #9a3622;
    --lv-gold-line: rgba(214, 94, 64, 0.3);
    --lv-gold-faint: rgba(214, 94, 64, 0.14);
    --lv-head: #4a2c25;
    --lv-text: #5a3b33;
    --lv-text2: #5f433b;
    --lv-muted: #775a50;
    --lv-seal: linear-gradient(135deg, #ffb9a3, #ffb4a0);
    --lv-seal-r: radial-gradient(circle at 40% 35%, #ffc7b3, #ffa48c);
    --lv-on-seal: #4a2c25;
    --lv-fill1: #ffc2ae;
    --lv-fill2: #e0634a;
}
.love h1, .love h2, .love h3, .love h4 { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .cta-button, a.cta-button, .book-btn, .tarot-account-btn-primary, .continue-btn, .cta-btn,
    .tarot-payment-confirm-btn, .flow-actionbar-primary, .flow-locked-btn, .kl-hub-cta { transition: none; }
    .cta-button:hover, a.cta-button:hover, .book-btn:hover, .tarot-account-btn-primary:hover, .continue-btn:hover,
    .cta-btn:hover, .tarot-payment-confirm-btn:hover, .flow-actionbar-primary:hover, .flow-locked-btn:hover,
    .kl-hub-cta:hover { transform: none; }
}

/* Dòng tác giả "Biên soạn: Bói Hàng Ngày · Cập nhật … · Cách chúng tôi biên soạn" (boi_content_byline) — dùng ở mọi trang. */
.boi-byline { margin: 0; font-size: .88rem; color: var(--theme-text-muted); }
.boi-byline strong { color: var(--theme-text-strong); }
.boi-byline a { color: var(--theme-gold-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Bài viết: dòng chữ không quá dài (~75 ký tự) cho dễ đọc. */
.single-post .inside-article .entry-header,
body.single-post .inside-article .entry-content { max-width: 760px !important; margin-left: auto; margin-right: auto; } /* main.css ép 100% !important cho mọi trang */
.single-post .entry-content > .boi-byline { margin-top: 2.2em; padding-top: 1em; border-top: 1px dashed var(--theme-border-strong); }

/* ---------- Logo ở footer (08/10/2026): logo ngang màu, 2 bản theo nền — chặn bộ lọc tô một màu cũ của main.css ---------- */
.footer-logo .footer-brand { display: inline-block; line-height: 0; }
.footer-logo img.boi-footer-logo { filter: none !important; max-width: 100%; width: auto; height: 60px; }
.footer-logo img.boi-footer-logo.is-dark { display: none; }
:root:not([data-theme="light"]) .footer-logo img.boi-footer-logo.is-light { display: none; }
:root:not([data-theme="light"]) .footer-logo img.boi-footer-logo.is-dark { display: inline-block; }
@media (max-width: 768px) { .footer-logo img.boi-footer-logo { height: 52px; } }

/* Breadcrumb trang công cụ (08/10/2026): "Trang chủ › <tên công cụ>" phía trên H1 — boi_tool_breadcrumb() trong boi-doc-pages.php.
   Nhỏ, nhẹ, căn giữa như khối đầu trang; chung kiểu với breadcrumb trang thường (.doc-crumbs). */
.boi-crumbs { margin: 0 0 12px; }
.boi-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; margin: 0; padding: 0;
    font-family: var(--boi-font-body); font-size: .84rem; font-weight: 600; line-height: 1.5; color: var(--theme-text-soft); }
.boi-crumbs li { margin: 0; padding: 0; }
.boi-crumbs li + li::before { content: "›"; margin: 0 7px 0 5px; opacity: .55; font-weight: 700; }
.boi-crumbs a { color: inherit; text-decoration: none; border-radius: 6px; }
.boi-crumbs a:hover { color: var(--theme-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.boi-crumbs a:focus-visible { outline: 2px solid var(--theme-gold-text); outline-offset: 2px; }
.boi-crumbs [aria-current="page"] { color: var(--theme-text-muted); }
/* Từ bước 2 của luồng bói, khối đầu trang thu gọn — breadcrumb ẩn theo cho gọn. */
body.flow-has-actionbar:not(.flow-step-0) .flow-hero .boi-crumbs { display: none; }

/* ===== ICON DẠNG ẢNH TỰ VẼ (09/10/2026 — assets/images/icons, boi-studio-icons.php) =====
   Icon là file ảnh màu cố định (nền pastel + viền nâu) nên không đổi màu theo nền; chỉ cần đặt cỡ. */
img.boi-ic { display: inline-block; vertical-align: middle; object-fit: contain; }
.nevo-icon .boi-ic-ui { display: block; width: 16px; height: 16px; }
.menu-toggle .boi-ic-ui, .header-menu-toggle .boi-ic-ui { display: block; width: 24px; height: 24px; }
.button-close .boi-ic-ui, .popup-close .boi-ic-ui { display: block; width: 22px; height: 22px; }
.social-link .social-ic { display: block; width: 28px; height: 28px; flex: none; }
.back-to-top .back-to-top-ic { display: block; width: 30px; height: 30px; }
.tarot-theme-toggle-icon { display: grid; place-items: center; line-height: 0; }
.tarot-theme-toggle-icon .boi-ic { display: block; width: 22px; height: 22px; }
:root[data-theme="light"] .tarot-theme-toggle .is-sun, :root:not([data-theme="light"]) .tarot-theme-toggle .is-moon { display: none; }
.flow-pp-ic .boi-ic, .flow-ic { display: block; width: 100%; height: 100%; }
.tc-ava.is-ic { background: transparent !important; }
.tc-ava.is-ic .boi-ic { display: block; width: 100%; height: 100%; }
.pdf-ic { width: 20px; height: 20px; margin-right: 6px; flex: none; }
.tsh-lock-ic { width: 18px; height: 18px; flex: none; }
.lv-burst .boi-ic { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(var(--boi-tint-rgb), .45)); }
.dl-ic { width: 1.25em; height: 1.25em; vertical-align: -0.28em; }
.dl-stat-ico .dl-ic { width: 30px; height: 30px; vertical-align: middle; }
/* Ảnh công cụ (assets/images/tools — tranh trong ô pastel theo nhóm): khung bọc bỏ nền, ảnh lấp đầy khung. */
.sh-mark:has(.boi-tool-art), .xl2-ic:has(.boi-tool-art), .doc-tool-ic:has(.boi-tool-art) {
    background: none !important; box-shadow: none !important; border: 0 !important; padding: 0; }
.sh-mark img.boi-tool-art, .xl2-ic img.boi-tool-art, .doc-tool-ic img.boi-tool-art { display: block; width: 100%; height: 100%; }
.boi-tool-art { border-radius: 28%; }

/* 22/10/2026: header điện thoại hiện số dư ví cạnh avatar (máy tính ≥ 1100px vẫn như cũ). ≤ 420px viết gọn 120k / 1,2tr. */
.tarot-account-widget-wallet .is-short { display: none; }
@media (max-width: 991px) {
    .tarot-account-widget .tarot-account-widget-wallet { display: inline-flex; margin-left: 0; padding: 0.15rem 0.5rem; font-size: 0.74rem; }
    .tarot-account-widget-wallet-l { display: none; }
    .tarot-account-widget .tarot-account-widget-trigger { gap: 0.35rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; }
    /* nút sáng/tối đứng sát trái khung tài khoản (vị trí khung đo bằng JS: --boi-acct-x) */
    body.logged-in .site-header .tarot-theme-toggle { right: calc(var(--boi-acct-x, 120px) + 6px) !important; }
}
@media (max-width: 420px) {
    .tarot-account-widget-wallet .is-full { display: none; }
    .tarot-account-widget-wallet .is-short { display: inline; }
    .tarot-account-widget .tarot-account-widget-wallet { padding: 0.12rem 0.42rem; font-size: 0.72rem; }
}