/* ============ TỬ VI ĐẤU SỐ — Design tokens + Header/Footer dùng chung ============ */
:root{
  --ink-950:#E9DFC8; --ink-900:#FBF5E5; --ink-800:#F3EAD3; --ink-700:#E6D9BC; --ink-600:#DCCBA8;
  --gold-200:#F1DECF; --gold-300:#B8876F; --gold-400:#C8A090; --gold-500:#8C4530; --gold-600:#9C6248; --gold-700:#6B1A0C;
  --red-400:#A83226; --red-500:#882010; --red-600:#6B1A0C; --red-700:#4F1208;
  --ivory-100:#211509; --ivory-300:#4A3626; --ivory-500:#7A6650;
  --lavender-400:#7A6650; --lavender-600:#AEA084;
  --jade-500:#4F7A54; --amber-500:#B8802E; --azure-500:#4C6E8C;
  --line-gold:rgba(140,69,48,0.28); --line-soft:rgba(30,20,10,0.10);
  --surface-page:var(--ink-950); --surface-card:var(--ink-900); --surface-raised:var(--ink-800);
  --surface-inset:#F0E6D2; --surface-hover:var(--ink-800);
  --text-heading:var(--ivory-100); --text-body:var(--ivory-300); --text-muted:var(--lavender-400);
  --text-faint:var(--lavender-600); --text-on-accent:#2A160C;
  --accent:var(--gold-400); --accent-strong:var(--gold-500);
  --danger:var(--red-500); --border-card:var(--line-gold); --border-control:rgba(30,20,10,0.18);
  --focus-ring:rgba(140,69,48,0.45);
  --font-display:"Playfair Display","Times New Roman",serif;
  --font-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --text-display-1:56px; --text-display-2:40px; --text-h1:32px; --text-h2:24px; --text-h3:19px;
  --text-body-size:15.5px; --text-small:13.5px; --text-caption:12px;
  --leading-display:1.12; --leading-heading:1.25; --leading-body:1.62;
  --tracking-caps:0.14em; --tracking-display:-0.01em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --content-max:1120px; --control-height:44px; --control-height-sm:34px;
  --shadow-card:0 12px 32px rgba(70,50,24,0.16); --shadow-raised:0 20px 48px rgba(70,50,24,0.22);
  --shadow-glow-gold:0 0 0 1px rgba(140,69,48,0.35),0 0 24px rgba(200,160,144,0.25);
  --ease-mystic:cubic-bezier(0.22,0.61,0.36,1); --duration-fast:150ms; --duration-slow:320ms;
}
*{box-sizing:border-box}

/* ---------- HEADER ---------- */
.tv-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--space-8);
  height:72px;padding:0 var(--space-8);background:rgba(233,223,200,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);font-family:var(--font-body)}
.tv-brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.tv-logo{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--line-gold);
  background:var(--red-600);display:flex;align-items:center;justify-content:center;color:var(--gold-200);
  font-family:var(--font-display);font-size:18px;flex-shrink:0}
.tv-brand-name{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--text-heading);letter-spacing:0.01em;white-space:nowrap;line-height:1.15}
.tv-brand-sub{font-size:11px;color:var(--text-faint);white-space:nowrap}
.tv-nav{display:flex;align-items:center;gap:var(--space-6);flex:1}
.tv-nav a{font-size:var(--text-small);font-weight:400;color:var(--text-muted);border-bottom:2px solid transparent;
  padding:4px 2px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:color var(--duration-fast)}
.tv-nav a:hover{color:var(--gold-500)}
.tv-nav a.active{font-weight:500;color:var(--gold-300);border-bottom-color:var(--gold-400)}
.tv-pro-badge{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.08em;vertical-align:2px;
  color:#3a2a05;background:linear-gradient(135deg,#f0d17a,#c9a24b);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tv-header-cta{display:flex;align-items:center;gap:var(--space-3)}
.tv-btn-outline{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;
  border:1px solid var(--line-gold);border-radius:var(--radius-sm);background:transparent;color:var(--gold-500);
  font-family:var(--font-body);font-size:var(--text-small);font-weight:500;cursor:pointer;text-decoration:none}
.tv-btn-outline:hover{background:var(--accent-quiet,rgba(200,160,144,0.16))}
.tv-burger{display:none;background:none;border:none;font-size:22px;color:var(--text-heading);cursor:pointer}

/* ---------- FOOTER ---------- */
.tv-footer{border-top:1px solid var(--line-soft);background:var(--ink-950);font-family:var(--font-body)}
.tv-footer-grid{max-width:var(--content-max);margin:0 auto;padding:var(--space-16) var(--space-8) var(--space-10);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 0.9fr;gap:var(--space-8)}
.tv-footer-grid p{max-width:36ch;font-size:var(--text-small);color:var(--text-muted);line-height:var(--leading-body);margin:0}
.tv-footer h4{font-size:var(--text-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-heading);font-weight:600;margin:0 0 var(--space-4)}
.tv-footer-links{display:flex;flex-direction:column;gap:var(--space-3)}
.tv-footer-links a{font-size:var(--text-small);color:var(--text-muted);cursor:pointer;text-decoration:none}
.tv-footer-links a:hover{color:var(--gold-500)}
.tv-seals{display:flex;gap:var(--space-2)}
.tv-seal{padding:6px 10px;border:1px solid var(--red-500);border-radius:4px;display:flex;align-items:center;
  justify-content:center;color:var(--red-400);font-family:var(--font-display);font-size:12px;font-weight:600;white-space:nowrap}
.tv-footer-bar{max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--space-8);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);border-top:1px solid var(--line-soft)}
.tv-footer-bar span{font-size:var(--text-caption);color:var(--text-faint)}

