.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cùng nền be + lớp gradient như trang bảo trì (maintenance.php) */
  background:
    radial-gradient(ellipse 85% 55% at 50% -15%, rgba(255, 255, 255, 0.45), transparent 52%),
    radial-gradient(ellipse 70% 45% at 100% 100%, rgba(196, 168, 130, 0.22), transparent 48%),
    radial-gradient(ellipse 55% 40% at 0% 85%, rgba(255, 250, 240, 0.5), transparent 42%),
    #ead9bf;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.intro-logo {
  width: auto;
  height: 130px;
  opacity: 0;
  transform: scale(0.85) translateY(12px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .intro-logo { height: 208px; }
}
.intro-tagline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.intro-word {
  color: rgba(74, 69, 67, 0.72);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.intro-dot {
  color: rgba(154, 123, 82, 0.75);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.intro-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 168, 130, 0.55), transparent);
  margin-top: 1.75rem;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase animations */
.intro-overlay.phase-logo .intro-logo {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.intro-overlay.phase-tagline .intro-word {
  opacity: 1;
  transform: translateY(0);
}
.intro-overlay.phase-tagline .intro-word:nth-child(1) { transition-delay: 0s; }
.intro-overlay.phase-tagline .intro-dot:nth-child(2) { transition-delay: 0.12s; }
.intro-overlay.phase-tagline .intro-word:nth-child(3) { transition-delay: 0.2s; }
.intro-overlay.phase-tagline .intro-dot:nth-child(4) { transition-delay: 0.32s; }
.intro-overlay.phase-tagline .intro-word:nth-child(5) { transition-delay: 0.4s; }
.intro-overlay.phase-tagline .intro-dot {
  opacity: 1;
}
.intro-overlay.phase-line .intro-line {
  width: 120px;
}
.intro-overlay.phase-exit {
  opacity: 0;
  visibility: hidden;
}

:root {
  /* Site-wide font stack
     Heading + Quote: Brygada 1918 (transitional serif) — editorial healing feel
     Body / UI / Button / Nav: Plus Jakarta Sans (geometric sans) — sharp, modern
     Fallback chỉ giữ system font / generic để KHÔNG load font khác. */
  --font-serif: "Brygada 1918", Georgia, "Times New Roman", serif;
  --font-sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ─────────────────────────────────────────────────────────────────
     FLUID TYPE SCALE — calm "healing/wellness" calibration
     Tham chiếu: Calm.com (16px body, 28-32px h2), Headspace blog
     (16-17px body, 28-36px h1), The Newsette, Goop. Mục tiêu: dịu mắt,
     không phô, đậm chất chậm-rãi. Viewport ~360px → ~1280px.
     ───────────────────────────────────────────────────────────────── */
  --fs-xxs:     clamp(0.6875rem, 0.66rem + 0.07vw, 0.75rem);    /* 11 → 12 */
  --fs-xs:      clamp(0.75rem,   0.72rem + 0.07vw, 0.8125rem);  /* 12 → 13 */
  --fs-sm:      clamp(0.8125rem, 0.78rem + 0.13vw, 0.875rem);   /* 13 → 14 */
  --fs-md:      clamp(0.875rem,  0.83rem + 0.18vw, 0.9375rem);  /* 14 → 15 */
  --fs-base:    clamp(0.9375rem, 0.9rem  + 0.18vw, 1rem);       /* 15 → 16 */
  --fs-body:    clamp(0.9375rem, 0.9rem  + 0.18vw, 1rem);       /* 15 → 16 — long-form */
  --fs-lead:    clamp(1rem,      0.97rem + 0.18vw, 1.0625rem);  /* 16 → 17 */
  --fs-h5:      clamp(1rem,      0.97rem + 0.18vw, 1.0625rem);   /* 16 → 17 */
  --fs-h4:      clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem);  /* 17 → 19 */
  --fs-h3:      clamp(1.125rem,  1.06rem + 0.28vw, 1.3125rem);  /* 18 → 21 */
  --fs-h2:      clamp(1.3125rem, 1.2rem  + 0.42vw, 1.5625rem);  /* 21 → 25 */
  --fs-h1:      clamp(1.5rem,    1.34rem + 0.62vw, 1.875rem);   /* 24 → 30 */
  --fs-display: clamp(1.75rem,   1.48rem + 0.95vw, 2.25rem);    /* 28 → 36 */

  /* Line heights — calm reading */
  --lh-tight:   1.22;
  --lh-snug:    1.4;
  --lh-base:    1.62;
  --lh-relaxed: 1.72;
  --lh-loose:   1.78;
  --lh-prose:   1.74;   /* long-form body text: about story, post article */

  /* Paragraph gap — golden standard: ~0.75× line-height */
  --p-gap: 1.35em;
  /* Article/post: tight gap between Enter line-breaks (each <p> from TinyMCE) */
  --p-gap-article: 0.55em;
  /* Visual break when author inserts blank line (empty <p>) */
  --p-gap-section: 0.95em;

  /* Section vertical padding — responsive clamp */
  --sec-pad-lg: clamp(4rem, 7vw, 5.5rem);
  --sec-pad-md: clamp(3rem, 5vw, 4.5rem);

  /* Letter-spacing chuẩn caps/eyebrow */
  --ls-eyebrow: 0.16em;

  /* Page background — cream nhẹ, dịu mắt thay vì #fff lạnh */
  --bg: #F7F4EE;
  --bg-warm: #f0ebe2;
  --bg-sage: #ecebe6;
  /* Text colors — đủ tương phản, không nhạt như #999 */
  --text: #3D3D3D;
  --heading: #2A2A2A;
  --meta: #4B4B4B;
  /* Accent (sage chính của site) */
  --accent: #84906d;
  --accent-soft: #c8d2b6;
  --sage: #84906d;
  --sage-light: #dce5d9;
  --lavender: #cdc5d9;
  --lavender-light: #ebe7f0;
  --blush: #dbb8b0;
  --blush-light: #f2e4e0;
  --border: #e2dcd2;
}

.announcement-bar {
  background: var(--accent-soft);
  color: var(--heading);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);             /* 12 → 13px */
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  text-align: center;
}
.announcement-sep {
  opacity: 0.4;
}
.announcement-link {
  color: var(--heading);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.announcement-link:hover {
  opacity: 1;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-base);          /* 15 → 16px (calm scale) */
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--heading);
}

.site-header {
  padding: 1.25rem 0;
  background: var(--bg);
  position: relative;
  z-index: 30;
}
.site-header.is-nav-open {
  z-index: 10001;
}
@media (min-width: 768px) {
  .site-header { padding: 1.5rem 0; }
}

/* Hamburger toggle */
.site-header__tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.site-header__icon-btn {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--meta);
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.site-header__icon-btn:hover {
  color: var(--heading);
  background: rgba(132, 144, 109, 0.08);
}
.site-header.is-nav-open {
  background: #f0ebdd;
  border-bottom: 1px solid rgba(74, 68, 58, 0.1);
}
.site-header.is-nav-open .site-header__icon-btn {
  color: var(--heading);
}
.nav-toggle {
  position: relative;
  z-index: 2;
}
.nav-toggle__icon {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.82) rotate(-90deg);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.65,.3,1);
  pointer-events: none;
}
.nav-toggle__icon--menu {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.site-header.is-nav-open .nav-toggle__icon--menu {
  opacity: 0;
  transform: scale(0.82) rotate(90deg);
}
.site-header.is-nav-open .nav-toggle__icon--close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.nav-toggle__svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.site-header-logo {
  height: 2.75rem;
  width: auto;
}
@media (min-width: 768px) {
  .site-header-logo { height: 3.35rem; }
}

.site-footer-logo {
  height: 3.2rem;
  width: auto;
}
@media (min-width: 768px) {
  .site-footer-logo { height: 3.75rem; }
}

.brand-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
  object-fit: contain;
  transform: scale(2.35);
  transform-origin: center;
}
.brand-icon--lg {
  width: 2.2rem;
  height: 2.2rem;
  transform: scale(2.25);
}
.brand-icon--side {
  width: 1.2rem;
  height: 1.2rem;
  transform: scale(2.2);
}
.brand-icon--newsletter {
  width: 2.2rem;
  height: 2.2rem;
  filter: brightness(0);
  transform: scale(2.6);
}
.brand-icon--light {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* Sidebar journal — icon vừa, không scale/hiệu ứng */
.brand-icon--widget-cat {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  transform: none;
  filter: brightness(0) saturate(100%) invert(57%) sepia(11%)
          saturate(744%) hue-rotate(46deg) brightness(91%) contrast(86%);
}

.hp-newsletter-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

body.nbt-modal-open,
body.mobile-menu-open {
  overflow: hidden;
}
.nbt-thankyou {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.nbt-thankyou.is-open {
  opacity: 1;
  visibility: visible;
}
.nbt-thankyou__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(61, 56, 54, 0.36);
  backdrop-filter: blur(8px);
}
.nbt-thankyou__dialog {
  position: relative;
  width: min(100%, 28rem);
  padding: 2.25rem 1.75rem 2rem;
  border: 1px solid rgba(196, 168, 130, 0.28);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    var(--bg-warm);
  box-shadow: 0 30px 80px -42px rgba(44, 40, 38, 0.62);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nbt-thankyou.is-open .nbt-thankyou__dialog {
  transform: translateY(0) scale(1);
}
.nbt-thankyou__close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--meta);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.nbt-thankyou__close:hover {
  background: #fff;
  color: var(--heading);
}
.nbt-thankyou__icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(196, 168, 130, 0.22);
}
.nbt-thankyou__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
}
.nbt-thankyou__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 6vw, 2.25rem);
  font-weight: 500;
  color: var(--heading);
}
.nbt-thankyou__message {
  max-width: 20rem;
  margin: 0 auto;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding-bottom: 2px;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-link:hover {
  color: var(--heading);
}
.nav-link:hover::after {
  width: 100%;
}
.nav-link.active {
  color: var(--heading);
}
.nav-link.active::after {
  width: 100%;
}
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* ── Legacy dropdown (kept for fallback) ─── */
.nav-item--has-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  height: 1rem;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  min-width: 11rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: rgba(250, 247, 241, 0.96);
  box-shadow: 0 18px 40px -24px rgba(44, 40, 38, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 60;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dropdown-link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-dropdown-link:hover,
.nav-dropdown-link.active {
  background: var(--bg-warm);
  color: var(--heading);
  transform: translateX(2px);
}

/* ── Mega-menu (3-level Journal tree) ─── */
.nav-item--has-mega {
  position: relative;
  display: inline-flex;   /* align baseline with sibling nav-links */
  align-items: center;
}
.nav-item--has-mega::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  height: 1rem;
}
.nav-item--has-mega > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.5;
}
.nav-item--has-mega:hover .nav-chevron,
.nav-item--has-mega:focus-within .nav-chevron {
  transform: rotate(180deg);
}
.nav-mega {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translate(-50%, 10px);
  width: 680px;       /* wide enough so no text wraps */
  padding: 1.4rem 1.25rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  background: rgba(250, 247, 241, 0.98);
  box-shadow: 0 24px 48px -20px rgba(44, 40, 38, 0.38), 0 2px 8px -2px rgba(44,40,38,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 60;
}
.nav-item--has-mega:hover .nav-mega,
.nav-item--has-mega:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-mega__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.5rem;
}
.nav-mega__col {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.nav-mega__pillar {
  display: block;
  padding: 0.3rem 0.7rem 0.55rem;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
  transition: color 0.15s ease;
}
.nav-mega__pillar:hover,
.nav-mega__pillar.active {
  color: var(--accent);
}
.nav-mega__link {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;   /* never wrap to second line */
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  line-height: 1.35;
}
.nav-mega__link:hover,
.nav-mega__link.active {
  background: rgba(132, 144, 109, 0.1);
  color: var(--heading);
  padding-left: 0.85rem;
}
.nav-mega__link--parent {
  font-weight: 500;
}
.nav-mega__link--child {
  padding-left: 1.4rem;
  font-size: 0.79rem;
  color: var(--meta);
}
.nav-mega__link--child:hover,
.nav-mega__link--child.active {
  padding-left: 1.6rem;
  background: rgba(132, 144, 109, 0.08);
  color: var(--heading);
}
.nav-mega__indent {
  margin-right: 0.25rem;
  font-size: 0.65rem;
  opacity: 0.45;
  vertical-align: middle;
}
.nav-mega__footer {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.nav-mega__all {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--meta);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-mega__all:hover {
  color: var(--accent);
}

/* ── Mobile nav accordion ─── */
.nav-mobile-group {
  display: flex;
  flex-direction: column;
}
.nav-mobile-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.3rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text);
  text-align: left;
}
.nav-mobile-group__toggle:hover {
  color: var(--heading);
}
.nav-mobile-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-mobile-group__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.35rem;
}
.nav-mobile-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: -0.35rem 0 0.25rem 0.75rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border);
}
.nav-link-sub {
  font-size: 0.82rem;
  color: var(--meta);
}
.nav-link-pillar {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--heading);
  padding: 0.25rem 0 0.15rem 0.5rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.nav-link-l2 {
  padding-left: 1rem;
  font-size: 0.81rem;
}
.nav-link-l3 {
  padding-left: 1.6rem;
  font-size: 0.78rem;
  color: var(--meta);
}

/* ── Mobile menu — full-screen overlay (below header) ─── */
.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--mobile-header-height, 4.35rem);
  z-index: 9990;
  display: none;
  pointer-events: none;
  visibility: hidden;
}
@media (max-width: 767px) {
  .mobile-menu.is-open {
    display: block;
  }
}
.mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: #f0ebdd;
  opacity: 0;
  transition: opacity .38s cubic-bezier(.22, 1, .36, 1);
}
.mobile-menu.is-open .mobile-menu__backdrop {
  opacity: 1;
}
.mobile-menu__panel {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding:
    1.35rem clamp(1.25rem, 5vw, 1.75rem)
    calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .4s cubic-bezier(.22, 1, .36, 1),
    transform .4s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
.mobile-menu.is-open .mobile-menu__panel {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu__item {
  border-bottom: 1px solid rgba(74, 68, 58, 0.1);
}
.mobile-menu__item--journal {
  border-bottom: 0;
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0.15rem;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--heading);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}
.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  color: var(--accent);
}
.mobile-menu__link.is-active {
  font-weight: 600;
}
.mobile-menu__link--toggle {
  width: 100%;
}
.mobile-menu__item.is-expanded .mobile-menu__link--toggle {
  color: var(--accent);
}
.mobile-menu__chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--meta);
  transition: transform .25s ease, color .2s ease;
}
.mobile-menu__item.is-expanded .mobile-menu__chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.mobile-menu__sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .28s ease, padding .28s ease;
  padding: 0 0 0 0.15rem;
}
.mobile-menu__sub.is-open {
  max-height: min(62vh, 520px);
  opacity: 1;
  padding-bottom: 0.85rem;
  overflow-y: auto;
}
.mobile-menu__sublink {
  display: block;
  padding: 0.48rem 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--meta);
  text-decoration: none;
  transition: color .2s ease;
}
.mobile-menu__sublink:hover,
.mobile-menu__sublink.is-active {
  color: var(--heading);
}
.mobile-menu__sublink--all {
  font-weight: 500;
  color: var(--heading);
  margin-bottom: 0.35rem;
}
.mobile-menu__pillar {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(74, 68, 58, 0.08);
}
.mobile-menu__pillar:first-of-type {
  margin-top: 0.15rem;
  padding-top: 0;
  border-top: 0;
}
.mobile-menu__pillar-label {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(75, 75, 75, 0.72);
}
.mobile-menu__sublink--pillar {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--heading);
}
.mobile-menu__sublink--child {
  padding-left: 0.85rem;
  font-size: 0.8125rem;
  color: rgba(75, 75, 75, 0.88);
}
.mobile-menu__footer {
  flex-shrink: 0;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(74, 68, 58, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.mobile-menu__tagline {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--meta);
  font-weight: 500;
}
.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  padding: 0.78rem 1.35rem;
  border-radius: 999px;
  background: var(--heading);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background .25s ease, transform .2s ease;
}
.mobile-menu__cta:hover,
.mobile-menu__cta.is-active {
  background: #3d3834;
  color: #fff;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__backdrop,
  .mobile-menu__panel,
  .mobile-menu__chevron,
  .mobile-menu__cta {
    transition: none;
  }
  .mobile-menu__panel {
    opacity: 1;
    transform: none;
  }
  .mobile-menu__cta:hover {
    transform: none;
  }
}

.journal-category-strip {
  margin-top: -1rem;
}
.journal-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .journal-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.journal-category-card {
  display: flex;
  flex-direction: column;
  min-height: 8.5rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(250, 247, 241, 0.72);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 18px 38px -32px rgba(44, 40, 38, 0.32);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.journal-category-card:hover,
.journal-category-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 22px 44px -32px rgba(44, 40, 38, 0.48);
  outline: none;
}
.journal-category-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--heading);
  margin-bottom: 0.45rem;
}
.journal-category-desc {
  color: var(--meta);
  font-size: 0.78rem;
  line-height: 1.65;
}
.journal-category-meta {
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-link-cta {
  background: var(--heading);
  color: #fff !important;
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.3s ease, transform 0.2s ease;
}
.nav-link-cta::after {
  display: none;
}
.nav-link-cta:hover {
  background: var(--accent);
  color: #fff !important;
  transform: translateY(-1px);
}

.side-nav {
  display: none !important;
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
@media (min-width: 768px) {
  .side-nav {
    display: flex !important;
  }
}
.side-nav.is-visible {
  opacity: 1;
  visibility: visible;
}
.side-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--meta);
  transition: color 0.25s ease, background 0.25s ease;
}
.side-nav-item:hover {
  color: var(--heading);
  background: var(--bg-warm);
}
.side-nav-accent {
  color: var(--accent) !important;
}
.side-nav-accent:hover {
  background: var(--accent-soft);
  color: var(--heading) !important;
}
.side-nav-divider {
  width: 16px;
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
}
/* Tooltip on hover */
.side-nav-item::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--heading);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.3rem 0.65rem;
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.side-nav-item:hover::before {
  opacity: 1;
  visibility: visible;
}

.meta-text {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);             /* 12 → 13px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
}

/* Footer nav links - larger for readability */
.footer-nav a {
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
}

/* Footer contact strip (email/phone/social, render khi có giá trị trong settings) */
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0 auto 1.75rem;
  max-width: 32rem;
  font-size: 0.8125rem;
  color: var(--meta);
}
.footer-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}
.footer-contact__item:hover { color: var(--text); }
.footer-contact__item.footer-contact__icon-only {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  justify-content: center;
  gap: 0;
}
.footer-contact__item.footer-contact__icon-only:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hp-hero {
  position: relative;
  overflow: hidden;
  min-height: 65vh;
}
@media (min-width: 768px) { .hp-hero { min-height: 80vh; } }
.hp-hero-img {
  position: absolute;
  inset: 0;
}
.hp-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-hero-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: inherit;
  padding-bottom: 3rem;
  background: linear-gradient(0deg, rgba(26,23,20,0.7) 0%, rgba(26,23,20,0.2) 50%, transparent 100%);
}
@media (min-width: 768px) { .hp-hero-overlay { padding-bottom: 5rem; } }
.hp-hero-text {
  max-width: 600px;
}
.hp-hero-meta {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
.hp-hero-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .hp-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .hp-hero-title { font-size: 2.5rem; } }
.hp-hero-sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 440px;
}
.hp-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 2rem;
  transition: background 0.3s ease, transform 0.2s ease;
}
.hp-btn-light:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.hp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 2rem;
  transition: color 0.3s ease;
}
.hp-btn-ghost:hover { color: #fff; }

.hp-marquee {
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hp-marquee-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: marqueeScroll 30s linear infinite;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--meta);
}
.hp-marquee-dot {
  color: var(--accent);
  font-style: normal;
  font-size: 0.6rem;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hp-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .hp-bento {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
.hp-bento-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  display: block;
  min-height: 240px;
}
@media (min-width: 768px) {
  .hp-bento-large {
    grid-row: span 2;
    min-height: 500px;
  }
}
.hp-bento-img {
  position: absolute;
  inset: 0;
}
.hp-bento-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-bento-item:hover .hp-bento-img img {
  transform: scale(1.04);
}
.hp-bento-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(0deg, rgba(26,23,20,0.75) 0%, transparent 100%);
  z-index: 1;
}
.hp-bento-cat {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.35rem;
}
.hp-bento-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  transition: color 0.3s ease;
}
.hp-bento-large .hp-bento-title {
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  .hp-bento-large .hp-bento-title { font-size: 1.5rem; }
  .hp-bento-large .hp-bento-info { padding: 2.5rem; }
}
.hp-bento-num {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  z-index: 1;
}

.hp-pillar {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  display: block;
  aspect-ratio: 3/4;
}
@media (min-width: 768px) {
  .hp-pillar { aspect-ratio: 2/3; }
}
.hp-pillar-img {
  position: absolute;
  inset: 0;
}
.hp-pillar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
  filter: brightness(0.6);
}
.hp-pillar:hover .hp-pillar-img img {
  transform: scale(1.06);
  filter: brightness(0.4);
}
.hp-pillar-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
}
@media (min-width: 768px) {
  .hp-pillar-content { padding: 2rem; }
}
.hp-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}
.hp-pillar:hover .hp-pillar-icon {
  transform: scale(1.1);
}
.hp-pillar-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  margin-top: 1rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hp-pillar:hover .hp-pillar-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- Home: Live · Grow · Heal — ba cột đồng thời --- */
.hp-pillar-folders {
  position: relative;
  --pillars-ink: #2c2826;
  --pillars-ink-soft: #5c534c;
}

.hp-pillar-folders__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% -30%, rgba(196, 168, 130, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(184, 197, 180, 0.12), transparent 45%),
    radial-gradient(ellipse 60% 40% at 0% 90%, rgba(205, 197, 217, 0.1), transparent 42%),
    var(--bg-warm);
}

.hp-folder-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--meta);
  margin: 0 0 0.85rem;
}

.hp-folder-headrule {
  width: 2.5rem;
  height: 1px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.65;
}

.hp-folder-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 500;
  color: var(--heading);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 1.125rem;
}

.hp-folder-desc {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--pillars-ink-soft);
  max-width: 36rem;
  margin: 0 auto;
}

.hp-pillars-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
}

.hp-pillars-trio__item {
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
}

@media (min-width: 900px) {
  .hp-pillars-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
    align-items: stretch;
  }
}

.hp-pillar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-radius: clamp(1.15rem, 3vw, 1.65rem);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(168deg, #fdfcfa 0%, #f4ece3 48%, #ece4da 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.7) inset,
    0 28px 56px -32px rgba(44, 40, 38, 0.48),
    0 0 0 1px rgba(61, 56, 54, 0.07);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
    box-shadow 0.45s ease;
}

.hp-pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.15rem;
  right: 1.15rem;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--pillar-accent), transparent);
  opacity: 0.92;
  z-index: 2;
  pointer-events: none;
}

.hp-pillar-card:hover,
.hp-pillar-card:focus-visible {
  transform: translateY(-8px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.7) inset,
    0 40px 72px -36px rgba(44, 40, 38, 0.5),
    0 0 0 1px rgba(61, 56, 54, 0.08),
    0 0 0 3px rgba(196, 168, 130, 0.18);
}

