/* =============================================================================
   light.css — phần nội dung nền trắng cho Blog và bài viết.
   Menu + chân trang vẫn là tông tối (style.css + wp.css); file này chỉ lo
   khối .page-light ở giữa. Kiểu chữ giữ như blog cũ: tiêu đề Lora xanh đậm.
   ========================================================================== */

.page-light {
  --l-bg:         #ffffff;
  --l-surface:    #ffffff;
  --l-line:       #e4e1da;
  --l-ink:        #1a1a1a;
  --l-muted:      #6e6a64;
  --l-green:      #4a8536;
  --l-green-dark: #2f5124;
  --l-heading:    "Lora", Georgia, "Times New Roman", serif;

  position: relative; z-index: 2;
  color-scheme: light;
  min-height: 72vh;
  background: var(--l-bg);
  color: var(--l-ink);
  font-weight: 400;
  line-height: 1.7;
  /* thanh menu cố định cao 66px */
  padding-block: calc(66px + clamp(40px, 6vw, 64px)) clamp(56px, 8vw, 96px);
}

.page-light h1,
.page-light h2,
.page-light h3,
.page-light h4 {
  font-family: var(--l-heading);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--l-green-dark);
  margin: 0 0 .5em;
}
.page-light a { color: var(--l-green); }
.page-light a:hover { color: var(--l-green-dark); }
.page-light :focus-visible { outline-color: var(--l-green); }

.page-light__narrow { max-width: calc(72ch + 2 * var(--mep)); }

.page-light__header { margin-bottom: 2.5rem; }
.page-light__title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.page-light__desc { color: var(--l-muted); }
.page-light .no-results { color: var(--l-muted); margin: 0; }

/* ---------- Lưới thẻ bài viết ---------- */
.post-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(26, 26, 26, .09); }
.post-card__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.post-card__body { padding: 1.25rem 1.35rem 1.6rem; }
.page-light .post-card__title { font-size: 1.15rem; margin-bottom: .35rem; }
.post-card__title a { text-decoration: none; color: var(--l-green-dark); }
.post-card__title a:hover { color: var(--l-green); }
.post-card__meta { font-size: .82rem; color: var(--l-muted); margin: 0 0 .6rem; }
.post-card__excerpt { margin: 0; font-size: .93rem; color: var(--l-muted); }

/* ---------- Bài viết chi tiết ---------- */
.entry__header { margin-bottom: 1.5rem; }
.page-light .entry__title { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
.entry__meta { color: var(--l-muted); font-size: .88rem; margin: 0; }
.entry__thumb { margin: 0 0 2rem; }
.entry__thumb img { border-radius: 10px; width: 100%; }
.entry__content > * + * { margin-top: 1.15em; }
.entry__content img { border-radius: 8px; }
.entry__content blockquote {
  border-left: 3px solid var(--l-green);
  margin-left: 0; padding-left: 1.25rem;
  color: var(--l-muted); font-style: italic;
}

.post-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--l-line);
  font-size: .92rem;
}

/* ---------- Phân trang ---------- */
.page-light .pagination { margin-top: 3rem; text-align: center; }
.page-light .page-numbers {
  display: inline-block;
  padding: .45rem .85rem; margin: 0 .15rem;
  border: 1px solid var(--l-line); border-radius: 6px;
  background: var(--l-surface);
  text-decoration: none; color: var(--l-ink);
}
.page-light .page-numbers:hover { border-color: var(--l-green); color: var(--l-green); }
.page-light .page-numbers.current { background: var(--l-green); color: #fff; border-color: var(--l-green); }

/* Chữ tiêu đề không có quầng tối như trên cảnh 3D */
.page-light h1, .page-light h2 { text-shadow: none; }