/* W3SEO Tarot – Thiên Thư dark/gold
   Scoped classes used by plugin templates: .tt-wrap, .tt-card, .tt-h1, .tt-h2, .tt-grid, .tt-tile, ...
*/
:root{
  --tt-bg:#05060a;
  --tt-card:#0b0d14;

  --tt-text:rgba(255,255,255,.88);
  --tt-muted:rgba(255,255,255,.68);
  --tt-mut:var(--tt-muted);

  --tt-line:rgba(214,178,94,.18);
  --tt-border:rgba(214,178,94,.22);

  --tt-gold:#d6b25e;
  --tt-gold2:#f3dc9b;
  --tt-gold-1:var(--tt-gold);
  --tt-gold-2:var(--tt-gold2);

  --tt-shadow:0 18px 40px rgba(0,0,0,.45);
  --tt-r:18px;

  --tt-neo:#22c55e;
  --tt-cyan:#22d3ee;
  --tt-violet:#a78bfa;
  --tt-red:#e03a3a;

  --tt-violet-soft: rgba(167,139,250,.12);
  --tt-cyan-soft: rgba(34,211,238,.12);
}
/* Scope: force theme background to dark on Tarot pages (avoid white wrappers) */
body.w3tarot-scope{
  background: var(--tt-bg) !important;
  color: var(--tt-text);
}
body.w3tarot-scope #wrapper,
body.w3tarot-scope #main,
body.w3tarot-scope #content,
body.w3tarot-scope .page-wrapper,
body.w3tarot-scope .site-main,
body.w3tarot-scope .site-content,
body.w3tarot-scope main,
body.w3tarot-scope .section,
body.w3tarot-scope .row,
body.w3tarot-scope .row .col,
body.w3tarot-scope .row .col-inner,
body.w3tarot-scope .container,
body.w3tarot-scope .container-width{
  background: transparent !important;
  background-image: none !important;
}

.tt-wrap{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(212,179,107,.10), transparent 50%),
              radial-gradient(900px 400px at 80% 20%, rgba(212,179,107,.08), transparent 55%),
              var(--tt-bg);
  color: var(--tt-text);
  padding: 18px 0 34px;
}
.w3tarot-wrap{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(215,181,109,.14), transparent 55%),
              radial-gradient(900px 420px at 82% 18%, rgba(241,218,154,.10), transparent 55%),
              var(--tt-bg);
  color: var(--tt-text);
  padding: 18px 0 34px;
}


.tt-wrap a{ color: var(--tt-gold-2); text-decoration: none; }
.tt-wrap a:hover{ text-decoration: underline; }

.tt-card{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(215,181,109,.10), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid var(--tt-border);
  border-radius: 18px;
  box-shadow: var(--tt-shadow);
}

.tt-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(212,179,107,.9);
}

.tt-h1{
  font-size: 34px;
  line-height: 1.15;
  margin: 10px 0 6px;
  color: var(--tt-gold-2);
}

.tt-h2{
  font-size: 20px;
  margin: 14px 0 10px;
  color: var(--tt-gold);
}

.tt-badges{ color: var(--tt-muted); font-size: 13px; }

.tt-prose{ color: var(--tt-text); }
.tt-prose p{ color: var(--tt-muted); }
.tt-prose h2,.tt-prose h3{ color: var(--tt-gold); }
.tt-prose ul{ color: var(--tt-muted); }

.tt-grid{ display:grid; gap:12px; }
.tt-grid--one{ grid-template-columns:1fr !important; }

.tt-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px){
  .tt-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tt-grid-2,.tt-grid-3,.tt-grid-4{ grid-template-columns: 1fr; }
  .tt-h1{ font-size: 28px; }
}

.tt-box{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(17,17,24,.55);
}
.tt-box__title{
  color: var(--tt-gold);
  font-weight: 700;
  margin-bottom: 6px;
}
.tt-box__body{ color: var(--tt-muted); font-size: 14px; }

.tt-callout{
  border: 1px solid rgba(212,179,107,.28);
  background: rgba(212,179,107,.08);
  border-radius: 14px;
  padding: 12px;
  color: var(--tt-text);
}

.tt-media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.tt-media img{ width:100%; height:auto; display:block; }
.tt-media--placeholder{ padding: 46px 12px; display:flex; align-items:center; justify-content:center; min-height:240px; }

.tt-mini{ color: var(--tt-muted); font-size: 13px; line-height: 1.6; }
.tt-mini b{ color: var(--tt-gold-2); }

.tt-tile{
  display:block;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,17,24,.45);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.tt-tile:hover{ transform: translateY(-2px); border-color: rgba(212,179,107,.35); text-decoration:none; }