.hp-pillar-card:focus-visible {
  outline: none;
}

.hp-pillar-card:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--heading);
  pointer-events: none;
  z-index: 4;
}

.hp-pillar-card__media {
  position: relative;
  width: 100%;
  height: clamp(20rem, 82vw, 22rem);
  overflow: hidden;
  flex-shrink: 0;
  isolation: isolate;
}

@media (min-width: 900px) {
  .hp-pillar-card__media {
    height: auto;
    aspect-ratio: 3 / 3.45;
  }
}

.hp-pillar-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.002);
  -webkit-transform: translateZ(0) scale(1.002);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-pillar-card:hover .hp-pillar-card__media img,
.hp-pillar-card:focus-visible .hp-pillar-card__media img {
  transform: scale(1.06);
  -webkit-transform: translateZ(0) scale(1.06);
}

.hp-pillar-card__media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(44, 40, 38, 0) 40%,
    rgba(44, 40, 38, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hp-pillar-card__body {
  position: relative;
  padding: 1.35rem 1.35rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (min-width: 900px) {
  .hp-pillar-card__body {
    padding: 1.5rem 1.4rem 1.65rem;
  }
}

.hp-pillar-card__index {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--heading);
  opacity: 0.09;
  user-select: none;
  pointer-events: none;
}

.hp-pillar-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  background: transparent;
  border: 0;
  color: #111;
  box-shadow: none;
}

.hp-pillar-card__icon-svg {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  filter: brightness(0);
  transform: scale(2.55);
  transform-origin: center;
}

.hp-pillar-card__axis {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 0.95rem;
  padding-right: 2.5rem;
  line-height: 1.45;
}

.hp-pillar-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 500;
  color: var(--heading);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 0.65rem;
}

.hp-pillar-card__excerpt {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.68;
  color: var(--pillars-ink-soft);
  margin: 0 0 1.25rem;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.hp-pillar-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #faf8f5;
  background: var(--pillars-ink);
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px -12px rgba(44, 40, 38, 0.55);
  pointer-events: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, gap 0.3s ease;
}

.hp-pillar-card__cta-ico {
  width: 14px;
  height: 14px;
  stroke-width: 1.85;
  transition: transform 0.3s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.hp-pillar-card:hover .hp-pillar-card__cta,
.hp-pillar-card:focus-visible .hp-pillar-card__cta {
  background: var(--accent);
  color: var(--pillars-ink);
  transform: translateY(-1px);
  gap: 0.55rem;
}

.hp-pillar-card:hover .hp-pillar-card__cta-ico,
.hp-pillar-card:focus-visible .hp-pillar-card__cta-ico {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .hp-pillar-card,
  .hp-pillar-card__media img,
  .hp-pillar-card__cta,
  .hp-pillar-card__cta-ico {
    transition: none;
  }

  .hp-pillar-card:hover,
  .hp-pillar-card:focus-visible {
    transform: none;
  }
}

.hp-quote {
  background: var(--bg-warm);
}

.hp-cta-banner {
  position: relative;
  overflow: hidden;
}
.hp-cta-bg {
  position: absolute;
  inset: 0;
}
.hp-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) saturate(0.7);
}
.hp-cta-content {
  position: relative;
  z-index: 1;
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .hp-cta-content { padding: 6rem 0; }
}

.pillar-col {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pillar-col:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.pillar-col-img {
  overflow: hidden;
  aspect-ratio: 3/4;
}
.pillar-col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.pillar-col:hover .pillar-col-img img {
  transform: scale(1.05);
}
.pillar-col-body {
  padding: 1.5rem 1.5rem 1.75rem;
}
.pillar-col-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.card-hover {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-2px);
}

.masonry { column-gap: 1.75rem; }
.masonry-item {
  break-inside: avoid;
  margin-bottom: 2.5rem;
}
.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.5s ease;
}
.masonry-item:hover img {
  transform: scale(1.02);
  filter: brightness(1.04);
}

.healing-band {
  position: relative;
  overflow: hidden;
}
.healing-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.healing-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) saturate(0.7);
  opacity: 0.18;
  transform: scale(1.08);
}
.healing-band-content {
  position: relative;
  z-index: 1;
}

.deco-wave {
  display: block;
  width: 100%;
  height: auto;
  color: var(--bg);
}
.deco-dots {
  position: absolute;
  opacity: 0.06;
  pointer-events: none;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--blush));
  z-index: 100;
  transition: width 0.05s linear;
}

:is(.post-content, .article-content) {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text);
  text-align: left;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  letter-spacing: 0.002em;
}
:is(.post-content, .article-content) p {
  margin: 0 0 var(--p-gap-article);
  color: var(--text);
}
:is(.post-content, .article-content) p:last-child { margin-bottom: 0; }

:is(.post-content, .article-content) p.nbt-para-break,
:is(.post-content, .article-content) p:empty,
:is(.post-content, .article-content) p:has(> br:only-child) {
  display: block;
  height: 0;
  margin: 0 0 var(--p-gap-section);
  padding: 0;
  overflow: hidden;
  line-height: 0;
}
:is(.post-content, .article-content) p:has(> br:only-child) > br {
  display: none;
}

:is(.post-content, .article-content) :is(h2, h3) {
  position: relative;
  font-family: var(--font-serif);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 1.85em 0 0.62em;
  padding-left: 1rem;
}
:is(.post-content, .article-content) h2 {
  font-size: var(--fs-h2);
}
:is(.post-content, .article-content) h3 {
  font-size: var(--fs-h3);
  margin-top: 1.55em;
}
:is(.post-content, .article-content) h2::before,
:is(.post-content, .article-content) h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #9aa686, #84906d);
  box-shadow: 0 0 0 4px rgba(132, 144, 109, 0.08);
}
:is(.post-content, .article-content) h3::before {
  width: 0.3rem;
  height: 0.3rem;
  opacity: 0.9;
}
:is(.post-content, .article-content) :is(h2, h3):first-child { margin-top: 0; }

:is(.post-content, .article-content) a {
  color: #6f7958;
  text-decoration-color: rgba(111, 121, 88, 0.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
:is(.post-content, .article-content) a:hover {
  color: #596246;
  text-decoration-color: rgba(89, 98, 70, 0.66);
}
:is(.post-content, .article-content) :is(strong, b) {
  font-weight: 600;
  color: var(--heading);
}

:is(.post-content, .article-content) ul,
:is(.post-content, .article-content) ol {
  margin: 1.05em 0 1.3em;
  padding: 0;
}
:is(.post-content, .article-content) ul {
  list-style: none;
}
:is(.post-content, .article-content) ul > li {
  position: relative;
  padding-left: 1.42rem;
}
:is(.post-content, .article-content) ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #84906d;
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.1);
}
:is(.post-content, .article-content) ol {
  list-style: none;
  counter-reset: nbt-ol;
}
:is(.post-content, .article-content) ol > li {
  counter-increment: nbt-ol;
  position: relative;
  padding-left: 1.8rem;
}
:is(.post-content, .article-content) ol > li::before {
  content: counter(nbt-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.86em;
  line-height: 1.8;
  font-weight: 600;
  color: #6f7958;
}
:is(.post-content, .article-content) li {
  margin-bottom: 0.56em;
}
:is(.post-content, .article-content) li > :is(ul, ol) {
  margin-top: 0.48em;
}

:is(.post-content, .article-content) blockquote {
  margin: 1.7em 0;
  padding: 1.3rem 1.5rem 1.3rem 1.75rem;
  border-radius: 20px;
  border: 1px solid rgba(132, 144, 109, 0.18);
  background: linear-gradient(135deg, #f6f2ea, #f1eee4 55%, #ecf0e7);
  color: #4a4a45;
  font-style: italic;
  box-shadow: 0 10px 22px rgba(52, 46, 35, 0.05);
  position: relative;
}
:is(.post-content, .article-content) blockquote::before {
  content: "“";
  position: absolute;
  left: 0.82rem;
  top: 0.42rem;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(132, 144, 109, 0.55);
}
:is(.post-content, .article-content) blockquote > :first-child {
  margin-top: 0;
}
:is(.post-content, .article-content) blockquote > :last-child {
  margin-bottom: 0;
}

:is(.post-content, .article-content) figure {
  margin: 1.65em 0;
}
:is(.post-content, .article-content) img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(43, 38, 28, 0.08);
}
:is(.post-content, .article-content) figure img {
  margin: 0;
}
:is(.post-content, .article-content) figcaption {
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--meta, #4b4b4b);
  margin-top: 0.68rem;
}

/* Editorial image block system (single post renderer) */
.article-content .nbt-image,
.article-content figure.nbt-image,
.article-content figure.image.nbt-image {
  display: block;
  max-width: 100%;
  margin: 32px auto;
}
.article-content .nbt-image img,
.article-content figure.nbt-image > img,
.article-content figure.image.nbt-image > img,
.article-content img.nbt-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(43, 38, 28, 0.07);
}
.article-content .nbt-image__caption,
.article-content figure.nbt-image figcaption,
.article-content figure.image.nbt-image figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--meta, #4b4b4b);
  text-align: center;
}

/* Size variants */
.article-content .nbt-image--small,
.article-content figure.nbt-image--small,
.article-content img.nbt-image--small { max-width: 360px; }
.article-content .nbt-image--medium,
.article-content figure.nbt-image--medium,
.article-content img.nbt-image--medium { max-width: 520px; }
.article-content .nbt-image--large,
.article-content figure.nbt-image--large,
.article-content .nbt-image--full,
.article-content figure.nbt-image--full,
.article-content img.nbt-image--large,
.article-content img.nbt-image--full { max-width: 100%; }

/* Align variants */
.article-content .nbt-image--center,
.article-content figure.nbt-image--center,
.article-content img.nbt-image--center {
  margin-left: auto;
  margin-right: auto;
}
.article-content figure.nbt-image--left,
.article-content figure.image.nbt-image--left,
.article-content img.nbt-image--left {
  float: left;
  width: min(48%, 380px);
  margin: 8px 24px 18px 0;
}
.article-content figure.nbt-image--right,
.article-content figure.image.nbt-image--right,
.article-content img.nbt-image--right {
  float: right;
  width: min(48%, 380px);
  margin: 8px 0 18px 24px;
}
.article-content figure.alignleft,
.article-content img.alignleft {
  float: left;
  width: min(48%, 380px);
  margin: 8px 24px 18px 0;
}
.article-content figure.alignright,
.article-content img.alignright {
  float: right;
  width: min(48%, 380px);
  margin: 8px 0 18px 24px;
}
.article-content figure.aligncenter,
.article-content img.aligncenter {
  float: none;
  margin-left: auto;
  margin-right: auto;
}
.article-content figure.nbt-image--left figcaption { text-align: left; }
.article-content figure.nbt-image--right figcaption { text-align: right; }

