/* ================================================
   GIÁO XỨ ĐỒNG TIẾN — Main Stylesheet v1.0
   ================================================
   1.  Variables
   2.  Reset & Base
   3.  Typography
   4.  Utilities
   5.  Top Bar
   6.  Header & Navigation
   7.  Mobile Menu
   8.  Search Bar
   9.  Hero Slider
   10. Announcement Banner
   11. Quick Access
   12. Section Styles
   13. Post Card Component
   14. Latest Posts
   15. Clergy Section
   16. News Grid Section
   17. Link Widget & Priest Lookup
   18. Page Hero
   19. Archive / Blog Page
   20. Sidebar
   21. Single Post
   22. Mass Schedule
   23. About Page
   24. Contact Page
   25. Footer
   26. 404 Page
   27. Responsive
   ================================================ */

/* ================================================
   1. VARIABLES
   ================================================ */
:root {
  --primary:        #1B2E5E;
  --primary-dark:   #111d3c;
  --primary-light:  #2a4494;
  --accent:         #C9A227;
  --accent-dark:    #a8841f;
  --accent-light:   #f0cc60;
  --white:          #ffffff;
  --gray-50:        #f8f9fa;
  --gray-100:       #f0f4f8;
  --gray-200:       #e2e8f0;
  --gray-300:       #cbd5e0;
  --gray-400:       #a0aec0;
  --gray-500:       #718096;
  --gray-700:       #4a5568;
  --gray-900:       #1a202c;
  --text-dark:      #1a202c;
  --text-body:      #4a5568;
  --text-muted:     #718096;
  --border:         #e2e8f0;
  --shadow-xs:  0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:  0 2px 6px rgba(0,0,0,.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.11);
  --shadow-xl:  0 16px 50px rgba(0,0,0,.13);
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --transition: .28s ease;
  --container:  1200px;
  --header-h:   68px;
  --topbar-h:   36px;
}

/* ================================================
   2. RESET & BASE
   ================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  color: var(--text-body);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; text-decoration: none; transition: color var(--transition); }
ul     { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; padding: 0; }
input, textarea, select { font-family: inherit; font-size: inherit; }
table  { border-collapse: collapse; width: 100%; }

/* ================================================
   3. TYPOGRAPHY
   ================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', Georgia, 'Times New Roman', serif;
  color: var(--text-dark);
  line-height: 1.3;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ================================================
   4. UTILITIES
   ================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.section       { padding: 72px 0; }
.section-sm    { padding: 48px 0; }
.section-dark  { background: var(--primary-dark); }
.section-light { background: var(--gray-50); }

/* Section header */
.section-header       { text-align: center; margin-bottom: 48px; }
.section-header.left  { text-align: left; }
.section-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--primary);
  margin-bottom: 16px;
}
.section-dark .section-title  { color: var(--white); }
.section-dark .section-label  { color: var(--accent-light); }
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: 12px auto 0;
}
.section-header.left .section-title::after { margin-left: 0; }

.section-more {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-dark);
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}
.section-more:hover { gap: 8px; color: var(--primary); }
.section-more i { font-size: .8rem; }

/* Grid helpers */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); }
.btn-sm { padding: 8px 18px; font-size: .82rem; }

/* Badge / tag */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
}
.tag-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-dark);
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ================================================
   5. TOP BAR
   ================================================ */
.top-bar {
  background: var(--primary-dark);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  transition: transform var(--transition);
}
.top-bar.hidden { transform: translateY(-100%); }
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: .78rem;
  color: rgba(255,255,255,.7);
}
.top-bar-contact a { color: rgba(255,255,255,.7); }
.top-bar-contact a:hover { color: var(--accent-light); }
.top-bar-contact span { margin: 0 10px; opacity: .35; }
.top-bar-social { display: flex; gap: 8px; }
.top-bar-social a {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  transition: background var(--transition);
}
.top-bar-social a:hover { background: var(--accent); color: var(--white); }

/* ================================================
   6. HEADER & NAVIGATION
   ================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner { height: var(--header-h); display: flex; align-items: center; }

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}
.logo-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.logo-text { line-height: 1.25; min-width: 0; }
.logo-name {
  display: block;
  font-family: 'Roboto', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logo-subtitle {
  display: block;
  font-size: .67rem;
  color: var(--text-muted);
  letter-spacing: .03em;
}

/* Navigation */
.main-nav { flex: 1; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}
.nav-list > li { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-700);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav-link i { font-size: .65rem; transition: transform var(--transition); }
.nav-link:hover,
.nav-list > li.active > .nav-link { background: var(--gray-50); color: var(--primary); }
.has-dropdown:hover > .nav-link i { transform: rotate(180deg); }
.nav-link.nav-cta {
  background: var(--accent);
  color: var(--white);
  margin-left: 4px;
}
.nav-link.nav-cta:hover { background: var(--accent-dark); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 12px;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 200;
}
/* Bridge the gap between nav link and dropdown so mouse travel doesn't collapse it */
.dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.has-dropdown:hover > .dropdown { opacity: 1; pointer-events: all; transform: none; }

