/* Giờ Lễ Nhà Thờ — giấy ấm, mực nâu, màu nhấn theo mùa phụng vụ. */
:root {
  --giay: #f6f1e7;
  --giay-sau: #efe7d8;
  --the: #fffcf6;
  --muc: #231c14;
  --muc-nhat: #6a5d4d;
  --vien: #ddd1bd;
  --nhan: #2f6a4c;          /* mùa Thường Niên */
  --nhan-chu: #fff;
  --nhan-nhat: #2f6a4c1a;
  --vang: #9c7a2a;
  --bong: 0 1px 0 #fff8 inset, 0 10px 30px -18px #3b2a1466;
  --chu-tieu-de: 'Literata', Georgia, serif;
  --chu-than: 'Be Vietnam Pro', system-ui, sans-serif;
  color-scheme: light;
}
html[data-mua='tim'] { --nhan: #5b3d7c; --nhan-nhat: #5b3d7c1a; }
html[data-mua='trang'] { --nhan: #9a7419; --nhan-nhat: #9a74191f; }
html[data-mua='do'] { --nhan: #9b2a2a; --nhan-nhat: #9b2a2a1a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --giay: #17130e; --giay-sau: #1f1a13; --the: #221c15; --muc: #f1e8d8; --muc-nhat: #b5a68f; --vien: #3a3125;
    --nhan: #6fbf92; --nhan-chu: #0e1a13; --nhan-nhat: #6fbf921f; --vang: #d4b46a; --bong: 0 10px 30px -18px #0009;
    color-scheme: dark;
  }
  :root:not([data-theme='light'])[data-mua='tim'] { --nhan: #b597dc; --nhan-chu: #1a1124; --nhan-nhat: #b597dc1f; }
  :root:not([data-theme='light'])[data-mua='trang'] { --nhan: #e2c06b; --nhan-chu: #1d1606; --nhan-nhat: #e2c06b1f; }
  :root:not([data-theme='light'])[data-mua='do'] { --nhan: #e58a7f; --nhan-chu: #240c0a; --nhan-nhat: #e58a7f1f; }
}
:root[data-theme='dark'] {
  --giay: #17130e; --giay-sau: #1f1a13; --the: #221c15; --muc: #f1e8d8; --muc-nhat: #b5a68f; --vien: #3a3125;
  --nhan: #6fbf92; --nhan-chu: #0e1a13; --nhan-nhat: #6fbf921f; --vang: #d4b46a; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--giay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--muc);
  font: 400 17px/1.65 var(--chu-than);
}
a { color: var(--nhan); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--chu-tieu-de); font-weight: 600; line-height: 1.12; letter-spacing: -.005em; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: 1.75rem; }
.an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bo-qua { position: absolute; left: -999px; }
.bo-qua:focus { left: 16px; top: 8px; z-index: 9; background: var(--the); padding: 8px 12px; }

/* ---------- Đầu & chân trang ---------- */
.dau {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1080px; margin: 0 auto; padding: 18px 16px 14px;
  border-bottom: 1px solid var(--vien);
}
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--muc); text-decoration: none; font-family: var(--chu-tieu-de); font-size: 1.55rem; font-weight: 700; }
.logo svg { width: 15px; height: 20px; fill: var(--nhan); }
.logo em { font-style: italic; font-weight: 500; color: var(--muc-nhat); }
.mua {
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nhan); border: 1px solid currentColor; border-radius: 99px; padding: 3px 10px; white-space: nowrap;
}
main { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }
.chan { max-width: 1080px; margin: 0 auto; padding: 28px 16px 48px; border-top: 1px solid var(--vien); color: var(--muc-nhat); font-size: .92rem; }
.chan .nho { font-size: .8rem; }

/* ---------- Trang chủ ---------- */
.mo-dau { position: relative; padding: clamp(40px, 8vw, 88px) 0 32px; overflow: hidden; }
.mo-dau h1 em { font-style: italic; font-weight: 500; color: var(--nhan); }
.cua-so {
  /* Cửa sổ hoa hồng mờ phía sau tiêu đề */
  position: absolute; right: -90px; top: 10px; width: 420px; height: 420px; opacity: .12; pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg, var(--nhan) 0 7.5deg, transparent 7.5deg 15deg),
    radial-gradient(circle, transparent 0 18%, var(--giay) 18% 21%, transparent 21%);
  -webkit-mask: radial-gradient(circle, #000 0 62%, transparent 63%);
  mask: radial-gradient(circle, #000 0 62%, transparent 63%);
  border-radius: 50%;
}
.nhan-nho { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muc-nhat); margin: 0 0 10px; font-weight: 500; }
.tim { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; max-width: 680px; position: relative; }
.tim input {
  flex: 1 1 280px; min-width: 0; font: inherit; font-size: 1.05rem; padding: 14px 16px;
  border: 1.5px solid var(--vien); border-radius: 10px; background: var(--the); color: var(--muc); box-shadow: var(--bong);
}
.tim input:focus { outline: none; border-color: var(--nhan); box-shadow: 0 0 0 4px var(--nhan-nhat); }
.thong-ke { color: var(--muc-nhat); font-size: .95rem; margin-top: 16px; }
.thong-ke strong { color: var(--muc); }

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--nhan); background: var(--nhan); color: var(--nhan-chu);
  font: 600 1rem var(--chu-than); text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s;
}
.nut:hover { filter: brightness(1.08); }
.nut:active { transform: translateY(1px); }
.nut.phu { background: transparent; color: var(--nhan); }
.nut[aria-busy='true'] { opacity: .7; cursor: progress; }