/* Presets */
.article-content figure.nbt-image--quote {
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: linear-gradient(135deg, #f6f2ea, #edf1e7);
  border-radius: 20px;
  padding: 0.8rem;
}
.article-content figure.nbt-image--quote > img {
  border-radius: 16px;
}
.article-content figure.nbt-image--quote figcaption {
  font-style: italic;
}
.article-content figure.nbt-image--soft-bleed {
  width: min(900px, calc(100vw - 44px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.article-content figure.nbt-image--soft-bleed > img {
  border-radius: 22px;
}
.article-content figure.nbt-image--with-credit figcaption::before {
  content: "Credit: ";
  opacity: 0.82;
}

/* Wide variant */
@media (min-width: 1024px) {
  .article-content figure.nbt-image--wide,
  .article-content img.nbt-image--wide {
    width: min(860px, calc(100vw - 40px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* Legacy TinyMCE figure compatibility */
.article-content figure.image:not([class*="nbt-image--"]) {
  max-width: 100%;
  margin: 32px auto;
}

/* Ensure content after floated images stays readable */
.article-content :is(h1, h2, h3, h4, h5, h6, blockquote, table, hr) {
  clear: both;
}

/* Responsive safety */
@media (max-width: 900px) {
  .article-content figure.nbt-image--left,
  .article-content figure.image.nbt-image--left,
  .article-content figure.nbt-image--right,
  .article-content figure.image.nbt-image--right,
  .article-content figure.alignleft,
  .article-content figure.alignright,
  .article-content img.nbt-image--left,
  .article-content img.nbt-image--right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
  }
  .article-content figure.nbt-image--left figcaption,
  .article-content figure.nbt-image--right figcaption {
    text-align: center;
  }
  .article-content figure.nbt-image--wide,
  .article-content figure.nbt-image--soft-bleed,
  .article-content img.nbt-image--wide {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }
}

:is(.post-content, .article-content) :is(video, iframe) {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 18px;
  margin: 1.6em auto;
  display: block;
  box-shadow: 0 8px 18px rgba(43, 38, 28, 0.07);
}
:is(.post-content, .article-content) audio {
  width: 100%;
  max-width: 100%;
  margin: 1.25em 0;
  display: block;
}
:is(.post-content, .article-content) figure.nbt-audio {
  margin: 1.45em 0;
  padding: 0.92rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: linear-gradient(140deg, #f6f2ea, #edf1e7);
  box-shadow: 0 8px 18px rgba(43, 38, 28, 0.05);
}
:is(.post-content, .article-content) figure.nbt-audio > audio {
  margin: 0;
  border-radius: 12px;
}
:is(.post-content, .article-content) figure.nbt-audio figcaption {
  margin-top: 0.62rem;
  text-align: left;
  color: var(--meta, #4b4b4b);
}
:is(.post-content, .article-content) .nbt-audio__title {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--heading, #2f312b);
}
:is(.post-content, .article-content) .nbt-audio__desc {
  display: block;
  margin-top: 0.16rem;
  font-size: 0.81rem;
  line-height: 1.5;
}
:is(.post-content, .article-content) iframe {
  aspect-ratio: 16 / 9;
  min-height: 18rem;
}

:is(.post-content, .article-content) .nbt-table,
:is(.post-content, .article-content) table {
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.55em 0;
  border-radius: 18px;
  border: 1px solid rgba(132, 144, 109, 0.18);
  background: #faf7f1;
  box-shadow: 0 8px 18px rgba(43, 38, 28, 0.05);
}
:is(.post-content, .article-content) table {
  border-collapse: separate;
  border-spacing: 0;
}
:is(.post-content, .article-content) thead th,
:is(.post-content, .article-content) th {
  background: #e8ede0;
  color: var(--heading);
  font-weight: 600;
  font-size: 0.92em;
}
:is(.post-content, .article-content) tbody td,
:is(.post-content, .article-content) td {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
:is(.post-content, .article-content) :is(th, td) {
  border-bottom: 1px solid rgba(132, 144, 109, 0.14);
  padding: 0.78rem 0.95rem;
  vertical-align: top;
  text-align: left;
  min-width: 140px;
}
:is(.post-content, .article-content) tr:last-child td {
  border-bottom: 0;
}
:is(.post-content, .article-content) caption {
  caption-side: bottom;
  padding-top: 0.68rem;
  color: var(--meta);
  font-size: 0.82rem;
  text-align: center;
}

:is(.post-content, .article-content) hr {
  border: none;
  height: 1px;
  margin: 2.2em 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(132, 144, 109, 0.34) 28%,
    rgba(132, 144, 109, 0.34) 72%,
    transparent 100%
  );
}

/* Reusable custom callouts for editor content */
:is(.post-content, .article-content) :is(.nbt-callout, .nbt-note, .nbt-soft-card, .nbt-checklist) {
  margin: 1.45em 0;
  border-radius: 20px;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: #f6f2ea;
  box-shadow: 0 8px 18px rgba(43, 38, 28, 0.05);
}
:is(.post-content, .article-content) .nbt-callout {
  background: linear-gradient(135deg, #f6f2ea, #eef3e8);
}
:is(.post-content, .article-content) .nbt-note {
  background: #f3f0e8;
  border-left: 4px solid rgba(132, 144, 109, 0.55);
}
:is(.post-content, .article-content) .nbt-soft-card {
  background: #fcfaf6;
}
:is(.post-content, .article-content) .nbt-checklist {
  background: #f6f3eb;
}
:is(.post-content, .article-content) .nbt-checklist ul {
  margin: 0.5em 0 0;
}
:is(.post-content, .article-content) .nbt-checklist ul > li::before {
  width: 0.7rem;
  height: 0.7rem;
  top: 0.52em;
  border-radius: 999px;
  background:
    radial-gradient(circle at 45% 45%, #f7f4ee 0 32%, transparent 35%),
    #84906d;
  box-shadow: 0 0 0 2px rgba(132, 144, 109, 0.14);
}

@media (max-width: 767px) {
  :is(.post-content, .article-content) {
    font-size: 1rem;
    line-height: 1.7;
  }
  :is(.post-content, .article-content) :is(h2, h3) {
    padding-left: 0;
  }
  :is(.post-content, .article-content) blockquote {
    padding: 1.15rem 1.05rem 1.1rem 1.25rem;
  }
}

/* ------------------------------------------------------------------
   Single post article renderer normalization (Phase fix):
   - table width/overflow consistency
   - heading/paragraph spacing consistency
   ------------------------------------------------------------------ */
.article-content p.nbt-para-break,
.article-content p:empty,
.article-content p:has(> br:only-child) {
  display: block;
  height: 0;
  margin: 0 0 var(--p-gap-section) !important;
  padding: 0;
  overflow: hidden;
  line-height: 0;
}
.article-content p > br:only-child {
  display: none;
}

.article-content h1,
.article-content h2,
.article-content h3 {
  color: var(--text, #3E3A34);
  line-height: 1.25;
}
.article-content h1 {
  margin-top: 2.25em;
  margin-bottom: 1em;
}
.article-content h2 {
  margin-top: 2.25em;
  margin-bottom: 0.85em;
}
.article-content h3 {
  margin-top: 1.75em;
  margin-bottom: 0.65em;
}
.article-content h1 + h2,
.article-content h2 + h3,
.article-content h2 + h2,
.article-content h3 + h3 {
  margin-top: 18px;
}
.article-content h1 + p,
.article-content h2 + p,
.article-content h3 + p {
  margin-top: 0;
}
.article-content p {
  margin-top: 0;
  margin-bottom: var(--p-gap-article);
  line-height: var(--lh-prose);
  text-align: left;
  text-wrap: pretty;
}
.article-content p + h2 {
  margin-top: 2em;
}
.article-content p + h3 {
  margin-top: 1.5em;
}
.article-content ul,
.article-content ol {
  margin-top: 12px;
  margin-bottom: 24px;
}
.article-content h2 + ul,
.article-content h3 + ul,
.article-content h2 + ol,
.article-content h3 + ol {
  margin-top: 8px;
}

.article-content .table-wrapper,
.article-content .table-responsive,
.article-content .wp-block-table,
.article-content .editor-table,
.article-content .tableWrapper,
.article-content figure:has(table),
.article-content div:has(> table) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  margin: 28px 0 !important;
  border-radius: 18px;
}

.article-content table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  /* Tinh chỉnh: để cột co giãn tự nhiên theo nội dung, đỡ cảm giác gò */
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: rgba(255, 253, 247, 0.8);
  border: 1px solid rgba(89, 96, 68, 0.14);
  border-radius: 18px;
  margin: 28px 0;
  height: auto !important;
  max-height: none !important;
}
.article-content table col,
.article-content table colgroup {
  width: auto !important;
}
/* Nếu editor set width cứng trên col/colgroup thì override về auto */
.article-content table col[style],
.article-content table colgroup[style] {
  width: auto !important;
}
.article-content th,
.article-content td {
  width: auto !important;
  vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(89, 96, 68, 0.14);
  border-right: 1px solid rgba(89, 96, 68, 0.1);
  color: var(--text, #3E3A34);
  line-height: 1.65;
  white-space: normal;
  word-break: break-word;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.article-content th:last-child,
.article-content td:last-child {
  border-right: none;
}
.article-content tr:last-child td {
  border-bottom: none;
}
.article-content th {
  font-weight: 600;
  background: rgba(126, 138, 99, 0.08);
}

@media (max-width: 767px) {
  .article-content h1 { margin-top: 2em; margin-bottom: 0.9em; }
  .article-content h2 { margin-top: 2em; margin-bottom: 0.8em; }
  .article-content h3 { margin-top: 1.55em; margin-bottom: 0.6em; }
  .article-content th,
  .article-content td {
    padding: 13px 14px;
  }
}

/* =============================================================
   SINGLE POST LAYOUT — 2 cột (main + aside sticky)
   ============================================================= */
.post-page {
  padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4vw, 64px);
  overflow-x: clip;
}
.post-container {
  /* Phase 2: editorial reading grid container */
  width: min(75rem, 100%); /* 1200px */
  margin: 0 auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .post-container { padding-inline: 1.5rem; }
}
.post-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}

/* Editorial hero (Phase 1 refactor) */
.post-hero {
  max-width: 68rem; /* ~1088px */
  margin: 0 auto clamp(26px, 4vw, 40px);
  text-align: center;
}
.post-hero__back {
  display: inline-block;
  margin-bottom: clamp(18px, 2.5vw, 24px);
  font-size: var(--fs-sm);
  color: var(--meta, #4b4b4b);
  text-decoration: none;
}
.post-hero__back:hover { color: var(--accent, #84906d); }
.post-hero__meta {
  margin: 0 auto clamp(14px, 2vw, 20px);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--meta, #4b4b4b);
}
/* Category chip — dạng nút pill nổi bật */
.post-hero__meta-link {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: rgba(132, 144, 109, 0.12);
  border: 1px solid rgba(132, 144, 109, 0.22);
  color: var(--accent, #5f6b4e);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.post-hero__meta-link:hover {
  background: rgba(132, 144, 109, 0.22);
  color: #3e4a2e;
}
.post-hero__title {
  margin: 0 auto;
  max-width: min(100%, 20em);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: pretty;
}
.post-hero__excerpt {
  margin: 16px auto 0;
  max-width: 62ch;
  color: var(--meta, #4b4b4b);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}
.post-hero__author {
  margin: 16px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-sm);
}
.post-hero__author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.22));
  background: var(--hp2-cream-soft, #f3eee9);
}
.post-hero__author-avatar picture,
.post-hero__author-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.post-hero__featured {
  margin-top: clamp(18px, 3vw, 26px);
  border-radius: 22px;
  overflow: hidden;
  background: var(--hp2-cream-soft, #f3eee9);
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.18));
}
.post-hero__featured img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(300px, 340px);
  gap: clamp(56px, 6vw, 72px);
  align-items: start;
  justify-content: center;
}
@media (max-width: 1180px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(36px, 5vw, 56px);
  }
}
@media (max-width: 1023px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-hero {
    margin-bottom: clamp(20px, 4vw, 28px);
  }
}
@media (max-width: 640px) {
  .post-hero {
    max-width: none;
    padding-inline: 4px;
  }
  .post-hero__title { font-size: clamp(1.5rem, 6.8vw, 1.95rem); line-height: 1.24; }
  .post-hero__featured { border-radius: 20px; }
}

/* ----- MAIN ----- */
.post-main {
  min-width: 0;
  position: relative;
}

/* Floating actions (desktop-only, left of article content) */
.post-floating-actions { display: none; }
@media (min-width: 1340px) {
  .post-floating-actions {
    display: block;
    position: absolute;
    left: -76px;
    top: 0;
    width: 52px;
    z-index: 2;
  }
  .post-floating-actions__inner {
    position: sticky;
    top: 124px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--hp2-cream-soft, #f3eee9);
    border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.2));
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(45, 39, 30, 0.08);
    padding: 8px 7px;
  }
  .post-floating-actions__feedback {
    margin-top: 2px;
    font-family: var(--font-sans);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    color: var(--meta, #4b4b4b);
  }
}
.post-floating-actions__btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(132, 144, 109, 0.16);
  background: #fff;
  color: var(--meta, #4b4b4b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.post-floating-actions__btn:hover {
  background: rgba(132, 144, 109, 0.08);
  border-color: rgba(132, 144, 109, 0.28);
  color: var(--accent, #84906d);
  transform: translateY(-1px);
}
.post-floating-actions__btn[aria-pressed="true"] {
  background: rgba(132, 144, 109, 0.14);
  border-color: rgba(132, 144, 109, 0.36);
  color: var(--accent, #6f7958);
}

/* End-cap (after article) */
.post-endcap {
  padding-top: clamp(22px, 4vw, 40px);
  padding-bottom: clamp(16px, 2.8vw, 28px);
}
.post-endcap__container {
  max-width: 48rem;
  margin: 0 auto;
}
.post-endcap__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.post-endcap__action {
  border: 1px solid rgba(132, 144, 109, 0.22);
  background: #fbf8f2;
  color: var(--meta, #4b4b4b);
  border-radius: 999px;
  padding: 0.52rem 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.post-endcap__action:hover {
  background: rgba(132, 144, 109, 0.12);
  border-color: rgba(132, 144, 109, 0.34);
  color: var(--accent, #84906d);
  transform: translateY(-1px);
}
.post-endcap__action[aria-pressed="true"] {
  background: rgba(132, 144, 109, 0.16);
  border-color: rgba(132, 144, 109, 0.38);
  color: var(--accent, #6f7958);
}
.post-endcap__feedback {
  margin: 0.5rem 0 0;
  text-align: center;
  color: var(--meta, #4b4b4b);
  font-size: var(--fs-xs);
}

.post-share-popover {
  position: fixed;
  z-index: 70;
  width: min(280px, calc(100vw - 24px));
  border-radius: 18px;
  border: 1px solid rgba(132, 144, 109, 0.22);
  background: linear-gradient(180deg, #f8f5ee 0%, #f3efe7 100%);
  box-shadow: 0 14px 28px rgba(45, 39, 30, 0.12);
  padding: 0.75rem;
}
.post-share-popover__title {
  margin: 0 0 0.58rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--heading);
}
.post-share-popover__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.post-share-popover__item {
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: #fffdf9;
  border-radius: 12px;
  color: var(--meta, #4b4b4b);
  padding: 0.45rem 0.54rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38rem;
  font-size: var(--fs-xs);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.post-share-popover__item:hover {
  background: rgba(132, 144, 109, 0.1);
  border-color: rgba(132, 144, 109, 0.34);
  color: var(--accent, #6f7958);
  transform: translateY(-1px);
}
.post-share-popover__item--copy {
  grid-column: 1 / -1;
  justify-content: center;
}
.post-share-popover__status {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--meta, #4b4b4b);
}

.post-newsletter-card {
  margin-top: 1rem;
  border: 1px solid rgba(132, 144, 109, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #f9f6ef, #f3efe6);
  padding: clamp(14px, 2.6vw, 18px);
}
.post-newsletter-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--heading);
  text-align: center;
}
.post-newsletter-card__form {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.52rem;
}
.post-newsletter-card__input {
  min-width: 0;
  flex: 1 1 auto;
  border: 1px solid rgba(132, 144, 109, 0.26);
  border-radius: 999px;
  background: #fff;
  padding: 0.56rem 0.9rem;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
}
.post-newsletter-card__input:focus {
  border-color: rgba(132, 144, 109, 0.52);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.14);
}
.post-newsletter-card__btn {
  flex: 0 0 auto;
  border: 1px solid rgba(132, 144, 109, 0.34);
  border-radius: 999px;
  background: #84906d;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.56rem 0.95rem;
  cursor: pointer;
}
.post-newsletter-card__btn:hover { background: #6f7958; }
.post-newsletter-card__msg {
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  text-align: center;
}

.post-related-section {
  padding-top: clamp(10px, 2.5vw, 16px);
  padding-bottom: clamp(44px, 6vw, 72px);
}
.post-related__container {
  width: min(75rem, 100%);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 28px;
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: linear-gradient(180deg, #f3efe7 0%, #edf0e6 100%);
}
.post-related__title {
  margin: 0 0 1.05rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--heading);
  font-weight: 500;
}
.post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 20px);
}
.post-related__card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: #fffdf9;
  box-shadow: 0 10px 20px rgba(45, 39, 30, 0.06);
}
.post-related__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.post-related__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.post-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.post-related__link:hover .post-related__media img {
  transform: scale(1.03);
}
.post-related__body {
  padding: 0.8rem 0.92rem 0.95rem;
}
.post-related__cat {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(132, 144, 109, 0.22);
  background: #f3eee9;
  color: #6f7958;
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 0.26rem 0.52rem;
}
.post-related__card-title {
  margin: 0.55rem 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--heading);
}
.post-related__meta {
  margin: 0.48rem 0 0;
  font-size: var(--fs-xs);
  color: var(--meta);
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

@media (max-width: 900px) {
  .post-related__grid {
    grid-template-columns: 1fr;
  }
  .post-newsletter-card__form {
    flex-direction: column;
  }
}
.post-header { margin-bottom: clamp(20px, 3vw, 32px); }
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.post-title {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text);
  font-size: var(--fs-h1);             /* 30 → 44px */
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
.post-excerpt {
  margin-top: 16px;
  color: var(--text-muted, #57534e);
  font-size: var(--fs-lead);           /* 18 → 21px */
  line-height: var(--lh-relaxed);
}
.post-featured {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: clamp(28px, 4vw, 48px);
  background: var(--hp2-cream-soft, #f3eee9);
}
.post-featured img { display: block; width: 100%; }

/* ----- ASIDE / SIDEBAR ----- */
/* Sổ ra tự nhiên (không scroll nội bộ): aside flow theo column, các card xếp
   tuần tự dài tới đâu hiển thị tới đó, cuộn cùng nội dung chính. */
.post-aside { min-width: 0; }
.post-aside__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .post-aside__stack {
    position: sticky;
    top: 96px;
  }
}
.post-card {
  background: #fff;
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.18));
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* TOC card */
.post-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.post-toc-item { margin: 0; }
.post-toc-item.level-3 { padding-left: 0.8rem; }
.post-toc-link {
  display: block;
  text-decoration: none;
  color: var(--meta, #4b4b4b);
  font-size: var(--fs-sm);
  line-height: 1.45;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  transition: background-color .2s ease, color .2s ease;
}
.post-toc-link:hover {
  background: rgba(132, 144, 109, 0.08);
  color: var(--text);
}
.post-toc-link.is-active {
  background: rgba(132, 144, 109, 0.14);
  color: var(--accent, #6f7958);
}

.post-card__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);             /* 12 → 13px */
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--meta, #4b4b4b);
  margin: 0 0 12px;
}

/* Author card */
.post-author-card { text-align: center; padding: 22px 18px 20px; }
.post-author-card__avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hp2-cream-soft, #f3eee9);
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.22));
}
.post-author-card__avatar img,
.post-author-card__avatar picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.post-author-card__eyebrow {
  font-size: var(--fs-xs);             /* 12 → 13px */
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--meta, #4b4b4b);
  margin: 0 0 6px;
}
.post-author-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);             /* 20 → 24px */
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
  line-height: var(--lh-tight);
}
.post-author-card__bio {
  font-family: var(--font-sans);
  font-size: var(--fs-md);             /* 15 → 17px */
  line-height: var(--lh-relaxed);
  color: var(--text-muted, #57534e);
  margin: 0 0 16px;
}
.post-author-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  color: var(--accent, #84906d);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.post-author-card__link:hover { gap: 10px; color: var(--text); }

/* Card label có icon */
.post-card__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-card__label > i { color: var(--accent, #84906d); }

/* Bài mới nhất */
.post-latest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.post-latest__item + .post-latest__item {
  padding-top: 14px;
  border-top: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.14));
}
.post-latest__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.post-latest__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hp2-cream-soft, #f3eee9);
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.18));
}
.post-latest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.post-latest__link:hover .post-latest__thumb img { transform: scale(1.05); }
.post-latest__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-latest__title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);             /* 15 → 17px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.post-latest__link:hover .post-latest__title { color: var(--accent, #84906d); }
.post-latest__date {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);             /* 12 → 13px */
  color: var(--meta, #4b4b4b);
  letter-spacing: 0.02em;
}

/* Chuyên mục — compact pill/list */
.post-cat-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.post-cat-list__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.2));
  background: var(--hp2-cream-soft, #f3eee9);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);             /* compact chip */
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.post-cat-list__link:hover {
  color: var(--accent, #84906d);
  background: #fff;
  border-color: var(--accent, #84906d);
}
.post-cat-list__name {
  white-space: nowrap;
}
.post-cat-list__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(132, 144, 109, 0.18);
  font-size: var(--fs-xs);             /* 12 → 13px */
  color: var(--meta, #4b4b4b);
  font-variant-numeric: tabular-nums;
}
.post-cat-list__item.is-current .post-cat-list__link {
  color: var(--accent, #84906d);
  font-weight: 500;
  background: #fff;
  border-color: var(--accent, #84906d);
}
.post-cat-list__item.is-current .post-cat-list__count {
  background: rgba(132, 144, 109, 0.1);
  border-color: rgba(132, 144, 109, 0.25);
  color: var(--accent, #84906d);
}

/* Share */
.post-share__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.post-share__btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--hp2-cream-soft, #f3eee9);
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.22));
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.post-share__btn:hover {
  background: #fff;
  border-color: var(--accent, #84906d);
  color: var(--accent, #84906d);
}
.post-share__feedback {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--accent, #84906d);
}

/* Below-content sections (newsletter, reactions, comments, related):
   giữ width hẹp để dễ đọc, căn giữa theo container post hoặc max-w-3xl */
@media (min-width: 1024px) {
  /* Trên desktop khi đã có 2 cột, các section dưới cũng align trong post-container */
  .post-page + section,
  .post-page ~ section { /* không áp dụng vì các section sau không phải sibling trực tiếp */ }
}

.author-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  background: var(--bg-warm);
}
.author-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-card-avatar picture {
  display: block;
  width: 100%;
  height: 100%;
}
.author-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.reaction-box {
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg);
}
.reaction-grid {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.reaction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid transparent;
  background: var(--bg-warm);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  min-width: 72px;
}
.reaction-item:hover {
  transform: translateY(-2px);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.reaction-item.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 4px 16px rgba(196,168,130,0.15);
}
.reaction-emoji {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.reaction-item:hover .reaction-emoji {
  transform: scale(1.2);
}
.reaction-count {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading);
}
.reaction-label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--meta);
  white-space: nowrap;
}
@keyframes reactionPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.reaction-pop .reaction-emoji {
  animation: reactionPop 0.4s ease;
}

.comments-section {
  padding-top: 1rem;
}
.comment-form-wrap {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.comment-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.comment-form {
  flex: 1;
}
.comment-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.comment-input::placeholder {
  color: var(--meta);
}
.comment-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196,168,130,0.1);
}
.comment-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 2rem;
  transition: background 0.3s ease, transform 0.2s ease;
}
.comment-submit:hover {
  background: var(--heading);
  transform: translateY(-1px);
}
.comments-list {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.comments-list:empty {
  padding-top: 0;
}
.comment-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(232,226,220,0.5);
}
.comment-item:last-child {
  border-bottom: none;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading);
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--meta);
  transition: color 0.25s ease;
}
.comment-reply-btn:hover {
  color: var(--accent);
}
@keyframes commentSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.comment-new {
  animation: commentSlideIn 0.4s ease;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}
@media (min-width: 640px) {
  .post-nav { grid-template-columns: 1fr 1fr; }
}
.post-nav-item {
  padding: 1rem 0;
  transition: color 0.3s ease;
}
.post-nav-item:hover { color: var(--accent); }
.post-nav-next { text-align: left; }
@media (min-width: 640px) {
  .post-nav-next {
    text-align: right;
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
  }
}

.coffee-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(59, 52, 47, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.coffee-popup-overlay.is-open { opacity: 1; visibility: visible; }
.coffee-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 71;
  width: 90%;
  max-width: 420px;
  background: var(--bg);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.coffee-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#mobile-menu { will-change: opacity, visibility; }
#mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
#mobile-menu.is-closed { opacity: 0; visibility: hidden; pointer-events: none; }

.btn-heal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.85rem;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  border-radius: 2rem;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn-heal:hover {
  background: var(--heading);
  transform: translateY(-1px);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 2rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 0 auto;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35);
}

.page-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .page-hero { min-height: 60vh; }
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: pageHeroZoom 25s ease-in-out alternate infinite;
}
@keyframes pageHeroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 23, 20, 0.2) 0%,
    rgba(26, 23, 20, 0.5) 50%,
    rgba(26, 23, 20, 0.75) 100%
  );
}
/* ── About hero: left-aligned, matching homepage layout ─── */
.page-hero--about {
  align-items: flex-end;
  min-height: clamp(480px, 75vh, 700px);
}
.page-hero--about .page-hero-overlay {
  display: block;
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0) 28%, rgba(20, 17, 14, 0.52) 100%),
    linear-gradient(90deg, rgba(20, 17, 14, 0.5) 0%, rgba(20, 17, 14, 0.02) 62%);
}
.page-hero--about .page-hero-inner {
  text-align: left;
  width: 100%;
  max-width: min(75rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 2rem);
}
.page-hero--about .page-hero-title {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.12;
  margin-inline: 0;
  max-width: 20ch;
  margin-bottom: 1rem;
}
.page-hero--about .page-hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  max-width: 36rem;
  margin-inline: 0;
  line-height: 1.7;
}
.page-hero-cta {
  margin-top: 1.6rem;
}
.page-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.95);
  color: #2d2a26;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.page-hero-cta-btn:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  max-width: 42rem;
  margin: 0 auto;
  animation: pageHeroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pageHeroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.8);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.page-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3.8vw, 2.125rem);
  font-weight: 500;
  color: white;
  line-height: 1.15;
  margin-bottom: 1rem;
}
/* About hero: title 40px on desktop */
@media (min-width: 768px) {
  .page-hero--about .page-hero-title {
    font-size: 2.5rem;
  }
}
.page-hero-sub {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  max-width: 30rem;
  margin: 0 auto;
  line-height: 1.75;
}
.page-hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  color: rgba(255,255,255,0.35);
  animation: pageHeroBounce 2s ease-in-out infinite;
}
@keyframes pageHeroBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* Minimal hero (no background image) */
.page-hero-minimal {
  padding: 4rem 1rem 3rem;
  text-align: center;
}
@media (min-width: 768px) {
  .page-hero-minimal { padding: 6rem 1.5rem 4rem; }
}
.page-hero-badge-minimal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: var(--bg-warm);
  color: var(--meta, #9b918a);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.page-hero-title-minimal {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3.6vw, 2.375rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.page-hero-sub-minimal {
  color: var(--meta, #9b918a);
  font-size: 0.9rem;
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.75;
}

/* Blog hero — editorial healing style (Phase 1) */
.page-hero-minimal.page-hero--blog {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 8vw, 84px) 1rem clamp(34px, 5vw, 50px);
  background-color: #f5f1ea;
  background-image:
    linear-gradient(180deg, rgba(247, 244, 238, 0.42) 0%, rgba(240, 235, 226, 0.56) 100%),
    url("/assets/images/footer-bg-1200.jpg");
  background-image:
    linear-gradient(180deg, rgba(247, 244, 238, 0.42) 0%, rgba(240, 235, 226, 0.56) 100%),
    image-set(
      url("/assets/images/footer-bg-1200.webp") type("image/webp"),
      url("/assets/images/footer-bg-1200.jpg") type("image/jpeg")
    );
  background-image:
    linear-gradient(180deg, rgba(247, 244, 238, 0.42) 0%, rgba(240, 235, 226, 0.56) 100%),
    -webkit-image-set(
      url("/assets/images/footer-bg-1200.webp") type("image/webp"),
      url("/assets/images/footer-bg-1200.jpg") type("image/jpeg")
    );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.page-hero-minimal.page-hero--blog::before,
.page-hero-minimal.page-hero--blog::after {
  display: none;
}
.page-hero--blog .page-hero-badge-minimal {
  margin-bottom: 0.95rem;
  background: transparent;
  padding: 0;
  color: rgba(111, 121, 88, 0.8);
  letter-spacing: 0.18em;
  font-size: 0.66rem;
}
.page-hero--blog .page-hero-title-minimal {
  margin-bottom: 0.6rem;
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  line-height: 1.05;
  color: #6f7958;
  font-weight: 500;
}
.page-hero--blog .page-hero-sub-minimal {
  max-width: 42rem;
  color: #615c54;
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.72;
}
@media (max-width: 767px) {
  .page-hero-minimal.page-hero--blog {
    padding: 50px 1rem 30px;
  }
  .page-hero-minimal.page-hero--blog::before,
  .page-hero-minimal.page-hero--blog::after {
    width: 82px;
    opacity: 0.38;
  }
  .page-hero--blog .page-hero-title-minimal {
    font-size: clamp(1.95rem, 11vw, 2.45rem);
  }
  .page-hero--blog .page-hero-sub-minimal {
    max-width: 30rem;
  }
}

/* Blog page layout (Phase 2) */
.blog-layout-container {
  width: min(75rem, 100%);
  margin: 0 auto;
}
.blog-layout-section {
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(38px, 5vw, 58px);
}
.blog-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 40px);
}
@media (min-width: 1024px) {
  .blog-layout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: clamp(48px, 5vw, 64px);
    align-items: start;
  }
}

.blog-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
  margin-bottom: clamp(18px, 2.8vw, 28px);
  min-width: 0;
}
.blog-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(132, 144, 109, 0.22);
  background: #f8f4ee;
  color: var(--meta, #4b4b4b);
  text-decoration: none;
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 0.42rem 0.74rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.blog-filter-tab:hover {
  background: #fff;
  border-color: rgba(132, 144, 109, 0.36);
  color: var(--accent, #6f7958);
}
.blog-filter-tab.is-active {
  background: #84906d;
  border-color: #84906d;
  color: #fff;
  box-shadow: 0 8px 16px rgba(132, 144, 109, 0.24);
}
.blog-filter-tab__count {
  font-size: 0.66em;
  opacity: 0.82;
}

/* ── Sub-category chip row ───────────────────────────────────── */
.blog-subcat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: -0.6rem;
  margin-bottom: clamp(14px, 2vw, 20px);
  padding: 0.6rem 0.85rem;
  background: rgba(132, 144, 109, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(132, 144, 109, 0.14);
}
.blog-subcat-row[hidden] { display: none !important; }
.blog-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(132, 144, 109, 0.26);
  background: transparent;
  color: #5e6b4d;
  text-decoration: none;
  font-size: 0.76rem;
  padding: 0.28rem 0.65rem;
  transition: background .18s, border-color .18s, color .18s;
}
.blog-subcat-chip:hover {
  background: #fff;
  border-color: rgba(132, 144, 109, 0.5);
  color: #4a5538;
}
.blog-subcat-chip.is-active {
  background: rgba(132, 144, 109, 0.15);
  border-color: #84906d;
  color: #3d4a2d;
  font-weight: 500;
}
.blog-subcat-chip__count {
  font-size: 0.7em;
  opacity: 0.7;
}
.blog-subcat-chip--parent {
  font-weight: 500;
  border-radius: 10px 999px 999px 10px;
}
.blog-subcat-chip--child {
  font-size: 0.72rem;
  padding: 0.22rem 0.7rem;
  background: rgba(132,144,109,0.04);
}
.blog-subcat-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  background: rgba(132,144,109,0.05);
  border: 1px solid rgba(132,144,109,0.13);
  border-radius: 12px;
}

.blog-featured-card {
  margin-bottom: clamp(20px, 3vw, 34px);
}
.blog-featured-card__link {
  display: block;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 16px 34px rgba(45, 39, 30, 0.08);
}
.blog-featured-card__media {
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background: #ebe5db;
}
.blog-featured-card__content {
  position: absolute;
  left: clamp(12px, 2.2vw, 24px);
  right: auto;
  bottom: clamp(12px, 2.2vw, 24px);
  width: min(88%, 30rem);
  border-radius: 18px;
  border: 1px solid rgba(132, 144, 109, 0.16);
  background: rgba(252, 249, 244, 0.95);
  box-shadow: 0 8px 20px rgba(45, 39, 30, 0.08);
  padding: clamp(12px, 2vw, 16px);
}
.blog-featured-card__meta {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(75, 75, 75, 0.85);
}
.blog-featured-card__title {
  margin: 0.52rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  line-height: 1.3;
  color: var(--heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-card__excerpt {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--meta, #4b4b4b);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.6em * 2);
}
.blog-featured-card__cta {
  margin-top: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  background: #84906d;
  color: #fff;
  font-size: var(--fs-xs);
  padding: 0.35rem 0.74rem;
}

.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}
.blog-post-card {
  border-radius: 20px;
  border: 1px solid rgba(132, 144, 109, 0.2);
  background: #fffdf9;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(45, 39, 30, 0.05);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.blog-post-card:hover {
  transform: translateY(-2px);
  border-color: rgba(132, 144, 109, 0.3);
  box-shadow: 0 14px 28px rgba(45, 39, 30, 0.08);
}
.blog-post-card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.blog-post-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee7de;
}
.blog-post-card__body {
  padding: 0.82rem 0.9rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 142px;
}
.blog-post-card__meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(75, 75, 75, 0.82);
}
.blog-post-card__title {
  margin: 0.1rem 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  line-height: 1.42;
  color: var(--heading);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.42em;
}
.blog-post-card__excerpt {
  margin: 0.08rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--meta, #4b4b4b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
}

.blog-load-more-wrap {
  margin-top: clamp(18px, 3vw, 28px);
  display: flex;
  justify-content: center;
}
.blog-load-more-btn {
  border: 1px solid rgba(132, 144, 109, 0.26);
  border-radius: 999px;
  background: #f8f4ee;
  color: var(--meta, #4b4b4b);
  text-decoration: none;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  justify-content: center;
}
.blog-load-more-btn:hover {
  background: #fff;
  border-color: rgba(132, 144, 109, 0.38);
}
.blog-load-more-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.blog-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 24px);
}
.blog-sidebar-card {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(132, 144, 109, 0.18);
  background: #f8f4ed;
  box-shadow: 0 8px 16px rgba(45, 39, 30, 0.04);
  padding: 0.95rem;
}
.blog-sidebar-card__title {
  margin: 0 0 0.8rem;
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  color: var(--heading);
  line-height: 1.3;
}

.blog-sidebar-search {
  position: relative;
}
.blog-sidebar-search__input {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.18);
  background: #fffdf9;
  border-radius: 999px;
  padding: 0.68rem 2.4rem 0.68rem 0.86rem;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
}
.blog-sidebar-search__input:focus {
  border-color: rgba(132, 144, 109, 0.45);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.14);
}
.blog-sidebar-search__icon {
  position: absolute;
  right: 0.86rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgba(75, 75, 75, 0.58);
  stroke-width: 1.6;
}