.tt-tile__media{ aspect-ratio: 3/4; background: rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; }
.tt-tile__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-tile__ph{ font-size: 34px; color: rgba(212,179,107,.7); }
.tt-tile__body{ padding: 10px 10px 12px; }
.tt-tile__title{ color: var(--tt-gold-2); font-weight: 700; font-size: 14px; line-height:1.35; }
.tt-tile__meta{ color: var(--tt-muted); font-size: 12px; margin-top: 4px; }

.tt-term{
  display:block;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,17,24,.45);
  border-radius: 16px;
  padding: 12px;
}
.tt-term:hover{ border-color: rgba(212,179,107,.35); text-decoration:none; }
.tt-term__name{ color: var(--tt-gold-2); font-weight:800; }
.tt-term__desc{ color: var(--tt-muted); margin-top: 6px; font-size: 13px; }

.tt-pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,179,107,.28);
  background: rgba(212,179,107,.08);
  color: var(--tt-gold-2) !important;
  margin: 4px 6px 0 0;
  font-size: 13px;
}
.tt-pill:hover{ text-decoration:none; border-color: rgba(212,179,107,.45); }

.tt-pagination{ margin-top: 16px; }
.tt-pagination ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tt-pagination li a,
.tt-pagination li span{
  display:inline-block;
  padding: 7px 10px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,17,24,.45);
  color: var(--tt-muted);
}
.tt-pagination li span.current{ border-color: rgba(212,179,107,.35); color: var(--tt-gold-2); }


/* FAQ (details/summary) */
.tt-faq{ margin-top:12px; }
.tt-faq__item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  margin:10px 0;
  background: rgba(0,0,0,.35);
}
.tt-faq__item summary{
  cursor:pointer;
  font-weight:700;
  color: var(--tt-gold);
  outline:none;
}
.tt-faq__item[open] summary{ margin-bottom:8px; }
.tt-faq__a{ color: rgba(255,255,255,.9); }
.tt-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons (used across card/taxonomy/hub/draw pages) */
.tt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--tt-text);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
.tt-btn:hover{ filter:brightness(1.06); transform: translateY(-1px); text-decoration:none; }
.tt-btn:active{ transform: translateY(0); }
.tt-btn--primary,
.tt-btn.primary{
  background: linear-gradient(135deg, rgba(215,181,109,.22), rgba(241,218,154,.10));
  border-color: rgba(215,181,109,.38);
  color: var(--tt-gold-2);
}
.tt-btn--ghost{
  background: transparent;
  border-color: rgba(215,181,109,.25);
  color: var(--tt-gold-2);
  box-shadow: none;
}
.tt-btn--ghost:hover{ background: rgba(215,181,109,.08); border-color: rgba(215,181,109,.45); }


/* Breadcrumb (Thiên Thư – dark/gold, pill style) */
.tt-breadcrumb{margin:0 0 14px}
.tt-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tt-breadcrumb li{display:flex;align-items:center;font-size:13px;color:var(--tt-muted)}
.tt-breadcrumb li+li:before{content:"›";margin:0 8px;opacity:.55}
.tt-breadcrumb a,
.tt-breadcrumb span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--tt-muted);
  text-decoration:none;
}
.tt-breadcrumb a:hover{
  background: rgba(215,181,109,.06);
  border-color: rgba(215,181,109,.35);
  color: var(--tt-gold-2);
}
.tt-breadcrumb span[aria-current="page"]{
  background: rgba(215,181,109,.08);
  border-color: rgba(215,181,109,.38);
  color: var(--tt-gold-2);
  font-weight:800;
}

/* Draw page breadcrumb uses same style */
.w3tarot-breadcrumb{margin:0 0 14px}
.w3tarot-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.w3tarot-breadcrumb li{display:flex;align-items:center;font-size:13px;color:var(--tt-muted)}
.w3tarot-breadcrumb li+li:before{content:"›";margin:0 8px;opacity:.55}
.w3tarot-breadcrumb a,
.w3tarot-breadcrumb span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--tt-muted);
  text-decoration:none;
}
.w3tarot-breadcrumb a:hover{
  background: rgba(215,181,109,.06);
  border-color: rgba(215,181,109,.35);
  color: var(--tt-gold-2);
}
.w3tarot-breadcrumb span[aria-current="page"]{
  background: rgba(215,181,109,.08);
  border-color: rgba(215,181,109,.38);
  color: var(--tt-gold-2);
  font-weight:800;
}



/* =========================
 * Thiên Thư Base (chuẩn Bát Tự)
 * ========================= */