/* ---------- Kết quả ---------- */
.ket-qua { margin: 8px 0 28px; }
.ket-qua .dau-kq { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ket-qua .dau-kq p { margin: 0; color: var(--muc-nhat); font-size: .92rem; }
.danh-sach, .luoi-gp { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.danh-sach { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.luoi-gp { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.the a, .luoi-gp a, .dong-kq {
  display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--vien); border-radius: 12px;
  background: var(--the); color: var(--muc); text-decoration: none; box-shadow: var(--bong); transition: border-color .15s, transform .15s;
}
.the a:hover, .luoi-gp a:hover, .dong-kq:hover { border-color: var(--nhan); transform: translateY(-1px); }
.the strong, .luoi-gp strong { display: block; font-family: var(--chu-tieu-de); font-size: 1.28rem; line-height: 1.2; }
.the span, .luoi-gp span { display: block; color: var(--muc-nhat); font-size: .88rem; margin-top: 4px; }
.dong-kq { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.dong-kq .ten { font-family: var(--chu-tieu-de); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.dong-kq .phu-de { color: var(--muc-nhat); font-size: .88rem; grid-column: 1; }
.dong-kq .ke-tiep { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.dong-kq .ke-tiep b { display: block; font-size: 1.35rem; color: var(--nhan); font-variant-numeric: tabular-nums; }
.dong-kq .ke-tiep small { color: var(--muc-nhat); font-size: .8rem; }
.ds-kq { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }

/* ---------- Bản đồ ---------- */
.ban-do { height: 460px; border-radius: 14px; border: 1px solid var(--vien); overflow: hidden; background: var(--giay-sau); box-shadow: var(--bong); }
.ban-do.nho { height: 300px; }
.leaflet-popup-content { font: 400 .95rem/1.45 var(--chu-than); }
.leaflet-popup-content strong { font-family: var(--chu-tieu-de); font-size: 1.15rem; }
.cham {
  width: 14px; height: 14px; border-radius: 50%; background: var(--nhan); border: 2px solid #fff; box-shadow: 0 1px 4px #0006;
}

/* ---------- Trang nhà thờ ---------- */
.lan-banh { font-size: .88rem; color: var(--muc-nhat); padding: 18px 0 0; }
.lan-banh a { color: var(--muc-nhat); }
.tieu-de { padding: 26px 0 8px; }
.tieu-de .dia-chi { font-size: 1.05rem; color: var(--muc-nhat); margin: 0 0 18px; }
.hanh-dong { display: flex; flex-wrap: wrap; gap: 10px; }
.le-ke-tiep {
  margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--nhan); background: var(--nhan-nhat);
  border-radius: 0 10px 10px 0; font-size: 1.02rem;
}
.le-ke-tiep b { color: var(--nhan); font-variant-numeric: tabular-nums; }
.anh-chinh { margin: 22px 0 0; }
.anh-chinh img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; display: block; border: 1px solid var(--vien); }
.anh-chinh figcaption { font-size: .8rem; color: var(--muc-nhat); margin-top: 6px; }
.khoi { margin-top: 38px; }
.khoi > h2 { display: flex; align-items: center; gap: 12px; }
.khoi > h2::after { content: ''; flex: 1; height: 1px; background: var(--vien); }
.khoi.phu { font-size: .95rem; color: var(--muc-nhat); }

table.gio-le { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--the); border: 1px solid var(--vien); border-radius: 12px; overflow: hidden; box-shadow: var(--bong); }
table.gio-le th, table.gio-le td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--vien); }
table.gio-le tr:last-child th, table.gio-le tr:last-child td { border-bottom: 0; }
table.gio-le th { width: 8.5em; font-weight: 500; color: var(--muc-nhat); white-space: nowrap; }
table.gio-le tr[data-ngay='cn'] th { color: var(--muc); font-weight: 700; }
table.gio-le tr.hom-nay { background: var(--nhan-nhat); }
table.gio-le tr.hom-nay th { color: var(--nhan); font-weight: 700; }
table.gio-le tr.hom-nay th::after { content: ' · hôm nay'; font-weight: 400; font-size: .8rem; }
.gio {
  display: inline-flex; flex-direction: column; align-items: center; margin: 3px 6px 3px 0; padding: 4px 11px; border-radius: 8px;
  border: 1px solid var(--vien); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.02rem; background: var(--giay);
}
.gio small { font-weight: 400; font-size: .72rem; color: var(--muc-nhat); }
.gio.da-qua { opacity: .42; }
.gio.ke-tiep { background: var(--nhan); border-color: var(--nhan); color: var(--nhan-chu); }
.gio.ke-tiep small { color: inherit; }
.khong { color: var(--muc-nhat); }
.ghi-chu, .xac-minh { font-size: .9rem; color: var(--muc-nhat); }
.trong { padding: 18px; border: 1px dashed var(--vien); border-radius: 12px; }
.nguyen-van { white-space: pre-wrap; font: inherit; font-size: .95rem; background: var(--giay-sau); padding: 12px; border-radius: 8px; }

.lien-he { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.lien-he dt { color: var(--muc-nhat); }
.lien-he dd { margin: 0; }

.lich-su p { max-width: 70ch; }
.moc, .linh-muc { list-style: none; padding: 0; margin: 14px 0 0; border-left: 2px solid var(--vien); }
.moc li, .linh-muc li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 8px 0 8px 18px; position: relative; }
.moc li::before, .linh-muc li::before { content: ''; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--giay); border: 2px solid var(--nhan); }
.nam { font-variant-numeric: tabular-nums; color: var(--nhan); font-weight: 600; }
.linh-muc small { color: var(--muc-nhat); margin-left: 6px; }
.nguon { padding-left: 18px; font-size: .9rem; }

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .dau { padding-top: 14px; }
  .logo { font-size: 1.3rem; }
  .mua { font-size: .68rem; padding: 2px 8px; }
  .cua-so { width: 280px; height: 280px; right: -110px; }
  .tim .nut { flex: 1 1 100%; }
  table.gio-le th { width: auto; display: block; border-bottom: 0; padding-bottom: 2px; }
  table.gio-le td { display: block; padding-top: 2px; }
  .ban-do { height: 360px; }
  .moc li, .linh-muc li { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .mo-dau > * { animation: hien .6s both cubic-bezier(.2, .7, .2, 1); }
  .mo-dau > :nth-child(2) { animation-delay: .05s; }
  .mo-dau > :nth-child(3) { animation-delay: .12s; }
  .mo-dau > :nth-child(4) { animation-delay: .2s; }
  .mo-dau > :nth-child(5) { animation-delay: .28s; }
  @keyframes hien { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------- Form góp ý ---------- */
.form-gop-y { display: grid; gap: 16px; max-width: 640px; }
.form-gop-y label { display: grid; gap: 6px; font-weight: 500; }
.form-gop-y input, .form-gop-y select, .form-gop-y textarea {
  font: inherit; font-weight: 400; padding: 12px 14px; border: 1.5px solid var(--vien); border-radius: 10px; background: var(--the); color: var(--muc);
}
.form-gop-y :is(input, select, textarea):focus { outline: none; border-color: var(--nhan); box-shadow: 0 0 0 4px var(--nhan-nhat); }
#gy-dang-sua { margin: 0; color: var(--nhan); font-weight: 500; }

/* ---------- Lịch khác, trích dẫn ---------- */
.lich-khac { margin-top: 14px; }
.lich-khac summary { cursor: pointer; color: var(--nhan); font-weight: 500; padding: 6px 0; }
.lich-khac table.gio-le { margin-top: 10px; box-shadow: none; }
blockquote.trich { margin: 0 0 14px; padding: 4px 0 4px 18px; border-left: 3px solid var(--vien); color: var(--muc); }
blockquote.trich footer { font-size: .85rem; color: var(--muc-nhat); }
@media (max-width: 560px) { .anh-chinh img { max-height: 260px; } }

/* ---------- Tỉnh/thành, nhãn chưa xác minh ---------- */
.luoi-tinh { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.luoi-tinh a, .muc-luc a {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 12px; border: 1px solid var(--vien); border-radius: 99px;
  background: var(--the); color: var(--muc); text-decoration: none; font-size: .95rem;
}
.luoi-tinh a:hover, .muc-luc a:hover { border-color: var(--nhan); color: var(--nhan); }
.luoi-tinh small, .muc-luc small { color: var(--muc-nhat); font-variant-numeric: tabular-nums; }
.muc-luc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.the em { display: inline-block; margin-top: 6px; font-style: normal; font-size: .75rem; color: var(--muc-nhat); border: 1px dashed var(--vien); border-radius: 6px; padding: 1px 7px; }
.canh-bao { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--giay-sau); border: 1px dashed var(--vien); font-size: .95rem; }
.lien-he .cu { color: var(--muc-nhat); }

/* ---------- Lưu ý dữ liệu (mọi trang) ---------- */
.luu-y { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--nhan-nhat); font-size: .9rem; color: var(--muc); }
.luu-y a { font-weight: 600; }