/* ══════════════════════════════════════════════════════════
   BONSAI GARDEN — phần ảnh
   Ảnh lớn trang chủ · dải ảnh danh mục · ảnh thẻ sản phẩm ·
   ảnh đầu bài · trang nguồn ảnh
   ══════════════════════════════════════════════════════════ */

/* ── Ảnh lớn trong bảng đầu trang chủ ── */
.anh-lon { margin: 0; position: relative; }
.anh-lon img {
  display: block; width: 100%; height: 100%; max-height: 340px;
  object-fit: cover; border-radius: var(--tron);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.anh-lon figcaption {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .55); color: #fff;
  border-radius: 3px; padding: 3px 8px; font-size: 11px;
}
.anh-lon figcaption a { color: #d8ecd8; text-decoration: underline; }

/* ── Dải 4 ô ảnh danh mục dưới bảng lớn ── */
.dai-anh {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 0 0 28px;
}
.o-anh {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--tron); aspect-ratio: 4 / 3;
  box-shadow: var(--bong);
}
.o-anh-to { grid-row: span 1; }
.o-anh img {
  width: 100%; height: 100%; display: block;
  /* Ảnh cây thường cao và tán nằm ở phần trên — cắt lệch lên cho thấy tán */
  object-fit: cover; object-position: center 35%;
  transition: transform .35s ease;
}
.o-anh:hover img { transform: scale(1.06); }
.o-anh span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px; color: #fff; font-size: 12.5px; line-height: 1.4;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
}
.o-anh span b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.o-anh:hover { text-decoration: none; }

@media (max-width: 860px) {
  .dai-anh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Ảnh trong thẻ sản phẩm ── */
.sp-anh-that {
  position: relative; display: block; margin: -20px -16px 14px;
  border-radius: var(--tron) var(--tron) 0 0; overflow: hidden;
  background: var(--nen-xam); aspect-ratio: 4 / 3;
}
.sp-anh-that img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 38%;
  transition: transform .35s ease;
}
.the-sp:hover .sp-anh-that img { transform: scale(1.05); }
.minh-hoa {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0, 0, 0, .5); color: #fff; border-radius: 3px;
  padding: 2px 7px; font-size: 10.5px; font-style: normal; letter-spacing: .2px;
}

/* ── Ảnh đầu bài viết ── */
.anh-dau-bai { margin: 0 0 20px; }
.anh-dau-bai img {
  display: block; width: 100%; max-height: 400px; object-fit: cover;
  border-radius: var(--tron); background: var(--nen-xam);
}
.anh-dau-bai figcaption {
  margin-top: 6px; font-size: 12px; color: var(--chu-mo); text-align: right;
}

/* ── Ảnh trong thẻ chuyên mục (lưới thẻ kiến thức) ── */
.the-bai .the-anh { transition: transform .2s ease; }
.the-bai:hover .the-anh { transform: scale(1.08); }

/* ── Trang nguồn ảnh ── */
.luoi-nguon {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; margin: 20px 0;
}
.the-nguon {
  margin: 0; background: #fff; border: 1px solid var(--vien);
  border-radius: var(--tron); overflow: hidden;
}
.the-nguon img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.the-nguon figcaption { padding: 11px 13px; font-size: 12.5px; line-height: 1.5; }
.the-nguon b { display: block; color: var(--chu-dam); margin-bottom: 4px; font-size: 13px; }
.the-nguon span { display: block; color: var(--chu-mo); }
.the-nguon a { display: inline-block; margin-top: 6px; font-size: 12px; }

/* ── Ảnh trong bài viết thường ── */
.bai-viet img { border-radius: var(--tron); }