/* ============================================================================
 * GiaPha.Web — trang giới thiệu: nền kem, đỏ nâu (#7a1f14) + vàng đồng (#d4a24c), tiêu đề Playfair Display, khẩu hiệu Dancing Script.
 * Tiền tố w- cho mọi lớp riêng (Bootstrap chỉ dùng lưới + tiện ích).
 * ========================================================================== */
:root {
    --w-red: #7a1f14; --w-red-2: #a83a26; --w-ink: #2b1a14; --w-muted: #7a6a60; --w-gold: #d4a24c; --w-gold-2: #f3cf7a;
    --w-cream: #fbf4e6; --w-cream-2: #fffaf0; --w-line: rgba(122, 31, 20, .12); --w-shadow: 0 10px 30px rgba(60, 20, 10, .10);
    --w-good: #1e7b34; --w-bad: #b3261e;
}
body { font-family: "Be Vietnam Pro", system-ui, sans-serif; color: var(--w-ink); background: var(--w-cream-2); font-size: 16px; }
h1, h2, h3, .w-serif { font-family: "Playfair Display", Georgia, serif; }
a { color: var(--w-red); }
a:hover { color: var(--w-red-2); }
.w-wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.w-section { padding: 4.5rem 0; }
.w-section--cream { background: var(--w-cream); }
.w-section--dark { background: radial-gradient(120% 140% at 0% 0%, #8a2c1c 0%, #5a1a10 55%, #3e120c 100%); color: #f6e7c8; }
.w-eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--w-red); font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; }
.w-eyebrow::before { content: ""; width: 2.4rem; height: 2px; background: currentColor; }
.w-section--dark .w-eyebrow { color: var(--w-gold-2); }
.w-h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.2; margin: .6rem 0 1rem; color: var(--w-red); }
.w-section--dark .w-h2 { color: #fff3d6; }
.w-lead { font-size: 1.1rem; color: var(--w-muted); max-width: 46rem; }
.w-section--dark .w-lead { color: rgba(246, 231, 200, .82); }
.w-center { text-align: center; }
.w-center .w-lead { margin: 0 auto; }

/* Nút */
.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 700; text-decoration: none;
    border: 2px solid transparent; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.w-btn:hover { transform: translateY(-2px); }
.w-btn--primary { background: linear-gradient(180deg, var(--w-red-2), var(--w-red)); color: #fff; box-shadow: 0 8px 20px rgba(122, 31, 20, .3); }
.w-btn--primary:hover { color: #fff; }
.w-btn--gold { background: linear-gradient(180deg, #f6d98a, var(--w-gold)); color: #3e120c; box-shadow: 0 8px 20px rgba(212, 162, 76, .4); }
.w-btn--gold:hover { color: #3e120c; }
.w-btn--ghost { border-color: rgba(122, 31, 20, .25); color: var(--w-red); background: #fff; }
.w-btn--light { border-color: rgba(243, 207, 122, .5); color: #f6e7c8; background: transparent; }
.w-btn--light:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.w-btn--sm { padding: .45rem 1rem; font-size: .88rem; }

/* Đầu trang */
.w-head { position: sticky; top: 0; z-index: 50; background: rgba(251, 244, 230, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--w-line); }
.w-head__in { display: flex; align-items: center; gap: 1rem; height: 72px; }
.w-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--w-red); font: 700 1.6rem/1 "Dancing Script", cursive; }
.w-brand img { border-radius: 10px; box-shadow: 0 4px 10px rgba(122, 31, 20, .25); }
.w-brand--light { color: var(--w-gold-2); }
.w-nav { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.w-nav a:not(.w-btn) { padding: .5rem .8rem; border-radius: 999px; color: #5a3a30; text-decoration: none; font-weight: 600; font-size: .95rem; }
.w-nav a:not(.w-btn):hover, .w-nav a.is-active { color: var(--w-red); background: rgba(122, 31, 20, .07); }
.w-nav__cta { margin-left: .5rem; padding: .65rem 1.3rem; }
.w-head__burger { display: none; margin-left: auto; border: 0; background: none; font-size: 1.4rem; color: var(--w-red); }
@media (max-width: 991.98px) {
    .w-head__burger { display: block; }
    .w-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; padding: 1rem; background: var(--w-cream); border-bottom: 1px solid var(--w-line);
        box-shadow: var(--w-shadow); display: none; }
    body.nav-open .w-nav { display: flex; }
    .w-nav__cta { margin: .5rem 0 0; }
}

/* Hero */
.w-hero { position: relative; overflow: hidden; padding: 5rem 0 4rem; background: radial-gradient(80% 90% at 85% 10%, #fde7b0 0%, transparent 60%), linear-gradient(180deg, var(--w-cream), var(--w-cream-2)); }
.w-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.w-hero__title { font: 700 clamp(2.6rem, 6.4vw, 5rem)/1.05 "Dancing Script", cursive; margin: 1rem 0 1.4rem; color: var(--w-red); }
.w-hero__title span { display: block; color: #a8761f; }
.w-hero__text { font-size: 1.18rem; color: #5a4a40; max-width: 36rem; }
.w-hero__text b { color: var(--w-ink); }
.w-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1.4rem; }
.w-hero__stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--w-muted); font-size: .95rem; }
.w-hero__stats b { color: var(--w-red); }
.w-hero__art { position: relative; aspect-ratio: 1; max-width: 460px; justify-self: center; width: 100%; }
.w-mock { position: absolute; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px rgba(60, 20, 10, .22); border: 10px solid #2b1a14; overflow: hidden; }
.w-mock--a { inset: 6% 34% 4% 0; transform: rotate(-6deg); }
.w-mock--b { inset: 0 0 10% 30%; transform: rotate(5deg); }
.w-mock__bar { height: 46px; background: linear-gradient(180deg, var(--w-red-2), var(--w-red)); color: #fff3d6; display: flex; align-items: center; padding: 0 .9rem; font-weight: 700; font-size: .85rem; }
.w-mock__body { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; font-size: .72rem; }
.w-mock__tile { display: flex; align-items: center; gap: .5rem; padding: .55rem; border-radius: 12px; background: var(--w-cream); border: 1px solid var(--w-line); }
.w-mock__tile i { width: 1.9rem; height: 1.9rem; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--w-red); }
.w-mock__tile b { display: block; font-size: .78rem; }
.w-mock__tree { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .4rem 0; }
.w-mock__row { display: flex; gap: .4rem; }
.w-mock__p { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(145deg, #5aa9e6, #2f6fbf); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8ec5f2; }
.w-mock__p.f { background: linear-gradient(145deg, #f48fb1, #d63384); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f6b6cf; }
.w-hero__seal { position: absolute; left: 50%; top: -4%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #a83a26, #3e120c); border: 4px solid var(--w-gold); box-shadow: 0 0 0 8px rgba(212, 162, 76, .25), 0 10px 24px rgba(0, 0, 0, .3); z-index: 2; }
@media (max-width: 991.98px) { .w-hero__grid { grid-template-columns: 1fr; } .w-hero { padding-top: 3rem; } .w-hero__art { max-width: 340px; } }

/* Số liệu */
.w-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--w-line); border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); }
.w-stats > div { background: var(--w-cream); padding: 1.8rem 1rem; text-align: center; }
.w-stats b { display: block; font: 800 clamp(1.4rem, 2.8vw, 2.2rem)/1.15 "Playfair Display", serif; color: var(--w-red); margin-bottom: .3rem; }
.w-stats span { color: var(--w-muted); font-size: .9rem; }
@media (max-width: 767.98px) { .w-stats { grid-template-columns: repeat(2, 1fr); } }

/* Câu chuyện: gia phả giấy vs hồ sơ số */
.w-story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.w-story p { font-size: 1.08rem; line-height: 1.8; color: #4a3a32; }
.w-paper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.w-paper > div { padding: 1.3rem; border-radius: 16px; }
.w-paper__old { background: #efe3c8; border: 1px dashed #b89c66; color: #6a5536; font-family: "Playfair Display", serif; }
.w-paper__new { background: #fff; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }
.w-paper h5 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; color: var(--w-red); font-family: "Be Vietnam Pro", sans-serif; font-weight: 800; }
.w-paper li { margin-bottom: .35rem; }
.w-paper ul { padding-left: 1.1rem; margin: 0; }
@media (max-width: 991.98px) { .w-story { grid-template-columns: 1fr; } }

/* Thẻ tính năng */
.w-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
.w-card { position: relative; padding: 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--w-line); box-shadow: 0 4px 16px rgba(60, 20, 10, .05);
    transition: transform .18s, box-shadow .18s; text-decoration: none; color: inherit; display: block; }
.w-card:hover { transform: translateY(-4px); box-shadow: var(--w-shadow); color: inherit; }
.w-card__icon { width: 3.2rem; height: 3.2rem; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; margin-bottom: 1rem;
    background: linear-gradient(145deg, var(--w-red-2), var(--w-red)); box-shadow: 0 8px 18px rgba(122, 31, 20, .25); }
.w-card__icon.is-gold { background: linear-gradient(145deg, #f6d98a, #b8862e); color: #3e120c; }
.w-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; color: var(--w-ink); }
.w-card p { color: var(--w-muted); margin: 0; font-size: .96rem; }
.w-card__more { display: inline-block; margin-top: .8rem; font-weight: 700; font-size: .9rem; color: var(--w-red); }
.w-section--dark .w-card { background: rgba(255, 255, 255, .06); border-color: rgba(243, 207, 122, .2); }
.w-section--dark .w-card h3 { color: #fff3d6; }
.w-section--dark .w-card p { color: rgba(246, 231, 200, .75); }

/* Hành trình (bước) */
.w-steps { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 3rem; }
.w-step { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.w-step:nth-child(even) .w-step__art { order: -1; }
.w-step__num { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font: 800 1.3rem "Playfair Display", serif; color: #fff; background: var(--w-red); margin-bottom: 1rem; }
.w-step__kicker { color: var(--w-gold); font-weight: 800; letter-spacing: .14em; font-size: .78rem; text-transform: uppercase; }
.w-step h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--w-red); margin: .4rem 0 1rem; }
.w-step ul { list-style: none; padding: 0; margin: 1rem 0; }
.w-step li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; }
.w-step li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: .1rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center;
    font-size: .65rem; color: #fff; background: var(--w-gold); }
.w-quote { margin: 1.2rem 0 0; padding: 1rem 1.2rem; border-left: 4px solid var(--w-gold); background: var(--w-cream); border-radius: 0 12px 12px 0; font-style: italic; color: #5a4a40; }
.w-step__art { border-radius: 24px; min-height: 280px; padding: 1.6rem; background: linear-gradient(145deg, #fff, var(--w-cream)); border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }
@media (max-width: 991.98px) { .w-step { grid-template-columns: 1fr; } .w-step:nth-child(even) .w-step__art { order: 0; } }

/* Minh họa trong hành trình */
.w-art-tree { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.w-art-tree .row-p { display: flex; gap: 1rem; }
.w-art-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 999px; background: #fff; border: 2px solid #f6b6cf; box-shadow: 0 4px 10px rgba(0, 0, 0, .06); font-size: .78rem; font-weight: 600; }
.w-art-pill i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: linear-gradient(145deg, #5aa9e6, #2f6fbf); }
.w-art-pill i.f { background: linear-gradient(145deg, #f48fb1, #d63384); }
.w-art-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.w-art-cal span { aspect-ratio: 1; border-radius: 10px; background: #fff; border: 1px solid var(--w-line); display: grid; place-items: center; font-weight: 700; font-size: .85rem; position: relative; }
.w-art-cal span small { position: absolute; right: 4px; bottom: 2px; font-size: .55rem; color: var(--w-muted); font-weight: 400; }
.w-art-cal span.gio { background: #fbe9e7; border-color: #e7a59b; color: var(--w-red); }
.w-art-cal span.gio::after { content: "giỗ"; position: absolute; top: 2px; left: 4px; font-size: .5rem; color: var(--w-red); }
.w-art-altar { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.4rem; border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, #8a2c1c 0%, #3e120c 100%); color: #f6e7c8; }
.w-art-altar .bowl { width: 7rem; height: 3.4rem; border-radius: 0 0 3.5rem 3.5rem; background: linear-gradient(180deg, #a7782a, #6b4512); border-top: 5px solid #d9a94a; position: relative; }
.w-art-altar .bowl::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 4rem; margin-left: -1px; background: #b9773a; box-shadow: -12px 6px 0 #b9773a, 12px 6px 0 #b9773a; }
.w-art-chart { aspect-ratio: 4 / 3; border-radius: 14px; border: 6px double var(--w-gold); background: #fff8e6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; }
.w-art-chart .plaque { padding: .3rem 1.6rem; border-radius: 4px; background: var(--w-red); color: var(--w-gold-2); font: 700 1rem "Playfair Display", serif; }

/* Tiện ích (lịch) — thẻ to dẫn sang trang lịch */
.w-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
@media (max-width: 991.98px) { .w-tools { grid-template-columns: 1fr; } }
.w-today { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.3rem; border-radius: 20px; background: #fff; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }
.w-today__date { width: 6.5rem; text-align: center; border-radius: 16px; overflow: hidden; border: 1px solid var(--w-line); }
.w-today__date span { display: block; background: var(--w-red); color: #fff3d6; font-size: .75rem; font-weight: 700; padding: .3rem 0; text-transform: uppercase; }
.w-today__date b { display: block; font: 800 2.8rem/1.1 "Playfair Display", serif; color: var(--w-red); padding: .3rem 0; }
.w-today__date small { display: block; font-size: .75rem; color: var(--w-muted); padding-bottom: .4rem; }

/* FAQ */
.w-faq { max-width: 820px; margin: 2rem auto 0; }
.w-faq details { border-radius: 16px; background: #fff; border: 1px solid var(--w-line); margin-bottom: .8rem; padding: 0 1.3rem; }
.w-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--w-red); }
.w-faq details[open] summary::after { content: "−"; }
.w-faq details p { color: #5a4a40; padding-bottom: 1.1rem; margin: 0; }

/* CTA cuối */
.w-cta { text-align: center; }
.w-cta__title { font: 700 clamp(2rem, 5vw, 3.4rem)/1.15 "Dancing Script", cursive; color: var(--w-gold-2); margin-bottom: 1rem; }

/* Chân trang */
.w-foot { background: #2a0f09; color: rgba(246, 231, 200, .78); padding: 3.5rem 0 0; }
.w-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.w-foot h4 { font: 700 .82rem "Be Vietnam Pro", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--w-gold-2); margin-bottom: 1rem; }
.w-foot a:not(.w-brand) { display: block; color: rgba(246, 231, 200, .78); text-decoration: none; margin-bottom: .5rem; font-size: .93rem; }
.w-foot a:not(.w-brand):hover { color: #fff; }
.w-foot__slogan { font: 600 1.25rem "Dancing Script", cursive; color: var(--w-gold-2); margin: .8rem 0 .4rem; }
.w-foot__bottom { margin-top: 2.5rem; padding: 1.2rem 0; border-top: 1px solid rgba(243, 207, 122, .15); font-size: .85rem; text-align: center; }
@media (max-width: 767.98px) { .w-foot__grid { grid-template-columns: 1fr 1fr; } }

/* ── Trang tiện ích (lịch) ── */
.w-page-head { padding: 3rem 0 2rem; background: radial-gradient(80% 120% at 90% 0%, #fde7b0 0%, transparent 60%), var(--w-cream); border-bottom: 1px solid var(--w-line); }
.w-page-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; color: var(--w-red); margin: .5rem 0; }
.w-page-head p { color: var(--w-muted); margin: 0; max-width: 46rem; }
.w-tabs { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; margin-top: 1.4rem; border-radius: 999px; background: #fff; border: 1px solid var(--w-line); }
.w-tabs a { padding: .5rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--w-muted); font-size: .92rem; }
.w-tabs a.is-active { background: var(--w-red); color: #fff; }
.w-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 2rem 0 1.2rem; }
.w-bar__btn { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--w-line); color: var(--w-red); text-decoration: none; transition: background .15s; }
.w-bar__btn:hover { background: var(--w-gold); color: #3e120c; }
.w-bar__title { min-width: 14rem; text-align: center; }
.w-bar__title b { display: block; font: 800 1.4rem "Playfair Display", serif; color: var(--w-red); }
.w-bar__title span { font-size: .85rem; color: var(--w-muted); }
.w-bar__today { margin-left: auto; }

/* Lịch tháng âm dương */
.w-month { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }
.w-month__head, .w-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.w-month__head div { padding: .7rem; text-align: center; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; background: var(--w-red); color: #fff3d6; }
.w-month__head div:nth-child(6) { color: #bcd7ff; }
.w-month__head div:nth-child(7) { color: #ffc4bc; }
.w-day { position: relative; min-height: 104px; padding: .5rem .6rem; border-right: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); text-decoration: none; color: inherit;
    display: flex; flex-direction: column; transition: background .12s; }
.w-day:nth-child(7n) { border-right: 0; }
.w-day:hover { background: #fff5dc; color: inherit; }
.w-day.is-out { background: #faf6ee; opacity: .55; }
.w-day__solar { font: 800 1.45rem/1 "Playfair Display", serif; }
.w-day.is-sun .w-day__solar { color: var(--w-bad); }
.w-day.is-sat .w-day__solar { color: #2f6fbf; }
.w-day__lunar { position: absolute; top: .55rem; right: .6rem; font-size: .8rem; color: var(--w-muted); }
.w-day__lunar.is-first { color: var(--w-red); font-weight: 800; }
.w-day__cc { font-size: .7rem; color: var(--w-muted); margin-top: .35rem; }
.w-day__hol { margin-top: auto; font-size: .7rem; font-weight: 600; color: var(--w-red); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-day__dot { position: absolute; bottom: .5rem; right: .6rem; width: .5rem; height: .5rem; border-radius: 50%; background: #c9c0b5; }
.w-day__dot.is-good { background: var(--w-good); }
.w-day.is-today { background: #fff1cc; box-shadow: inset 0 0 0 2px var(--w-gold); }
.w-day.is-today .w-day__solar { color: var(--w-red); }
@media (max-width: 575.98px) { .w-day { min-height: 70px; padding: .35rem; } .w-day__cc, .w-day__hol { display: none; } .w-day__solar { font-size: 1.1rem; } .w-day__lunar { font-size: .65rem; top: .35rem; right: .35rem; } }
.w-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; font-size: .85rem; color: var(--w-muted); }
.w-legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; }

.w-panel { padding: 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--w-line); box-shadow: 0 4px 16px rgba(60, 20, 10, .05); }
.w-panel h3 { font-size: 1.15rem; font-weight: 800; color: var(--w-red); margin-bottom: 1rem; }
.w-convert__result { margin-top: .8rem; padding: .7rem .9rem; border-radius: 12px; background: var(--w-cream); font-weight: 600; min-height: 2.8rem; }

/* Xem ngày tốt: thẻ ngày lớn */
.w-gd { display: grid; grid-template-columns: 380px 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 991.98px) { .w-gd { grid-template-columns: 1fr; } }
.w-gd-card { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); text-align: center; }
.w-gd-card__month { padding: .8rem; background: radial-gradient(120% 160% at 0% 0%, #8a2c1c, #3e120c); color: #f6e7c8; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 3px solid var(--w-gold); }
.w-gd-card__top { padding: 1.2rem 1rem 1.4rem; background: #fdeef0; }
.w-gd-card.is-good .w-gd-card__top { background: #ecf6ee; }
.w-gd-card__day { font: 800 6.5rem/1 "Playfair Display", serif; color: var(--w-bad); }
.w-gd-card.is-good .w-gd-card__day { color: var(--w-good); }
.w-gd-card__wd { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink); }
.w-gd-card__verdict { display: inline-block; margin-top: .6rem; padding: .25rem .9rem; border-radius: 999px; font-weight: 700; font-size: .85rem; background: rgba(108, 117, 125, .12); color: var(--w-muted); }
.w-gd-card.is-good .w-gd-card__verdict { background: rgba(30, 123, 52, .12); color: var(--w-good); }
.w-gd-card__hol { margin-top: .6rem; color: var(--w-red); font-weight: 700; }
.w-gd-card__quote { margin: 1rem 0 0; font-style: italic; color: #7a4a40; font-size: .95rem; }
.w-gd-card__lunar { display: flex; justify-content: center; align-items: center; gap: .8rem; padding: 1rem; background: var(--w-cream); border-top: 3px double rgba(212, 162, 76, .6); }
.w-gd-card__lunar b { font: 800 2.6rem/1 "Playfair Display", serif; color: var(--w-red); padding-right: .8rem; border-right: 2px solid var(--w-gold); }
.w-gd-card__lunar div { text-align: left; font-size: .9rem; }
.w-gd-card__nav { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--w-line); }
.w-gd-card__nav a { padding: .7rem; text-decoration: none; font-weight: 600; font-size: .88rem; }
.w-gd-card__nav a + a { border-left: 1px solid var(--w-line); }
.w-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.w-fact { padding: 1.1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid var(--w-line); }
.w-fact h4 { font: 800 .8rem "Be Vietnam Pro", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--w-red); margin-bottom: .6rem; }
.w-fact h4 i { color: var(--w-gold); margin-right: .3rem; }
.w-chip { display: inline-block; padding: .2rem .65rem; margin: 0 .3rem .35rem 0; border-radius: 999px; font-size: .82rem; background: var(--w-cream); border: 1px solid var(--w-line); }
.w-chip.is-good { background: #ecf6ee; border-color: #b9dcc2; color: var(--w-good); }
.w-chip.is-bad { background: #fbeaea; border-color: #f0bdb9; color: var(--w-bad); }
.w-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.w-hour { padding: .5rem .7rem; border-radius: 12px; border: 1px solid var(--w-line); font-size: .85rem; }
.w-hour b { display: block; }
.w-hour.is-good { background: #ecf6ee; border-color: #b9dcc2; }
.w-hour.is-good b { color: var(--w-good); }
.w-hour.is-now { box-shadow: 0 0 0 2px var(--w-gold); }
.w-note { font-size: .85rem; color: var(--w-muted); }

/* Tuần (ngày tốt + Công giáo) */
.w-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.w-wday { display: flex; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--w-line); box-shadow: 0 4px 16px rgba(60, 20, 10, .05); transition: transform .15s; }
.w-wday:hover { transform: translateY(-3px); }
.w-wday.is-today { box-shadow: 0 0 0 3px var(--w-gold), var(--w-shadow); }
.w-wday__date { flex: none; width: 6.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8rem .3rem; color: #fff; text-decoration: none;
    background: linear-gradient(160deg, var(--c, #8a2c1c), color-mix(in srgb, var(--c, #8a2c1c) 60%, #000)); }
.w-wday__date:hover { color: #fff; }
.w-wday__date small { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff3cf; }
.w-wday__date b { font: 800 2.5rem/1 "Playfair Display", serif; margin: .2rem 0; }
.w-wday__date span { font-size: .75rem; opacity: .9; }
.w-wday__date em { margin-top: .4rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-style: normal; font-size: .72rem; font-weight: 600; }
.w-wday__body { flex: 1; min-width: 0; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.w-wday__title { font-weight: 700; font-size: 1rem; color: var(--lit, var(--w-ink)); text-decoration: none; line-height: 1.35; }
.w-wday__title.is-feast { font-weight: 800; }
.w-wday__more { margin-top: auto; align-self: flex-end; font-weight: 700; font-size: .85rem; text-decoration: none; }
.w-rank { align-self: flex-start; padding: .1rem .6rem; border-radius: 999px; color: #fff; background: var(--c, var(--w-gold)); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.w-readings { padding: .35rem .6rem; border-radius: 8px; background: var(--w-cream); font-size: .84rem; }
.w-readings i { color: var(--c, var(--w-gold)); }

/* Trình phát audio gọn (lịch Công giáo) */
.w-player { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem .3rem; border-radius: 999px; background: color-mix(in srgb, var(--c, #7a1f14) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--c, #7a1f14) 28%, transparent); }
.w-player__btn { flex: none; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c, #7a1f14); }
.w-player__btn .fa-play { margin-left: 2px; }
.w-player__time { flex: none; min-width: 2.5rem; font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--w-muted); }
.w-player__bar { flex: 1; min-width: 0; accent-color: var(--c, #7a1f14); }
.w-player--lg { padding: .5rem .9rem .5rem .5rem; position: sticky; top: 80px; z-index: 5; box-shadow: var(--w-shadow); }
.w-player--lg .w-player__btn { width: 3rem; height: 3rem; font-size: 1.15rem; }

/* Bài đọc 1 ngày */
.w-lday__hero { display: flex; gap: 1.4rem; align-items: center; padding: 1.6rem; margin-bottom: 1rem; border-radius: 22px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 85%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000)); box-shadow: var(--w-shadow); }
.w-lday__date { flex: none; width: 7rem; text-align: center; padding: .6rem; border-radius: 14px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); }
.w-lday__date b { display: block; font: 800 3.2rem/1 "Playfair Display", serif; }
.w-lday__date small { display: block; font-size: .75rem; }
.w-lday__hero h1 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800; margin: .4rem 0; }
.w-lday__hero .w-rank { background: var(--w-gold-2); color: #3e120c; }
.w-lday__reads span { display: inline-block; margin: .2rem .3rem 0 0; padding: .2rem .65rem; border-radius: 8px; background: rgba(0, 0, 0, .18); font-size: .88rem; font-weight: 600; }
.w-lday__card { padding: 1.5rem 1.7rem; margin-bottom: 1.2rem; border-radius: 20px; background: #fff; border: 1px solid var(--w-line); line-height: 1.8; font-size: 1.04rem; }
.w-lday__card--sn { background: linear-gradient(180deg, #fbf4e6, #fffdf8); font-style: italic; }
.w-lday__card h2 { font-size: 1.25rem; font-weight: 800; color: var(--w-red); border-bottom: 2px solid color-mix(in srgb, var(--c) 40%, transparent); padding-bottom: .5rem; margin-bottom: 1rem; }
.w-lday__card .pcn-part { margin: 1.2rem 0; padding-left: .9rem; border-left: 3px solid color-mix(in srgb, var(--c) 45%, transparent); }
.w-lday__card .pcn-part__title { font-size: 1rem; font-weight: 800; color: var(--w-red); font-family: "Be Vietnam Pro", sans-serif; }
.w-lday__card .pcn-ref { color: var(--w-bad); font-weight: 500; font-size: .9rem; margin-left: .3rem; }
.w-lday__card .pcn-epitome { color: var(--w-muted); }
.w-lday__card .pcn-pre, .w-lday__card .pcn-role { color: var(--w-bad); }
.w-lday__card .pcn-stanza { padding-left: 1.2rem; }
.w-lday__card sup { color: var(--w-bad); font-size: .68em; }
.w-lday__card .pcn-video { position: relative; max-width: 640px; margin: 1rem auto; aspect-ratio: 16 / 9; }
.w-lday__card .pcn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.w-lday__card img { max-width: 100%; height: auto; }

/* Cách xưng hô */
.w-kin { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--w-line); background: #fff; }
.w-kin th { background: var(--w-red); color: #fff3d6; padding: .7rem 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.w-kin td { padding: .65rem 1rem; border-top: 1px solid var(--w-line); vertical-align: top; }
.w-kin tr:nth-child(even) td { background: var(--w-cream-2); }
.w-kin td:first-child { font-weight: 700; color: var(--w-red); white-space: nowrap; }

/* ── Tài khoản thành viên: đăng nhập / đăng ký (Views/Account/Auth), lời mời (Views/Share/Invite) ── */
.w-nav__me { font-size: 1.7rem; color: var(--w-red); margin-left: .3rem; line-height: 1; }
.w-auth { padding: 3.5rem 0 4.5rem; background: radial-gradient(70% 80% at 90% 0%, #fde7b0 0%, transparent 60%), linear-gradient(180deg, var(--w-cream), var(--w-cream-2)); }
.w-auth__grid { display: grid; grid-template-columns: 1fr 460px; gap: 3rem; align-items: center; }
.w-auth__title { font: 700 clamp(2.4rem, 5vw, 3.6rem)/1.05 "Dancing Script", cursive; color: var(--w-red); margin: 1rem 0 1.5rem; }
.w-auth__title span { color: #a8761f; }
.w-auth__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; color: #5a4a40; font-size: 1.02rem; }
.w-auth__list i { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; margin-right: .6rem; background: #fff; color: var(--w-red); box-shadow: var(--w-shadow); }
.w-auth__card { background: #fff; border-radius: 22px; padding: 2rem; box-shadow: 0 20px 50px rgba(60, 20, 10, .14); border: 1px solid var(--w-line); }
.w-auth__h { font: 800 1.6rem "Playfair Display", serif; color: var(--w-red); margin-bottom: .6rem; }
.w-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--w-cream); border-radius: 999px; padding: .3rem; margin-bottom: 1.3rem; }
.w-auth__tabs a { text-align: center; padding: .55rem; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--w-muted); }
.w-auth__tabs a.is-active { background: #fff; color: var(--w-red); box-shadow: 0 3px 10px rgba(60, 20, 10, .1); }
.w-auth__or { display: flex; align-items: center; gap: .8rem; color: var(--w-muted); font-size: .85rem; margin: 1.1rem 0; }
.w-auth__or::before, .w-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--w-line); }
.w-auth__form .form-control-lg { font-size: 1rem; border-radius: 12px; }
.w-social { display: grid; gap: .55rem; }
.w-social__btn { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem 1rem; border-radius: 12px; border: 1.5px solid #e4dccf; background: #fff;
    color: #2b1a14; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
.w-social__btn:hover { background: #fdf8ef; border-color: #d8c9b0; color: #2b1a14; }
.w-social__btn.is-apple { background: #000; color: #fff; border-color: #000; }
.w-social__btn.is-apple:hover { background: #222; color: #fff; }
.w-social__ico { display: inline-grid; place-items: center; width: 22px; height: 22px; }
@media (max-width: 900px) { .w-auth__grid { grid-template-columns: 1fr; } .w-auth__art { display: none; } }

/* ── Bảng giá (Views/Plans/Index) ── */
.m-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; align-items: stretch; }
.m-price { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; padding: 1.8rem 1.5rem; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }
.m-price.is-hot { border: 2px solid var(--w-gold); transform: translateY(-8px); box-shadow: 0 22px 50px rgba(122, 31, 20, .18); }
.m-price.is-current { outline: 3px solid rgba(30, 123, 52, .35); }
.m-price__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #f6d98a, var(--w-gold)); color: #3e120c; font-weight: 800; font-size: .78rem; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; }
.m-price__name { font: 800 1.35rem "Playfair Display", serif; color: var(--w-red); }
.m-price__amount { font: 800 2.1rem "Be Vietnam Pro", sans-serif; color: var(--w-ink); margin: .3rem 0 0; }
.m-price__amount small { font-size: .9rem; font-weight: 500; color: var(--w-muted); margin-left: .3rem; }
.m-price__per { font-size: .85rem; color: var(--w-good); font-weight: 600; }
.m-price__desc { color: var(--w-muted); font-size: .92rem; margin: .7rem 0 0; }
.m-price__list { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; display: grid; gap: .45rem; font-size: .93rem; }
.m-price__list i { width: 1.2rem; color: var(--w-good); }
.m-price__list .is-off { color: #a99a8e; }
.m-price__list .is-off i { color: #c9b9ac; }
.m-price__list .is-extra i { color: var(--w-gold); }
.m-price__cta { margin-top: auto; }
.m-faq { max-width: 760px; margin: 0 auto; display: grid; gap: .6rem; }
.m-faq details { background: #fff; border-radius: 14px; padding: .9rem 1.2rem; border: 1px solid var(--w-line); }
.m-faq summary { font-weight: 700; cursor: pointer; color: var(--w-red); }
.m-faq p { margin: .6rem 0 0; color: #5a4a40; }
.w-auth .m-clan__seal { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font: 800 2rem "Playfair Display", serif; color: #fff3d6; background: radial-gradient(circle at 30% 30%, #a83a26, #5a1a10); box-shadow: inset 0 0 0 3px rgba(243, 207, 122, .5); }
.w-nav a { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1360px) { .w-nav a:not(.w-btn) { padding: .5rem .55rem; font-size: .9rem; } .w-nav__cta { padding: .6rem 1rem; } }
.m-price__amount small { display: block; margin: .1rem 0 0; }

/* ── Giỏ hàng mua gói (Views/Plans/Cart) + trang đơn hàng ── */
.m-steps { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.6rem; flex-wrap: wrap; }
.m-steps li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem .45rem .5rem; border-radius: 999px; background: #fff; border: 1px solid var(--w-line); color: var(--w-muted); font-weight: 600; font-size: .9rem; }
.m-steps li span { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: #f1e9dc; font-size: .8rem; font-weight: 800; }
.m-steps li.is-done { color: var(--w-good); } .m-steps li.is-done span { background: var(--w-good); color: #fff; }
.m-steps li.is-on { color: var(--w-red); border-color: rgba(122, 31, 20, .35); box-shadow: 0 6px 16px rgba(122, 31, 20, .1); } .m-steps li.is-on span { background: var(--w-red); color: #fff; }
.m-cart__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.4rem; align-items: start; }
.m-cart__main { display: grid; gap: 1.2rem; }
.m-cart__box, .m-cart__sum { background: #fff; border-radius: 20px; padding: 1.4rem; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }
.m-cart__side { position: sticky; top: 96px; }
.m-cart__h { display: flex; align-items: center; gap: .6rem; font: 800 1.15rem "Be Vietnam Pro", sans-serif; color: var(--w-ink); margin: 0 0 1rem; }
.m-cart__h span { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: rgba(122, 31, 20, .08); color: var(--w-red); font-size: .85rem; }
.m-opts { display: grid; gap: .7rem; }
.m-opt { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1.5px solid #ece3d4; background: #fffdf8; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.m-opt:hover { border-color: rgba(212, 162, 76, .7); }
.m-opt input { position: absolute; opacity: 0; pointer-events: none; }
.m-opt__radio { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid #cdbfa8; display: grid; place-items: center; transition: border-color .15s; }
.m-opt__radio::after { content: ""; width: .62rem; height: .62rem; border-radius: 50%; background: var(--w-red); transform: scale(0); transition: transform .15s; }
.m-opt:has(input:checked) { border-color: var(--w-red); background: #fff; box-shadow: 0 0 0 4px rgba(122, 31, 20, .08), 0 10px 22px rgba(122, 31, 20, .08); }
.m-opt:has(input:checked) .m-opt__radio { border-color: var(--w-red); }
.m-opt:has(input:checked) .m-opt__radio::after { transform: scale(1); }
.m-opt:has(input:focus-visible) { outline: 2px solid var(--w-gold); outline-offset: 2px; }
.m-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.m-opt__body b { font-size: 1.02rem; }
.m-opt__body small { color: var(--w-muted); }
.m-opt__badge { display: inline-block; margin-left: .35rem; padding: .05rem .55rem; border-radius: 999px; background: linear-gradient(180deg, #f6d98a, var(--w-gold)); color: #3e120c; font: normal 700 .7rem "Be Vietnam Pro", sans-serif; vertical-align: middle; }
.m-opt__badge.is-good { background: rgba(30, 123, 52, .12); color: var(--w-good); }
.m-opt__price { flex: none; text-align: right; font-weight: 800; font-size: 1.1rem; color: var(--w-red); }
.m-opt__price small { display: block; font-weight: 500; font-size: .78rem; color: var(--w-muted); }
.m-opt__ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: rgba(212, 162, 76, .15); color: #8a5a12; font-size: 1.2rem; }
.m-qty { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.m-qty__label { font-weight: 700; font-size: .9rem; color: var(--w-muted); }
.m-qty__opts { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.m-qty__opts input { position: absolute; opacity: 0; }
.m-qty__opts span { display: inline-block; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid #ece3d4; background: #fff; font-weight: 600; cursor: pointer; transition: all .15s; }
.m-qty__opts input:checked + span { border-color: var(--w-red); background: var(--w-red); color: #fff; }
.m-qty__opts input:focus-visible + span { outline: 2px solid var(--w-gold); }
.m-cart__h--plain { margin-bottom: .9rem; }
.m-sum__plan { display: flex; gap: .8rem; align-items: center; padding-bottom: .9rem; border-bottom: 1px dashed var(--w-line); }
.m-sum__plan > div { display: flex; flex-direction: column; }
.m-sum__plan b { font: 800 1.1rem "Playfair Display", serif; color: var(--w-red); }
.m-sum__plan small { color: var(--w-muted); }
.m-sum__seal { flex: none; width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; color: #fff3d6; background: radial-gradient(circle at 30% 30%, #a83a26, #5a1a10); box-shadow: inset 0 0 0 2px rgba(243, 207, 122, .5); }
.m-sum__perks { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .3rem; font-size: .88rem; }
.m-sum__perks li::before { content: "\f00c"; font-family: FontAwesome; color: var(--w-good); margin-right: .5rem; }
.m-sum__rows { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; padding: .8rem 0; border-top: 1px dashed var(--w-line); font-size: .92rem; }
.m-sum__rows dt { font-weight: 500; color: var(--w-muted); } .m-sum__rows dd { margin: 0; text-align: right; font-weight: 600; }
.m-sum__total { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 0 1rem; border-top: 1px solid var(--w-line); }
.m-sum__total span { font-weight: 700; }
.m-sum__total b { font-size: 1.7rem; color: var(--w-red); }
.m-sum__safe { margin-top: .8rem; font-size: .8rem; color: var(--w-muted); text-align: center; }
.m-order-lines { width: 100%; font-size: .92rem; }
.m-order-lines td { padding: .35rem 0; } .m-order-lines td:last-child { text-align: right; font-weight: 600; }
.m-order-lines tfoot td { border-top: 1px solid var(--w-line); padding-top: .6rem; font-weight: 800; color: var(--w-red); font-size: 1.05rem; }
@media (max-width: 991.98px) { .m-cart__grid { grid-template-columns: 1fr; } .m-cart__side { position: static; } }
@media (max-width: 575.98px) { .m-opt { flex-wrap: wrap; } .m-opt__price { width: 100%; text-align: left; padding-left: 2.2rem; } .m-opt__price small { display: inline; margin-left: .3rem; } }

/* Ô Ủng hộ (tắt bán gói) — Views/Shared/_DonateCard, dùng ở trang công khai /ung-ho và trang Tài khoản */
.m-donate { background: radial-gradient(120% 140% at 0% 0%, #8a2c1c 0%, #5a1a10 60%, #3e120c 100%); color: #f6e7c8; border-radius: 16px; padding: 1.4rem; box-shadow: 0 10px 30px rgba(60, 20, 10, .18); }
.m-donate__eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.m-donate__name { font: 800 1.5rem "Playfair Display", serif; margin: .2rem 0; color: #fbe9c4; }
.m-donate__msg { margin: .4rem 0 .9rem; opacity: .92; }
.m-donate__bank { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: rgba(255, 255, 255, .08); border: 1px solid rgba(246, 231, 200, .25); border-radius: 14px; padding: .8rem; }
.m-donate__qr { width: 132px; height: 132px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; flex: none; }
.m-donate__info { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: 0; min-width: 0; flex: 1 1 180px; }
.m-donate__info dt { font-weight: 500; opacity: .75; }
.m-donate__info dd { margin: 0; overflow-wrap: anywhere; }
.m-donate__copy { background: none; border: none; color: #f3d48a; padding: 0 .2rem; }
.m-donate__copy:hover { color: #fff; }
.m-donate__note { font-size: .85rem; opacity: .75; margin-top: .5rem; }

.w-fs-title { font: 700 1.45rem "Playfair Display", serif; color: var(--w-red); margin: 2.5rem 0 1rem; }
.w-fs-title i { color: var(--w-gold); font-size: 1.1rem; margin-right: .4rem; }

/* ── Xem ngày (bố cục dễ đọc) — Views/Almanac/Day ── */
.w-dx { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.w-dx-verdict { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: 18px; border: 1px solid var(--w-line); background: #fff; box-shadow: var(--w-shadow); }
.w-dx-verdict.is-good { background: linear-gradient(135deg, #f1faf3, #fff); border-color: rgba(30, 123, 52, .25); }
.w-dx-verdict.is-bad { background: linear-gradient(135deg, #fdf1ef, #fff); border-color: rgba(179, 38, 30, .2); }
.w-dx-verdict__icon { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: var(--w-bad); }
.w-dx-verdict.is-good .w-dx-verdict__icon { background: var(--w-good); }
.w-dx-verdict__title { font: 800 1.35rem/1.25 "Playfair Display", serif; color: var(--w-bad); }
.w-dx-verdict.is-good .w-dx-verdict__title { color: var(--w-good); }
.w-dx-verdict__sub { color: var(--w-ink); margin-top: .2rem; }
.w-dx-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .6rem; margin: 0; }
.w-dx-facts > div { background: #fff; border: 1px solid var(--w-line); border-radius: 14px; padding: .65rem .9rem; border-left: 4px solid var(--w-gold); }
.w-dx-facts > div.is-good { border-left-color: var(--w-good); }
.w-dx-facts > div.is-bad { border-left-color: var(--w-bad); }
.w-dx-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); }
.w-dx-facts dd { margin: .15rem 0 0; font-weight: 700; font-size: 1.02rem; }
.w-dx-facts dd small { display: block; font-weight: 400; font-size: .82rem; color: var(--w-muted); }
.w-dx-badge { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.w-dx-badge.is-good { background: rgba(30, 123, 52, .12); color: var(--w-good); }
.w-dx-badge.is-bad { background: rgba(179, 38, 30, .1); color: var(--w-bad); }

.w-dx-block { background: #fff; border: 1px solid var(--w-line); border-radius: 18px; padding: 1.1rem 1.3rem; margin-top: 1.2rem; }
.w-dx-h { font: 700 1.15rem "Playfair Display", serif; color: var(--w-red); margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.w-dx-h i { color: var(--w-gold); }
.w-dx-h small { font: 400 .8rem "Be Vietnam Pro", sans-serif; color: var(--w-muted); margin-left: auto; }
.w-dx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 767.98px) { .w-dx-grid2 { grid-template-columns: 1fr; } }

.w-dx-hours__label { font-weight: 700; font-size: .85rem; margin: .2rem 0 .45rem; }
.w-dx-hours__label.is-good { color: var(--w-good); }
.w-dx-hours__label.is-bad { color: var(--w-muted); margin-top: .9rem; }
.w-dx-hours__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.w-dx-hour { position: relative; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--w-line); display: flex; flex-direction: column; line-height: 1.3; }
.w-dx-hour b { font-size: 1rem; }
.w-dx-hour span { font-size: .85rem; color: var(--w-muted); }
.w-dx-hour small { font-size: .75rem; color: var(--w-muted); }
.w-dx-hour.is-good { background: #f1faf3; border-color: rgba(30, 123, 52, .25); }
.w-dx-hour.is-good b { color: var(--w-good); }
.w-dx-hour.is-bad { background: #faf8f6; }
.w-dx-hour.is-bad b { color: #6c5f57; }
.w-dx-hour.is-now { outline: 2px solid var(--w-gold); }
.w-dx-hour em { position: absolute; top: .4rem; right: .5rem; font-style: normal; font-size: .68rem; font-weight: 700; color: #3e120c; background: var(--w-gold-2); padding: 0 .4rem; border-radius: 999px; }

.w-dx-dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.w-dx-dirs > div { border-radius: 14px; padding: .7rem; text-align: center; }
.w-dx-dirs > div.is-good { background: #f1faf3; }
.w-dx-dirs > div.is-bad { background: #fdf1ef; }
.w-dx-dirs small { display: block; font-size: .75rem; color: var(--w-muted); }
.w-dx-dirs b { font-size: 1.1rem; }
.w-dx-dirs .is-good b { color: var(--w-good); }
.w-dx-dirs .is-bad b { color: var(--w-bad); }
.w-dx-clash { display: flex; gap: .8rem; align-items: baseline; margin-bottom: .5rem; }
.w-dx-clash > span { flex: none; width: 84px; font-size: .8rem; font-weight: 700; color: var(--w-muted); text-transform: uppercase; letter-spacing: .05em; }
.w-dx-clash i { display: inline-block; font-style: normal; font-weight: 600; padding: .15rem .6rem; margin: 0 .3rem .35rem 0; border-radius: 999px; background: #fdf1ef; color: var(--w-bad); font-size: .9rem; }

.w-dx-stars ul { list-style: none; padding: 0; margin: 0; }
.w-dx-stars li { padding: .5rem 0 .5rem .8rem; border-left: 3px solid var(--w-good); margin-bottom: .4rem; background: linear-gradient(90deg, #f1faf3, transparent 70%); border-radius: 0 8px 8px 0; }
.w-dx-stars.is-bad li { border-left-color: var(--w-bad); background: linear-gradient(90deg, #fdf1ef, transparent 70%); }
.w-dx-stars li b { display: block; }
.w-dx-stars.is-good li b { color: var(--w-good); }
.w-dx-stars.is-bad li b { color: var(--w-bad); }
.w-dx-stars li span { display: block; font-size: .9rem; color: var(--w-ink); }

.w-dx-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.w-dx-detail-head .w-fs-title { margin: 0; }
.w-dx-detail { margin-top: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.w-dx-sec { background: #fff; border: 1px solid var(--w-line); border-radius: 16px; overflow: hidden; }
.w-dx-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem; font: 700 1.05rem "Playfair Display", serif; color: var(--w-red); }
.w-dx-sec > summary::-webkit-details-marker { display: none; }
.w-dx-sec > summary > .fa:first-child { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--w-cream); color: var(--w-gold); font-size: .95rem; flex: none; }
.w-dx-sec > summary span { flex: 1; }
.w-dx-sec__chev { color: var(--w-muted); transition: transform .15s; }
.w-dx-sec[open] .w-dx-sec__chev { transform: rotate(180deg); }
.w-dx-sec[open] > summary { border-bottom: 1px solid var(--w-line); background: var(--w-cream-2); }
.w-dx-sec__body { padding: 1rem 1.3rem 1.2rem; font-size: 1rem; line-height: 1.75; max-width: 75ch; }
.w-dx-sec__body p { margin: 0 0 .7rem; }
.w-dx-sec__body p:last-child { margin-bottom: 0; }
.w-dx-sec__body strong { color: var(--w-red); }
.w-dx-sec__body em { color: var(--w-muted); font-size: .92rem; }
.w-dx-sec__body .w-gap { display: block; height: .6rem; }
.w-dx-sec__body .lnt-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: .4rem 1.2rem; padding: .8rem 0; border-top: 1px dashed var(--w-line); }
.w-dx-sec__body .lnt-row:first-child { border-top: none; padding-top: 0; }
.w-dx-sec__body .lnt-row__k { font-weight: 700; color: var(--w-red); }
.w-dx-sec__body .lnt-row__v { min-width: 0; }
.w-dx-sec__body .lnt-good, .w-dx-sec__body .lnt-bad { display: inline-block; padding: 0 .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.w-dx-sec__body .lnt-good { background: rgba(30, 123, 52, .12); color: var(--w-good); }
.w-dx-sec__body .lnt-bad { background: rgba(179, 38, 30, .1); color: var(--w-bad); }
@media (max-width: 575.98px) { .w-dx-sec__body .lnt-row { grid-template-columns: 1fr; } .w-dx-dirs { grid-template-columns: 1fr; } }
@media print { .w-dx-sec__chev, [data-fs-toggle] { display: none; } }
.w-dx-sec__body .lnt-hl { background: #fff4d6; padding: 0 .25rem; border-radius: 4px; font-weight: 600; }
.w-dx-sec__body .lnt-note { display: block; margin-top: .5rem; font-size: .9rem; color: var(--w-muted); font-style: italic; }

/* ============================================================================
 * MOBILE (≤ 767px) — dễ bấm, gọn, không tràn ngang. Áp cho cả trang công khai và khu thành viên (cùng nạp site.css).
 * Thanh tab: 1 hàng vuốt ngang (không xuống dòng lộn xộn), tab đang chọn tự cuộn vào giữa (script trong _ToolTabs / _ClanTabs).
 * ========================================================================== */
input[type="file"].form-control { max-width: 100%; }
.w-scroll-fade { position: relative; }
@media (max-width: 767.98px) {
    /* Tab tiện ích lịch: 1 hàng vuốt ngang */
    .w-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
        mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
    .w-tabs::-webkit-scrollbar { display: none; }
    .w-tabs a { flex: none; white-space: nowrap; padding: .55rem 1rem; scroll-snap-align: center; }

    /* Thanh chuyển tháng / tuần / ngày: ‹ tiêu đề › trên 1 hàng, nút "Hôm nay / Tuần này / Cả tuần" xuống dưới */
    .w-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .5rem .6rem; margin: 1.2rem 0 1rem; }
    .w-bar__btn { width: 44px; height: 44px; }
    .w-bar__title { min-width: 0; }
    .w-bar__title b { font-size: 1.25rem; }
    .w-bar input[type="date"] { width: 100% !important; min-width: 0; text-align: center; }
    .w-bar__today { grid-column: 1 / -1; justify-self: center; margin-left: 0; }

    /* Trang chủ: 2 nút to bằng nhau, rộng hết màn; số liệu dàn đều */
    .w-hero__cta { flex-direction: column; gap: .7rem; margin: 1.5rem 0 1.2rem; }
    .w-hero__cta .w-btn { width: 100%; justify-content: center; padding: .9rem 1.2rem; font-size: 1.02rem; }
    .w-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; font-size: .82rem; }
    .w-hero__stats span { background: rgba(255, 255, 255, .7); border: 1px solid var(--w-line); border-radius: 14px; padding: .55rem .3rem; line-height: 1.25; }
    .w-hero__stats b { display: block; font-size: 1.25rem; }

    /* Nút chung: đủ cao để bấm bằng ngón tay */
    .w-btn { min-height: 44px; }
    .w-btn--sm { min-height: 40px; }

    /* Chân trang: logo 1 dòng chiếm hết bề ngang, 2 cột link bên dưới */
    .w-foot { padding-top: 2.4rem; }
    .w-foot__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
    .w-foot__grid > :first-child { grid-column: 1 / -1; }
    .w-foot .w-brand { white-space: nowrap; }
    .w-foot a:not(.w-brand) { padding: .25rem 0; }

    /* Đầu trang công khai */
    .w-page-head h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
}
@media (max-width: 575.98px) { .w-month__head div { padding: .55rem .1rem; font-size: .66rem; letter-spacing: 0; line-height: 1.2; } }

/* Tab tiện ích lịch: biểu tượng + chữ (chữ trong <span> để mobile ẩn được) */
.w-tabs a { display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 767.98px) {
    /* Tab tiện ích lịch trên điện thoại: thanh menu dạng biểu tượng chia đều (segmented) — tab đang mở hiện thêm tên.
       Ô viền + vạch ngăn giữa các ô cho người dùng nhận ra đây là menu chuyển trang. */
    .w-tabs { display: flex; width: 100%; overflow: visible; mask-image: none; padding: .25rem; gap: 0; border-radius: 16px; box-shadow: 0 4px 14px rgba(60, 20, 10, .06); }
    .w-tabs a { flex: 1 1 0; justify-content: center; min-height: 46px; padding: .4rem .5rem; border-radius: 12px; font-size: .88rem; position: relative; }
    .w-tabs a + a::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--w-line); }
    .w-tabs a.is-active::before, .w-tabs a.is-active + a::before { display: none; }
    .w-tabs a .fa { font-size: 1.2rem; }
    .w-tabs a span { display: none; }
    .w-tabs a.is-active { flex: 2.4 1 0; }
    .w-tabs a.is-active span { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Trang chủ: dòng nhỏ trên tiêu đề 1 dòng; 2 câu tiêu đề mỗi câu 1 dòng; 2 nút cùng 1 hàng */
    .w-hero .w-eyebrow { font-size: .66rem; letter-spacing: .08em; gap: .45rem; white-space: nowrap; }
    .w-hero .w-eyebrow::before { width: 1.2rem; }
    .w-hero__title { font-size: clamp(2.1rem, 11.5vw, 2.9rem); white-space: nowrap; margin: .6rem 0 1rem; }
    .w-hero__cta { flex-direction: row; gap: .5rem; }
    .w-hero__cta .w-btn { flex: 1 1 0; width: auto; padding: .8rem .4rem; font-size: .9rem; white-space: nowrap; gap: .35rem; }

    /* Thẻ tính năng: biểu tượng + tiêu đề cùng 1 hàng, mô tả bên dưới */
    .w-card:has(> .w-card__icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-items: center; padding: 1.1rem 1.2rem; }
    .w-card:has(> .w-card__icon) > .w-card__icon { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; margin: 0; border-radius: 12px; }
    .w-card:has(> .w-card__icon) > h3 { margin: 0; font-size: 1.1rem; }
    .w-card:has(> .w-card__icon) > :not(.w-card__icon):not(h3) { grid-column: 1 / -1; margin-top: .6rem; }
}

/* Dải "Hôm nay" chéo góc phải trên — Ngày tốt trong tuần, Lịch Công giáo (giống trang quản trị) */
.w-wday { position: relative; }
.w-today-ribbon { position: absolute; top: 14px; right: -32px; z-index: 2; transform: rotate(35deg); padding: .15rem 2.4rem; font-size: .66rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(180deg, var(--w-red-2), var(--w-red)); color: #fff3d6; box-shadow: 0 2px 6px rgba(60, 20, 10, .3); pointer-events: none; }
.w-wday.is-today { background: linear-gradient(90deg, #fff, #fff8e6); }
.w-wday.is-today .w-wday__date { box-shadow: inset -4px 0 0 var(--w-gold); }