@media(max-width:820px){
  .tv-nav{display:none}
  .tv-burger{display:block}
  .tv-header{gap:var(--space-4)}
  .tv-footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}

/* ---------- FIX MOBILE: chống tràn ngang header/footer (mọi trang) ---------- */
.tv-header{flex-wrap:nowrap}
.tv-header-cta{min-width:0}
.tv-user{min-width:0}
.tv-user .em{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
  .tv-brand-sub{display:none}
  .tv-burger{margin-left:auto}
  .tv-user .em{max-width:120px}
}
@media(max-width:520px){
  .tv-header{gap:12px;padding:0 14px}
  .tv-user .em{display:none}
  .tv-footer-grid{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
}

/* ---------- FIX MOBILE: menu 3 gạch mở dạng DỌC thả xuống (không tràn ngang) ---------- */
@media(max-width:820px){
  .tv-nav{
    position:fixed; top:72px; left:0; right:0; flex:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(240,232,214,0.98); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 14px 26px rgba(70,50,24,0.20);
    padding:4px 16px 12px; z-index:29; max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .tv-nav a{padding:13px 4px; font-size:15px; border-bottom:1px solid var(--line-soft); white-space:normal}
  .tv-nav a:last-child{border-bottom:none}
}

/* ---------- ĐỒNG BỘ HEADER/FOOTER MỌI TRANG ----------
   Một số trang (boi-tu-vi, ...) có <style> riêng ghi đè các biến token
   (vd --ink-950, --font-body). Header/footer dùng chung inherit các biến
   đó nên bị lệch màu/font. Khai báo LẠI toàn bộ token CHUẨN ngay trên
   .tv-header/.tv-footer để chúng luôn hiển thị y hệt trang "Xin quẻ",
   bất kể token cục bộ của trang. */
/* ---------- KHỐI "ĐỌC THÊM" (bài viết liên quan) dùng chung cho trang tool ---------- */
.tv-readmore{max-width:var(--content-max);margin:0 auto;padding:var(--space-10) var(--space-8) var(--space-16);font-family:var(--font-body)}
.tv-readmore .tv-rm-eyebrow{text-align:center;font-size:var(--text-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-500);font-weight:500;margin-bottom:var(--space-3)}
.tv-readmore h2{margin:0 0 var(--space-8);text-align:center;font-family:var(--font-display);font-size:28px;color:var(--text-heading);font-weight:600}
.tv-rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tv-rm-grid a{display:block;text-decoration:none;background:var(--ink-900);border:1px solid var(--line-gold);border-radius:12px;padding:var(--space-5)}
.tv-rm-grid a:hover{box-shadow:var(--shadow-glow-gold)}
.tv-rm-grid .t{font-family:var(--font-display);font-size:16.5px;line-height:1.35;color:var(--text-heading);font-weight:600;margin-bottom:6px}
.tv-rm-grid .d{font-size:var(--text-small);color:var(--text-muted);line-height:var(--leading-body)}
.tv-rm-more{text-align:center;margin-top:var(--space-6)}
.tv-rm-more a{color:var(--gold-500);font-size:var(--text-small);font-weight:500;text-decoration:none}
.tv-rm-more a:hover{text-decoration:underline}
@media(max-width:820px){.tv-rm-grid{grid-template-columns:1fr}}

.tv-header, .tv-footer, .tv-readmore{
  --ink-950:#E9DFC8; --ink-900:#FBF5E5; --ink-800:#F3EAD3; --ink-700:#E6D9BC; --ink-600:#DCCBA8;
  --gold-200:#F1DECF; --gold-300:#B8876F; --gold-400:#C8A090; --gold-500:#8C4530; --gold-600:#9C6248; --gold-700:#6B1A0C;
  --red-400:#A83226; --red-500:#882010; --red-600:#6B1A0C; --red-700:#4F1208;
  --ivory-100:#211509; --ivory-300:#4A3626; --ivory-500:#7A6650;
  --lavender-400:#7A6650; --lavender-600:#AEA084;
  --jade-500:#4F7A54; --amber-500:#B8802E; --azure-500:#4C6E8C;
  --line-gold:rgba(140,69,48,0.28); --line-soft:rgba(30,20,10,0.10);
  --surface-inset:#F0E6D2;
  --text-heading:var(--ivory-100); --text-body:var(--ivory-300); --text-muted:var(--lavender-400);
  --text-faint:var(--lavender-600); --text-on-accent:#2A160C;
  --accent:var(--gold-400); --accent-strong:var(--gold-500);
  --font-display:"Playfair Display","Times New Roman",serif;
  --font-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --text-small:13.5px; --text-caption:12px;
  --leading-body:1.62; --tracking-caps:0.14em;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-16:64px;
  --radius-sm:6px; --content-max:1120px;
  --shadow-glow-gold:0 0 0 1px rgba(140,69,48,0.35),0 0 24px rgba(200,160,144,0.25);
}