/*
 * 2026-05-01: yjj-theme-jianghu
 *
 * Theme "Giang Hồ" — kim quang vàng đồng trên nền cổ thư nâu sậm.
 * Cảm hứng từ banner võ hiệp Trung Hoa: nâu trầm + vàng kim + đỏ ấn.
 *
 * File này LOAD SAU styles.css để override CSS variables + tinh chỉnh
 * các surface chính. Để rollback: chỉ cần gỡ <link href="theme-jianghu.css">
 * khỏi các trang HTML.
 *
 * Bảng màu chuẩn:
 *   --jh-bg-deep      : #14100a   (nền trang sâu nhất)
 *   --jh-bg-page      : #1a140d   (nền chính)
 *   --jh-bg-panel     : #271d12   (panel/card)
 *   --jh-bg-card      : #2e2316   (card sáng hơn 1 chút)
 *   --jh-bg-soft      : #3a2d1f   (hover/active surface)
 *   --jh-ink          : #f0e2c0   (text chính kem ấm)
 *   --jh-ink-bright   : #f7ecd0   (text nổi bật)
 *   --jh-ink-muted    : #b8a47e   (text phụ)
 *   --jh-gold         : #d4a85a   (vàng kim chính)
 *   --jh-gold-bright  : #f5cb86   (vàng kim sáng — highlight)
 *   --jh-gold-deep    : #c9942b   (vàng đồng đậm — gradient)
 *   --jh-red          : #b94434   (đỏ ấn)
 *   --jh-red-deep     : #8b2e2e   (đỏ ấn đậm)
 *   --jh-border       : #5a4632   (viền nâu)
 *   --jh-border-gold  : #c9a468   (viền vàng nhạt)
 */

:root {
  /* Palette mới */
  --jh-bg-deep:      #14100a;
  --jh-bg-page:      #1a140d;
  --jh-bg-panel:     #271d12;
  --jh-bg-card:      #2e2316;
  --jh-bg-soft:      #3a2d1f;
  --jh-ink:          #f0e2c0;
  --jh-ink-bright:   #f7ecd0;
  --jh-ink-muted:    #b8a47e;
  --jh-gold:         #d4a85a;
  --jh-gold-bright:  #f5cb86;
  --jh-gold-deep:    #c9942b;
  --jh-red:          #b94434;
  --jh-red-deep:     #8b2e2e;
  --jh-border:       #5a4632;
  --jh-border-gold:  #c9a468;

  /* Override các biến đã tồn tại trong styles.css để các selector cũ tự đổi tone */
  --bg-page:      var(--jh-bg-page);
  --bg-panel:     var(--jh-bg-panel);
  --bg-card:      var(--jh-bg-card);
  --bg-right:     var(--jh-bg-panel);
  --bg-dark:      var(--jh-bg-deep);
  --bg-soft-dark: var(--jh-bg-soft);
  --ink-main:     var(--jh-ink);
  --ink-muted:    var(--jh-ink-muted);
  --ink-light:    var(--jh-ink-bright);
  --accent:       var(--jh-gold);
  --accent-red:   var(--jh-red);
  --border:       var(--jh-border);
  --shadow:       0 14px 30px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   BODY — phủ texture mờ sang cùng tone giấy cũ
   ============================================================ */
body {
  background:
    radial-gradient(ellipse at top, rgba(212, 168, 90, 0.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(185, 68, 52, 0.05), transparent 70%),
    var(--jh-bg-page);
  color: var(--jh-ink);
}

a { color: var(--jh-gold); }
a:hover { color: var(--jh-gold-bright); }

/* ============================================================
   TOPBAR (header chính)
   ============================================================ */
.topbar {
  background:
    linear-gradient(rgba(10, 7, 3, 0.92), rgba(10, 7, 3, 0.92)),
    center/cover no-repeat url("./images/generated-1773128602924.png");
  border-bottom: 1px solid var(--jh-border);
}
.topnav a,
.auth-links a {
  color: var(--jh-ink);
  opacity: 0.92;
}
.topnav a:hover,
.auth-links a:hover {
  color: var(--jh-gold-bright);
  opacity: 1;
}
.auth-links { color: var(--jh-gold); }
.brand { color: var(--jh-gold-bright); }

/* ============================================================
   HERO — overlay tối hơn để logo & text vàng nổi bật
   ============================================================ */
.hero {
  background-color: var(--jh-bg-page);
}
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(26, 20, 13, 0.18) 45%,
    rgba(26, 20, 13, 0.78) 95%
  );
}
/* 2026-05-01: yjj-hero-caption - de styles.css quan ly default + admin override
   inline. Theme khong override nua de tranh dung do nhau. */
