/* ===== Nhật ký quán — lớp bổ sung, KHÔNG đụng styles.css đang chạy ===== */

.nk-body { background: var(--cream); }

/* Trang nhật ký không có hero nên thanh điều hướng phải đặc ngay từ đầu,
   không thì chữ trắng nằm trên nền kem. */
.nk-nav {
  position: sticky;
  top: 0;
  background: var(--green);
  box-shadow: 0 1px 0 var(--gold-line);
}

.nk-wrap { max-width: 46rem; }
/* Hẹp hơn --wrap: ít bài thì thẻ giãn vừa phải, không thành hai tấm bảng khổng lồ. */
.nk-ds .nk-wrap { max-width: 74rem; }

.nk-tro-ve { margin-bottom: 1.5rem; font-size: .9375rem; }
.nk-tro-ve a { color: var(--green-ink); opacity: .72; text-decoration: none; }
.nk-tro-ve a:hover { opacity: 1; }

.nk-ngay {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .5rem;
}

.nk-tieu-de { margin-bottom: 1.75rem; }

.nk-bai article p {
  font-size: 1.0625rem;
  line-height: 1.85;
  margin-bottom: 1.35rem;
  color: var(--green-ink);
}

.nk-anh { margin: 2.25rem 0; }
.nk-anh img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  display: block;
  box-shadow: var(--shadow-soft);
}
.nk-anh figcaption {
  margin-top: .625rem;
  font-size: .875rem;
  color: var(--green-ink);
  opacity: .66;
}

.nk-cta {
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  background: var(--paper);
}
.nk-cta p { margin-bottom: 1rem; }

/* ---- danh sách ---- */
.nk-luoi {
  display: grid;
  /* auto-FIT chứ không auto-fill: quán mới mở có 2 bài thì hai thẻ giãn ra kín hàng,
     không chừa lại một cột rỗng nhìn như trang chưa làm xong. */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.nk-the {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.nk-the:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.nk-the img { width: 100%; height: 13rem; object-fit: cover; display: block; }
.nk-the__chu { padding: 1.25rem; }
.nk-the__chu h2 { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; margin-bottom: .5rem; }
.nk-tom { font-size: .9375rem; opacity: .74; }

@media (prefers-reduced-motion: reduce) {
  .nk-the { transition: none; }
  .nk-the:hover { transform: none; }
}

/* Trang chủ giấu menu + nút Đặt bàn dưới 768px và giao cho nút burger do app.js điều khiển.
   Trang nhật ký KHÔNG nạp app.js (tệp đó lo giỏ hàng/đặt bàn của trang chủ, chạy ở đây sẽ lỗi),
   nên nếu để nguyên thì trên điện thoại chỉ còn mỗi cái logo — mất cả lối đi lẫn nút đặt bàn.
   Bày lại thành 2 hàng: thương hiệu + nút ở trên, các lối đi ở dưới. */
@media (max-width: 768px) {
  .nk-nav .nav__inner { flex-wrap: wrap; row-gap: .5rem; padding-bottom: .625rem; }
  .nk-nav .nav__cta { display: inline-flex; margin-left: auto; }
  .nk-nav .nav__links {
    display: flex;
    order: 3;
    flex: 0 0 100%;
    margin-left: 0;
    gap: 1.125rem;
    font-size: .875rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nk-nav .nav__links::-webkit-scrollbar { display: none; }
  .nk-nav .nav__links a { white-space: nowrap; }
  /* Bỏ lối đi trỏ về chính trang đang mở: vừa thừa, vừa đẩy chữ cuối lòi ra mép
     nhìn như hỏng. Bỏ đi thì 3 lối còn lại vừa khít màn 390. */
  .nk-nav .nav__links a[aria-current] { display: none; }
}

@media (max-width: 640px) {
  .nk-cta { padding: 1.25rem; }
  .nk-the img { height: 11rem; }
}