.dropdown a {
  display: block;
  padding: 7px 12px;
  font-size: .83rem;
  color: var(--text-body);
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.dropdown a:hover { background: var(--gray-50); color: var(--primary); }

/* Mega dropdown */
.dropdown-mega {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-width: 540px;
  right: auto;
  left: 0;
  padding: 20px;
}

/* 4-column variant (Hoạt động) */
.dropdown-mega-4col {
  grid-template-columns: 1fr 1fr 1.4fr 1fr;
  min-width: 760px;
}

/* Group header — clickable link (replaces h4) */
.dropdown-group-header {
  display: block;
  padding: 6px 12px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
  border-radius: 4px 4px 0 0;
  transition: color var(--transition), background var(--transition);
}
.dropdown-group-header:hover { color: var(--accent); background: var(--gray-50); }

/* Nested sub-items (Ca đoàn, Tin Mừng sub-pages) */
.dropdown-sub {
  padding-left: 26px !important;
  font-size: .78rem !important;
  color: var(--text-muted) !important;
  position: relative;
}
.dropdown-sub::before {
  content: '◦';
  position: absolute;
  left: 13px;
  color: var(--accent);
  line-height: 2.2;
}
.dropdown-sub:hover { color: var(--primary) !important; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; }

.search-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.search-toggle:hover { background: var(--primary); color: var(--white); }

.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: all var(--transition);
}
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================
   7. MOBILE MENU
   ================================================ */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 86vw;
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  z-index: 1001;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-xl);
}
.mobile-menu.open { transform: none; }
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: all; }
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu-close {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-700); font-size: 1rem;
}

.mobile-nav-item { border-bottom: 1px solid var(--gray-100); }
.mobile-nav-row { display: flex; align-items: stretch; }
.mobile-nav-link {
  display: flex; align-items: center;
  flex: 1;
  min-width: 0;
  padding: 15px 4px;
  font-size: .9rem; font-weight: 600;
  color: var(--text-dark);
}
/* Leaf items (no submenu) keep the old markup with an inline icon, e.g. "Tải biểu mẫu" */
.mobile-nav-link i { font-size: .75rem; margin-left: auto; }

/* Dedicated toggle button for items that have a submenu — keeps the link itself
   navigable (parity with desktop, where clicking the label goes to the category page)
   while giving the chevron its own full-height 44px+ tap target. */
.mobile-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  color: var(--gray-500);
  font-size: .75rem;
  border-radius: var(--radius);
  transition: transform var(--transition), color var(--transition), background var(--transition);
}
.mobile-submenu-toggle:hover,
.mobile-submenu-toggle:focus-visible { background: var(--gray-50); color: var(--primary); }
.mobile-nav-item.open .mobile-submenu-toggle { color: var(--primary); transform: rotate(180deg); }

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.mobile-nav-item.open .mobile-submenu { max-height: 1500px; }
.mobile-submenu a {
  display: block;
  padding: 10px 16px;
  font-size: .85rem;
  color: var(--text-body);
  border-radius: 6px;
}
.mobile-submenu a:hover { background: var(--gray-50); color: var(--primary); }

/* Section headers inside mobile submenu (e.g. "Các giới", "Giáo họ") — clickable,
   same as their desktop dropdown-group-header counterpart (parity across breakpoints) */
.mobile-submenu a.mobile-submenu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  margin-top: 10px;
  transition: background var(--transition), color var(--transition);
}
.mobile-submenu a.mobile-submenu-header::after {
  content: '\f105';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .7rem;
  color: var(--gray-400);
}
.mobile-submenu a.mobile-submenu-header:hover,
.mobile-submenu a.mobile-submenu-header:active { background: var(--primary); color: var(--white); }
.mobile-submenu a.mobile-submenu-header:hover::after,
.mobile-submenu a.mobile-submenu-header:active::after { color: rgba(255,255,255,.7); }
.mobile-submenu a.mobile-submenu-header:first-child { margin-top: 2px; }

/* ================================================
   8. SEARCH BAR
   ================================================ */
.search-bar {
  background: var(--primary);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, padding var(--transition);
}
.search-bar.open { max-height: 80px; padding: 16px 0; }
.search-form { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--white); }
.search-input {
  flex: 1; padding: 11px 18px;
  border: none; outline: none;
  font-size: .95rem; color: var(--text-dark);
}
.search-submit {
  padding: 0 20px;
  background: var(--accent); color: var(--white);
  font-size: 1rem;
  transition: background var(--transition);
}
.search-submit:hover { background: var(--accent-dark); }

/* ================================================
   9. HERO SLIDER
   ================================================ */
.hero-slider {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
  background: var(--primary-dark);
}
.hero-slides { display: flex; height: 100%; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.hero-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
}

/* Slide background gradients (placeholder for real images) */
.hero-slide:nth-child(1) .hero-slide-bg { background-color: #0d1b3e; background-image: radial-gradient(ellipse at 60% 40%, #1e3a7a 0%, #0d1b3e 70%); }
.hero-slide:nth-child(2) .hero-slide-bg { background-color: #1a0d3e; background-image: radial-gradient(ellipse at 40% 60%, #3a1e7a 0%, #1a0d3e 70%); }
.hero-slide:nth-child(3) .hero-slide-bg { background-color: #0d2a3e; background-image: radial-gradient(ellipse at 50% 30%, #1e5a7a 0%, #0d2a3e 70%); }

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12,20,42,.92);
}
.hero-slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
  color: var(--white);
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-tag-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(240,204,96,.25);
}
.hero-title {
  font-family: 'Roboto', serif;
  font-size: clamp(1.9rem, 4.3vw, 3.2rem);
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  margin-bottom: 18px;
  line-height: 1.25;
  max-width: 640px;
}
.hero-date {
  font-size: .92rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
}
.hero-date i { color: var(--accent-light); }