.hero-play {
  background: rgba(212, 168, 90, 0.92);
  color: var(--jh-bg-deep);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}
.hero-play:hover,
.hero-play:focus-visible {
  background: var(--jh-gold-bright);
  color: var(--jh-bg-deep);
  box-shadow: 0 10px 24px rgba(212, 168, 90, 0.45);
}

/* 2026-05-01: yjj-hero-play-toggle - defensive override.
   Theme jianghu re-style nut play (vang); khi admin bo tich phai dam bao
   nut nay van bi an du theme co set background/box-shadow rieng. */
.hero-play[hidden],
.hero-play.is-hidden,
.hero-play.yjj-hero-play--off,
.hero-play[aria-hidden="true"],
.hero-play[disabled] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   QUICK LINKS / MINI LINKS / IMAGE BUTTONS
   ============================================================ */
.download-card,
.mini-link,
.image-button,
.quick-link-bg {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
  color: var(--jh-gold-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.download-card:hover,
.mini-link:hover,
.image-button:hover {
  border-color: var(--jh-gold);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}
.download-card span {
  color: var(--jh-gold-bright);
}

/* SHOWCASE / GALLERY */
.showcase-card {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
}
.showcase-arrow {
  background: rgba(20, 16, 10, 0.7);
  border: 1px solid var(--jh-border-gold);
  color: var(--jh-gold-bright);
}
.showcase-arrow:hover {
  background: rgba(212, 168, 90, 0.92);
  color: var(--jh-bg-deep);
}

/* ============================================================
   ALLY BOX (Ban hack / Cấm chát)
   ============================================================ */
.ally-box {
  background-color: var(--jh-bg-panel);
  border: 1px solid var(--jh-border);
  border-radius: 10px;
}
.ally-rule,
.ally-rule-middle {
  background: linear-gradient(135deg, var(--jh-red), var(--jh-red-deep));
  color: var(--jh-gold-bright);
  border: 1px solid #6b2222;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ally-icon {
  background: var(--jh-bg-soft);
  color: var(--jh-ink);
  border: 1px solid var(--jh-border);
}
.ally-icon:hover {
  background: var(--jh-gold);
  color: var(--jh-bg-deep);
  border-color: var(--jh-gold-deep);
}

/* ============================================================
   CENTER COLUMN — banner block, news, feature, updates, guide
   ============================================================ */
.banner-block,
.news-stack,
.feature-story,
.updates,
.guide-card,
.update-card,
.story-card,
.panel-card {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
  color: var(--jh-ink);
}
.banner-dots .dot {
  background: rgba(255, 255, 255, 0.3);
}
.banner-dots .dot.active {
  background: var(--jh-gold-bright);
}

/* TITLES & TEXTS */
h1, h2, h3, h4, h5,
.section-title,
.panel-title,
.module-title {
  color: var(--jh-gold-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.feature-story h2,
.feature-story h3 {
  color: var(--jh-gold-bright);
}
p, span, li, td {
  color: inherit;
}
.description,
.subtitle,
.muted {
  color: var(--jh-ink-muted);
}

/* ============================================================
   STORY FILTERS / TABS
   ============================================================ */
.story-filter,
.story-tab,
.tab-btn {
  background: var(--jh-bg-soft);
  color: var(--jh-ink-muted);
  border: 1px solid var(--jh-border);
}
.story-filter.active,
.story-filter:hover,
.story-tab.active,
.story-tab:hover,
.tab-btn.active,
.tab-btn:hover {
  background: var(--jh-gold);
  color: var(--jh-bg-deep);
  border-color: var(--jh-gold-deep);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.primary-btn,
.cta,
.cta-primary,
button.primary,
.button-primary,
.btn-primary {
  background: linear-gradient(135deg, var(--jh-gold-bright), var(--jh-gold-deep));
  color: var(--jh-bg-deep);
  border: 1px solid var(--jh-gold-deep);
  text-shadow: none;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.primary-btn:hover,
.cta:hover,
.cta-primary:hover,
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.secondary-btn,
.btn-secondary,
.button-secondary {
  background: var(--jh-bg-soft);
  color: var(--jh-gold-bright);
  border: 1px solid var(--jh-border-gold);
}

.danger-btn,
.btn-danger {
  background: linear-gradient(135deg, var(--jh-red), var(--jh-red-deep));
  color: var(--jh-gold-bright);
  border: 1px solid #6b2222;
}

/* ============================================================
   RIGHT RAIL
   ============================================================ */
.right-rail-block,
.right-rail-card,
.icon-card,
.right-rail-icon {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
  color: var(--jh-ink);
}
.icon-card:hover,
.right-rail-icon:hover {
  background: var(--jh-bg-soft);
  border-color: var(--jh-gold);
  color: var(--jh-gold-bright);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
footer.site-footer {
  background:
    linear-gradient(rgba(10, 7, 3, 0.94), rgba(10, 7, 3, 0.94)),
    var(--jh-bg-deep);
  color: var(--jh-ink-muted);
  border-top: 1px solid var(--jh-border);
}
.site-footer a {
  color: var(--jh-gold);
}
.site-footer a:hover {
  color: var(--jh-gold-bright);
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: var(--jh-bg-card);
  color: var(--jh-ink);
  border: 1px solid var(--jh-border);
}
input::placeholder,
textarea::placeholder {
  color: var(--jh-ink-muted);
  opacity: 0.7;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--jh-gold);
  outline: 2px solid rgba(212, 168, 90, 0.28);
  outline-offset: 1px;
}

/* ============================================================
   DETAIL PAGES (banner-chi-tiet, chi-tiet, thong-tin-chi-tiet, ...)
   ============================================================ */
.detail-shell,
.detail-content,
.detail-body,
.article-body {
  background-color: var(--jh-bg-page);
  color: var(--jh-ink);
}
.detail-card,
.detail-panel,
.article-panel {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
  color: var(--jh-ink);
}
.detail-meta,
.article-meta {
  color: var(--jh-ink-muted);
}

/* ============================================================
   DIVIDERS
   ============================================================ */
hr,
.divider {
  border: none;
  border-top: 1px solid var(--jh-border);
}

/* ============================================================
   SCROLLBAR (webkit) — đồng bộ tone
   ============================================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--jh-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--jh-bg-soft);
  border-radius: 999px;
  border: 2px solid var(--jh-bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--jh-gold-deep);
}

/* ============================================================
   SELECTION — vàng kim trên nền tối
   ============================================================ */
::selection {
  background: var(--jh-gold);
  color: var(--jh-bg-deep);
}

/* ============================================================
   SKELETON / PLACEHOLDER (giữ tone gradient cũ nhưng đổi sang nâu)
   ============================================================ */
.quick-link-bg,
.mini-link[data-admin-image],
.image-button[data-admin-image],
.showcase-card[data-admin-image] {
  background-image: linear-gradient(135deg, #2e2316 0%, #3a2d1f 100%);
}

/* ============================================================
   HERO LOGO border accent (nếu user upload logo trong suốt)
   ============================================================ */
.hero-logo {
  filter: drop-shadow(0 14px 28px rgba(212, 168, 90, 0.35))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

/* ============================================================
   DETAIL PAGES — detail.css (chi-tiet, trung-tam-cskh, nap-tien, cua-hang,
   cho-games-3d, vip-bi-thu, thu-vien-su-kien...). detail.css set body trang
   trắng #eceef3, ta phải force về nâu Giang Hồ.
   ============================================================ */
.detail-page-body {
  background:
    radial-gradient(ellipse at top, rgba(212, 168, 90, 0.10), transparent 60%),
    var(--jh-bg-page);
  color: var(--jh-ink);
}
.detail-page-shell { color: var(--jh-ink); }
.detail-hero-panel {
  background-color: var(--jh-bg-card);
  border-color: var(--jh-border);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55);
}
.detail-hero-overlay {
  background:
    linear-gradient(90deg, rgba(10, 7, 3, 0.92) 0%, rgba(10, 7, 3, 0.7) 48%, rgba(10, 7, 3, 0.36) 100%),
    linear-gradient(180deg, rgba(10, 7, 3, 0.1) 0%, rgba(10, 7, 3, 0.78) 100%);
}
.detail-kicker { color: var(--jh-gold); }
.detail-title { color: var(--jh-gold-bright); }
.detail-copy { color: rgba(240, 226, 192, 0.9); }
.detail-button {
  background: linear-gradient(135deg, var(--jh-gold-bright), var(--jh-gold-deep));
  color: var(--jh-bg-deep);
  border: 1px solid var(--jh-gold-deep);
}
.detail-button.secondary,
.detail-button-secondary {
  background: var(--jh-bg-soft);
  color: var(--jh-gold-bright);
  border: 1px solid var(--jh-border-gold);
}
.detail-section,
.detail-card,
.detail-block,
.detail-content,
.gallery-card,
.gallery-tile {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
  color: var(--jh-ink);
}
.detail-section h1,
.detail-section h2,
.detail-section h3,
.detail-section h4,
.detail-card h1,
.detail-card h2,
.detail-card h3,
.detail-card h4 {
  color: var(--jh-gold-bright);
}
.detail-meta,
.detail-tag,
.gallery-meta {
  color: var(--jh-ink-muted);
}

/* News-detail-page.css surfaces (banner-chi-tiet / news-chi-tiet / xu-phat-chi-tiet / thong-tin-chi-tiet) */
.news-page-shell,
.news-detail-shell,
.news-detail-content,
.news-card,
.news-list,
.news-item,
.news-aside,
.news-aside-card {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
  color: var(--jh-ink);
}
.news-detail-title,
.news-page-title,
.news-card-title { color: var(--jh-gold-bright); }
.news-meta,
.news-time,
.news-tag { color: var(--jh-ink-muted); }
.news-aside-card .news-item.is-active,
.news-item:hover {
  background: var(--jh-bg-soft);
  border-color: var(--jh-gold);
}

/* ============================================================
   DOWNLOAD-FAMILY PAGES — tai-game.css (client-chia-nho, tai-ban-day-du,
   patch-thu-cong, ngon-ngu-tro-choi). tai-game.css co bo bien rieng
   (--download-*); ta override cac bien do de ton dong bo voi giang ho.
   tai-game.html chinh thi user exclude (khong include theme nay).
   ============================================================ */
:root {
  --download-bg:           var(--jh-bg-page);
  --download-panel:        rgba(46, 35, 22, 0.82);
  --download-panel-soft:   rgba(245, 203, 134, 0.06);
  --download-border:       rgba(212, 168, 90, 0.22);
  --download-text:         var(--jh-ink);
  --download-muted:        var(--jh-ink-muted);
  --download-accent:       var(--jh-gold);
  --download-shadow:       0 28px 60px rgba(0, 0, 0, 0.55);
}
.download-page {
  background:
    linear-gradient(rgba(10, 7, 3, 0.5), rgba(10, 7, 3, 0.92)),
    center/cover no-repeat url("./images/generated-1773168259337.png");
}
.download-overlay {
  background:
    radial-gradient(circle at top right, rgba(245, 203, 134, 0.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(185, 68, 52, 0.15), transparent 36%);
}
.download-story,
.download-card,
.download-panel,
.download-block {
  background: var(--download-panel);
  border: 1px solid var(--download-border);
  color: var(--download-text);
}
.download-kicker { color: var(--jh-gold); }
.download-title { color: var(--jh-gold-bright); }
.download-cta,
.download-primary,
.download-button {
  background: linear-gradient(135deg, var(--jh-gold-bright), var(--jh-gold-deep));
  color: var(--jh-bg-deep);
  border: 1px solid var(--jh-gold-deep);
}
.download-cta-secondary,
.download-button-secondary {
  background: var(--jh-bg-soft);
  color: var(--jh-gold-bright);
  border: 1px solid var(--jh-border-gold);
}

/* ============================================================
   GALLERY (thu-vien-su-kien.html dùng gallery.css)
   ============================================================ */
.gallery-grid,
.gallery-shell {
  background: transparent;
}
.gallery-tile,
.gallery-card-image {
  background-color: var(--jh-bg-card);
  border: 1px solid var(--jh-border);
}
.gallery-tile:hover {
  border-color: var(--jh-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.gallery-caption,
.gallery-tile-title { color: var(--jh-gold-bright); }
.gallery-tile-meta { color: var(--jh-ink-muted); }