/* ══════════════════════════════════════════
   BLOG — base
   ══════════════════════════════════════════ */
.intro-text { padding: 40px 0 32px; }
.intro-text__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.intro-text p { margin: 0; font-size: 18px; line-height: 1.8; }
.intro-text__divider { margin: 24px auto 0; width: 90%; max-width: var(--content-max); border: none; border-top: 2px solid #03200a; }

.blog-entries { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 0 60px; }

.blog-entry {
  background: #eee;
  width: min(1140px, calc(100vw - 32px));
  border-radius: 20px;
  overflow: hidden;
  padding: 14px;
}

/* Layout 10 cần scroll ngang → override overflow */
.blog-entry:has(.bl-10) {
  overflow: visible;
}
.blog-entry:has(.bl-10) .bl-10 {
  border-radius: 16px;
  overflow: hidden;
}

/* ── Text block (tối đa 50% chiều ngang) ── */
.be-info { max-width: 50%; margin-bottom: 10px; }
.be-text { font-size: 16px; line-height: 1.75; text-align: justify; margin: 0 0 6px; color: #111; }
.be-meta { font-size: 13px; font-style: italic; font-weight: 700; color: #555; text-align: right; margin: 0; }

/* ── Images base ── */
.blog-entry img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 10px;
  user-select: none; -webkit-user-drag: none;
}
.blog-entry figure { margin: 0; border-radius: 10px; overflow: hidden; line-height: 0; }

/* ── Aspect ratio helpers ── */
.ar-1x1  { aspect-ratio: 1/1; }
.ar-3x4  { aspect-ratio: 3/4; }
.ar-4x3  { aspect-ratio: 4/3; }
.ar-9x16 { aspect-ratio: 9/16; }
.ar-16x9 { aspect-ratio: 16/9; }
.ar-21x9 { aspect-ratio: 21/9; }

/* ── Slot (vị trí ảnh — 1 ảnh hoặc cuộn) ── */
.be-slot { width: 100%; min-width: 0; }
.be-slot-scroll { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════
   LAYOUT 1 — Text + 1 slot full width
   ══════════════════════════════════════════ */
.bl-1 { display: flex; flex-direction: column; gap: 8px; }
.bl-1__img { width: 100%; }

/* ══════════════════════════════════════════
   LAYOUT 2 — Text + 2 slot 50/50
   ══════════════════════════════════════════ */
.bl-2 { display: flex; flex-direction: column; gap: 8px; }
.bl-2__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ══════════════════════════════════════════
   LAYOUT 3 — Text + slot lớn trái + 2 slot nhỏ phải
   ══════════════════════════════════════════ */
.bl-3 { display: flex; flex-direction: column; gap: 8px; }
.bl-3__imgs { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.bl-3__right { display: flex; flex-direction: column; gap: 8px; }
.bl-3__right .be-slot { flex: 1; }
.bl-3__right figure { height: 100%; }

/* ══════════════════════════════════════════
   LAYOUT 4 — Text + 4 slot hàng ngang đều
   ══════════════════════════════════════════ */
.bl-4 { display: flex; flex-direction: column; gap: 8px; }
.bl-4__imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ══════════════════════════════════════════
   LAYOUT 5 — Text + 3 slot bằng nhau
   ══════════════════════════════════════════ */
.bl-5 { display: flex; flex-direction: column; gap: 8px; }
.bl-5__imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ══════════════════════════════════════════
   LAYOUT 6 — Text trái + slot dọc lớn phải
   ══════════════════════════════════════════ */
.bl-6 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; overflow: hidden; }
.bl-6__left { display: flex; flex-direction: column; gap: 8px; min-width: 0; order: 1; }
.bl-6__left .be-info { max-width: 100%; }
.bl-6__slot2 { width: 100%; min-width: 0; overflow: hidden; flex: 1; }
.bl-6__slot2 .be-scroll { overflow-x: auto; height: 100%; }
.bl-6__slot2 .be-slot { height: 100%; }
.bl-6__slot2 figure { width: 100%; height: 100%; }
.bl-6__slot2 img { width: 100%; height: 100%; object-fit: cover; }
.bl-6__right { min-width: 0; order: 2; }
.bl-6__right figure { width: 100%; height: 100%; min-height: 300px; }
.bl-6__right img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════
   LAYOUT 7 — Text + 2 slot cột bằng nhau (2fr/1fr)
   ══════════════════════════════════════════ */
.bl-7 { display: flex; flex-direction: column; gap: 8px; }
.bl-7__imgs { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.bl-7__left figure, .bl-7__right figure { height: 100%; }

/* ══════════════════════════════════════════
   LAYOUT 8 — Text + slot cinematic full width
   ══════════════════════════════════════════ */
.bl-8 { display: flex; flex-direction: column; gap: 8px; }
.bl-8__img figure { border-radius: 12px; }
.bl-8__img .ar-21x9 { aspect-ratio: 21/9; }
/* Nếu không có ratio 21:9 thì mặc định 16:9 */
.bl-8__img .ar-16x9 { aspect-ratio: 16/9; }

/* ══════════════════════════════════════════
   LAYOUT 9 — Text + 1 slot lớn trên + 3 slot nhỏ dưới
   ══════════════════════════════════════════ */
.bl-9 { display: flex; flex-direction: column; gap: 8px; }
.bl-9__top { width: 100%; }
.bl-9__bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ══════════════════════════════════════════
   LAYOUT photo-video — Text + ảnh trái + video phải
   ══════════════════════════════════════════ */
.bl-pv { display: flex; flex-direction: column; gap: 8px; }
.bl-pv__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.bl-pv__photo figure { height: 100%; }
.bl-pv__video { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════
   SCROLL STRIP — moreImages
   ══════════════════════════════════════════ */
.be-scroll-wrap { position: relative; }
.be-scroll {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Ẩn scrollbar mặc định */
  scrollbar-color: transparent transparent;
  padding-bottom: 4px;
  align-items: stretch;
  scroll-behavior: smooth; /* Push effect */
  -webkit-overflow-scrolling: touch;
}
.be-scroll::-webkit-scrollbar { display: none; }
.be-scroll figure {
  flex-shrink: 0;
  scroll-snap-align: start;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  /* Chieu cao co dinh, width tu tinh theo ti le anh goc */
  height: 220px;
  width: auto;
  aspect-ratio: unset;
}
.be-scroll figure img {
  display: block;
  height: 220px;
  width: auto;
  max-width: none;
  border-radius: 10px;
  object-fit: unset; /* Hien thi nguyen ban, khong crop */
}

/* Scroll top: anh lon full width, cuon ngang */
.be-scroll--top {
  gap: 8px;
}
.be-scroll--top figure {
  height: auto;
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.be-scroll--top figure img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

/* Scroll doc */
.be-scroll-v {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 560px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent;
}
.be-scroll-v figure { width: 100%; }
.be-scroll-v img { width: 100%; height: auto; border-radius: 10px; }

/* An chu swipe hint */
.be-scroll-hint { 
  font-size: 11px; color: #999; text-align: center;
  letter-spacing: .06em; padding: 3px 0 0; margin: 0;
}

/* ══════════════════════════════════════════
   VIDEO
   ══════════════════════════════════════════ */
.be-video { display: flex; flex-direction: column; gap: 8px; }
.be-video--vertical .be-video__frame { max-width: 360px; margin: 0 auto; }
.be-video__frame {
  position: relative; width: 100%; border-radius: 12px; overflow: hidden;
}
.be-video__frame--16x9 { aspect-ratio: 16/9; }
.be-video__frame--9x16 { aspect-ratio: 9/16; }
.be-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ══════════════════════════════════════════
   LAYOUT 10 — Text + 1 slot lớn trên + 6 slot nhỏ dưới (1 hàng, tỉ lệ tự do)
   ══════════════════════════════════════════ */
.bl-10 { display: flex; flex-direction: column; gap: 8px; }
.bl-10__top { width: 100%; }
.bl-10__bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-start;
}
.bl-10__bottom > .be-slot {
  flex: 1 1 0;
  min-width: 0;
}
.bl-10__bottom > .be-slot figure {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  margin: 0;
}
/* Tỉ lệ từng ảnh theo ratio nhập trong Sheets */
.bl-10__bottom > .be-slot .ar-1x1  { aspect-ratio: 1/1; }
.bl-10__bottom > .be-slot .ar-3x4  { aspect-ratio: 3/4; }
.bl-10__bottom > .be-slot .ar-4x3  { aspect-ratio: 4/3; }
.bl-10__bottom > .be-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .bl-10__bottom { flex-wrap: wrap; }
  .bl-10__bottom > .be-slot { flex: 0 0 calc(33% - 6px); }
}

/* ══════════════════════════════════════════
   MOBILE < 768px
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .blog-entry { border-radius: 14px; padding: 10px; }
  .be-info { max-width: 100%; }
  .bl-2__imgs { grid-template-columns: 1fr 1fr; }
  .bl-3__imgs { grid-template-columns: 1fr; }
  .bl-3__right { flex-direction: row; }
  .bl-4__imgs { grid-template-columns: 1fr 1fr; }
  .bl-5__imgs { grid-template-columns: 1fr 1fr; }
  .bl-6 { grid-template-columns: 1fr; }
  .bl-7__imgs { grid-template-columns: 1fr; }
  .bl-9__bottom { grid-template-columns: 1fr 1fr; }
  .bl-pv__cols { grid-template-columns: 1fr; }
  .be-scroll img { height: 160px; }
  .be-scroll-v { max-height: 400px; }
}