/* Hero excerpt (fallback / no-content state only) */
.hero-excerpt {
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 0 22px;
}

/* Hero read-more button */
.hero-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: var(--accent);
  color: var(--white);
  font-size: .88rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  letter-spacing: .03em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(201,162,39,.35);
}
.hero-read-more:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,162,39,.45);
  color: var(--white);
}
.hero-read-more i { font-size: .8rem; transition: transform var(--transition); }
.hero-read-more:hover i { transform: translateX(4px); }

/* Slider controls */
.hero-prev, .hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  color: var(--white);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--transition);
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-prev:hover, .hero-next:hover { background: rgba(255,255,255,.3); }

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  transition: background var(--transition), width var(--transition);
  cursor: pointer;
}
.hero-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* Caption bar below slider */
.hero-caption {
  background: var(--primary);
  padding: 14px 0;
  color: var(--white);
}
.hero-caption-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-caption-label {
  background: var(--accent);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  flex-shrink: 0;
}
.hero-caption-text {
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-caption-date { font-size: .8rem; color: rgba(255,255,255,.5); flex-shrink: 0; }

/* ================================================
   10. ANNOUNCEMENT WIDGET (sidebar)
   ================================================ */
.announcement-widget .widget-header { display: flex; align-items: center; gap: 10px; }

.announcement-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}
.announcement-item:last-of-type { border-bottom: none; }

.announcement-item-date {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.announcement-item-date i { color: var(--accent); }

.announcement-item-text {
  font-size: .84rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0;
}
.announcement-item-text strong { color: var(--primary); }

.announcement-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-dark);
  transition: gap var(--transition), color var(--transition);
}
.announcement-more:hover { gap: 8px; color: var(--primary); }

/* ================================================
   11. FLOATING QUICK BUTTONS (left sticky)
   ================================================ */
.floating-btns {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floating-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  max-width: 220px;
  padding: 13px 18px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: box-shadow var(--transition), transform var(--transition);
}
.floating-btn:hover {
  box-shadow: var(--shadow-lg);
  color: var(--white);
  transform: translateX(3px);
}
.floating-btn-primary { background: var(--primary); }
.floating-btn-primary:hover { background: var(--primary-light); }
.floating-btn-accent  { background: var(--accent); }
.floating-btn-accent:hover  { background: var(--accent-dark); }
.floating-btn-icon { font-size: 1.1rem; flex-shrink: 0; }
.floating-btn-label { overflow: hidden; opacity: 1; }

/* ================================================
   12. SECTION STYLES
   ================================================ */
.section-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.section-row-header h2 {
  font-size: 1.25rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-row-header h2::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 22px;
  background: var(--accent);
  border-radius: 3px;
}

/* ================================================
   13. POST CARD COMPONENT
   ================================================ */
.post-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.post-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-100);
}
.post-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.post-card:hover .post-card-image img { transform: scale(1.05); }