.tt-bg{
  min-height:100vh;
  background:
    radial-gradient(1000px 500px at 20% -20%, rgba(214,178,94,.14), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(243,220,155,.10), transparent 55%),
    radial-gradient(980px 520px at 12% 30%, var(--tt-violet-soft), transparent 62%),
    radial-gradient(920px 520px at 92% 70%, var(--tt-cyan-soft), transparent 62%),
    linear-gradient(180deg, var(--tt-bg), #000);
}
.tt-container,
.tt-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:22px 16px 46px;
  color:var(--tt-text);
}

/* Breadcrumb (inline) */
.tt-bc,
.tt-breadcrumb,
.w3tarot-breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px 12px; border-radius:14px;
  border:1px solid var(--tt-line);
  background: rgba(0,0,0,.22);
  box-shadow: var(--tt-shadow);
  font-size:13px;
}
.tt-bc a,
.tt-breadcrumb a,
.w3tarot-breadcrumb a{ color: rgba(243,220,155,.92); text-decoration:none; font-weight:900; }
.tt-bc a:hover,
.tt-breadcrumb a:hover,
.w3tarot-breadcrumb a:hover{ text-decoration:underline; }
.tt-bc .tt-sep,
.tt-breadcrumb .tt-sep,
.w3tarot-breadcrumb .tt-sep{ opacity:.6; }

/* Hero */
.tt-hero{
  margin-top:14px;
  border-radius: var(--tt-r);
  background: linear-gradient(180deg, rgba(11,13,20,.95), rgba(0,0,0,.88));
  box-shadow: var(--tt-shadow);
  padding:16px;
  position:relative;
  border:1px solid rgba(214,178,94,.22);
}
.tt-hero:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: var(--tt-r);
  padding:1px;
  background: linear-gradient(135deg, rgba(243,220,155,.55), rgba(34,211,238,.22), rgba(167,139,250,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.tt-kicker{
  color: rgba(243,220,155,.90);
  font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; font-size:12px;
  display:inline-flex; gap:8px; align-items:center;
}
.tt-kicker .dot{
  width:8px; height:8px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--tt-cyan), var(--tt-violet));
  box-shadow: 0 0 0 4px rgba(34,211,238,.10);
}
.tt-h1{
  margin:8px 0 0;
  font-size:26px;
  line-height:1.25;
  color: rgba(243,220,155,.98);
}
.tt-sub{
  margin:8px 0 0;
  color: var(--tt-muted);
  max-width: 980px;
}
@media (max-width:680px){
  .tt-h1{ font-size:20px; }
}

/* Buttons */
.tt-btn,
.tt-pill{
  appearance:none;
  border-radius: 14px;
  border:1px solid rgba(243,220,155,.28);
  background: linear-gradient(180deg, rgba(214,178,94,.22), rgba(0,0,0,.18));
  color: rgba(243,220,155,.98);
  font-weight:900;
  padding:10px 14px;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tt-btn:hover,
.tt-pill:hover{ filter: brightness(1.07); }
.tt-btn.alt,
.tt-pill.alt{
  border-color: rgba(34,211,238,.26);
  color: rgba(200,250,255,.92);
  background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(0,0,0,.18));
}
.tt-btn--ghost{
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.20);
}

/* Tabs */
.tt-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tt-tab{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.82);
  padding:8px 12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.tt-tab.on,
.tt-tab.is-active{
  border-color: rgba(243,220,155,.34);
  background: rgba(214,178,94,.14);
  color: rgba(243,220,155,.98);
}

/* Cards: override to match */
.tt-card{
  border:1px solid rgba(214,178,94,.18);
  background: rgba(0,0,0,.22);
  border-radius: var(--tt-r);
  box-shadow: var(--tt-shadow);
  padding:14px;
  position:relative;
}
.tt-card h2{
  margin:0 0 10px;
  color: rgba(243,220,155,.96);
  font-size:16px;
  font-weight:900;
}
.tt-card h3{
  margin:14px 0 8px;
  color: rgba(243,220,155,.92);
  font-size:14px;
  font-weight:900;
}

/* Grid: keep legacy helpers but align spacing */
.tt-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; margin-top:14px; }
@media (max-width:900px){ .tt-grid{ grid-template-columns:1fr; } }

/* Ensure theme wrappers don't paint white */
body.w3tarot-scope,
body.w3tarot-scope #main,
body.w3tarot-scope #content{
  background: transparent !important;
}

/* Compact prose */
.tt-prose{ color: rgba(255,255,255,.86); line-height:1.8; }
.tt-prose p{ margin: 0 0 10px; }
.tt-prose a{ color: rgba(243,220,155,.96); text-decoration: underline; }