:root{
  --wx-bg:#f3ece0;
  --wx-ink:#2b1f18;
  --wx-gold:#c8a96a;
  --wx-red:#8c2f2a;
  --wx-red-deep:#6e231f;
  --wx-jade:#1f6f5e;
  --wx-rose:#b45566;
}

.wuxia-body{
  color:var(--wx-ink);
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(200,169,106,.15), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(140,47,42,.08), transparent 60%),
    linear-gradient(180deg, #f8f2e8 0%, #efe6d8 40%, #f3ece0 100%);
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

/***** Navbar *****/
.wx-navbar.navbar{
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 2px solid rgba(200,169,106,.35);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Fix iOS Safari backdrop-filter stacking context bug:
   menu collapse phải nằm trên backdrop */
@media (max-width: 991.98px) {
  .wx-navbar.navbar {
    /* Tắt backdrop-filter trên mobile để tránh stacking context bug */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
  .wx-navbar .navbar-collapse {
    position: relative;
    z-index: 1031;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(200,169,106,.25);
    padding: .75rem 0;
    margin-top: .25rem;
  }
  .wx-navbar .navbar-collapse .d-flex {
    padding: .5rem 0;
  }
}
.wx-navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--wx-red);
}
.wx-navbar .nav-link{
  color: var(--wx-ink);
}
.wx-navbar .nav-link:hover{ color: var(--wx-red); }

/***** Buttons *****/
.btn-primary{
  --bs-btn-bg: var(--wx-red);
  --bs-btn-border-color: var(--wx-red-deep);
  --bs-btn-hover-bg: #a43a33;
  --bs-btn-hover-border-color: var(--wx-red);
  --bs-btn-active-bg:#a43a33;
  --bs-btn-active-border-color: var(--wx-red);
}
.btn-outline-light{
  color: var(--wx-ink) !important;
  border-color: var(--wx-gold) !important;
}
.btn-outline-light:hover{ background: rgba(200,169,106,.15) !important; }

/***** Cards & glass *****/
.wx-card, .bg-glass{
  background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(200,169,106,.45) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.rounded-4{ border-radius: 14px !important; }

/***** Headings *****/
.wx-heading, h1, h2, h3, h4, .navbar-brand{
  font-family: 'Noto Serif', Georgia, serif;
}
.hint{ color: rgba(43,31,24,.7); font-size: .95rem; }

/***** Hero *****/
.hero-section{
  position: relative;
  padding: 56px 0;
}
.hero-title{
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--wx-red);
}
.hero-subtitle{ color: rgba(43,31,24,.8); font-size: 1.1rem; }

.wx-badges .badge{
  background: rgba(200,169,106,.18);
  color: var(--wx-ink);
  border: 1px solid rgba(200,169,106,.6);
}

/***** Sections *****/
.section-title{ color: var(--wx-ink); font-weight: 800; }
.section-muted{ color: rgba(43,31,24,.7); }
.feature-card{ transition: transform .15s ease, box-shadow .2s ease; }
.feature-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.15); }

/***** Table *****/
.wx-table{ --bs-table-bg: rgba(255,255,255,.7); }
.wx-table thead th{
  background: linear-gradient(180deg, #a43a33, var(--wx-red));
  color: #fff;
  border-bottom: 0;
}
.wx-table tbody tr:nth-child(even){ background: rgba(200,169,106,.08); }
.wx-table td, .wx-table th{ border-color: rgba(43,31,24,.12) !important; color: var(--wx-ink); }

/***** Forms *****/
.form-label{ color: var(--wx-ink); }
.form-control{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(43,31,24,.2);
}
.form-control:focus{ border-color: var(--wx-gold); box-shadow: 0 0 0 .2rem rgba(200,169,106,.25); }

/***** Footer *****/
footer{ background: rgba(255,255,255,.55); border-top: 2px solid rgba(200,169,106,.35) !important; }
footer .link-opacity-75-hover{ color: var(--wx-ink) !important; }

/***** Logo *****/
.wx-logo{ font-family: 'Zhi Mang Xing', 'Kaushan Script', 'Noto Serif', serif; color: var(--wx-red); font-size: 1.35rem; line-height: 1; letter-spacing: .5px; display:inline-block; text-shadow: 0 2px 0 rgba(0,0,0,.05), 0 6px 14px rgba(140,47,42,.25); }
.wx-logo-sheen{ background: linear-gradient(120deg, var(--wx-red) 0%, #b83e35 40%, #d6b77f 60%, var(--wx-red) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: wx-sheen 8s linear infinite; }
@keyframes wx-sheen { 0%{background-position: 0% 50%} 100%{background-position: 200% 50%} }

/***** CTA & nav effects *****/
.cta-glow, .btn-primary{
  box-shadow: 0 6px 18px rgba(140,47,42,.25);
}
.cta-glow:hover, .btn-primary:hover{
  box-shadow: 0 10px 26px rgba(140,47,42,.35);
}
.wx-navbar .nav-link{ position: relative; }
.wx-navbar .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background: linear-gradient(90deg, var(--wx-gold), transparent); transform: scaleX(0); transform-origin:left; transition: transform .2s ease;
}
.wx-navbar .nav-link:hover::after{ transform: scaleX(1); }

/***** Icons & ornaments *****/
.icon-24{ width:24px; height:24px; flex:0 0 24px; }
.icon-16{ width:16px; height:16px; flex:0 0 16px; }
.wx-ornament{ position:absolute; opacity:.12; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); pointer-events:none; }
.wx-ornament.top-right{ top:-10px; right:-10px; width:220px; transform: rotate(18deg); }

/***** Mobile optimizations *****/
@media (max-width: 576px){
  .hero-section{ padding: 32px 0; }
  .wx-badges{ flex-wrap: wrap; gap: .5rem; }
  .wx-badges .badge{ font-size: .8rem; }
  .wx-card{ padding: 1rem !important; }
  .cta-glow, .btn-lg{ width: 100%; }
  .wx-ornament{ display:none; }
}