/* Placeholder image gradients for cards */
.img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
  font-size: 2.5rem;
}
.img-ph-1 { background: linear-gradient(135deg, #1B2E5E, #2a4494); }
.img-ph-2 { background: linear-gradient(135deg, #2d1b5e, #5e3d96); }
.img-ph-3 { background: linear-gradient(135deg, #1b4e5e, #2a8494); }
.img-ph-4 { background: linear-gradient(135deg, #5e1b1b, #944040); }
.img-ph-5 { background: linear-gradient(135deg, #1b5e2a, #4a944f); }
.img-ph-6 { background: linear-gradient(135deg, #5e4a1b, #94782a); }

.post-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--white);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
}

.post-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .76rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.post-card-meta i { color: var(--accent); }
.post-card-title {
  font-family: 'Roboto', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 10px;
  flex: 1;
  transition: color var(--transition);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card:hover .post-card-title { color: var(--primary); }
.post-card-excerpt {
  font-size: .83rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  margin-bottom: 14px;
}
.post-card-read {
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.post-card-read:hover { color: var(--accent-dark); }

/* Small list card (right side of latest posts) */
.post-list-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.post-list-item:last-child { border-bottom: none; }
.post-list-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gray-100);
}
.post-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-list-body { flex: 1; }
.post-list-meta { font-size: .72rem; color: var(--text-muted); margin-bottom: 4px; }
.post-list-title {
  font-family: 'Roboto', serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}
.post-list-item:hover .post-list-title { color: var(--primary); }

/* ================================================
   14. LATEST POSTS (bài viết lớn bên trái + danh sách nhỏ bên phải)
   ================================================ */
.latest-posts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  /* stretch (mặc định của grid) — bên nào tự nhiên cao hơn (ảnh 16:10 bên
     trái hay chồng danh sách bên phải) sẽ quyết định chiều cao hàng, bên
     còn lại giãn theo để hai cột luôn khớp chiều cao tuyệt đối. */
  align-items: stretch;
}
/* min-width:0 trên 2 cột — mặc định grid item có min-width:auto, có thể
   khiến 1 cột không co lại được (vd ảnh/chữ dài) và tràn/đè sang cột kia
   ("grid blowout"); đặt về 0 để nội dung bên trong luôn co vừa cột. */
.latest-post-featured,
.latest-post-list {
  min-width: 0;
}

/* -- Featured post (left, large — tỉ lệ nền 16:10, ảnh phủ kín làm nền,
   chữ đè lên trên neo ở đáy, giống khối slider hero). width/height:100%
   (chứ không chỉ height) để card giãn khít đúng theo cả 2 chiều của cột
   grid khi cột danh sách bên phải tự nhiên cao hơn khung 16:10 (grid
   align-items:stretch) — nếu chỉ đặt height:100% mà bỏ width, trình
   duyệt sẽ tự tính width ngược lại từ height theo aspect-ratio (đúng
   spec CSS aspect-ratio khi width để auto), khiến card phình rộng hơn
   cột và đè lên cột phải; đặt cả 2 chiều là definite thì aspect-ratio
   bị bỏ qua hoàn toàn, ảnh vẫn phủ kín khung nhờ object-fit:cover. -- */
.featured-post-card {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.featured-post-bg {
  position: absolute;
  inset: 0;
  background: var(--gray-100);
}
.featured-post-bg img,
.featured-post-bg .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 2.5rem;
}
/* Overlay xanh navy đậm phủ gần kín ảnh, cùng tông và độ đậm với lớp phủ
   hero slider (rgba(12,20,42,.92)) — chỉ giữ lại chút gradient để đỉnh ảnh
   nhạt hơn đáy một chút (đáy đậm nhất, nơi chữ neo vào), không để lộ ảnh
   sáng/rực màu như ảnh gốc nữa. */
.featured-post-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 20, 42, .78) 0%,
    rgba(12, 20, 42, .82) 35%,
    rgba(12, 20, 42, .88) 65%,
    rgba(12, 20, 42, .94) 100%
  );
  pointer-events: none;
}
.featured-post-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.6vw, 32px);
}
.featured-post-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.featured-post-title {
  font-family: 'Roboto', serif;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-post-title a {
  color: var(--white);
  transition: color var(--transition);
}
.featured-post-title a:hover { color: var(--accent-light); }
.featured-post-excerpt {
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  line-height: 1.65;
  max-width: 46em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}
.featured-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 8px;
  font-size: .83rem;
  color: rgba(255, 255, 255, .7);
}
.featured-post-meta i { color: var(--accent-light); }
.featured-post-more {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent-light);
  white-space: nowrap;
  transition: color var(--transition), transform var(--transition);
}
.featured-post-more:hover { color: var(--white); transform: translateX(3px); }

/* -- Small post items (right side) — thumb tỉ lệ 16:9, ảnh định vị tuyệt
   đối phủ kín khung (position:absolute; inset:0) để luôn khít trọn khung,
   không để lại khoảng trắng do làm tròn số của aspect-ratio; 4 mục được
   cân kích cỡ/khoảng cách để tổng chiều cao khớp sát với khối bài viết
   lớn bên trái (tỉ lệ 16:10 mới). -- */
.latest-post-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.latest-post-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 7px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.latest-post-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.latest-post-item-thumb {
  position: relative;
  width: 36%;
  max-width: 162px;
  height: 100%;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-100);
}
/* Ảnh (và placeholder) được định vị tuyệt đối phủ kín khung thay vì dùng
   width/height:100% theo dòng chảy — tránh khoảng trắng do làm tròn số
   thập phân giữa chiều cao tính từ aspect-ratio của khung và của ảnh. */
.latest-post-item-thumb img,
.latest-post-item-thumb .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 1.2rem;
}
.latest-post-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.latest-post-item-cat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 3px;
}
.latest-post-item-title {
  font-family: 'Roboto', serif;
  font-size: .94rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.28;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-post-item-title a { color: inherit; transition: color var(--transition); }
.latest-post-item:hover .latest-post-item-title a { color: var(--primary); }
.latest-post-item-excerpt {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.latest-post-item-meta { font-size: .72rem; color: var(--text-muted); }

/* ================================================
   15. CLERGY SECTION
   ================================================ */
.clergy-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.clergy-section .section-title { color: var(--white); }
.clergy-section .section-label { color: var(--accent-light); }
.clergy-section::before {
  content: '✝';
  position: absolute;
  font-size: 20rem;
  color: rgba(255,255,255,.03);
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Roboto', serif;
}
.clergy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 800px; margin: 0 auto; }

.clergy-card {
  text-align: center;
  color: var(--white);
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  transition: background var(--transition), transform var(--transition);
}
.clergy-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }

.clergy-avatar {
  width: 170px; height: 170px;
  border-radius: 50%;
  margin: 0 auto 24px;
  overflow: hidden;
  border: 5px solid var(--accent);
  background: rgba(255,255,255,.1);
}
.clergy-avatar img { width: 100%; height: 100%; object-fit: cover; }
.clergy-avatar-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
}
.clergy-role {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 6px;
}
.clergy-name {
  font-family: 'Roboto', serif;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 4px;
}
.clergy-parish { font-size: .82rem; color: rgba(255,255,255,.55); }

/* ================================================
   16. NEWS GRID SECTION
   ================================================ */
.news-section { background: var(--gray-50); }

.news-row { margin-bottom: 48px; }
.news-row:last-child { margin-bottom: 0; }

/* ================================================
   16b. RAO HÔN PHỐI / CÁO PHÓ SECTION
   ================================================ */
.rao-cao-section { background: var(--white); }
.rao-cao-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 48px;
  align-items: start;
}
.rao-cao-divider {
  background: var(--border);
  align-self: stretch;
}
.rao-cao-col .section-row-header h2 { font-size: 1.1rem; }
.rao-cao-col .section-row-header h2 i { font-size: .9rem; color: var(--accent); }

/* ================================================
   17. LINK WIDGET & PRIEST LOOKUP
   ================================================ */
.widgets-section { padding: 56px 0; }
.widgets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.widget-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.widget-header {
  background: var(--primary);
  color: var(--white);
  padding: 16px 24px;
  font-family: 'Roboto', serif;
  font-size: 1.05rem;
}
.widget-body { padding: 20px 24px; }
.widget-body-iframe {
  padding: 0;
  height: 420px;
}
.widget-body-iframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.link-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.link-list a {
  font-size: .82rem;
  color: var(--text-body);
  padding: 6px 8px;
  border-radius: 6px;
  display: block;
  transition: all var(--transition);
}
.link-list a:hover { background: var(--gray-50); color: var(--primary); padding-left: 12px; }

/* Scrollable link list for large number of items */
.link-list-scroll {
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.link-list-scroll::-webkit-scrollbar { width: 4px; }
.link-list-scroll::-webkit-scrollbar-track { background: transparent; }
.link-list-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
.link-list-scroll li { border-bottom: 1px solid var(--gray-100); }
.link-list-scroll li:last-child { border-bottom: none; }
.link-list-scroll a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  font-size: .83rem;
  color: var(--text-body);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
  border-radius: 6px;
}
.link-list-scroll a i { font-size: .65rem; color: var(--accent); flex-shrink: 0; }
.link-list-scroll a:hover { background: var(--gray-50); color: var(--primary); padding-left: 12px; }

/* Diocese link groups (Liên Kết widget) */
.diocese-links-scroll {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.diocese-links-scroll::-webkit-scrollbar { width: 4px; }
.diocese-links-scroll::-webkit-scrollbar-track { background: transparent; }
.diocese-links-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

.diocese-link-group + .diocese-link-group { margin-top: 20px; }
.diocese-link-group-title {
  font-family: 'Roboto', serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 10px;
}
.diocese-link-list { display: flex; flex-wrap: wrap; gap: 8px; }
.diocese-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--gray-50);
  font-size: .78rem;
  color: var(--text-body);
  white-space: nowrap;
  transition: all var(--transition);
}
.diocese-link-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.priest-form { display: flex; flex-direction: column; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: .8rem; font-weight: 600; color: var(--text-dark); }
.form-field input, .form-field select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--text-dark);
  background: var(--gray-50);
  transition: border-color var(--transition);
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--primary); background: var(--white); }

/* ================================================
   18. PAGE HERO
   ================================================ */
.page-hero {
  height: 260px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content { position: relative; z-index: 1; text-align: center; color: var(--white); }
.page-hero-breadcrumb {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-hero-breadcrumb a { color: rgba(255,255,255,.6); }
.page-hero-breadcrumb a:hover { color: var(--accent-light); }
.page-hero-breadcrumb i { font-size: .7rem; }
.page-hero h1 {
  font-family: 'Roboto', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* ================================================
   19. ARCHIVE / BLOG PAGE
   ================================================ */
.archive-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  padding: 56px 0;
}

/* ================================================
   20. SIDEBAR
   ================================================ */
.sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.sidebar-widget-title {
  background: var(--primary);
  color: var(--white);
  padding: 14px 18px;
  font-family: 'Roboto', serif;
  font-size: .95rem;
}
.sidebar-widget-body { padding: 16px 18px; }

.cat-tree { font-size: .84rem; }
.cat-tree > li > a {
  display: block;
  padding: 7px 0;
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 1px solid var(--gray-100);
  transition: color var(--transition);
}
.cat-tree > li > a:hover { color: var(--primary); }
.cat-tree ul { padding-left: 14px; margin-top: 2px; }
.cat-tree ul li a {
  display: block;
  padding: 5px 0;
  color: var(--text-body);
  transition: color var(--transition);
}
.cat-tree ul li a:hover { color: var(--primary); }
.cat-tree ul li a::before { content: '◦ '; color: var(--accent); }

/* Sidebar search */
.sidebar-search { display: flex; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.sidebar-search input { flex: 1; padding: 9px 12px; border: none; outline: none; font-size: .85rem; }
.sidebar-search button { padding: 0 14px; background: var(--primary); color: var(--white); }

/* ================================================
   21. SINGLE POST
   ================================================ */
.post-content { font-size: .97rem; line-height: 1.85; }
.post-content h2, .post-content h3 { margin: 2rem 0 1rem; }
.post-content p { margin-bottom: 1.2rem; }
.post-content blockquote {
  border-left: 4px solid var(--accent);
  padding: 12px 20px;
  background: var(--gray-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  font-style: italic;
}

/* Liturgical colors */
.post-content .loi-chua  { color: #c0392b; font-weight: 600; }
.post-content .dap-ca    { color: #2980b9; }
.post-content .chu-de    { color: #8e44ad; }
.post-content .giao-huan { color: #27ae60; }

/* Social share */
.post-share {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  flex-wrap: wrap;
}
.post-share-label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.share-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: .9rem;
  transition: transform var(--transition);
}
.share-btn:hover { transform: scale(1.15); }
.share-fb       { background: #1877f2; }
.share-messenger { background: #0084ff; }
.share-x        { background: #000; }
.share-threads  { background: #000; }
.share-email    { background: #ea4335; }
.share-copy     { background: var(--gray-500); }

/* Post navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.post-nav-item {
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--gray-50);
  transition: background var(--transition);
}
.post-nav-item:hover { background: var(--gray-100); }
.post-nav-item.next { text-align: right; }
.post-nav-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; display: block; }
.post-nav-title { font-size: .88rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; }

/* ================================================
   22. MASS SCHEDULE & PARISH BULLETIN
   ================================================ */
.mass-page { padding: 80px 0 96px; background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%); }
.mass-page-home { padding-top: 24px; }

.mass-bulletin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, 1.07fr);
  gap: 40px;
  align-items: start;
}
.mass-bulletin-sidebar { position: static; }

.mass-lookup-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 36px 40px 32px;
}
.mass-lookup-header {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.mass-lookup-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Roboto', serif;
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 8px;
}
.mass-lookup-heading i { color: var(--accent); font-size: 1.05rem; }
.mass-lookup-subtitle { font-size: .88rem; color: var(--text-body); line-height: 1.65; margin: 0; }

.mass-lookup-group + .mass-lookup-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.mass-lookup-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', serif;
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 14px;
}
.mass-lookup-group-title i { color: var(--accent); font-size: .88rem; }

.mass-lookup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--gray-200);
  border-radius: var(--radius);
}
.mass-lookup-row + .mass-lookup-row { margin-top: 10px; }
.mass-lookup-day {
  font-size: .84rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--gray-100);
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.mass-lookup-times { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.mass-time-pill {
  padding: 7px 16px;
  background: var(--primary);
  color: var(--white);
  border-radius: 20px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.mass-time-pill.accent { background: var(--primary); color: var(--white); }

.mass-lookup-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--gray-50);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.mass-lookup-note i { color: var(--accent); font-size: 1rem; margin-top: 2px; }
.mass-lookup-note p { font-size: .85rem; color: var(--text-body); line-height: 1.6; margin: 0; }

/* Parish bulletin card (sidebar) — dark navy card, gold serif title */
.announcement-widget.widget-box {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  box-shadow: var(--shadow-md);
}
.announcement-widget .widget-header {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px 32px 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: 'Roboto', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-light);
}
.announcement-widget .widget-header i { color: var(--accent); font-size: 1.05rem; }
.announcement-widget .widget-body { padding: 24px 32px 32px; color: rgba(255,255,255,.82); }

.announcement-widget .widget-body p { font-size: .9rem; line-height: 1.75; color: rgba(255,255,255,.78); margin: 0 0 16px; }
.announcement-widget .widget-body p:last-child { margin-bottom: 0; }
.announcement-widget .widget-body a { color: var(--accent-light); }
.announcement-widget .widget-body a:hover { color: var(--white); }
.announcement-widget .widget-body strong,
.announcement-widget .widget-body b { color: var(--white); }

.announcement-widget .widget-body ul,
.announcement-widget .widget-body ol { list-style: none; margin: 0; padding: 0; }
.announcement-widget .widget-body li {
  position: relative;
  padding: 12px 0 12px 18px;
  border-left: 2px solid var(--accent);
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}
.announcement-widget .widget-body li + li { margin-top: 2px; }
.announcement-widget .widget-body li strong { display: block; color: var(--white); font-size: .84rem; margin-bottom: 3px; }

.announcement-empty-note {
  font-size: .85rem;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  border: 1px dashed rgba(255,255,255,.28);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0;
}

/* ================================================
   23. ABOUT PAGE
   ================================================ */
.about-intro { padding: 72px 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4/3;
}
.about-image-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  color: rgba(255,255,255,.2);
}
.about-text h2 { margin-bottom: 16px; color: var(--primary); }
.about-text p { color: var(--text-body); }
.about-info-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.about-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .9rem;
}
.about-info-item i { color: var(--accent); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.about-info-item strong { color: var(--text-dark); }

.groups-section { background: var(--gray-50); padding: 72px 0; }
.groups-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.group-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.group-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.group-name { font-size: .9rem; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.group-desc { font-size: .78rem; color: var(--text-muted); }

/* ================================================
   24. CONTACT PAGE
   ================================================ */
.contact-section { padding: 72px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

.contact-info h3 { font-size: 1.4rem; color: var(--primary); margin-bottom: 24px; }
.contact-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.contact-detail-text h4 { font-size: .88rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.contact-detail-text p, .contact-detail-text a { font-size: .88rem; color: var(--text-body); }
.contact-detail-text a:hover { color: var(--primary); }

.contact-social { display: flex; gap: 10px; margin-top: 24px; }
.contact-social-link {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1rem;
  transition: transform var(--transition);
}
.contact-social-link:hover { transform: scale(1.1); }
.social-fb { background: #1877f2; }
.social-yt { background: #ff0000; }

.contact-form h3 { font-size: 1.4rem; color: var(--primary); margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; color: var(--text-dark); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--gray-50);
  color: var(--text-dark);
  transition: border-color var(--transition), background var(--transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(27,46,94,.08);
}
.form-group textarea { resize: vertical; min-height: 130px; }

.map-section { height: 380px; background: var(--gray-200); overflow: hidden; }
.map-section iframe { width: 100%; height: 100%; border: 0; }

/* ================================================
   25. FOOTER
   ================================================ */
.site-footer {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1a2a5e 100%);
  color: rgba(255,255,255,.75);
}
.footer-main { padding: 56px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 180px;
}
.footer-col h4 {
  font-family: 'Roboto', serif;
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-col p { font-size: .85rem; color: rgba(255,255,255,.65); line-height: 1.7; }

.footer-logo { margin-bottom: 16px; }
.footer-logo .logo-name { color: var(--white); font-size: 1.1rem; }
.footer-logo .logo-subtitle { color: rgba(255,255,255,.5); }
.footer-logo .logo-icon { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }

.footer-mass-group { margin-bottom: 20px; }
.footer-mass-group:last-child { margin-bottom: 0; }

.footer-mass-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .95rem;
}
.footer-mass-row:last-child { border-bottom: none; }
.footer-mass-day { color: rgba(255,255,255,.85); font-weight: 500; flex-shrink: 0; }
.footer-mass-times { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.footer-mass-time {
  background: rgba(255,255,255,.16);
  color: var(--white);
  padding: 4px 13px;
  border-radius: 3px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.footer-col p.footer-mass-subhead {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--primary-dark);
  background: var(--accent-light);
  padding: 4px 11px;
  border-radius: 3px;
  margin: 0 0 10px;
  line-height: 1.4;
}

.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: .83rem;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition), padding-left var(--transition);
}
.footer-links a::before { content: '›'; color: var(--accent-light); }
.footer-links a:hover { color: var(--white); padding-left: 4px; }

.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: .9rem;
  transition: background var(--transition), color var(--transition);
}
.footer-social a:hover { background: var(--accent); color: var(--white); }

.footer-contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: .83rem;
  color: rgba(255,255,255,.65);
}
.footer-contact-item i { color: var(--accent-light); margin-top: 3px; flex-shrink: 0; }
.footer-contact-item a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  text-align: center;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: var(--accent-light); }

/* ================================================
   26. 404 PAGE
   ================================================ */
.not-found-section { padding: 80px 0 96px; text-align: center; }
.not-found-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--accent);
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.not-found-code {
  font-family: 'Roboto', serif;
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--primary);
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.not-found-code span { color: var(--accent); }
.not-found-title { color: var(--primary); margin-bottom: 14px; }
.not-found-text {
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 auto 32px;
  font-size: .95rem;
  line-height: 1.7;
}
.not-found-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ================================================
   27. RESPONSIVE
   ================================================ */
@media (max-width: 1100px) {
  .nav-list { gap: 0; }
  .nav-link { padding: 8px 9px; font-size: .78rem; }
  .logo-subtitle { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .groups-grid { grid-template-columns: repeat(2, 1fr); }
  .mass-bulletin-grid { grid-template-columns: minmax(0, 1.2fr) 280px; gap: 28px; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .latest-posts-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .clergy-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .widgets-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .archive-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .rao-cao-grid { grid-template-columns: 1fr; gap: 28px 0; }
  .rao-cao-divider { height: 1px; width: 100%; margin: 4px 0; }
  .mass-bulletin-grid { grid-template-columns: 1fr; gap: 32px; }
  .mass-bulletin-sidebar { position: static; }

  /* Quick-access buttons: same pill (icon + label) language as desktop, just
     re-anchored from the left edge to a thumb-reachable bottom-right stack —
     not a full-width app-style tab bar. Order/sizing stay in sync with desktop:
     DOM order (Giờ Thánh Lễ, Đăng Ký Online, Tải Biểu Mẫu) is kept as-is
     (flex-direction: column) and align-items stays at the default stretch so
     all three buttons remain the same width as on desktop. */
  .floating-btns {
    left: auto; right: 14px; top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: none;
    gap: 10px;
  }
  .floating-btn {
    max-width: none;
    padding: 6px 16px 6px 6px;
    border-radius: 999px;
    transition: transform .15s ease;
  }
  .floating-btn:hover { transform: none; }
  .floating-btn:active { transform: scale(.95); }
  .floating-btn-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .95rem;
    background: rgba(255,255,255,.16);
  }
  .floating-btn-label {
    font-size: .78rem;
  }
  .floating-btn-accent .floating-btn-icon {
    background: rgba(255,255,255,.22);
  }
  .floating-btn-accent .floating-btn-label { font-weight: 700; }

  .clergy-section,
  .about-intro,
  .groups-section,
  .contact-section,
  .archive-content { padding: 48px 0; }
  .widgets-section { padding: 40px 0; }
  .not-found-section { padding: 56px 0 72px; }
  .section-header { margin-bottom: 32px; }
}

@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .featured-post-content { padding: 18px 18px; }
  .featured-post-badge { margin-bottom: 10px; }
  .featured-post-excerpt { display: none; }
  .latest-post-item { flex-direction: column; align-items: stretch; }
  .latest-post-item-thumb { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
  .hero-slider { height: 460px; }
  .hero-slide-content { padding: 0 20px; }
  .hero-title { max-width: 100%; }
  .clergy-grid { grid-template-columns: 1fr; max-width: 320px; }
  .mass-page { padding: 56px 0 64px; }
  .mass-page-home { padding-top: 20px; }
  .mass-lookup-card { padding: 28px 22px; }
  .mass-lookup-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mass-lookup-times { justify-content: flex-start; }
  .announcement-widget .widget-header { padding: 24px 22px 16px; font-size: 1.2rem; }
  .announcement-widget .widget-body { padding: 18px 22px 26px; }
  .footer-grid { grid-template-columns: 1fr; }
  .groups-grid { grid-template-columns: repeat(2, 1fr); }
  .post-nav { grid-template-columns: 1fr; }
  .page-hero { height: 200px; }
  .hero-prev, .hero-next { display: none; }
  .footer-main { padding: 40px 0 28px; }
  .about-intro, .groups-section, .contact-section { padding: 40px 0; }
  .mass-lookup-note { margin-top: 24px; }
}

@media (max-width: 480px) {
  .header-content { gap: 12px; }
  .header-actions { gap: 6px; }
  .logo-icon { width: 36px; height: 36px; font-size: 1.05rem; }
  .logo-name { font-size: .92rem; }
}

@media (max-width: 400px) {
  .groups-grid { grid-template-columns: 1fr; }
}

/* ================================================
   28. POST HERO (banner cho single post / page.php)
   ================================================ */
.post-hero {
  min-height: 460px;
  background: linear-gradient(150deg, var(--primary-dark) 0%, var(--primary) 70%, var(--primary-light) 100%);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}
.post-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  z-index: 0;
}
.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,29,60,.97) 0%, rgba(17,29,60,.80) 35%, rgba(17,29,60,.30) 70%, rgba(17,29,60,.08) 100%);
  z-index: 0;
}
.post-hero .container { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 48px; }
.post-hero-breadcrumb { font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.post-hero-breadcrumb a { color: rgba(255,255,255,.5); }
.post-hero-breadcrumb a:hover { color: var(--accent-light); }
.post-hero-breadcrumb i { font-size: .65rem; }
.post-hero-category { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.post-hero-category span {
  background: var(--accent);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 99px;
}
.post-hero h1 {
  font-family: 'Roboto', serif;
  font-size: clamp(1.75rem, 4.5vw, 2.9rem);
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
  line-height: 1.28;
  margin-bottom: 22px;
  max-width: 840px;
}
.post-hero-meta { display: flex; align-items: center; gap: 20px; font-size: .81rem; color: rgba(255,255,255,.68); flex-wrap: wrap; }
.post-hero-meta i { color: var(--accent-light); margin-right: 4px; }
.post-hero-meta-sep { width: 1px; height: 13px; background: rgba(255,255,255,.22); }

.single-post-wrapper { max-width: 760px; margin: 0 auto; padding: 56px 24px 48px; }

.post-content figure { margin: 2rem 0; }
.post-content figcaption { font-size: .78rem; color: var(--text-muted); text-align: center; margin-top: 8px; font-style: italic; }
.post-content .post-img-placeholder { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

@media (max-width: 900px) {
  .post-hero { min-height: 360px; }
}
@media (max-width: 600px) {
  .post-hero { min-height: 280px; }
  .post-hero .container { padding-top: 32px; padding-bottom: 36px; }
  .single-post-wrapper { padding: 36px 16px 32px; }
}

/* ================================================
   29. PAGINATION & SEARCH EMPTY STATE
   (index.php: fallback archive/search/404 listing)
   ================================================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; }
.pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-body);
  background: var(--white);
  transition: all var(--transition);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current { background: var(--primary); color: var(--white); border-color: var(--primary); }
.pagination .page-numbers.dots { border: none; background: none; }

mark { background: rgba(201,162,39,.22); color: inherit; padding: 0 2px; border-radius: 2px; }

.search-empty {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 64px 24px;
}
.search-empty i { font-size: 2.4rem; color: var(--gray-300); margin-bottom: 18px; }
.search-empty h2 { font-family: 'Roboto', serif; font-size: 1.4rem; color: var(--text-dark); margin-bottom: 10px; }
.search-empty p { color: var(--text-muted); font-size: .95rem; margin-bottom: 24px; }
.search-empty .search-summary-form { margin: 0 auto; }

/* Archive / search content wrapper (no sidebar) */
.archive-content { padding: 56px 0; }

/* Search results summary bar */
.search-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 18px 24px;
  margin-bottom: 32px;
}
.search-summary-text { font-size: .95rem; color: var(--text-body); }
.search-summary-text i { color: var(--accent); margin-right: 6px; }
.search-summary-text strong { color: var(--text-dark); }
.search-summary-term { color: var(--primary); font-weight: 600; }
.search-summary-form { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); flex: 0 0 320px; max-width: 100%; }
.search-summary-form .search-input { flex: 1; padding: 10px 16px; border: none; outline: none; font-size: .9rem; color: var(--text-dark); }
.search-summary-form .search-submit { padding: 0 18px; background: var(--accent); color: var(--white); font-size: .95rem; transition: background var(--transition); }
.search-summary-form .search-submit:hover { background: var(--accent-dark); }

/* Result type tag variants (reuse .post-card-tag base styling) */
.post-card-tag.tag-page { background: var(--primary); }
.post-card-tag.tag-lit { background: var(--accent-dark); }

/* ================================================
   18. DOWNLOAD LIST (Tải biểu mẫu)
   ================================================ */
.download-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.download-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.download-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.download-item-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.download-item-body { flex: 1; min-width: 0; }
.download-item-name {
  font-family: 'Roboto', serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.download-item-desc { font-size: .86rem; color: var(--text-body); margin-bottom: 4px; }
.download-item-meta { font-size: .76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.download-item .btn { flex-shrink: 0; }

.download-empty {
  text-align: center;
  background: var(--gray-50);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 64px 24px;
}
.download-empty i { font-size: 2.4rem; color: var(--gray-300); margin-bottom: 18px; }
.download-empty p { color: var(--text-muted); font-size: .95rem; }

@media (max-width: 640px) {
  .download-item { flex-wrap: wrap; }
  .download-item .btn { width: 100%; justify-content: center; }
}