.blog-topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.blog-topic-list__item { margin: 0; }
.blog-topic-list__link {
  text-decoration: none;
  border-radius: 12px;
  padding: 0.45rem 0.52rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--meta, #4b4b4b);
  transition: background-color .2s ease, color .2s ease;
}
.blog-topic-list__link:hover {
  background: #fffdf9;
  color: var(--heading);
}
.blog-topic-list__left {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem; /* ~15px — dễ đọc hơn */
}
/* Slot icon cố định 22px cho mọi loại icon — căn thẳng hàng */
.blog-topic-list__icon,
.blog-topic-list__icon--notebook,
.blog-topic-list__brand-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Lucide svg (About) */
.blog-topic-list__icon {
  color: rgba(111, 121, 88, 0.86);
  stroke-width: 1.6;
}
/* Notebook SVG (Journal) */
.blog-topic-list__icon--notebook {
  color: rgba(111, 121, 88, 0.9);
}
/* Brand icon (Live/Grow/Heal) */
.blog-topic-list__brand-icon .brand-icon,
.blog-topic-list__brand-icon .brand-icon--widget-cat {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
  transform: none !important;
  object-fit: contain;
}
.blog-topic-list__count {
  font-size: 0.875rem;
  color: rgba(75, 75, 75, 0.72);
  font-variant-numeric: tabular-nums;
}
.blog-topic-list__all {
  margin-top: 0.65rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  color: rgba(111, 121, 88, 0.95);
}

.blog-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
}
.blog-featured-list__item { margin: 0; }
.blog-featured-list__link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  border-radius: 12px;
  padding: 0.3rem;
  transition: background-color .2s ease;
}
.blog-featured-list__link:hover {
  background: rgba(255,255,255,0.62);
}
.blog-featured-list__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #ebe5db;
}
.blog-featured-list__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blog-featured-list__link:hover .blog-featured-list__thumb img {
  transform: scale(1.05);
}
.blog-featured-list__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.blog-featured-list__title {
  font-size: var(--fs-sm);
  line-height: 1.38;
  color: var(--heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-list__date {
  font-size: var(--fs-xs);
  color: rgba(75, 75, 75, 0.7);
}

.blog-sidebar-newsletter__desc {
  margin: 0;
  color: var(--meta, #4b4b4b);
  font-size: var(--fs-sm);
  line-height: 1.58;
}
.blog-sidebar-newsletter__form {
  margin-top: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.blog-sidebar-newsletter__input {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.2);
  border-radius: 999px;
  background: #fffdf9;
  padding: 0.56rem 0.8rem;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
}
.blog-sidebar-newsletter__btn {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.35);
  border-radius: 999px;
  background: #84906d;
  color: #fff;
  font-size: var(--fs-sm);
  padding: 0.56rem 0.9rem;
  cursor: pointer;
}
.blog-sidebar-newsletter__btn:hover { background: #6f7958; }
.blog-sidebar-newsletter__trust {
  margin: 0.6rem 0 0;
  font-size: var(--fs-xs);
  color: rgba(75, 75, 75, 0.72);
}
.blog-sidebar-newsletter__msg {
  margin: 0.45rem 0 0;
  font-size: var(--fs-xs);
}

.blog-sidebar-quote {
  overflow: hidden;
}
.blog-sidebar-quote__text {
  margin: 0;
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.68;
  color: var(--meta, #4b4b4b);
}
.blog-sidebar-quote__author {
  margin-top: 0.58rem;
  font-size: var(--fs-xs);
  color: rgba(75, 75, 75, 0.82);
}
.blog-sidebar-quote__leaf {
  position: absolute;
  right: -10px;
  bottom: -12px;
  width: 66px;
  color: rgba(132, 144, 109, 0.24);
}
.blog-sidebar-quote__leaf svg {
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .blog-sidebar-col {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .blog-layout-section {
    padding-bottom: clamp(34px, 5.2vw, 52px);
  }
}

@media (max-width: 900px) {
  .blog-post-grid {
    grid-template-columns: 1fr;
  }
  .blog-sidebar-card {
    padding: 0.9rem;
  }
  .blog-featured-card__content {
    position: static;
    width: auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
  }
  .blog-featured-card__media {
    aspect-ratio: 4 / 3;
  }
  .blog-load-more-btn {
    width: min(100%, 24rem);
  }
}
@media (max-width: 767px) {
  .page-hero-minimal.page-hero--blog {
    padding: 44px 0.9rem 24px;
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.46) 0%, rgba(240, 235, 226, 0.6) 100%),
      url("/assets/images/footer-bg-mobile-800.jpg");
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.46) 0%, rgba(240, 235, 226, 0.6) 100%),
      image-set(
        url("/assets/images/footer-bg-mobile-800.webp") type("image/webp"),
        url("/assets/images/footer-bg-mobile-800.jpg") type("image/jpeg")
      );
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.46) 0%, rgba(240, 235, 226, 0.6) 100%),
      -webkit-image-set(
        url("/assets/images/footer-bg-mobile-800.webp") type("image/webp"),
        url("/assets/images/footer-bg-mobile-800.jpg") type("image/jpeg")
      );
  }
  .page-hero--blog .page-hero-title-minimal {
    font-size: clamp(1.82rem, 10.2vw, 2.2rem);
    margin-bottom: 0.4rem;
  }
  .page-hero--blog .page-hero-sub-minimal {
    font-size: 0.86rem;
    line-height: 1.62;
    max-width: 24rem;
  }
  .blog-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    margin-bottom: 0.95rem;
    scrollbar-width: thin;
  }
  .blog-filter-tabs::-webkit-scrollbar {
    height: 4px;
  }
  .blog-filter-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .blog-layout-section {
    padding-bottom: 30px;
  }
  .blog-featured-card__link {
    border-radius: 20px;
  }
  .blog-featured-card__content {
    padding: 12px 12px 14px;
  }
  .blog-featured-card__excerpt {
    -webkit-line-clamp: 2;
    min-height: 0;
  }
  .blog-sidebar-stack {
    gap: 1rem;
  }
  .blog-sidebar-search__input {
    min-height: 44px;
  }
  .blog-load-more-wrap {
    margin-top: 1rem;
  }
  .blog-load-more-btn {
    width: 100%;
    min-height: 44px;
  }
  .blog-empty-state {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}

.page-breadcrumbs {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
}
.page-breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-bc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--meta, #9b918a);
  font-size: var(--fs-sm);             /* 13 → 15px */
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s ease;
}
.page-bc-link:hover {
  color: var(--text);
}
.page-bc-sep {
  display: inline-flex;
  color: var(--border);
}
.page-bc-current {
  font-size: var(--fs-sm);             /* 13 → 15px */
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 500;
}

.sp-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 768px) {
  .sp-hero { min-height: 60vh; }
}
.sp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sp-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 23, 20, 0.05) 0%,
    rgba(26, 23, 20, 0.3) 40%,
    rgba(26, 23, 20, 0.85) 100%
  );
}
.sp-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
  animation: pageHeroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 768px) {
  .sp-hero-inner { padding: 4rem 2rem 3rem; }
}
.sp-hero-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}
.sp-bc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sp-bc-link:hover { color: rgba(255,255,255,0.9); }
.sp-bc-sep { color: rgba(255,255,255,0.25); }
.sp-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.sp-hero-cat {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.sp-hero-cat:hover { color: white; }
.sp-hero-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.sp-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 500;
  color: white;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.sp-hero-excerpt {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  max-width: 34rem;
  margin: 0 auto;
  line-height: 1.7;
}

/* Minimal hero when no featured image */
.sp-hero-minimal {
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
  max-width: 48rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sp-hero-minimal { padding: 4rem 2rem 3rem; }
}
.sp-hero-breadcrumbs-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.tv-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tv-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tv-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: tvHeroZoom 20s ease-in-out alternate infinite;
}
@keyframes tvHeroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}
.tv-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 23, 20, 0.25) 0%,
    rgba(26, 23, 20, 0.55) 60%,
    rgba(26, 23, 20, 0.8) 100%
  );
}
.tv-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  animation: tvFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tv-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.75);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.tv-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  color: white;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.tv-hero-sub {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  max-width: 28rem;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.tv-hero-scroll {
  display: inline-flex;
  color: rgba(255,255,255,0.4);
  animation: tvBounce 2s ease-in-out infinite;
}
@keyframes tvBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.tv-quote-section {
  padding: 5rem 1.5rem;
  background: var(--bg-warm);
}
.tv-quote-inner {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.tv-quote-mark {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--accent-soft);
  opacity: 0.4;
  margin-bottom: -1rem;
}
.tv-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-style: italic;
  color: var(--heading);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.tv-quote-line {
  width: 48px;
  height: 2px;
  background: var(--accent-soft);
  margin: 0 auto;
}

.tv-content {
  padding: 3.5rem 1rem 5rem;
}
.tv-content-inner {
  max-width: 72rem;
  margin: 0 auto;
}
.tv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}
.tv-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--meta);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
  white-space: nowrap;
}
.tv-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(196, 168, 130, 0.15);
}
.tv-filter-btn.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(196, 168, 130, 0.35);
  transform: translateY(-1px);
}

.tv-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.tv-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--heading);
}
.tv-post-count {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 1023px) {
  .tv-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 639px) {
  .tv-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.tv-card {
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease,
              opacity 0.5s ease;
  transition-delay: var(--delay, 0ms);
}
.tv-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  border-color: var(--accent-soft);
}
.tv-card-in {
  opacity: 1;
  transform: translateY(0);
}
.tv-card-out {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition-duration: 0.25s;
}

/* Card image */
.tv-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.tv-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tv-card:hover .tv-card-img img {
  transform: scale(1.06);
}
.tv-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-light);
  color: var(--meta);
}
.tv-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tv-card:hover .tv-card-overlay {
  opacity: 1;
}
.tv-card-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Card body */
.tv-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
}
.tv-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 0.6rem;
}
.tv-card-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--meta);
  opacity: 0.5;
}
.tv-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}
.tv-card:hover .tv-card-title {
  color: var(--accent);
}
.tv-card-excerpt {
  font-size: 0.85rem;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tv-card:hover .tv-card-read {
  opacity: 1;
  transform: translateX(0);
}

.tv-empty {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--meta);
}
.tv-empty h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--heading);
  margin: 1rem 0 0.5rem;
}
.tv-empty p {
  margin-bottom: 1.5rem;
}

.tv-cta {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tv-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.3);
}
.tv-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 1.5rem;
}
.tv-cta-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
.tv-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 500;
  color: white;
  line-height: 1.25;
  margin-bottom: 2rem;
}
.tv-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tv-cta-btn:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

@keyframes tvFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.about-story-section {
  padding: var(--sec-pad-lg) clamp(1rem, 3vw, 1.5rem);
  overflow-x: hidden;
  background: var(--bg);
}
.about-story-prose {
  max-width: 42rem;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text, #44403c);
  text-align: justify;
}
.about-story-prose p {
  margin-bottom: var(--p-gap);
}
.about-story-prose p.about-lead {
  font-size: var(--fs-lead);
  color: var(--heading, #3d3836);
}
/* Removed jarring lh-snug (1.4) override on first-child — inherits prose rhythm */
.about-story-prose p:first-child {
  font-size: var(--fs-body);
  color: var(--heading, #3d3836);
}
.about-story-prose p:last-child {
  margin-bottom: 0;
}
.about-story-prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  color: var(--text);
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  margin: 1.1em 0 0.45em;
}
.about-story-prose :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}
.about-story-prose p.about-lead {
  font-size: 1.25rem;
  font-family: var(--font-serif);
  font-weight: 500;
}
.about-story-prose blockquote {
  margin: 1.25em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent, #059669);
  font-style: italic;
  color: var(--meta, #9b918a);
  text-align: left;
}
.about-story-prose ul,
.about-story-prose ol {
  margin: 1.25em 0;
  padding-left: 1.5em;
  text-align: left;
}
.about-story-prose ul {
  list-style: disc;
}
.about-story-prose ol {
  list-style: decimal;
}
.about-story-prose li {
  margin-bottom: 0.4em;
}
.about-story-prose li::marker {
  color: var(--accent);
}
/* Story phrases — 2x2 grid, thiết kế sáng tạo */
.about-story-phrases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25em 0;
  width: 100%;
  text-align: center;
}
@media (min-width: 640px) {
  .about-story-phrases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.about-story-phrases-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(253, 251, 248, 0.9) 0%, rgba(250, 247, 243, 0.95) 100%);
  border: 1px solid rgba(232, 226, 220, 0.8);
  border-radius: 1rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--heading, #3d3836);
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease;
}
.about-story-phrases-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-soft);
}
/* Staggered entrance cho grid */
.about-story-phrases-grid .about-story-phrases-card:nth-child(1) { animation: phraseCardIn 0.5s ease-out 0.1s both; }
.about-story-phrases-grid .about-story-phrases-card:nth-child(2) { animation: phraseCardIn 0.5s ease-out 0.2s both; }
.about-story-phrases-grid .about-story-phrases-card:nth-child(3) { animation: phraseCardIn 0.5s ease-out 0.3s both; }
.about-story-phrases-grid .about-story-phrases-card:nth-child(4) { animation: phraseCardIn 0.5s ease-out 0.4s both; }
@keyframes phraseCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.about-story-phrases-grid .about-story-phrases-card:hover {
  animation: none;
}
/* Inline quote — giống pull quote, gọn gàng */
.about-story-prose p.about-story-quote {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--heading, #3d3836);
  margin: 1.5em 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 3px solid var(--accent, #059669);
  letter-spacing: 0.01em;
}
.about-story-prose p.about-story-quote::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--accent, #059669);
  margin-bottom: 0.75rem;
  border-radius: 1px;
}
.about-story-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}
.about-story-prose :is(video, iframe) {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0.5rem;
  margin: 1.5em 0;
  display: block;
}
.about-story-prose iframe {
  aspect-ratio: 16 / 9;
  min-height: 18rem;
}
.about-story-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.75em 0;
  text-align: left;
  font-size: 0.92em;
}
.about-story-prose th,
.about-story-prose td {
  border: 1px solid var(--border);
  padding: 0.75rem 0.9rem;
  vertical-align: top;
}
.about-story-prose th {
  background: var(--bg-warm);
  color: var(--heading);
  font-weight: 600;
}
.about-story-prose td {
  background: rgba(255, 255, 255, 0.22);
}

/* Story image break — cùng khung 42rem với .about-story-prose, khoảng cách dọc theo nhịp chữ */
.about-story-image-break-wrap {
  max-width: 42rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-block: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .about-story-image-break-wrap {
    padding-block: 1.125em;
  }
}
.about-story-image-break {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
.about-story-image-break img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* Shared 75rem container — same as blog/homepage */
.about-section-container {
  width: min(75rem, 100%);
  margin: 0 auto;
  padding-left:  clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
}
.about-faq-section {
  padding: var(--sec-pad-lg) 0;
  background: var(--bg);
}
.about-moments-section {
  padding: var(--sec-pad-lg) clamp(1rem, 3vw, 1.5rem);
  background: var(--bg-warm);
}
.about-moments-container {
  width: min(75rem, 100%);
  margin: 0 auto;
}
.about-moments-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--heading);
  margin-bottom: 2.5rem;
  text-align: center;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .about-moments-title { font-size: 1.75rem; }
}
.about-moments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .about-moments-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .about-moments-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.about-moments-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}
.about-moments-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
  border-color: var(--accent-soft);
}
.about-moments-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}
.about-moments-card:hover .about-moments-card-icon {
  transform: scale(1.08);
  background: var(--accent);
  color: var(--bg);
}
.about-moments-card-text {
  font-size: 0.9375rem;
  line-height: var(--lh-base);
  color: var(--text);
  margin: 0;
}

.about-pull-quote-section {
  padding: var(--sec-pad-lg) clamp(1rem, 3vw, 1.5rem);
  text-align: center;
  background: var(--bg);
}
.about-pull-quote {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--heading);
  margin: 0;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em;
  position: relative;
}
.about-pull-quote::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 1.5rem;
  border-radius: 1px;
}
@media (min-width: 768px) {
  .about-pull-quote { font-size: 1.875rem; }
}

.abt-stats {
  position: relative;
  margin-top: -3rem;
  z-index: 3;
  padding-bottom: 2rem;
}
.abt-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .abt-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.abt-stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.abt-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.abt-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.abt-stat-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.1;
}
@media (min-width: 768px) {
  .abt-stat-number { font-size: 2.5rem; }
}
.abt-stat-label {
  font-size: 0.75rem;
  color: var(--meta);
  letter-spacing: 0.06em;
  margin-top: 0.35rem;
}

.abt-story {
  padding: 4rem 0 5rem;
}
.abt-story-line {
  position: relative;
}
.abt-story-line::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  display: none;
}
@media (min-width: 768px) {
  .abt-story-line::before { display: block; left: 50%; transform: translateX(-50%); }
}
.abt-story-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
  position: relative;
}
.abt-story-item:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .abt-story-item {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .abt-story-reverse .abt-story-visual { order: 2; }
  .abt-story-reverse .abt-story-body { order: 1; text-align: right; }
  .abt-story-reverse .abt-story-dot { margin-left: auto; }
}

.abt-story-visual {
  position: relative;
}
.abt-story-img {
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
}
.abt-story-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-story-item:hover .abt-story-img img {
  transform: scale(1.04);
}
.abt-story-num {
  position: absolute;
  bottom: -0.75rem;
  right: -0.5rem;
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 500;
  color: var(--accent);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  .abt-story-num { font-size: 5.5rem; bottom: -1.25rem; right: -0.75rem; }
  .abt-story-reverse .abt-story-num { right: auto; left: -0.75rem; }
}

.abt-story-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  margin-bottom: 0.75rem;
  transition: transform 0.3s ease;
}
.abt-story-item:hover .abt-story-dot {
  transform: scale(1.12);
}
.abt-story-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}
.abt-story-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
  .abt-story-title { font-size: 1.5rem; }
}
.abt-story-desc {
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.75;
}

.abt-philo {
  padding: 5rem 0;
  background: var(--bg-warm);
}
.abt-philo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .abt-philo-grid { grid-template-columns: repeat(3, 1fr); }
}
.abt-philo-card {
  position: relative;
  padding: 2.25rem 2rem 2rem;
  border-radius: 1.25rem;
  background: var(--ph-gradient);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}
.abt-philo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.07);
}
.abt-philo-num {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--ph-accent);
  opacity: 0.25;
  line-height: 1;
}
.abt-philo-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  color: var(--ph-accent);
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease;
}
.abt-philo-card:hover .abt-philo-icon-wrap {
  transform: scale(1.1) rotate(-3deg);
}
.abt-philo-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--heading);
  margin-bottom: 0.5rem;
}
.abt-philo-desc {
  font-size: 0.85rem;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.abt-philo-accent-line {
  width: 0;
  height: 2px;
  background: var(--ph-accent);
  border-radius: 1px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-philo-card:hover .abt-philo-accent-line {
  width: 40px;
}

.abt-gallery-section {
  padding: var(--sec-pad-lg) 0;
}
.abt-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .abt-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
.abt-gallery-item {
  overflow: hidden;
  border-radius: 0.75rem;
  aspect-ratio: 1;
  position: relative;
}
.abt-gallery-wide {
  grid-column: span 2;
  aspect-ratio: 2/1;
}
@media (max-width: 767px) {
  .abt-gallery-wide { grid-column: span 1; aspect-ratio: 1; }
}
.abt-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease;
}
.abt-gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.06);
}

.abt-contact {
  padding: var(--sec-pad-lg) 0;
}
.abt-contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .abt-contact-inner { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}
.abt-contact-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--body);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}
.abt-contact-link:hover { color: var(--accent); }
.abt-contact-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--accent);
  flex-shrink: 0;
}
.abt-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.abt-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.abt-form-input::placeholder { color: var(--meta); }
.abt-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196,168,130,0.1);
}

.about-faq {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.about-faq:hover {
  border-color: var(--accent-soft);
}
.about-faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  cursor: pointer;
  gap: 1rem;
}
.about-faq-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.about-faq.is-open .about-faq-icon {
  transform: rotate(45deg);
}
.about-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 1.5rem;
}
.about-faq.is-open .about-faq-body {
  max-height: 200px;
  padding: 0 1.5rem 1.25rem;
}

.pillar-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}
.pillar-card img { transition: transform 0.6s ease; }
.pillar-card:hover img { transform: scale(1.03); }
.pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(59,52,47,0.55) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 1.75rem;
  border-radius: 0.75rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.sr-only:focus,
.sr-only:focus-visible {
  position: absolute;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  background: #fff;
  color: #1c1917;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  outline: none;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ========================================================================
   HOMEPAGE 2026 — Healing blog redesign (hp2-*)
   Designed pixel-perfect for layout-ngaybinhthuong-homepage.png
   ======================================================================== */

:root {
  /* Page background — cream warm dịu mắt premium */
  --hp2-page: #F7F4EE;
  /* Bề mặt các block / section / card — đậm hơn page bg 1 chút */
  --hp2-warm: #f0ebe2;
  --hp2-card: #f0ebe2;
  --hp2-cream: #f0ebe2;
  /* Bề mặt nhạt hơn cho hover/inset / image loading */
  --hp2-cream-soft: #e8e2d6;
  /* Sage accent — viền và sage button */
  --hp2-sage: #84906d;
  --hp2-sage-soft: rgba(132, 144, 109, 0.22);
  --hp2-sage-dim:  rgba(132, 144, 109, 0.12);
  --hp2-line: rgba(132, 144, 109, 0.22);
  --hp2-accent: #84906d;
  /* Typography colors — đủ tương phản (WCAG AA) */
  --hp2-ink: #2A2A2A;       /* heading */
  --hp2-ink-soft: #3D3D3D;  /* body text */
  --hp2-muted: #4B4B4B;     /* meta / cap / caption */
  /* Radii / shadows */
  --hp2-radius-lg: 22px;
  --hp2-radius-md: 16px;
  --hp2-radius-sm: 12px;
  --hp2-shadow-sm: 0 1px 2px rgba(31, 28, 24, 0.03), 0 4px 16px rgba(31, 28, 24, 0.04);
  --hp2-shadow-md: 0 4px 24px rgba(31, 28, 24, 0.06);
}

/* Container — đồng nhất với header.site-header (Tailwind max-w-7xl px-4 sm:px-6) */
.hp2-container {
  max-width: 80rem;          /* 1280px = Tailwind max-w-7xl */
  margin-inline: auto;
  padding-inline: 1rem;       /* 16px = Tailwind px-4 */
  width: 100%;
}
@media (min-width: 640px) {
  .hp2-container { padding-inline: 1.5rem; }   /* 24px = sm:px-6 */
}
.hp2-container--narrow { max-width: 48rem; }   /* 768px cho quote text */

/* Section base — spacing đồng đều, gọn lại */
.hp2-section { padding: clamp(36px, 4.5vw, 64px) 0; }
.hp2-section + .hp2-section { padding-top: 0; }
.hp2-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.hp2-section__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h2);             /* 26 → 36px */
  color: var(--hp2-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0;
}
.hp2-section__desc {
  color: var(--hp2-muted);
  font-size: 0.9rem;
  margin-top: 0.35rem;
}
.hp2-section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  color: var(--hp2-ink-soft);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color .25s ease, transform .25s ease;
}
.hp2-section__link:hover {
  color: var(--hp2-accent);
  transform: translateX(2px);
}
.hp2-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);             /* 12 → 13px */
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp2-muted);
  margin: 0 0 0.5rem;
}

