/* Phong cách chung cho các trang tĩnh của Đạo Quán (mục 5). */
@import url('/assets/fonts/fonts.css');

:root {
  --go-toi: #4A3A2E;
  --go-sang: #8B6B4E;
  --ngoc: #A9C2B0;
  --reu: #5E7B63;
  --reu-dam: #4C6651;
  --mua: #7C8B93;
  --ho-phach: #E2A94B;
  --kem: #F3EBDD;
  --chu: #2F2A25;
  --chu-phu: #5C5248;
  --dem: #1E1A17;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--kem);
  background: var(--dem);
  min-height: 100dvh;
}
h1, h2, h3 { font-family: 'Lora', Georgia, serif; font-weight: 500; line-height: 1.3; }
a { color: var(--ho-phach); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Nền cảnh: ảnh phòng nếu có, nếu không là dải màu mưa chiều. */
.scene-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(30,26,23,.35) 0%, rgba(30,26,23,.55) 55%, rgba(30,26,23,.92) 100%),
    var(--hero, linear-gradient(180deg, #59696f 0%, #3f4a45 45%, #4A3A2E 100%));
  background-size: cover; background-position: center 40%;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.center { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; }
.brand img { max-width: min(320px, 70vw); height: auto; }
.brand .name { font-family: 'Lora', Georgia, serif; font-size: clamp(40px, 10vw, 64px); letter-spacing: .02em; color: var(--kem); margin: 0; }
.brand .by { font-size: 14px; color: var(--ngoc); }

.lead { font-size: 18px; max-width: 520px; margin: 8px auto 28px; color: #EDE4D4; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px; border-radius: 999px; border: 1px solid transparent;
  font: 600 17px/1 'Be Vietnam Pro', system-ui, sans-serif; cursor: pointer; text-decoration: none;
  transition: background .4s, transform .4s;
}
.btn-main { background: var(--reu); color: #fff; box-shadow: 0 0 0 6px rgba(94,123,99,.25); }
.btn-main:hover { background: var(--reu-dam); }
.btn-ghost { background: rgba(243,235,221,.08); color: var(--kem); border-color: rgba(243,235,221,.35); }
.btn-ghost:hover { background: rgba(243,235,221,.16); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--ho-phach); outline-offset: 3px; }

.glass {
  background: rgba(243,235,221,.94); color: var(--chu);
  border-radius: 18px; padding: 24px 20px; border: 1px solid rgba(139,107,78,.35);
}
@supports (backdrop-filter: blur(8px)) {
  .glass { background: rgba(243,235,221,.86); backdrop-filter: blur(10px); }
}
.glass h1, .glass h2 { color: var(--go-toi); margin-top: 0; }
.glass a { color: #8a5a12; }
.glass p { color: var(--chu); }
.muted { color: var(--chu-phu); font-size: 14px; }

.channels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.channels a { font-size: 15px; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(30,26,23,.45); border: 1px solid rgba(226,169,75,.45); text-decoration: none; color: var(--kem); }
.channels a:hover { border-color: var(--ho-phach); }

footer.foot { text-align: center; font-size: 14px; color: #CFC5B5; padding: 16px; }
footer.foot a { color: #E8D9BF; margin: 0 8px; }

.qr { display: block; width: min(260px, 70vw); margin: 16px auto; border-radius: 12px; background: #fff; padding: 8px; }
.bank { list-style: none; padding: 0; margin: 16px 0; }
.bank li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(139,107,78,.25); }
.bank .v { font-weight: 600; word-break: break-all; }
.copy { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--go-sang); background: transparent; color: var(--go-toi); font: inherit; font-size: 14px; cursor: pointer; }

.prose h2 { font-size: 20px; margin-top: 28px; }
.prose li { margin: 4px 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }