/* ============================================================
   KCT Sacred v6.0 — "Điện thờ" (The Shrine)
   Lớp nâng tầm linh thiêng cho người tu hành Mật Tông.
   - Dải cờ prayer 5 màu làm dấu ấn thương hiệu
   - Cánh cửa khám phá → điện thờ đêm linh thiêng
   - Hero: hơi thở ánh sáng vàng
   - Bài viết: chữ hoa đầu chương, đề mục kim cương
   ============================================================ */
:root{
  --shrine-1:#141a3a;
  --shrine-2:#0e1230;
  --shrine-glow:rgba(64,74,140,.55);
  --gold-lt:#e8c86a;
  --gold-deep:#a8842c;
  --flag:linear-gradient(90deg,#3a6ea5 0 20%,#efe9dc 20% 40%,#b3402e 40% 60%,#3f7d4e 60% 80%,#d9a91e 80% 100%);
}

/* ---------- Dải cờ prayer: dấu ấn thương hiệu ---------- */
.site-header::after,
.site-footer::before{
  content:"";display:block;height:5px;background:var(--flag);
}
.site-footer{position:relative;}

/* ---------- HERO: hơi thở ánh sáng ---------- */
.hero .bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 36%,rgba(201,162,39,.16),transparent 70%);
  animation:shrine-breathe 7s ease-in-out infinite;
}
@keyframes shrine-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero .bg::before{animation:none}}

/* ---------- CÁNH CỬA KHÁM PHÁ → ĐIỆN THỜ ---------- */
.section.gateway{
  position:relative;
  background:
    radial-gradient(900px 420px at 50% -4%,var(--shrine-glow),transparent 70%),
    radial-gradient(700px 520px at 88% 108%,rgba(201,162,39,.10),transparent 60%),
    linear-gradient(180deg,var(--shrine-1),var(--shrine-2) 82%);
}
.section.gateway::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--flag);
}
.section.gateway .kicker{color:var(--gold-lt);}
.section.gateway h2{color:#fdf8ec;text-shadow:0 2px 26px rgba(0,0,0,.55);}
.section.gateway .gsub{color:#cfc2a1;}
.gw-chip{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(232,200,106,.35);
  color:#f4ecd8;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.gw-chip:hover{
  border-color:var(--gold-lt);
  background:rgba(232,200,106,.13);
  box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 22px rgba(232,200,106,.12);
  transform:translateY(-2px);
}
.gw-chip.curious{border-style:dashed;color:var(--gold-lt);}
.gw-hint{color:#a89a7c;}
.gw-tour-invite{color:#cfc2a1;}
.gw-tour-invite button{color:var(--gold-lt);}
.gw-tour-invite button:hover{color:#fff;}
.gw-tour-invite .sep{color:#6f6584;}
.footprints{color:#a89a7c;}
.footprints button.fp{
  border-color:rgba(232,200,106,.32);color:#f4ecd8;background:rgba(255,255,255,.045);
}
.footprints button.fp:hover{border-color:var(--gold-lt);background:rgba(232,200,106,.12);}
.footprints .fp-clear{color:#8f866e;}

/* ---------- Thẻ bài viết: dải cờ hiện khi chạm ---------- */
.card{position:relative;}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:var(--flag);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s ease;
  border-radius:14px 14px 0 0;
}
.card:hover::before{transform:scaleX(1);}
.card:hover{box-shadow:0 26px 60px rgba(80,60,30,.17);}

/* ---------- Ô chủ đề: viền vàng phát sáng ---------- */
.cat-tile{transition:box-shadow .4s ease,transform .4s ease;}
.cat-tile:hover{
  box-shadow:0 20px 48px rgba(15,8,4,.4),0 0 0 1px rgba(232,200,106,.6);
  transform:translateY(-3px);
}

/* ---------- Bài viết: chữ hoa đầu chương + đề mục kim cương ---------- */
.prose>p:first-of-type::first-letter{
  font-family:var(--serif-d);font-weight:700;
  font-size:3.3em;float:left;line-height:.85;
  padding:.08em .14em 0 0;color:var(--maroon);
}
.prose h2{position:relative;padding-left:28px;}
.prose h2::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:10px;height:10px;background:var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.prose blockquote{
  border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,162,39,.09),transparent 75%);
  padding:1em 1.2em 1em 1.4em;
  border-radius:0 12px 12px 0;
}
.prose h3{color:var(--maroon-deep);}

/* ---------- Nút: vàng kim loại ---------- */
.btn:not(.ghost){
  background:linear-gradient(135deg,#cfa92e,var(--gold-deep));
  box-shadow:0 10px 26px rgba(120,84,20,.28);
}
.btn:not(.ghost):hover{
  box-shadow:0 16px 34px rgba(120,84,20,.38);
  transform:translateY(-1px);
}

/* ---------- Thẻ trích dẫn: sâu hơn ---------- */
.card.quote{
  background:linear-gradient(150deg,#6b1f1f,#4c1515);
  box-shadow:0 20px 46px rgba(76,21,21,.28);
  position:relative;overflow:hidden;
}
.card.quote::after{
  content:"❖";position:absolute;right:18px;bottom:8px;
  font-size:2.2rem;color:rgba(232,200,106,.28);
}

/* ---------- Ô hỏi đáp cuối trang ---------- */
.ask-box{
  border:1px solid rgba(201,162,39,.4);
  background:linear-gradient(180deg,#fffdf7,#faf3e2);
  box-shadow:0 18px 44px rgba(120,84,20,.12);
}
.ask-box h3{color:var(--maroon-deep);}

/* ---------- Tinh chỉnh chung ---------- */
::selection{background:#c9a227;color:#241a08;}
:focus-visible{outline:2px solid #c9a227;outline-offset:3px;}
.kbd-hint kbd{border-color:rgba(232,200,106,.45);color:var(--gold-lt);}

/* Cuộn trang mượt mà hơn cho trình duyệt hỗ trợ */
@media (prefers-reduced-motion:no-preference){
  .card,.cat-tile,.gw-chip{will-change:transform;}
}