/* Buttons */
.hp2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
  line-height: 1;
}
.hp2-btn--primary {
  background: var(--hp2-ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(45, 42, 38, 0.18);
}
.hp2-btn--primary:hover {
  background: var(--hp2-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(111, 134, 102, 0.28);
}
.hp2-btn--ghost {
  background: transparent;
  color: var(--hp2-ink);
  border-color: rgba(45, 42, 38, 0.25);
}
.hp2-btn--ghost:hover {
  background: var(--hp2-ink);
  color: #fff;
  border-color: var(--hp2-ink);
}

/* ============== HERO ============== */
.hp2-hero {
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(480px, 78vh, 720px);
  display: flex;
  align-items: flex-end;
}
.hp2-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hp2-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hp2-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0) 30%, rgba(20, 17, 14, 0.6) 100%),
    linear-gradient(90deg, rgba(20, 17, 14, 0.55) 0%, rgba(20, 17, 14, 0.05) 70%);
}
.hp2-hero__inner {
  width: 100%;
  padding: clamp(36px, 7vw, 80px) 0;
}
.hp2-hero__content { max-width: 640px; }
.hp2-hero__title {
  font-family: var(--font-serif, "Lora", serif);
  font-weight: 500;
  font-size: var(--fs-display);        /* 36 → 56px */
  line-height: 1.16;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.hp2-hero__sub {
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-lead);           /* 18 → 21px */
  line-height: 1.7;
  max-width: 38rem;
  margin: 0 0 1.6rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}
.hp2-hero__actions { margin-top: 1.4rem; }
@media (max-width: 640px) {
  .hp2-hero { min-height: 540px; }
}

/* ============== LATEST POST ============== */
.hp2-latest__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.45fr 1fr;
}
@media (max-width: 899px) { .hp2-latest__grid { grid-template-columns: 1fr; } }
.hp2-latest__side { display: grid; gap: 18px; }
.hp2-latest__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--hp2-radius-md);
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  background: #2d2a26;
}
.hp2-latest__card--lg { aspect-ratio: 4 / 3.2; }
.hp2-latest__card--sm { aspect-ratio: 16 / 9; }
@media (max-width: 899px) {
  .hp2-latest__card--lg, .hp2-latest__card--sm { aspect-ratio: 16 / 10; }
}
.hp2-latest__media { position: absolute; inset: 0; z-index: -1; }
.hp2-latest__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.65,.3,1);
}
.hp2-latest__card:hover .hp2-latest__media img { transform: scale(1.04); }
.hp2-latest__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,14,0) 35%, rgba(20,17,14,0.78) 100%);
}
.hp2-latest__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.hp2-latest__cat {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.45rem;
}
.hp2-latest__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h5);             /* 18 → 21px */
  font-weight: 500;
  line-height: var(--lh-snug);
  margin: 0 0 0.45rem;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp2-latest__card--lg .hp2-latest__title { font-size: var(--fs-h3); }
.hp2-latest__meta {
  font-size: var(--fs-xs);             /* 12 → 13px */
  color: rgba(255,255,255,0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.hp2-dot { opacity: 0.6; }

/* ============== AUTHOR BLOCK ============== */
.hp2-author__card {
  background: var(--hp2-card);
  border-radius: var(--hp2-radius-lg);
  border: 1px solid var(--hp2-line);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  box-shadow: var(--hp2-shadow-sm);
}
@media (max-width: 899px) {
  .hp2-author__card { grid-template-columns: 1fr; }
}
.hp2-author__text {
  padding: clamp(32px, 4.5vw, 64px) clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hp2-author__eyebrow {
  font-size: var(--fs-xs);             /* 12 → 13px */
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--hp2-muted);
  margin: 0 0 1rem;
}
.hp2-author__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h2);             /* 26 → 36px */
  font-weight: 500;
  color: var(--hp2-ink);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0 0 1.1rem;
}
.hp2-author__desc {
  color: var(--hp2-ink-soft);
  font-size: var(--fs-body);           /* 17 → 19px */
  line-height: var(--lh-relaxed);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}
.hp2-author__media {
  position: relative;
  overflow: hidden;
  background: var(--hp2-cream-soft);
  min-height: 320px;
}
.hp2-author__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 899px) {
  .hp2-author__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
    position: relative;
  }
}
.hp2-author .hp2-btn--ghost { align-self: flex-start; }

/* ============== 3 PILLARS ============== */
.hp2-pillars__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hp2-pillars__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h2);             /* 26 → 36px */
  font-weight: 500;
  color: var(--hp2-ink);
  line-height: var(--lh-tight);
  margin: 0 0 0.6rem;
}
.hp2-pillars__desc {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--hp2-muted);
  font-size: var(--fs-md);             /* 15 → 17px */
  line-height: var(--lh-relaxed);
}
.hp2-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 899px) { .hp2-pillars__grid { grid-template-columns: 1fr; } }
.hp2-pillar {
  background: var(--hp2-card);
  border: 1px solid var(--hp2-line);
  border-radius: var(--hp2-radius-md);
  padding: clamp(22px, 3vw, 36px) clamp(20px, 2.5vw, 30px);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}
.hp2-pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pillar-accent, var(--hp2-accent));
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .3s ease, transform .3s ease;
}
.hp2-pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--hp2-shadow-md);
  border-color: transparent;
}
.hp2-pillar:hover::before { opacity: 1; transform: translateY(0); }
.hp2-pillar__icon {
  width: clamp(76px, 7vw, 112px);
  height: clamp(76px, 7vw, 112px);
  margin: 0 auto 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hp2-pillar__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* SVG live/grow/heal đã được crop sát viewBox -> KHÔNG cần scale up. */
  transform: none;
  filter: brightness(0);
  opacity: 0.88;
}
.hp2-pillar__name {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h3);             /* 22 → 28px */
  font-weight: 500;
  color: var(--hp2-ink);
  line-height: var(--lh-tight);
  margin: 0 0 0.4rem;
}
.hp2-pillar__sub {
  font-size: var(--fs-md);             /* 15 → 17px */
  color: var(--hp2-ink-soft);
  margin: 0 0 0.85rem;
}
.hp2-pillar__desc {
  font-size: var(--fs-md);             /* 15 → 17px */
  line-height: var(--lh-relaxed);
  color: var(--hp2-muted);
  margin: 0 0 1.5rem;
}
.hp2-pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  border-radius: 999px;
  background: #fff;
  color: var(--hp2-ink);
  text-decoration: none;
  border: 1px solid var(--hp2-line);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hp2-pillar__cta:hover {
  background: var(--hp2-sage);
  color: #fff;
  border-color: var(--hp2-sage);
}

/* ============== FEATURED TABS ============== */
.hp2-featured__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.hp2-section__link--right { margin-bottom: .25rem; }
.hp2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--hp2-line);
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}
.hp2-tabs__btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 0.7rem 1rem;
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  color: var(--hp2-muted);
  cursor: pointer;
  position: relative;
  transition: color .25s ease;
  letter-spacing: 0.01em;
}
.hp2-tabs__btn::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: -1px;
  height: 2px;
  background: var(--hp2-accent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity .25s ease, transform .25s ease;
}
.hp2-tabs__btn:hover { color: var(--hp2-ink); }
.hp2-tabs__btn.is-active { color: var(--hp2-ink); }
.hp2-tabs__btn.is-active::after { opacity: 1; transform: scaleX(1); }

.hp2-tabs__panel { display: none; }
.hp2-tabs__panel.is-active { display: block; }
.hp2-feat-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .hp2-feat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .hp2-feat-grid { grid-template-columns: repeat(2, 1fr); } }
.hp2-feat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.hp2-feat-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--hp2-radius-sm);
  overflow: hidden;
  background: var(--hp2-cream-soft);
  margin-bottom: 0.75rem;
}
.hp2-feat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.65,.3,1);
}
.hp2-feat-card:hover .hp2-feat-card__media img { transform: scale(1.05); }
.hp2-feat-card__cat {
  font-size: var(--fs-xs);             /* 12 → 13px */
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--hp2-muted);
  margin: 0 0 0.4rem;
}
.hp2-feat-card__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h5);             /* 18 → 21px */
  font-weight: 500;
  color: var(--hp2-ink);
  margin: 0 0 0.45rem;
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s ease;
}
.hp2-feat-card:hover .hp2-feat-card__title { color: var(--hp2-accent); }
.hp2-feat-card__date {
  font-size: var(--fs-xs);
  color: var(--hp2-muted);
  margin: 0;
}
.hp2-feat-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--hp2-muted);
  font-size: var(--fs-md);
  background: var(--hp2-card);
  border-radius: var(--hp2-radius-sm);
  border: 1px dashed var(--hp2-line);
}

/* ============== QUOTE ============== */
.hp2-quote {
  position: relative;
  /* Lớp gradient cream bán trong suốt nằm trên ảnh để text giữ tương phản tốt;
     image-set ưu tiên WebP, fallback JPG. Mobile dùng size nhỏ (800w),
     desktop swap lên 1600w/1920w qua media query bên dưới. */
  background-color: var(--hp2-warm);
  background-image:
    linear-gradient(
      to right,
      rgba(247, 244, 238, 0.92) 0%,
      rgba(247, 244, 238, 0.78) 40%,
      rgba(247, 244, 238, 0.55) 100%
    ),
    image-set(
      url("/assets/images/home-quote-bg-1200.webp") type("image/webp"),
      url("/assets/images/home-quote-bg-1200.jpg")  type("image/jpeg")
    );
  background-image:
    linear-gradient(
      to right,
      rgba(247, 244, 238, 0.92) 0%,
      rgba(247, 244, 238, 0.78) 40%,
      rgba(247, 244, 238, 0.55) 100%
    ),
    -webkit-image-set(
      url("/assets/images/home-quote-bg-1200.webp") type("image/webp"),
      url("/assets/images/home-quote-bg-1200.jpg")  type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 640px) {
  .hp2-quote {
    background-image:
      linear-gradient(
        to bottom,
        rgba(247, 244, 238, 0.94) 0%,
        rgba(247, 244, 238, 0.78) 100%
      ),
      image-set(
        url("/assets/images/home-quote-bg-800.webp") type("image/webp"),
        url("/assets/images/home-quote-bg-800.jpg")  type("image/jpeg")
      );
  }
}
@media (min-width: 1280px) {
  .hp2-quote {
    background-image:
      linear-gradient(
        to right,
        rgba(247, 244, 238, 0.9) 0%,
        rgba(247, 244, 238, 0.72) 40%,
        rgba(247, 244, 238, 0.5) 100%
      ),
      image-set(
        url("/assets/images/home-quote-bg-1600.webp") type("image/webp"),
        url("/assets/images/home-quote-bg-1600.jpg")  type("image/jpeg")
      );
  }
}
@media (min-width: 1600px) {
  .hp2-quote {
    background-image:
      linear-gradient(
        to right,
        rgba(247, 244, 238, 0.88) 0%,
        rgba(247, 244, 238, 0.7) 40%,
        rgba(247, 244, 238, 0.45) 100%
      ),
      image-set(
        url("/assets/images/home-quote-bg-1920.webp") type("image/webp"),
        url("/assets/images/home-quote-bg-1920.jpg")  type("image/jpeg")
      );
  }
}
.hp2-section + .hp2-quote { padding-top: clamp(56px, 7vw, 96px); }
.hp2-quote + .hp2-section { padding-top: clamp(40px, 5vw, 72px); }

.hp2-quote__leaf {
  position: absolute;
  pointer-events: none;
  color: var(--hp2-accent);
  opacity: 0.55;
  z-index: 0;
}
.hp2-quote__leaf--right {
  top: -12px;
  right: -24px;
  width: clamp(140px, 22vw, 260px);
  aspect-ratio: 5 / 6;
}
.hp2-quote__leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 640px) {
  .hp2-quote__leaf--right { right: -48px; opacity: 0.4; }
}

.hp2-quote__inner { position: relative; z-index: 1; }
.hp2-quote__deco {
  display: inline-flex;
  margin: 0 0 1.5rem;
  color: var(--hp2-accent);
  opacity: 0.85;
}
.hp2-quote__text {
  font-family: var(--font-serif, "Lora", serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);             /* 26 → 36px */
  color: var(--hp2-ink);
  line-height: var(--lh-snug);
  margin: 0 auto 1.75rem;
  max-width: 38rem;
  letter-spacing: -0.005em;
}
.hp2-quote__sign {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-serif, "Lora", serif);
  font-style: italic;
  font-size: var(--fs-md);             /* 15 → 17px */
  color: var(--hp2-ink-soft);
}
.hp2-quote__name {
  letter-spacing: 0.02em;
}
.hp2-quote__dots {
  width: 56px;
  height: 6px;
  display: inline-block;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
  background-size: 8px 6px;
  background-repeat: round;
  color: rgba(154, 123, 82, 0.55);
  opacity: 0.85;
}

/* ============== DONATE ============== */
.hp2-donate__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--hp2-cream);
  border-radius: var(--hp2-radius-lg);
  overflow: hidden;
  align-items: stretch;
  border: 1px solid var(--hp2-line);
  box-shadow: var(--hp2-shadow-sm);
}
@media (max-width: 899px) { .hp2-donate__card { grid-template-columns: 1fr; } }
.hp2-donate__media {
  position: relative;
  background: var(--hp2-cream);
  overflow: hidden;
  min-height: 240px;
}
.hp2-donate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.65,.3,1);
}
.hp2-donate__card:hover .hp2-donate__media img { transform: scale(1.03); }
@media (max-width: 899px) {
  .hp2-donate__media { aspect-ratio: 16 / 11; min-height: 0; }
}
.hp2-donate__body {
  padding: clamp(28px, 4.5vw, 64px) clamp(28px, 4.5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hp2-donate__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h2);             /* 26 → 36px */
  font-weight: 500;
  color: var(--hp2-ink);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}
.hp2-donate__desc {
  color: var(--hp2-ink-soft);
  font-size: var(--fs-body);           /* 17 → 19px */
  line-height: var(--lh-relaxed);
  margin: 0 0 1.75rem;
  max-width: 30rem;
}
/* Sage button — riêng cho donate */
.hp2-btn--sage {
  background: var(--hp2-sage);
  color: #fff;
  box-shadow: 0 4px 14px rgba(132, 144, 109, 0.28);
}
.hp2-btn--sage:hover {
  background: #6f7c5b;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(111, 124, 91, 0.32);
}
.hp2-donate .hp2-btn--sage { align-self: flex-start; }

/* ============== UNIFIED NEWSLETTER ============== */
.nbt-newsletter__inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.nbt-newsletter__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.008em;
  color: var(--heading);
  text-wrap: balance;
}
.nbt-newsletter__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--meta);
  text-wrap: pretty;
}
.nbt-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nbt-newsletter__input {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.24);
  border-radius: 999px;
  background: #fff;
  padding: 0.62rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nbt-newsletter__input:focus {
  border-color: rgba(132, 144, 109, 0.48);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.12);
}
.nbt-newsletter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  padding: 0.62rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.nbt-newsletter__btn:hover { background: #6f7958; }
.nbt-newsletter__btn:disabled { opacity: 0.65; cursor: wait; }
.nbt-newsletter__trust {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--meta);
  text-align: center;
}

/* Banner — homepage section */
.nbt-newsletter--banner {
  padding: clamp(2.5rem, 6vw, 3.5rem) 0;
}
.nbt-newsletter--banner .nbt-newsletter__inner {
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: clamp(1.35rem, 3vw, 1.75rem);
  border: 1px solid rgba(132, 144, 109, 0.18);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #f7f3eb 0%, #f0ebdd 100%);
  text-align: center;
  align-items: center;
}
.nbt-newsletter--banner .nbt-newsletter__form {
  width: 100%;
  max-width: 22rem;
}
@media (min-width: 640px) {
  .nbt-newsletter--banner .nbt-newsletter__form {
    flex-direction: row;
    align-items: stretch;
    max-width: 28rem;
    padding: 4px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(132, 144, 109, 0.22);
  }
  .nbt-newsletter--banner .nbt-newsletter__input {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nbt-newsletter--banner .nbt-newsletter__input:focus { box-shadow: none; }
  .nbt-newsletter--banner .nbt-newsletter__btn {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 1.15rem;
    white-space: nowrap;
  }
}

/* Card — sidebar / post endcap */
.nbt-newsletter--card {
  border: 1px solid rgba(132, 144, 109, 0.18);
  border-radius: 1rem;
  background: #f7f3eb;
  padding: 1.15rem 1.2rem;
}
.journal-sidebar .nbt-newsletter--card {
  background: var(--j-cream);
  border-color: var(--j-line);
  border-radius: var(--j-r-md);
  padding: 1.25rem 1.35rem;
}
.journal-sidebar .nbt-newsletter__title {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.journal-sidebar .nbt-newsletter__desc {
  font-size: 0.875rem;
}
.post-endcap .nbt-newsletter--card {
  margin-top: 1rem;
}

/* ============== NEWSLETTER (legacy hp2 — unused) ============== */
.hp2-newsletter__card {
  background: linear-gradient(135deg, #95a17d 0%, var(--hp2-sage) 55%, #6f7c5b 100%);
  border-radius: var(--hp2-radius-lg);
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: auto 1.1fr 1.4fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(110, 136, 103, 0.25);
}
@media (max-width: 899px) {
  .hp2-newsletter__card {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon text" "form form";
  }
  .hp2-newsletter__icon { grid-area: icon; }
  .hp2-newsletter__text { grid-area: text; }
  .hp2-newsletter__form-wrap { grid-area: form; }
}
@media (max-width: 540px) {
  .hp2-newsletter__card {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "text" "form";
    text-align: left;
  }
  .hp2-newsletter__icon { justify-self: flex-start; }
}
.hp2-newsletter__icon {
  flex: 0 0 auto;
  width: clamp(80px, 6vw, 96px);
  height: clamp(80px, 6vw, 96px);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hp2-newsletter__icon svg {
  width: clamp(44px, 3.5vw, 54px);
  height: clamp(44px, 3.5vw, 54px);
  display: block;
}
.hp2-newsletter__title {
  font-family: var(--font-serif, "Lora", serif);
  font-size: var(--fs-h3);             /* 22 → 28px */
  font-weight: 500;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
  line-height: var(--lh-tight);
  color: #fff;
}
.hp2-newsletter__desc {
  font-size: var(--fs-md);             /* 15 → 17px */
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.hp2-newsletter__form-wrap { width: 100%; }
.hp2-newsletter__form {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 4px 16px rgba(31, 28, 24, 0.1);
  overflow: hidden;
}
.hp2-newsletter__input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.85rem 1.2rem;
  color: var(--hp2-ink);
  font-size: var(--fs-md);             /* 15 → 17px */
  outline: none;
  min-width: 0;
}
.hp2-newsletter__input::placeholder { color: #a8a097; }
.hp2-newsletter__btn {
  flex-shrink: 0;
  border: 0;
  background: var(--hp2-ink);
  color: #fff;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-sm);             /* 13 → 15px */
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .25s ease, transform .2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.hp2-newsletter__btn:hover { background: #46413b; transform: translateY(-1px); }
.hp2-newsletter__btn:disabled { opacity: 0.7; cursor: wait; }
@media (max-width: 480px) {
  .hp2-newsletter__form { flex-direction: column; border-radius: var(--hp2-radius-md); padding: 8px; gap: 6px; }
  .hp2-newsletter__btn { padding: 0.85rem; }
}
.hp2-newsletter__feedback {
  font-size: 0.8rem;
  margin: 0.7rem 0 0;
  color: #fff;
}
.hp2-newsletter__feedback.hidden { display: none; }
.hp2-newsletter__count {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.65rem 0 0;
}

/* ============== FOOTER (minimal) ============== */
.site-footer {
  background: #f0ebdd;
  margin-top: clamp(48px, 8vw, 96px);
  padding: clamp(56px, 10vw, 96px) 1.25rem clamp(44px, 8vw, 72px);
  color: var(--hp2-ink-soft);
  text-align: center;
}

.site-footer__inner {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.65rem, 1.8vw, 0.95rem);
}

.site-footer__logo {
  display: inline-flex;
  margin-bottom: 0.15rem;
  transition: opacity .25s ease, transform .25s ease;
}
.site-footer__logo:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.site-footer__logo img {
  height: clamp(52px, 8vw, 68px);
  width: auto;
  display: block;
}

.site-footer__brand {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--hp2-ink);
}

.site-footer__pillars {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp2-muted);
}

.site-footer__tagline {
  margin: 0.35rem 0 0;
  max-width: 26rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--hp2-muted);
}

.site-footer__rule {
  display: block;
  width: clamp(28px, 5vw, 40px);
  height: 1px;
  margin: clamp(0.85rem, 2.5vw, 1.25rem) 0 clamp(0.35rem, 1vw, 0.55rem);
  background: rgba(74, 68, 58, 0.22);
}

.site-footer__socials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0.15rem 0 0.35rem;
}

.site-footer__socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(74, 68, 58, 0.18);
  color: var(--hp2-ink-soft);
  background: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}
.site-footer__socials a:hover {
  color: var(--hp2-ink);
  border-color: rgba(74, 68, 58, 0.32);
  background: rgba(255, 255, 255, 0.62);
  transform: translateY(-2px);
}

.site-footer__social-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.site-footer__copy {
  margin: 0.5rem 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--hp2-muted);
  line-height: 1.5;
}

.site-footer__legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.site-footer__legal a {
  color: var(--hp2-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer__legal a:hover { color: var(--hp2-accent); }
.site-footer__legal-sep {
  color: rgba(74, 68, 58, 0.35);
  user-select: none;
}

.site-footer__credit {
  margin: 0.85rem 0 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(74, 68, 58, 0.12);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--hp2-muted);
}

@media (max-width: 480px) {
  .site-footer {
    padding-inline: 1rem;
  }
  .site-footer__tagline {
    font-size: 0.8125rem;
    max-width: 20rem;
  }
  .site-footer__socials a {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__logo,
  .site-footer__socials a {
    transition: none;
  }
  .site-footer__logo:hover,
  .site-footer__socials a:hover {
    transform: none;
  }
}

/* Side nav (đã có) — đảm bảo không che footer trên mobile */
@media (max-width: 768px) {
  .hp2-section { padding: clamp(36px, 8vw, 60px) 0; }
  .hp2-tabs { gap: 0.25rem; overflow-x: auto; flex-wrap: nowrap; }
  .hp2-tabs__btn { flex-shrink: 0; padding: 0.55rem 0.7rem; font-size: 0.8rem; }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .hp2-latest__media img,
  .hp2-feat-card__media img,
  .hp2-pillar,
  .hp2-btn,
  .hp2-section__link {
    transition: none !important;
  }
  .hp2-latest__card:hover .hp2-latest__media img,
  .hp2-feat-card:hover .hp2-feat-card__media img {
    transform: none !important;
  }
}

/* =============================================================================
   ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  CALM POLISH LAYER — ngày bình thường remake v2 (2026-05)                  ║
   ║  Tổng hợp tinh chỉnh cuối cùng để toàn site "calm, premium, healing":      ║
   ║   • Design tokens bổ sung (spacing/shadow/radius)                          ║
   ║   • Universal text-wrap (balance cho heading, pretty cho paragraph)        ║
   ║   • Hyphens tiếng Việt + overflow-wrap safety → KHÔNG còn rớt dòng vô duyên║
   ║   • Focus-visible accessible                                               ║
   ║   • Refinements cho hero / latest / author / pillars / featured /          ║
   ║     newsletter / quote / post / blog / about / footer                      ║
   ║  Đặt cuối file để override các block cũ ở phía trên qua CSS cascade.       ║
   ╚═══════════════════════════════════════════════════════════════════════════╝
   ============================================================================= */

:root {
  /* ── Spacing scale (8pt grid + một bước nhỏ 4) ── */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-8: 2rem;      /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  /* ── Radius scale (đồng bộ với hp2-radius-*) ── */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* ── Shadow scale (warm / không xám) ── */
  --shadow-xs: 0 1px 2px rgba(40, 36, 30, 0.04);
  --shadow-sm: 0 1px 2px rgba(40, 36, 30, 0.04), 0 4px 16px rgba(40, 36, 30, 0.05);
  --shadow-md: 0 4px 24px rgba(40, 36, 30, 0.07);
  --shadow-lg: 0 14px 48px -18px rgba(40, 36, 30, 0.18);
  --shadow-focus: 0 0 0 3px rgba(132, 144, 109, 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. UNIVERSAL TYPOGRAPHY WRAPPING
   Tiếng Việt thường có cụm từ dài (vd "không tầm thường") — dễ rớt dòng xấu.
   text-wrap: balance/pretty + hyphens vi giải quyết phần lớn.
   ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.hp2-hero__title, .hp2-hero__sub,
.hp2-section__title, .hp2-pillars__title, .hp2-author__title,
.hp2-donate__title, .hp2-newsletter__title,
.hp2-latest__title, .hp2-latest__cat,
.hp2-feat-card__title, .hp2-feat-card__cat,
.hp2-pillar__name, .hp2-pillar__sub,
.post-title, .post-excerpt,
.page-hero-title, .page-hero-title-minimal,
.page-hero-sub, .page-hero-sub-minimal,
.about-pull-quote,
.hp-folder-title,
.about-moments-title,
.journal-category-name,
.hp2-quote__text,
.site-footer__brand {
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Paragraphs — pretty (tránh rớt 1 từ cuối, river of whitespace) */
p,
.hp2-section__desc,
.hp2-author__desc,
.hp2-donate__desc,
.hp2-pillar__desc,
.hp2-newsletter__desc,
.hp2-pillars__desc,
.site-footer__tagline,
.post-excerpt,
.about-story-prose p,
.hp-folder-desc {
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Disable hyphens on UI/control elements where it harms readability */
.hp2-btn, .hp2-tabs__btn, .nav-link, .nav-link-cta, .hp2-pillar__cta,
.hp2-section__link, .hp2-newsletter__btn,
.btn-heal, .meta-text, .hp2-eyebrow, .post-card__label {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: normal;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ACCESSIBLE FOCUS-VISIBLE
   ───────────────────────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 6px;
  transition: box-shadow .15s ease;
}
.hp2-btn:focus-visible,
.nav-link-cta:focus-visible,
.hp2-newsletter__btn:focus-visible,
.hp2-pillar__cta:focus-visible {
  border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. HERO REFINE — tiêu đề calm hơn, shadow nhẹ
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-hero__title {
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.14;
  /* Bỏ shadow nặng cũ (0 2px 24px rgba(0,0,0,0.3)), dùng shadow mỏng và sạch */
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.22);
  max-width: 22ch;          /* không tràn quá rộng — đỡ chia dòng xấu */
}
.hp2-hero__sub {
  font-size: var(--fs-md);  /* hạ nhẹ từ lead xuống md để bớt phô */
  line-height: var(--lh-relaxed);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  max-width: 32rem;
}
.hp2-hero__shade {
  /* Gradient ấm hơn, không quá đen */
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0) 28%, rgba(20, 17, 14, 0.55) 100%),
    linear-gradient(90deg, rgba(20, 17, 14, 0.45) 0%, rgba(20, 17, 14, 0.02) 70%);
}
.hp2-btn--primary {
  background: var(--hp2-ink);
  /* Hover sage premium hơn */
}
.hp2-btn--primary:hover {
  background: var(--hp2-sage);
  box-shadow: 0 8px 22px rgba(132, 144, 109, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. LATEST POST CARDS — softer hover, tighter type
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-latest__card {
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.2,.65,.3,1), box-shadow .35s ease;
}
.hp2-latest__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.hp2-latest__shade {
  background: linear-gradient(180deg,
              rgba(20,17,14,0) 30%,
              rgba(20,17,14,0.55) 70%,
              rgba(20,17,14,0.85) 100%);
}
.hp2-latest__title {
  letter-spacing: -0.005em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}
.hp2-latest__cat {
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. AUTHOR BLOCK — tỉ lệ ảnh dịu, padding cân
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-author__card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.hp2-author__title {
  letter-spacing: -0.012em;
}
.hp2-author__media {
  min-height: 360px;
}
@media (max-width: 899px) {
  .hp2-author__media { aspect-ratio: 4 / 3; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. PILLARS — sage hover, calm transition, prevent text overflow
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-pillar {
  background: linear-gradient(180deg, #fdfaf4 0%, #f7f1e6 100%);
  border-color: rgba(132, 144, 109, 0.18);
  transition: transform .35s cubic-bezier(.2,.65,.3,1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.hp2-pillar:hover {
  border-color: rgba(132, 144, 109, 0.35);
  box-shadow: 0 18px 44px -28px rgba(132, 144, 109, 0.45);
}
.hp2-pillar__name {
  letter-spacing: -0.005em;
}
.hp2-pillar__sub {
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}
.hp2-pillar__desc {
  text-wrap: pretty;
  max-width: 32ch;
  margin-inline: auto;
}
.hp2-pillar__cta {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(132, 144, 109, 0.3);
  font-weight: 500;
  white-space: nowrap;
}
.hp2-pillar__cta:hover {
  background: var(--hp2-sage);
  color: #fff;
  border-color: var(--hp2-sage);
  box-shadow: 0 6px 16px -8px rgba(132, 144, 109, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. FEATURED TABS — better mobile scroll
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hp2-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .hp2-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-inline: -1rem;       /* edge-bleed để tab cuối không bị cắt giữa */
    padding-inline: 1rem;
    scroll-snap-type: x proximity;
  }
  .hp2-tabs__btn {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}
.hp2-feat-card__title {
  letter-spacing: -0.005em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. QUOTE — wrap balance, vừa dịu vừa rõ
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-quote__text {
  letter-spacing: -0.005em;
  max-width: 34rem;
  margin-inline: auto;
}
@media (max-width: 640px) {
  .hp2-quote__text { font-size: var(--fs-h3); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. DONATE — text breathable, button không kéo full-width xấu
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-donate__card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.hp2-donate__title {
  letter-spacing: -0.012em;
}
.hp2-donate__desc {
  max-width: 30rem;
}
.hp2-btn--sage {
  background: var(--hp2-sage);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
  10. NEWSLETTER — text wrap, button không vỡ form trên mobile
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-newsletter__card {
  /* Gradient sage dịu hơn — bớt "phô" */
  background: linear-gradient(135deg, #9ba88c 0%, var(--hp2-sage) 50%, #6e7c5b 100%);
  box-shadow: 0 14px 40px -22px rgba(110, 124, 91, 0.5);
}
.hp2-newsletter__title {
  letter-spacing: -0.008em;
}
.hp2-newsletter__desc {
  max-width: 30rem;
}
.hp2-newsletter__input {
  font-size: var(--fs-base);
}
.hp2-newsletter__btn {
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .hp2-newsletter__form { padding: 6px; }
  .hp2-newsletter__input { padding: 0.75rem 1rem; }
  .hp2-newsletter__btn { padding: 0.85rem 1rem; font-size: var(--fs-sm); }
}

/* ─────────────────────────────────────────────────────────────────────────────
  11. SECTION HEAD — đồng nhất giữa các section
   ───────────────────────────────────────────────────────────────────────────── */
.hp2-section__title {
  letter-spacing: -0.012em;
}
@media (max-width: 640px) {
  .hp2-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .hp2-featured__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
  12. POST DETAIL — calm reading
   ───────────────────────────────────────────────────────────────────────────── */
.post-title {
  text-wrap: balance;
  letter-spacing: -0.012em;
  max-width: 26ch;
  margin-inline: 0;
}
.post-excerpt {
  text-wrap: pretty;
  max-width: 60ch;
}
/* Trên mobile: căn trái, rhythm prose mượt (Safari / iOS / Chrome) */
@media (max-width: 767px) {
  .post-page .post-content.article-content {
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.012em;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .post-page .article-content p,
  .post-page .post-content p {
    text-align: left !important;
    text-align-last: left !important;
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: pretty;
    margin-top: 0;
    margin-bottom: 0.72em;
    orphans: 3;
    widows: 3;
  }

  .post-page .article-content p + p:not(.nbt-para-break) {
    margin-top: -0.08em;
  }

  .post-page .article-content p.nbt-para-break,
  .post-page .post-content p.nbt-para-break {
    margin-bottom: var(--p-gap-section) !important;
  }

  .post-page .article-content :is(h2, h3) {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding-left: 0;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    line-height: 1.36;
    text-wrap: balance;
  }

  .post-page .article-content :is(h2, h3)::before {
    position: static;
    flex-shrink: 0;
    margin-top: 0.52em;
    top: auto;
    left: auto;
    width: 0.34rem;
    height: 0.34rem;
    box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.1);
  }

  .post-page .article-content h2 + p,
  .post-page .article-content h3 + p {
    margin-top: 0.4em;
  }

  .post-page .article-content p + h2 {
    margin-top: 1.65em;
  }

  .post-page .article-content p + h3 {
    margin-top: 1.35em;
  }

  .post-page .article-content ul,
  .post-page .article-content ol {
    margin-top: 0.65em;
    margin-bottom: 0.95em;
  }

  .post-page .article-content li {
    line-height: 1.68;
  }

  .post-page .article-content blockquote {
    margin-top: 1.15em;
    margin-bottom: 1.15em;
    font-size: 1rem;
    line-height: 1.68;
  }

  .post-container {
    padding-inline: 1.125rem;
  }

  .post-hero {
    padding-inline: 0;
    text-align: left;
  }

  .post-hero__meta {
    justify-content: flex-start;
  }

  .post-hero__title {
    text-align: left;
    max-width: none;
    line-height: 1.28;
  }

  .post-hero__excerpt {
    text-align: left;
    line-height: 1.68;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .article-content p,
  .post-content p {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
}
.post-content p {
  text-align: left;
  text-wrap: pretty;
}
/* Sidebar widget hover dịu */
.post-card {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.post-card:hover {
  border-color: rgba(132, 144, 109, 0.28);
  box-shadow: var(--shadow-sm);
}
.post-author-card__avatar {
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.post-latest__title {
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Featured image — round + subtle */
.post-featured img {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* ─────────────────────────────────────────────────────────────────────────────
  13. BLOG / CATEGORY / JOURNAL — title text wrap, card hover
   ───────────────────────────────────────────────────────────────────────────── */
article h2, article h3 {
  text-wrap: balance;
}
article p {
  text-wrap: pretty;
}
.journal-category-card {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.journal-category-card:hover {
  background: rgba(255, 252, 245, 0.95);
}
.journal-category-name {
  text-wrap: balance;
}
.journal-category-desc {
  text-wrap: pretty;
}

/* Category hero description */
.cat-hero-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.68;
  color: #78716c;
  margin: 1rem auto 0;
  max-width: 36rem;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
  14. ABOUT — pull-quote, moments balance
   ───────────────────────────────────────────────────────────────────────────── */
.about-pull-quote {
  text-wrap: balance;
  max-width: 28ch;
  margin-inline: auto;
}
.about-moments-card-text {
  text-wrap: pretty;
}
.about-story-prose p {
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
  15. PAGE-HERO COMPONENT — balance + pretty
   ───────────────────────────────────────────────────────────────────────────── */
.page-hero-title, .page-hero-title-minimal {
  text-wrap: balance;
  letter-spacing: -0.012em;
  max-width: 22ch;
  margin-inline: auto;
}
.page-hero-sub, .page-hero-sub-minimal {
  text-wrap: pretty;
  max-width: 38rem;
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
  16. NAV / HEADER — mobile full-screen menu polish
   ───────────────────────────────────────────────────────────────────────────── */
.nav-link, .nav-link-cta {
  white-space: nowrap;
}
.mobile-menu__link,
.mobile-menu__sublink {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ─────────────────────────────────────────────────────────────────────────────
  17. FOOTER — tagline wrap an toàn trên mobile
   ───────────────────────────────────────────────────────────────────────────── */
.site-footer__tagline {
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.site-footer__legal {
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
  18. UTILS — text-balance / text-pretty / nowrap helpers
       (admin có thể dùng trực tiếp khi cần)
   ───────────────────────────────────────────────────────────────────────────── */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.text-nowrap { white-space: nowrap; }
.text-vi { -webkit-hyphens: auto; hyphens: auto; word-break: normal; overflow-wrap: break-word; }

/* ─────────────────────────────────────────────────────────────────────────────
  19. IMAGE SAFETY — không bao giờ tràn container.
       (Không dùng `picture { display:block }` global vì sẽ kéo logo header/footer
        chiếm full chiều rộng của <a>. Thay vào đó target từng container.)
   ───────────────────────────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}
.hp2-hero__media picture,
.hp2-author__media picture,
.hp2-donate__media picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hp2-hero__media picture img,
.hp2-author__media picture img,
.hp2-donate__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
  20. PREFERS-REDUCED-MOTION — global fallback
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  JOURNAL PAGE — editorial calm/healing layout                            ║
   ║  Hero · 3 pillar pills · Featured · 2-col main + sidebar widgets         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.journal-page {
  --j-sage:        var(--accent, #84906d);
  --j-sage-deep:   #5f6c4d;
  --j-cream:       #fbf7ef;
  --j-cream-deep:  #f1eadc;
  --j-card:        #ffffff;
  --j-line:        #e8e0d0;
  --j-text:        var(--text, #3d3d3d);
  --j-meta:        #8b8579;
  --j-r-sm:        12px;
  --j-r-md:        18px;
  --j-r-lg:        26px;
  --j-pad-x:       clamp(1rem, 3vw, 2rem);
  --j-section-gap: clamp(2rem, 4vw, 3.25rem);
  background: var(--bg, #f7f4ee);
}

.journal-page .journal-container {
  width: min(75rem, 100%);
  margin: 0 auto;
  padding-left:  clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* ─── Hero (intro + pillar filters in one panel) ─── */
.journal-hero {
  position: relative;
  /* Chỉ padding dọc — ngang để .journal-container căn khớp featured section */
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.journal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(132, 144, 109, 0.06), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.journal-hero__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  background: var(--j-cream, #f7f4ee);
  border: 1px solid var(--j-line, rgba(132, 144, 109, 0.2));
  border-radius: var(--j-r-lg, 20px);
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.03), 0 8px 28px rgba(31, 28, 24, 0.05);
}
.journal-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.45rem, 1vw, 0.65rem);
  padding-bottom: clamp(0.85rem, 1.6vw, 1.1rem);
  border-bottom: 1px solid var(--j-line, rgba(132, 144, 109, 0.18));
}
.journal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--j-sage);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}
.journal-hero__eyebrow .journal-eyebrow-leaf {
  color: var(--j-sage);
  opacity: 0.7;
  flex-shrink: 0;
}
.journal-hero__eyebrow .journal-eyebrow-leaf:last-child {
  transform: scaleX(-1);
}
.journal-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.15rem);
  line-height: 1.08;
  color: var(--j-text);
  margin: 0;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.journal-hero__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.65;
  color: var(--j-meta);
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}
.journal-hero__panel .journal-pillars {
  margin: 0;
}

.journal-hero__leaf {
  position: absolute;
  top: -8%;
  width: clamp(110px, 14vw, 200px);
  height: auto;
  color: var(--j-sage);
  opacity: 0.18;
  z-index: 1;
  pointer-events: none;
}
.journal-hero__leaf svg { width: 100%; height: auto; display: block; }
.journal-hero__leaf--left  { left:  -2%; transform: rotate(-12deg); }
.journal-hero__leaf--right { right: -2%; transform: rotate(12deg) scaleX(-1); }
@media (max-width: 640px) {
  .journal-hero__leaf { opacity: 0.12; width: 90px; }
  .journal-hero__leaf--left  { left:  -10%; top: 4%; }
  .journal-hero__leaf--right { right: -10%; top: 4%; }
}

/* ─── Pillars ─── */
.journal-pillars-section {
  padding: 0 0 clamp(2rem, 4vw, 3rem);
}
.journal-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 0.45rem;
  background: var(--j-cream);
  border: 1px solid var(--j-line);
  border-radius: 999px;
}
.journal-pillar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--j-text);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  min-width: 0;
}
.journal-pillar:hover {
  background: rgba(255, 255, 255, 0.6);
}
.journal-pillar.is-active {
  background: var(--j-cream-deep);
  box-shadow: inset 0 0 0 1px rgba(132, 144, 109, 0.18);
}
.journal-pillar__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--j-sage);
}
.journal-pillar__icon .brand-icon {
  width: 1rem;
  height: 1rem;
  transform: scale(2.2);
}
.journal-pillar__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.journal-pillar__name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--j-text);
}
.journal-pillar__desc {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--j-meta);
  line-height: 1.4;
  margin-top: 0.15rem;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Featured ─── */
.journal-featured-section {
  padding: 0 0 clamp(2rem, 4vw, 2.75rem);
}
.journal-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.2fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--j-cream);
  border: 1px solid var(--j-line);
  border-radius: var(--j-r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: center;
  overflow: hidden;
}
.journal-featured__media-link {
  display: block;
  overflow: hidden;
  border-radius: var(--j-r-md);
}
.journal-featured__media {
  aspect-ratio: 4 / 3;
  background: var(--j-cream-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journal-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.journal-featured:hover .journal-featured__media img {
  transform: scale(1.04);
}
.journal-featured__media-placeholder {
  color: var(--j-sage);
  opacity: 0.45;
}
.journal-featured__body { min-width: 0; }
.journal-featured__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--j-sage);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1rem;
}
.journal-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
  color: var(--j-text);
  text-wrap: balance;
}
.journal-featured__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--j-sage), var(--j-sage));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s ease, color 0.2s ease;
}
.journal-featured__title a:hover { color: var(--j-sage-deep); }
.journal-featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  color: var(--j-meta);
}
.journal-featured__meta-dot { color: var(--j-line); }
.journal-featured__excerpt {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--j-meta);
  margin: 0 0 1.35rem;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: var(--j-sage);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, transform 0.25s ease;
}
.journal-featured__cta:hover {
  background: var(--j-sage-deep);
  transform: translateY(-1px);
}

/* ─── Main grid ─── */
.journal-main-section {
  padding: 0 0 clamp(3rem, 6vw, 5rem);
}
.journal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1024px) {
  .journal-grid { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
}

/* ─── Main column ─── */
.journal-main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--j-line);
}
.journal-main__title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  color: var(--j-text);
  margin: 0;
}

/* Sort dropdown */
.journal-sort { position: relative; }
.journal-sort__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--j-meta);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.journal-sort__trigger:hover { color: var(--j-text); background: var(--j-cream); }
.journal-sort__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--j-line);
  border-radius: var(--j-r-sm);
  box-shadow: 0 12px 28px -16px rgba(60, 50, 30, 0.18);
  z-index: 20;
}
.journal-sort__menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  color: var(--j-text);
  font-family: var(--font-sans);
  font-size: 0.83rem;
  text-decoration: none;
  transition: background 0.15s ease;
}
.journal-sort__menu a:hover,
.journal-sort__menu a.is-active { background: var(--j-cream); color: var(--j-sage-deep); }

/* List */
.journal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.journal-list__item {}
.journal-card {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 0.85rem;
  border-radius: var(--j-r-md);
  background: transparent;
  border: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.journal-card:hover {
  background: var(--j-cream);
  border-color: var(--j-line);
  transform: translateY(-1px);
}
.journal-card__thumb {
  display: block;
  width: 110px;
  height: 110px;
  border-radius: var(--j-r-sm);
  overflow: hidden;
  background: var(--j-cream-deep);
  flex-shrink: 0;
}
.journal-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.journal-card:hover .journal-card__thumb img { transform: scale(1.05); }
.journal-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--j-sage);
  opacity: 0.45;
}
.journal-card__body { min-width: 0; }
.journal-card__eyebrow {
  color: var(--j-sage);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-card__title {
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  font-weight: 500;
  line-height: 1.32;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
  color: var(--j-text);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.journal-card__title a:hover { color: var(--j-sage-deep); }
.journal-card__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--j-meta);
}
.journal-card__bookmark {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0.4rem;
  color: var(--j-meta);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.journal-card__bookmark:hover { opacity: 1; color: var(--j-sage); }

/* Pagination */
.journal-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.journal-pagination__link,
.journal-pagination__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--j-cream);
  border: 1px solid var(--j-line);
  color: var(--j-text);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.journal-pagination__link:hover,
.journal-pagination__more:hover {
  background: #fff;
  border-color: var(--j-sage);
  color: var(--j-sage-deep);
}

/* Empty state */
.journal-empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--j-cream);
  border: 1px solid var(--j-line);
  border-radius: var(--j-r-md);
  color: var(--j-meta);
}
.journal-empty i,
.journal-empty svg {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--j-sage);
  opacity: 0.5;
}
.journal-empty p {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  margin: 0;
}

/* ─── Sidebar widgets ─── */
.journal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .journal-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
  }
}
.journal-widget {
  background: var(--j-cream);
  border: 1px solid var(--j-line);
  border-radius: var(--j-r-md);
  padding: 1.25rem 1.35rem;
}
.journal-widget__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--j-text);
  margin: 0 0 0.85rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.journal-widget__desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--j-meta);
  margin: 0 0 0.9rem;
  text-wrap: pretty;
}

/* Categories list */
.journal-widget__cats {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.journal-widget__cats li + li {
  border-top: 1px solid var(--j-line);
}
.journal-widget__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--j-text);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  transition: color 0.2s ease;
}
.journal-widget__cat:hover { color: var(--j-sage-deep); }
.journal-widget__cat-name { text-wrap: pretty; }
.journal-widget__cat-count {
  flex-shrink: 0;
  color: var(--j-meta);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.journal-widget__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--j-sage);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.journal-widget__more:hover { color: var(--j-sage-deep); }

/* Newsletter widget */
.journal-widget__form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.journal-widget__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--j-line);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--j-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.journal-widget__input::placeholder { color: #b3aea4; }
.journal-widget__input:focus {
  outline: none;
  border-color: var(--j-sage);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.12);
}
.journal-widget__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 0;
  background: var(--j-sage);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.journal-widget__submit:hover { background: var(--j-sage-deep); }
.journal-widget__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.journal-widget__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--j-meta);
}
.journal-widget__trust svg { color: var(--j-sage); }

/* Quote widget */
.journal-widget--quote { text-align: left; }
.journal-widget__quote-mark {
  color: var(--j-sage);
  opacity: 0.45;
  margin-bottom: 0.45rem;
}
.journal-widget__quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--j-text);
  margin: 0 0 0.65rem;
  text-wrap: balance;
}
.journal-widget__quote-text em { font-style: italic; }
.journal-widget__quote-sign {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--j-meta);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ─── Responsive: tablet ─── */
@media (max-width: 1023px) {
  .journal-featured { grid-template-columns: minmax(220px, 0.9fr) 1.4fr; }
}

/* ─── Responsive: mobile ─── */
@media (max-width: 768px) {
  .journal-pillars {
    grid-template-columns: none;
    grid-auto-columns: minmax(78%, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--j-r-lg);
    padding: 0.4rem;
    -webkit-overflow-scrolling: touch;
  }
  .journal-pillar { scroll-snap-align: start; }
  .journal-featured { grid-template-columns: 1fr; }
  .journal-featured__media-link { order: -1; }
  .journal-featured__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .journal-card {
    grid-template-columns: 84px 1fr;
    gap: 0.85rem;
    padding: 0.7rem;
  }
  .journal-card__thumb { width: 84px; height: 84px; }
  .journal-card__bookmark { display: none; }
  .journal-card__title { font-size: 0.96rem; }
  .journal-main__header { flex-direction: row; }
}

/* ─── Hero with background image (modifier) ─────────────────────────
   Active khi admin set `page_journal_hero_image`. Inline CSS vars
   (--j-hero-{800|1200|1600|1920}[-webp]) được PHP gắn lên element. */
.journal-page .journal-hero--has-bg {
  min-height: clamp(360px, 38vw, 480px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* Lớp 1: url thuần (browser cũ nhất). 1200w là baseline. */
  background-image:
    linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
    var(--j-hero-1200, var(--j-hero-1600));
  /* Lớp 2 (vendor prefix cũ cho image-set). */
  background-image:
    linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
    -webkit-image-set(
      var(--j-hero-1200-webp) type("image/webp"),
      var(--j-hero-1200) type("image/jpeg")
    );
  /* Lớp 3 (modern image-set, ưu tiên WebP). */
  background-image:
    linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
    image-set(
      var(--j-hero-1200-webp) type("image/webp"),
      var(--j-hero-1200) type("image/jpeg")
    );
}
.journal-page .journal-hero--has-bg::before { display: none; }
.journal-page .journal-hero--has-bg .journal-hero__leaf { display: none; }
.journal-page .journal-hero--has-bg .journal-hero__panel {
  background: rgba(247, 244, 238, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 4px rgba(31, 28, 24, 0.04), 0 12px 36px rgba(31, 28, 24, 0.07);
}
.journal-page .journal-hero--has-bg .journal-hero__head,
.journal-page .journal-hero--has-bg .journal-hero__title,
.journal-page .journal-hero--has-bg .journal-hero__subtitle {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.journal-page .journal-hero--has-bg .journal-hero__title {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
}

/* Responsive variant swaps */
@media (max-width: 640px) {
  .journal-page .journal-hero--has-bg {
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      var(--j-hero-800, var(--j-hero-1200));
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      -webkit-image-set(
        var(--j-hero-800-webp) type("image/webp"),
        var(--j-hero-800) type("image/jpeg")
      );
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      image-set(
        var(--j-hero-800-webp) type("image/webp"),
        var(--j-hero-800) type("image/jpeg")
      );
  }
}
@media (min-width: 1280px) {
  .journal-page .journal-hero--has-bg {
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      var(--j-hero-1600, var(--j-hero-1200));
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      -webkit-image-set(
        var(--j-hero-1600-webp) type("image/webp"),
        var(--j-hero-1600) type("image/jpeg")
      );
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      image-set(
        var(--j-hero-1600-webp) type("image/webp"),
        var(--j-hero-1600) type("image/jpeg")
      );
  }
}
@media (min-width: 1600px) {
  .journal-page .journal-hero--has-bg {
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      var(--j-hero-1920, var(--j-hero-1600));
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      -webkit-image-set(
        var(--j-hero-1920-webp) type("image/webp"),
        var(--j-hero-1920) type("image/jpeg")
      );
    background-image:
      linear-gradient(180deg, rgba(247, 244, 238, 0.45), rgba(247, 244, 238, 0.55)),
      image-set(
        var(--j-hero-1920-webp) type("image/webp"),
        var(--j-hero-1920) type("image/jpeg")
      );
  }
}

/* sr-only helper if not already in CSS */
.journal-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  JOURNAL — REF-MATCH PASS (pixel polish v2)                              ║
   ║  Override các block ở trên để bám sát design reference:                  ║
   ║   - Hero overlay nhẹ hơn, eyebrow icon star/leaf, title calm             ║
   ║   - Pillars: 1 container cream + 2 vertical dividers, active state ring  ║
   ║   - Featured card: hairline border, ratio 42:58, eyebrow star, sprig SVG ║
   ║   - Sidebar categories: dot prefix + count sage bold                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ─── HERO override ─────────────────────────────────────────────────────── */
/* Cream overlay đậm hơn để decorative botanical chỉ là gợi ý mờ. */
/*
 * Hero loang xuống body — gradient overlay có 3 stop:
 *   0%:   rgba(247,244,238, 0.40) — ảnh decorative lộ rõ ở top
 *   55%:  rgba(247,244,238, 0.72) — vùng text title/subtitle
 *   100%: #F7F4EE solid (match body --bg) — đáy hero & body cùng 1 màu
 *         → loang seamless vào body cream, KHÔNG còn ranh giới 2 màu.
 *
 * Kết hợp với min-height lớn hơn để có chỗ cho gradient fade-out
 * và margin-bottom âm nhẹ để hero "ôm" pillars phía dưới.
 */
.journal-page .journal-hero--has-bg {
  min-height: clamp(420px, 42vw, 540px);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(
      180deg,
      rgba(247, 244, 238, 0.40) 0%,
      rgba(247, 244, 238, 0.72) 55%,
      rgba(247, 244, 238, 1.00) 100%
    ),
    var(--j-hero-1200, var(--j-hero-1600));
  background-image:
    linear-gradient(
      180deg,
      rgba(247, 244, 238, 0.40) 0%,
      rgba(247, 244, 238, 0.72) 55%,
      rgba(247, 244, 238, 1.00) 100%
    ),
    -webkit-image-set(
      var(--j-hero-1200-webp) type("image/webp"),
      var(--j-hero-1200) type("image/jpeg")
    );
  background-image:
    linear-gradient(
      180deg,
      rgba(247, 244, 238, 0.40) 0%,
      rgba(247, 244, 238, 0.72) 55%,
      rgba(247, 244, 238, 1.00) 100%
    ),
    image-set(
      var(--j-hero-1200-webp) type("image/webp"),
      var(--j-hero-1200) type("image/jpeg")
    );
}
/* Pillars nằm trong .journal-hero__panel — không overlap section riêng. */
.journal-page .journal-hero + .journal-pillars-section {
  display: none;
}
@media (max-width: 640px) {
  .journal-page .journal-hero--has-bg {
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      var(--j-hero-800, var(--j-hero-1200));
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      -webkit-image-set(
        var(--j-hero-800-webp) type("image/webp"),
        var(--j-hero-800) type("image/jpeg")
      );
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      image-set(
        var(--j-hero-800-webp) type("image/webp"),
        var(--j-hero-800) type("image/jpeg")
      );
  }
}
@media (min-width: 1280px) {
  .journal-page .journal-hero--has-bg {
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      var(--j-hero-1600, var(--j-hero-1200));
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      -webkit-image-set(
        var(--j-hero-1600-webp) type("image/webp"),
        var(--j-hero-1600) type("image/jpeg")
      );
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      image-set(
        var(--j-hero-1600-webp) type("image/webp"),
        var(--j-hero-1600) type("image/jpeg")
      );
  }
}
@media (min-width: 1600px) {
  .journal-page .journal-hero--has-bg {
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      var(--j-hero-1920, var(--j-hero-1600));
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      -webkit-image-set(
        var(--j-hero-1920-webp) type("image/webp"),
        var(--j-hero-1920) type("image/jpeg")
      );
    background-image:
      linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.40) 0%,
        rgba(247, 244, 238, 0.72) 55%,
        rgba(247, 244, 238, 1.00) 100%
      ),
      image-set(
        var(--j-hero-1920-webp) type("image/webp"),
        var(--j-hero-1920) type("image/jpeg")
      );
  }
}

.journal-page .journal-hero__eyebrow {
  gap: 0.5rem;
  color: var(--hp2-sage, #84906d);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
}
.journal-page .journal-hero__eyebrow .journal-eyebrow-leaf {
  width: 13px;
  height: 13px;
  opacity: 0.85;
}
.journal-page .journal-hero__title {
  font-weight: 500;
  font-size: clamp(1.95rem, 4.5vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.journal-page .journal-hero__subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-md, 0.9375rem);
  line-height: 1.62;
  color: var(--hp2-ink-soft, #5a534a);
  max-width: 32rem;
}
.journal-page .journal-hero__panel {
  width: 100%;
  max-width: none;
  gap: clamp(0.95rem, 1.8vw, 1.25rem);
  padding: clamp(1.1rem, 2vw, 1.45rem);
  background: var(--hp2-card, #f0ebe2);
  border-color: var(--hp2-line, rgba(132, 144, 109, 0.22));
  border-radius: 24px;
  box-shadow: var(--hp2-shadow-sm, 0 1px 2px rgba(31, 28, 24, 0.03), 0 6px 22px rgba(31, 28, 24, 0.05));
}
.journal-page .journal-hero__head {
  gap: clamp(0.4rem, 0.9vw, 0.6rem);
  padding-bottom: clamp(0.8rem, 1.5vw, 1rem);
  border-bottom-color: var(--hp2-line, rgba(132, 144, 109, 0.2));
}

/* ─── PILLARS override (inside hero panel) ── */
.journal-page .journal-pillars-section {
  padding-bottom: 0;
}
.journal-page .journal-hero__panel .journal-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.18));
  border-radius: calc(var(--hp2-radius-md, 16px) - 4px);
  box-shadow: none;
  position: relative;
}
/* Compact stacked pill: icon trên, tên + desc dưới, căn giữa */
.journal-page .journal-hero__panel .journal-pillar {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem 0.75rem;
  gap: 0.3rem;
}
.journal-page .journal-hero__panel .journal-pillar__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 0.15rem;
}
.journal-page .journal-hero__panel .journal-pillar__name {
  font-family: var(--font-serif, 'Brygada 1918', serif);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hp2-ink, #2A2A2A);
}
.journal-page .journal-hero__panel .journal-pillar__desc {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 0.9vw, 0.875rem);
  line-height: 1.5;
  color: var(--hp2-muted, #6f6962);
  margin-top: 0.15rem;
  max-width: 20ch;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .journal-page .journal-hero__panel .journal-pillar__icon { width: 32px; height: 32px; }
  .journal-page .journal-hero__panel .journal-pillar__name { font-size: 1rem; }
  .journal-page .journal-hero__panel .journal-pillar__desc { display: none; }
  .journal-page .journal-hero__panel .journal-pillar { padding: 0.7rem 0.5rem; }
}
.journal-page .journal-pillar {
  position: relative;
  padding: 0.95rem 1.15rem;
  border-radius: calc(var(--hp2-radius-md, 16px) - 4px);
  gap: 0.85rem;
}
.journal-page .journal-pillar + .journal-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: var(--hp2-line, rgba(132, 144, 109, 0.22));
  pointer-events: none;
}
.journal-page .journal-pillar:hover {
  background: rgba(132, 144, 109, 0.05);
}
.journal-page .journal-pillar.is-active {
  background: #f3edd9;
  box-shadow: inset 0 0 0 1px var(--hp2-sage-soft, rgba(132, 144, 109, 0.22));
}
.journal-page .journal-pillar.is-active + .journal-pillar::before,
.journal-page .journal-pillar:has(+ .journal-pillar.is-active)::before { display: none; }
/* Hover của 1 pill cũng ẩn divider liền kề để clean. */
.journal-page .journal-pillar:hover + .journal-pillar::before,
.journal-page .journal-pillar:has(+ .journal-pillar:hover)::before { display: none; }

.journal-page .journal-pillar {
  padding: 1.25rem 1.6rem;
  gap: 1.25rem;
}
.journal-page .journal-pillar__icon {
  width: clamp(60px, 5vw, 80px);
  height: clamp(60px, 5vw, 80px);
  overflow: visible;
}
/* SVG live/grow/heal đã được crop sát artwork (viewBox không còn padding 900×900).
   → KHÔNG cần `transform: scale()`, chỉ fill 100% container.
   Recolor cream `#c2a885` → sage `#84906d` qua filter để nổi bật trên cream pill. */
.journal-page .journal-pillar__icon .brand-icon {
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(57%) sepia(11%)
          saturate(744%) hue-rotate(46deg) brightness(91%) contrast(86%);
}
/* Active pill: icon đậm hơn để cảm giác "đang chọn" rõ. */
.journal-page .journal-pillar.is-active .journal-pillar__icon .brand-icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(15%)
          saturate(610%) hue-rotate(46deg) brightness(85%) contrast(88%);
}
.journal-page .journal-pillar__icon i[data-lucide] {
  width: clamp(36px, 3vw, 44px);
  height: clamp(36px, 3vw, 44px);
}
@media (max-width: 768px) {
  .journal-page .journal-hero__panel { padding: 1rem; gap: 0.9rem; }
  .journal-page .journal-hero__panel .journal-pillar { padding: 0.7rem 0.85rem; gap: 0.6rem; }
  .journal-page .journal-hero__panel .journal-pillar__icon { width: 42px; height: 42px; }
  .journal-page .journal-pillar { padding: 1rem 1.25rem; gap: 1rem; }
  .journal-page .journal-pillar__icon { width: 56px; height: 56px; }
}
.journal-page .journal-pillar__body { gap: 0.2rem; }
.journal-page .journal-pillar__name {
  font-family: var(--font-serif, 'Brygada 1918', serif);
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--hp2-ink, #2A2A2A);
}
.journal-page .journal-pillar__desc {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--hp2-muted, #6f6962);
  line-height: 1.45;
  margin-top: 0.15rem;
  text-wrap: pretty;
  max-width: 22ch;
}

/* Journal pillars — mobile & tablet nhỏ: stack 3 hàng (không 3 cột chật / không scroll ngang) */
@media (max-width: 900px) {
  .journal-page .journal-hero__panel .journal-pillars,
  .journal-page .journal-pillars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: none;
    margin-inline: 0;
    padding: 0.5rem;
    border-radius: var(--hp2-radius-md, 16px);
    overflow: visible;
    box-shadow: var(--hp2-shadow-sm, 0 1px 2px rgba(31, 28, 24, 0.03), 0 4px 16px rgba(31, 28, 24, 0.04));
  }
  .journal-page .journal-pillar {
    width: 100%;
    min-width: 0;
    flex: none;
    align-items: center;
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    border-radius: calc(var(--hp2-radius-md, 16px) - 2px);
  }
  .journal-page .journal-pillar + .journal-pillar::before,
  .journal-page .journal-pillar.is-active + .journal-pillar::before,
  .journal-page .journal-pillar:has(+ .journal-pillar.is-active)::before,
  .journal-page .journal-pillar:hover + .journal-pillar::before,
  .journal-page .journal-pillar:has(+ .journal-pillar:hover)::before {
    display: none;
  }
  .journal-page .journal-pillar__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .journal-page .journal-pillar__body {
    flex: 1;
    min-width: 0;
    text-align: left;
    align-items: flex-start;
  }
  .journal-page .journal-pillar__name {
    font-size: 1.05rem;
  }
  .journal-page .journal-pillar__desc {
    max-width: none;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    -webkit-box-orient: unset;
    font-size: 0.78rem;
    line-height: 1.5;
  }
}

/* ─── FEATURED override (hairline border, ratio, sprig leaf) ─────────────── */
.journal-page .journal-featured {
  position: relative;
  grid-template-columns: 42% 58%;
  gap: 0;
  padding: 0;
  background: var(--hp2-card, #f0ebe2);
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.22));
  border-radius: 24px;
  box-shadow: var(--hp2-shadow-sm);
}
.journal-page .journal-featured__media-link {
  display: block;
  height: 100%;
  border-radius: 0;
}
.journal-page .journal-featured__media {
  height: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 24px 0 0 24px;
  overflow: hidden;
}
.journal-page .journal-featured__body {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.journal-page .journal-featured__eyebrow {
  color: var(--hp2-sage, #84906d);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.journal-page .journal-featured__eyebrow-icon {
  color: var(--hp2-sage, #84906d);
}
.journal-page .journal-featured__title {
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hp2-ink, #2A2A2A);
  margin: 0 0 0.85rem;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-page .journal-featured__title a { color: inherit; }
.journal-page .journal-featured__meta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--hp2-muted, #4B4B4B);
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.journal-page .journal-featured__meta-dot {
  color: var(--hp2-muted, #4B4B4B);
  opacity: 0.55;
}
.journal-page .journal-featured__excerpt {
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed, 1.72);
  color: var(--hp2-ink-soft, #3D3D3D);
  margin-bottom: 1.4rem;
  -webkit-line-clamp: 4;
}
.journal-page .journal-featured__cta {
  align-self: flex-start;
  background: var(--hp2-sage, #84906d);
  padding: 0.7rem 1.4rem;
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: var(--hp2-shadow-sm);
}
.journal-page .journal-featured__cta svg { width: 16px; height: 16px; }
.journal-page .journal-featured__cta:hover { background: #6f7a5b; }

.journal-page .journal-featured__sprig {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: clamp(72px, 8vw, 110px);
  color: var(--hp2-sage, #84906d);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}
.journal-page .journal-featured__sprig svg { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
  .journal-page .journal-featured { grid-template-columns: 1fr; }
  .journal-page .journal-featured__media {
    aspect-ratio: 16 / 10;
    border-radius: 24px 24px 0 0;
  }
  .journal-page .journal-featured__sprig { width: 70px; opacity: 0.14; }
}

/* ─── Section spacing — featured → list ─── */
.journal-page .journal-main-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ─── Sidebar categories override (dot prefix + count sage) ─────────────── */
.journal-page .journal-widget {
  background: var(--hp2-card, #f0ebe2);
  border-color: var(--hp2-line, rgba(132, 144, 109, 0.22));
  border-radius: var(--hp2-radius-md, 16px);
}
.journal-page .journal-widget__title {
  font-size: 1.0625rem;
  color: var(--hp2-ink, #2A2A2A);
}
.journal-page .journal-widget__cats li + li { border-top-color: var(--hp2-line, rgba(132, 144, 109, 0.16)); }
.journal-page .journal-widget__cat {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  color: var(--hp2-ink-soft, #3D3D3D);
}
.journal-page .journal-widget__cat-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.journal-page .journal-widget__cat-icon .brand-icon,
.journal-page .journal-widget__cat-icon .brand-icon--widget-cat {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px;
  max-height: 24px;
  transform: none !important;
  object-fit: contain;
}
.journal-page .journal-widget__cat-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hp2-line, rgba(132, 144, 109, 0.22));
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.journal-page .journal-widget__cat-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--hp2-sage, #84906d);
  opacity: 0.6;
}
.journal-page .journal-widget__cat:hover .journal-widget__cat-dot::after { opacity: 1; }
.journal-page .journal-widget__cat-name { text-wrap: pretty; }
.journal-page .journal-widget__cat-count {
  color: var(--hp2-sage, #84906d);
  font-weight: 600;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.journal-page .journal-widget__more {
  color: var(--hp2-sage, #84906d);
  font-weight: 500;
  margin-top: 0.4rem;
}

/* Newsletter widget — soften */
.journal-page .journal-widget__submit {
  background: var(--hp2-sage, #84906d);
}
.journal-page .journal-widget__submit:hover { background: #6f7a5b; }
.journal-page .journal-widget__input:focus {
  border-color: var(--hp2-sage, #84906d);
  box-shadow: 0 0 0 3px var(--hp2-sage-dim, rgba(132, 144, 109, 0.12));
}

/* Quote widget */
.journal-page .journal-widget--quote .journal-widget__quote-text {
  color: var(--hp2-ink, #2A2A2A);
}

/* ─── Main column header spacing ─── */
.journal-page .journal-main__title { font-size: 1.0625rem; color: var(--hp2-ink, #2A2A2A); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUY-ME-A-COFFEE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared container ─────────────────────────────────────────────────── */
.coffee-container {
  width: 100%;
  max-width: 80rem;            /* 1280px — đồng nhất với header max-w-7xl */
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .coffee-container { padding-inline: 1.5rem; } }
.coffee-container--narrow { max-width: 760px; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.coffee-hero {
  position: relative;
  min-height: clamp(400px, 52vw, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.coffee-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Show image at full opacity — coffee cup + notebook on the right */
.coffee-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 40%;
  display: block;
}
/* Subtle gradient only on the far left to keep text readable */
.coffee-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(250, 245, 235, 0.82) 0%,
    rgba(250, 245, 235, 0.55) 38%,
    rgba(250, 245, 235, 0.10) 58%,
    rgba(250, 245, 235, 0.00) 72%
  );
}
.coffee-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
}
/* Frosted content card so text is readable over any background */
.coffee-hero__content {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  background: rgba(250, 247, 242, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  box-shadow: 0 4px 32px rgba(180, 150, 110, 0.10);
}
@media (max-width: 640px) {
  .coffee-hero__overlay {
    background: rgba(250, 245, 235, 0.68);
  }
  .coffee-hero__content {
    background: rgba(250, 247, 242, 0.88);
    padding: 1.5rem 1.25rem;
    max-width: 100%;
    border-radius: 1rem;
  }
}
.coffee-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(196, 168, 130, .12);
  border: 1px solid rgba(196, 168, 130, .35);
  padding: .35rem .85rem;
  border-radius: 999px;
}
.coffee-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading);
  margin: 0;
}
.coffee-hero__sub {
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  color: var(--text);
  line-height: 1.75;
  margin: 0;
  max-width: 460px;
}
.coffee-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--heading);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.coffee-hero__cta:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.coffee-hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--accent);
  animation: hero-bounce 2s ease-in-out infinite;
  opacity: .7;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

/* ── TIERS ────────────────────────────────────────────────────────────── */
.coffee-tiers-section {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

/* ── Grid — stretch so all cards in a row are identical height ── */
.coffee-tiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .coffee-tiers-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 480px) {
  .coffee-tiers-grid { grid-template-columns: 1fr 1fr; gap: .875rem; }
}

/* ── Card shell — 4 fixed rows guarantee pixel-perfect alignment ──
   Row 1: 72px  → icon area
   Row 2: 52px  → label / title (fits up to 2 lines)
   Row 3: 64px  → price or custom input
   Row 4: 48px  → "Ủng hộ" button
   ─────────────────────────────────────────────────────────────── */
.coffee-tier-card {
  display: grid;
  grid-template-rows: 72px 52px 64px 48px;
  align-items: center;
  justify-items: center;
  padding: 1.75rem 1.25rem;
  border: 1px solid rgba(80, 70, 50, 0.14);
  border-radius: 20px;
  background: #fbfaf6;
  cursor: pointer;
  text-align: center;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  font: inherit;
  color: inherit;
  box-shadow: 0 1px 8px rgba(80, 60, 30, 0.05);
}
.coffee-tier-card:hover {
  border-color: #718055;
  box-shadow: 0 6px 24px rgba(113, 128, 85, 0.16);
  transform: translateY(-3px);
}
.coffee-tier-card.is-selected {
  border-color: #718055;
  background: rgba(113, 128, 85, 0.06);
  box-shadow: 0 6px 28px rgba(113, 128, 85, 0.20);
}

/* Row 1 — icon ─────────────────────────────────────────── */
.coffee-tier-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edeade;
  border-radius: 50%;
  color: #718055;
  flex-shrink: 0;
  align-self: center;
}

/* Row 2 — label ────────────────────────────────────────── */
.coffee-tier-label {
  font-size: .84rem;
  color: #8a8070;
  line-height: 1.45;
  align-self: center;
  width: 100%;
  /* clamp to 2 lines so row stays 52px */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Row 3 — price ────────────────────────────────────────── */
.coffee-tier-amount {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.625rem);
  font-weight: 700;
  color: #2e2a22;
  align-self: center;
  line-height: 1;
}

/* Row 4 — button ───────────────────────────────────────── */
.coffee-tier-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 116px;
  height: 36px;
  font-size: .8125rem;
  font-weight: 600;
  color: #718055;
  border: 1.5px solid #718055;
  border-radius: 999px;
  transition: background .18s, color .18s, box-shadow .18s;
  pointer-events: none;
  align-self: center;
  flex-shrink: 0;
}
.coffee-tier-card:hover .coffee-tier-btn,
.coffee-tier-card.is-selected .coffee-tier-btn {
  background: #718055;
  color: #fff;
  box-shadow: 0 2px 10px rgba(113, 128, 85, 0.25);
}

/* ── Custom tier — input sits in row 3 slot ─────────────── */
.coffee-tier-input-wrap {
  width: 100%;
  align-self: center;
  display: flex;
  align-items: center;
}
.coffee-tier-input {
  width: 100%;
  height: 42px;
  padding: 0 .875rem;
  border: 1.5px solid rgba(80, 70, 50, 0.18);
  border-radius: 11px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  text-align: center;
  color: #2e2a22;
  background: #fffefa;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.coffee-tier-input::placeholder { color: #b8b0a4; font-weight: 400; font-size: .875rem; }
.coffee-tier-input:focus {
  border-color: #718055;
  box-shadow: 0 0 0 3px rgba(113, 128, 85, 0.12);
}

.coffee-tiers-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
  font-size: .875rem;
  color: var(--accent);
  opacity: .85;
}

/* ── CHECKOUT (Form + Payment) ───────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   CHECKOUT SECTION — Premium redesign
   ═══════════════════════════════════════════════════════════ */
--coffee-olive: #718055;
--coffee-olive-dark: #5a6740;
--coffee-card-bg: #fbfaf6;
--coffee-card-border: rgba(80, 70, 50, 0.13);
--coffee-input-bg: #fffefa;
--coffee-input-border: rgba(80, 70, 50, 0.16);
--coffee-section-bg: #ede8de;

.coffee-checkout-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: #ede8de;
}
.coffee-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
  align-items: start;
}
@media (max-width: 840px) {
  .coffee-checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Shared card shell ─────────────────────────────────── */
.coffee-form-col,
.coffee-payment-col {
  background: #fbfaf6;
  border: 1px solid rgba(80, 70, 50, 0.13);
  border-radius: 22px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 2px 24px rgba(80, 60, 30, 0.06), 0 1px 4px rgba(80, 60, 30, 0.04);
  display: flex;
  flex-direction: column;
}

/* ── Section title (Thanh toán header) ─────────────────── */
.coffee-section-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #3a3428;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid rgba(80, 70, 50, 0.13);
}
.coffee-section-title i { color: #718055; }

/* ── Form card header ─────────────────────────────────── */
.coffee-form-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding-bottom: 1.375rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(80, 70, 50, 0.10);
}
.coffee-form-card-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edeade;
  border-radius: 50%;
  color: #718055;
  margin-top: .0625rem;
}
.coffee-form-card-icon i { width: 1.5rem; height: 1.5rem; }
.coffee-form-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.2vw, 1.875rem);
  font-weight: 700;
  color: #2e2a22;
  margin: 0 0 .3rem;
  line-height: 1.15;
}
.coffee-form-card-sub {
  font-size: .875rem;
  color: #8a8070;
  margin: 0;
  line-height: 1.5;
}

/* ── Form fields ──────────────────────────────────────── */
.coffee-form { display: flex; flex-direction: column; gap: 1.125rem; }
.coffee-form-field { display: flex; flex-direction: column; gap: .4rem; }
.coffee-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) { .coffee-form-row { grid-template-columns: 1fr; } }

.coffee-form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: #3a3428;
  display: flex;
  align-items: center;
  gap: .4rem;
  letter-spacing: .01em;
}
.coffee-form-label i { color: #718055; flex-shrink: 0; width: 14px; height: 14px; }
.coffee-form-label small {
  font-weight: 400;
  color: #9a9080;
  font-size: .76rem;
  margin-left: .1rem;
}

/* Amount suffix wrapper */
.coffee-input-suffix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.coffee-input-suffix-wrap .coffee-form-input {
  padding-right: 2.5rem;
  width: 100%;
}
.coffee-input-suffix {
  position: absolute;
  right: 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: #9a9080;
  pointer-events: none;
  user-select: none;
}

/* Base input / textarea */
.coffee-form-input,
.coffee-form-textarea {
  padding: 0 1rem;
  height: 52px;
  border: 1px solid rgba(80, 70, 50, 0.16);
  border-radius: 13px;
  font: inherit;
  font-size: .9375rem;
  color: #2e2a22;
  background: #fffefa;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
  line-height: normal;
}
.coffee-form-textarea {
  height: auto;
  padding: .875rem 1rem;
  resize: vertical;
  min-height: 128px;
  line-height: 1.6;
}
.coffee-form-input::placeholder,
.coffee-form-textarea::placeholder { color: #b8b0a4; }
.coffee-form-input:focus,
.coffee-form-textarea:focus {
  border-color: #718055;
  box-shadow: 0 0 0 3px rgba(113, 128, 85, 0.12);
}

/* Textarea counter */
.coffee-textarea-wrap { position: relative; }
.coffee-textarea-wrap .coffee-form-textarea { padding-bottom: 2rem; }
.coffee-textarea-counter {
  position: absolute;
  bottom: .625rem;
  right: .875rem;
  font-size: .72rem;
  color: #b0a898;
  pointer-events: none;
  background: #fffefa;
  padding: 0 .2rem;
  border-radius: 4px;
  line-height: 1;
}

/* Submit button */
.coffee-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  height: 56px;
  padding: 0 1.75rem;
  background: #718055;
  color: #fff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s, transform .18s, box-shadow .18s;
  margin-top: .375rem;
  box-shadow: 0 2px 12px rgba(113, 128, 85, 0.28);
}
.coffee-form-submit:hover {
  background: #5a6740;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(113, 128, 85, 0.32);
}
.coffee-form-submit i { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Security note */
.coffee-form-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .775rem;
  color: #9a9080;
  line-height: 1.55;
  margin-top: .25rem;
}
.coffee-form-note i { flex-shrink: 0; margin-top: 1px; color: #718055; width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════════
   PAYMENT CARD
   ═══════════════════════════════════════════════════════ */

/* QR section label */
.coffee-pay-section-label {
  font-size: .72rem;
  font-weight: 800;
  color: #718055;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 .2rem;
}
.coffee-payment-hint {
  font-size: .8125rem;
  color: #9a9080;
  margin: 0 0 1rem;
}
/* legacy */
.coffee-payment-subtitle { font-size: .72rem; font-weight: 800; color: #718055; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .2rem; }

/* QR row layout */
.coffee-pay-qr-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.coffee-pay-qr-left { flex-shrink: 0; }

/* QR frame with corner brackets */
.coffee-qr-frame {
  width: 152px;
  height: 152px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(80, 70, 50, 0.13);
  border-radius: 14px;
}
.coffee-qr-frame img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
/* Olive-green corner scan brackets */
.coffee-qr-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background:
    linear-gradient(#718055, #718055) top    left  / 18px 2.5px no-repeat,
    linear-gradient(#718055, #718055) top    left  / 2.5px 18px no-repeat,
    linear-gradient(#718055, #718055) top    right / 18px 2.5px no-repeat,
    linear-gradient(#718055, #718055) top    right / 2.5px 18px no-repeat,
    linear-gradient(#718055, #718055) bottom left  / 18px 2.5px no-repeat,
    linear-gradient(#718055, #718055) bottom left  / 2.5px 18px no-repeat,
    linear-gradient(#718055, #718055) bottom right / 18px 2.5px no-repeat,
    linear-gradient(#718055, #718055) bottom right / 2.5px 18px no-repeat;
  pointer-events: none;
}
.coffee-qr-placeholder-inner {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(80, 70, 50, 0.20);
  border-radius: 8px;
  color: #b0a898;
}

/* Bank info items */
.coffee-pay-qr-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-top: .125rem;
}
.coffee-pay-info-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.coffee-pay-info-item > i {
  flex-shrink: 0;
  color: #718055;
  margin-top: .1rem;
  width: 14px;
  height: 14px;
}
.coffee-pay-info-item > div {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.coffee-pay-info-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9a9080;
  line-height: 1;
}
.coffee-pay-info-val {
  font-size: .875rem;
  font-weight: 700;
  color: #2e2a22;
  line-height: 1.3;
}
.coffee-pay-account { letter-spacing: .05em; }

/* Divider */
.coffee-pay-divider {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .775rem;
  color: #9a9080;
  margin-bottom: .875rem;
}
.coffee-pay-divider::before,
.coffee-pay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(80, 70, 50, 0.18) 0, rgba(80, 70, 50, 0.18) 4px,
    transparent 4px, transparent 8px
  );
}
.coffee-pay-divider i { color: #718055; flex-shrink: 0; width: 13px; height: 13px; }

/* Bank table */
.coffee-bank-block { }
.coffee-bank-table {
  width: 100%;
  font-size: .8375rem;
  border-collapse: collapse;
  margin-bottom: .5rem;
}
.coffee-bank-table td {
  padding: .575rem .25rem;
  border-bottom: 1px solid rgba(80, 70, 50, 0.09);
  vertical-align: middle;
}
.coffee-bank-table td:first-child {
  width: 38%;
  color: #8a8070;
  font-size: .8rem;
}
.coffee-bank-table td:last-child {
  color: #2e2a22;
  font-weight: 600;
}

/* Note box */
.coffee-pay-note-box {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: 1rem;
  padding: .875rem 1.125rem;
  background: #edeade;
  border-radius: 12px;
  font-size: .8125rem;
  color: #5a5448;
  line-height: 1.65;
}
.coffee-pay-note-box > i {
  flex-shrink: 0;
  color: #718055;
  margin-top: .1875rem;
  width: 15px;
  height: 15px;
}
.coffee-pay-note-box p { margin: 0; }
.coffee-pay-note-box a {
  color: #718055;
  font-weight: 700;
  text-decoration: none;
}
.coffee-pay-note-box a:hover { text-decoration: underline; }

/* Legacy / empty state */
.coffee-bank-tip {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .775rem;
  color: #9a9080;
  line-height: 1.6;
}
.coffee-bank-tip i { flex-shrink: 0; margin-top: 1px; color: #718055; }
.coffee-bank-block--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text-muted, #78716c);
}
.coffee-bank-email {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: .9rem;
}
.coffee-bank-email:hover { text-decoration: underline; }

/* ── Payment pending (empty-state) ─────────────────────────── */
.coffee-pay-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding: 2rem 1.25rem;
  margin-bottom: 1.25rem;
  background: rgba(113, 128, 85, 0.06);
  border: 1.5px dashed rgba(113, 128, 85, 0.28);
  border-radius: 14px;
}
.coffee-pay-pending__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(113, 128, 85, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #718055;
}
.coffee-pay-pending__title {
  font-size: .95rem;
  font-weight: 600;
  color: #3d3a35;
  margin: 0;
}
.coffee-pay-pending__sub {
  font-size: .84rem;
  color: #7c7469;
  margin: 0;
  line-height: 1.6;
}

/* ── Form success state ──────────────────────────────────────── */
.coffee-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 2rem;
  height: 100%;
}
.coffee-form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(113, 128, 85, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #718055;
}
.coffee-form-success__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2e2b26;
  margin: 0;
}
.coffee-form-success__msg {
  font-size: .9rem;
  color: #7c7469;
  max-width: 360px;
  line-height: 1.65;
  margin: 0;
}
.coffee-form-success__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #718055;
  letter-spacing: .02em;
  margin: 0;
}

/* ── Form input error / server-error ─────────────────────────── */
.coffee-form-input.coffee-input-error,
.coffee-form-textarea.coffee-input-error {
  border-color: #d97b6a !important;
  background: #fff9f8 !important;
}
.coffee-input-error-msg {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: #c0472f;
}
.coffee-form-server-error {
  font-size: .85rem;
  color: #c0472f;
  margin-bottom: .5rem;
  text-align: center;
}

/* ── Spinner animation ──────────────────────────────────────── */
@keyframes coffee-spin { to { transform: rotate(360deg); } }
.coffee-spin { animation: coffee-spin .8s linear infinite; display: inline-block; }

/* ── BENEFITS ─────────────────────────────────────────────────────────── */
.coffee-benefits-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.coffee-benefits-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 2.5rem;
}
.coffee-benefits-title i { color: var(--accent); }
.coffee-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 900px) { .coffee-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .coffee-benefits-grid { grid-template-columns: 1fr 1fr; gap: .875rem; } }

.coffee-benefit {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  transition: box-shadow .2s, transform .18s;
  text-align: center;
  align-items: center;
}
.coffee-benefit:hover {
  box-shadow: 0 4px 16px rgba(196, 168, 130, .14);
  transform: translateY(-2px);
}
.coffee-benefit__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 168, 130, .15);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
  margin-bottom: .875rem;
}
.coffee-benefit h3 {
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.45;
  margin: 0 0 .625rem;
  min-height: 2.6em;      /* ~2 lines — tất cả tiêu đề cùng chiều cao */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.coffee-benefit p {
  font-size: .8125rem;
  color: var(--text-muted, #78716c);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* ── QUOTE BANNER ────────────────────────────────────────────────────── */
.coffee-quote-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-warm);
  padding: clamp(3.5rem, 7vw, 5rem) 1.5rem;
  text-align: center;
  overflow: hidden;
}
.coffee-quote-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 245, 235, .78);
}
.coffee-quote-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.coffee-quote-banner__mark {
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: .5;
  color: var(--accent);
  opacity: .45;
  display: block;
}
.coffee-quote-banner__inner blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.65;
  margin: 0;
  font-style: italic;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.coffee-faq-section {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.coffee-faq-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 2rem;
}
.coffee-faq-title i { color: var(--accent); }
.coffee-faq-list { display: flex; flex-direction: column; gap: .75rem; }
.coffee-faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: .875rem;
  overflow: hidden;
  transition: border-color .2s;
}
.coffee-faq-item.is-open { border-color: var(--accent); }
.coffee-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
  transition: color .18s;
}
.coffee-faq-q:hover { color: var(--accent); }
.coffee-faq-chevron {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .25s ease;
}
.coffee-faq-item.is-open .coffee-faq-chevron { transform: rotate(180deg); }
.coffee-faq-a {
  padding: 0 1.25rem 1.1rem;
  font-size: .875rem;
  color: var(--text);
  line-height: 1.75;
}
.coffee-faq-a p { margin: 0; }
.journal-page .journal-main__header { margin-bottom: 1.5rem; }

/* ── Site search (header overlay + /search page) ─────────────────── */

.site-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  margin: 0;
  border: 1px solid rgba(132, 144, 109, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.85);
  color: rgba(75, 75, 75, 0.82);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.site-header__icon-btn.site-search-trigger {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--meta);
}
.site-header__icon-btn.site-search-trigger:hover,
.site-header__icon-btn.site-search-trigger[aria-expanded="true"] {
  border: 0;
  background: rgba(132, 144, 109, 0.08);
  color: var(--heading);
}
.site-search-trigger__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  flex-shrink: 0;
}
.site-search-trigger:hover,
.site-search-trigger[aria-expanded="true"] {
  border-color: rgba(132, 144, 109, 0.45);
  color: var(--heading);
  background: #fffdf9;
}
.site-search-trigger__label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

html.site-search-open { overflow: hidden; }

.site-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem 2rem;
}
.site-search-overlay[hidden] { display: none !important; }
.site-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 42, 38, 0.42);
  backdrop-filter: blur(4px);
}
.site-search-overlay__panel {
  position: relative;
  width: min(36rem, 100%);
  background: #fffdf9;
  border: 1px solid rgba(132, 144, 109, 0.2);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 24px 64px rgba(45, 42, 38, 0.18);
  animation: searchOverlayIn 0.22s ease;
}
@keyframes searchOverlayIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.site-search-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.site-search-overlay__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--heading);
}
.site-search-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(75, 75, 75, 0.7);
  cursor: pointer;
}
.site-search-overlay__close:hover { background: rgba(132, 144, 109, 0.12); color: var(--heading); }
.site-search-overlay__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.site-search-overlay__field {
  position: relative;
}
.site-search-overlay__icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgba(75, 75, 75, 0.55);
  stroke-width: 1.6;
  pointer-events: none;
}
.site-search-overlay__input {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.25);
  border-radius: 999px;
  padding: 0.78rem 1rem 0.78rem 2.45rem;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  outline: none;
}
.site-search-overlay__input:focus {
  border-color: rgba(132, 144, 109, 0.5);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.14);
}
.site-search-overlay__submit {
  align-self: flex-end;
  border: none;
  border-radius: 999px;
  padding: 0.62rem 1.25rem;
  background: var(--accent, #84906d);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.site-search-overlay__submit:hover { filter: brightness(0.95); }
.site-search-overlay__hint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: rgba(75, 75, 75, 0.62);
}
.site-search-overlay__hint kbd {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border: 1px solid rgba(132, 144, 109, 0.25);
  border-radius: 4px;
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.8);
}
.site-search-overlay__hint a {
  color: var(--accent, #84906d);
  text-decoration: none;
}
.site-search-overlay__hint a:hover { text-decoration: underline; }

.site-search-mobile {
  margin-bottom: 0.65rem;
}
.site-search-mobile__field {
  position: relative;
}
.site-search-mobile__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: rgba(75, 75, 75, 0.55);
  stroke-width: 1.6;
}
.site-search-mobile__input {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.22);
  border-radius: 999px;
  padding: 0.62rem 0.85rem 0.62rem 2.2rem;
  font-size: 0.9375rem;
  background: #fffdf9;
  color: var(--text);
  outline: none;
}
.site-search-mobile__input:focus {
  border-color: rgba(132, 144, 109, 0.45);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.12);
}

.search-page-section {
  background: var(--bg);
}
.search-page-container {
  width: min(75rem, 100%);
  margin: 0 auto;
}

.search-page-form-wrap {
  margin-bottom: 2rem;
}
.search-page-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}
.search-page-form__field {
  position: relative;
  flex: 1 1 16rem;
}
.search-page-form__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: rgba(75, 75, 75, 0.55);
  stroke-width: 1.6;
}
.search-page-form__input {
  width: 100%;
  border: 1px solid rgba(132, 144, 109, 0.22);
  border-radius: 999px;
  padding: 0.82rem 2.6rem 0.82rem 2.65rem;
  font-size: 1rem;
  background: #fffdf9;
  color: var(--text);
  outline: none;
}
.search-page-form__input:focus {
  border-color: rgba(132, 144, 109, 0.48);
  box-shadow: 0 0 0 3px rgba(132, 144, 109, 0.14);
}
.search-page-form__clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: rgba(75, 75, 75, 0.55);
  text-decoration: none;
}
.search-page-form__clear:hover {
  background: rgba(132, 144, 109, 0.12);
  color: var(--heading);
}
.search-page-form__submit {
  border: none;
  border-radius: 999px;
  padding: 0 1.35rem;
  min-height: 2.85rem;
  background: var(--accent, #84906d);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.search-page-form__submit:hover { filter: brightness(0.95); }
.search-page-form__hint {
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  color: rgba(75, 75, 75, 0.62);
}

.page-hero-minimal.page-hero--search {
  padding-top: 2.5rem;
  padding-bottom: 1.75rem;
}

.search-categories {
  margin-bottom: 1.75rem;
}
.search-categories__label {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(75, 75, 75, 0.58);
}
.search-categories__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.search-categories__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(132, 144, 109, 0.22);
  background: #fffdf9;
  color: var(--heading);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.search-categories__chip:hover {
  border-color: rgba(132, 144, 109, 0.45);
  background: #fff;
}
.search-categories__count {
  font-size: 0.72rem;
  color: rgba(75, 75, 75, 0.55);
}

.search-results-count {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: rgba(75, 75, 75, 0.65);
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-result-card {
  border: 1px solid rgba(132, 144, 109, 0.16);
  border-radius: 1rem;
  background: #fffdf9;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-result-card:hover {
  border-color: rgba(132, 144, 109, 0.32);
  box-shadow: 0 8px 28px rgba(45, 42, 38, 0.06);
}
.search-result-card__link {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}
.search-result-card__media {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: 5.25rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: rgba(132, 144, 109, 0.1);
}
.search-result-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-result-card__body { min-width: 0; flex: 1; }
.search-result-card__meta {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(75, 75, 75, 0.58);
}
.search-result-card__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--heading);
}
.search-result-card__excerpt {
  margin: 0;
  font-size: 0.875rem;
  line-height: var(--lh-prose, 1.78);
  color: rgba(75, 75, 75, 0.82);
}
.search-result-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent, #84906d);
}
.search-mark {
  background: rgba(196, 168, 130, 0.28);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 2px;
}

.search-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  background: var(--bg-warm, #f7f2ea);
}
.search-empty__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  color: rgba(75, 75, 75, 0.35);
  stroke-width: 1.2;
}
.search-empty__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--heading);
}
.search-empty__text {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(75, 75, 75, 0.68);
  line-height: 1.65;
}
.search-empty__text a {
  color: var(--accent, #84906d);
  text-decoration: none;
}
.search-empty__text a:hover { text-decoration: underline; }

.search-recent__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--heading);
}

.search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(132, 144, 109, 0.16);
}
.search-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(132, 144, 109, 0.22);
  background: #fffdf9;
  color: var(--heading);
  font-size: 0.8125rem;
  text-decoration: none;
}
.search-pagination__btn:hover { border-color: rgba(132, 144, 109, 0.45); }
.search-pagination__btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.search-pagination__info {
  font-size: 0.8125rem;
  color: rgba(75, 75, 75, 0.62);
}

@media (max-width: 640px) {
  .search-result-card__link {
    flex-direction: column;
  }
  .search-result-card__media {
    width: 100%;
    flex-basis: auto;
    height: 10rem;
  }
  .site-search-trigger {
    padding: 0.45rem;
  }
}