/* =========================================================
   KA BABY STUDIO — gallery.css
   Bộ ảnh: Bìa album → mở album (thumbnail + tải dần + xem lớn)
   Dùng token từ tokens.css.
   ========================================================= */
.kb-gallery { min-height: 320px; }

.kb-loading, .kb-error, .kb-empty {
  text-align: center; padding: 64px 20px; color: var(--ink-3); font-size: 1rem;
}
.kb-error { color: #c0562a; }
.kb-spin {
  width: 36px; height: 36px; border: 3px solid var(--hairline);
  border-top-color: var(--orange); border-radius: 50%;
  margin: 0 auto 16px; animation: kbspin 0.9s linear infinite;
}
@keyframes kbspin { to { transform: rotate(360deg); } }

/* ---------- Bìa album (8 mục) ---------- */
.kb-covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kb-cover {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; background: var(--paper-3); border: 1px solid var(--hairline);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.kb-cover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.kb-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.kb-cover:hover img { transform: scale(1.06); }
.kb-cover .ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.2rem; background: linear-gradient(140deg, #ffe6c9, #fbc888); }
.kb-cover .ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 16px; background: linear-gradient(transparent 42%, rgba(42, 33, 25, 0.8)); color: #fff;
}
.kb-cover .ov b { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.kb-cover .ov span { font-size: 0.82rem; opacity: 0.92; margin-top: 3px; }
.kb-cover .go { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--orange-text); font-size: 0.9rem; opacity: 0; transform: scale(0.8); transition: all 0.25s var(--ease); }
.kb-cover:hover .go { opacity: 1; transform: none; }
@media (max-width: 900px) { .kb-covers { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Chi tiết album ---------- */
.kb-albhead { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.kb-back {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: 0.92rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--hairline-2);
  padding: 9px 17px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.2s var(--ease);
}
.kb-back:hover { border-color: var(--orange); color: var(--orange-text); }
.kb-albhead h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 800; margin: 0; }
.kb-albhead .n { color: var(--ink-3); font-size: 0.9rem; font-weight: 600; }

/* Nút chép link riêng của bộ ảnh (để nhân viên gửi khách) */
.kb-copy {
  margin-left: auto; font-family: inherit; font-weight: 600; font-size: 0.85rem;
  color: var(--ink-2); background: var(--paper); border: 1px dashed var(--hairline-2);
  padding: 8px 15px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.2s var(--ease);
}
.kb-copy:hover { border-style: solid; border-color: var(--orange); color: var(--orange-text); }
.kb-copy.ok { border-style: solid; border-color: var(--orange); background: var(--orange-050); color: var(--orange-text); }

/* Chuyển nhanh sang bộ ảnh khác (không cần bấm Quay lại) */
.kb-switch {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
}
.kb-switch--end { margin: 34px 0 0; padding: 22px 0 0; border-bottom: none; border-top: 1px solid var(--hairline); }
.kb-switch-lb { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.kb-chip {
  font-family: inherit; font-weight: 600; font-size: 0.9rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline-2);
  padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  transition: all 0.2s var(--ease); display: inline-flex; align-items: center; gap: 7px;
}
.kb-chip:hover { border-color: var(--orange); background: var(--orange-050); color: var(--orange-text); transform: translateY(-1px); }
.kb-chip i { font-style: normal; font-size: 0.76rem; font-weight: 700; color: var(--ink-3); }
.kb-chip:hover i { color: var(--orange-text); }

/* Lưới ảnh kiểu masonry — GIỮ ĐÚNG TỈ LỆ ẢNH GỐC (ngang / dọc / vuông xen kẽ) */
/* Trước dùng column-count: trình duyệt đổ ảnh DỌC hết cột 1 rồi mới sang cột 2,
   nên ảnh thứ 2 nằm DƯỚI ảnh 1 chứ không nằm bên phải. Nhân viên đổi tên file
   để sắp thứ tự sẽ thấy lung tung. Giờ JS tự xếp trái→phải theo đúng thứ tự Drive,
   vẫn cân chiều cao các cột. --cols để JS biết đang mấy cột. */
.kb-grid { --cols: 4; display: flex; gap: 12px; align-items: flex-start; }
.kb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.kb-thumb {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  position: relative; margin: 0 0 12px; border-radius: var(--r-sm); overflow: hidden;
  cursor: pointer; background: var(--paper-3);
}
.kb-thumb img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease); }
.kb-thumb:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .kb-grid { --cols: 3; } }
@media (max-width: 560px) { .kb-grid { --cols: 2; } .kb-switch-lb { width: 100%; } }

.kb-more {
  display: block; margin: 30px auto 0; font-family: inherit; font-weight: 700; font-size: 1rem;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--hairline-2);
  padding: 13px 32px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.2s var(--ease);
}
.kb-more:hover { background: var(--paper-3); border-color: var(--orange); }

/* ---------- Xem lớn (lightbox) ---------- */
.kb-lb { position: fixed; inset: 0; z-index: 120; background: rgba(28, 20, 12, 0.93); display: none; align-items: center; justify-content: center; padding: 24px; }
.kb-lb.open { display: flex; }
.kb-lb img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
/* ⚠️ z-index BẮT BUỘC. Trong khung ảnh lớn, thẻ <img> đứng SAU các nút trong
   HTML nên mặc định nó phủ lên trên — nhân viên phản ánh "ảnh che mất dấu X,
   bấm mãi không tắt được". Nền đặc + viền sáng để nút luôn thấy rõ trên cả ảnh
   nền trắng lẫn nền tối. */
.kb-lbbtn { position: absolute; z-index: 2; background: rgba(28,20,12,0.62); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.2s; }
.kb-lbbtn:hover { background: rgba(28,20,12,0.85); }
.kb-close { background: rgba(28,20,12,0.78); }
.kb-lbnav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.7rem; }
.kb-prev { left: 18px; } .kb-next { right: 18px; }
.kb-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.2rem; }
.kb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.85rem; background: rgba(0,0,0,0.4); padding: 5px 15px; border-radius: var(--r-pill); }
@media (max-width: 600px) { .kb-prev { left: 6px; } .kb-next { right: 6px; } .kb-lbnav { width: 44px; height: 44px; font-size: 1.4rem; } }

@media (prefers-reduced-motion: reduce) { .kb-spin { animation-duration: 0.001ms; } *, *::before, *::after { transition-duration: 0.001ms !important; } }

/* ---------- Đường dẫn phân cấp (Tất cả bộ ảnh › BÉ TRAI › 3 THÁNG…) ---------- */
.kb-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 0.86rem; color: var(--ink-3); margin: -8px 0 16px;
}
.kb-crumb-link {
  font-family: inherit; font-size: inherit; color: var(--orange-text); font-weight: 600;
  background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: none;
}
.kb-crumb-link:hover { text-decoration: underline; }
/* Tiêu đề cho ảnh nằm lẫn cùng tầng với thư mục con */
.kb-loose-hd {
  font-size: 1rem; font-weight: 700; color: var(--ink-2);
  margin: 30px 0 14px; padding-top: 20px; border-top: 1px solid var(--hairline);
}

/* Siết gọn phần đầu khi xem 1 mục trên điện thoại (T09) — nhiều tầng nên dễ dài */
@media (max-width: 768px) {
  body.kb-album-open .kb-albhead { gap: 8px; margin-bottom: 10px; }
  body.kb-album-open .kb-albhead h3 { font-size: 1.15rem; }
  body.kb-album-open .kb-albhead .n { font-size: 0.82rem; }
  body.kb-album-open .kb-back { padding: 7px 13px; font-size: 0.86rem; }
  body.kb-album-open .kb-copy { padding: 6px 12px; font-size: 0.78rem; }
  body.kb-album-open .kb-crumb { margin: 0 0 10px; font-size: 0.8rem; }
  body.kb-album-open .kb-covers { gap: 12px; }
}

/* ========== Giỏ "Concept tôi thích" (T06 + T07) ========== */

/* Nút tim trên từng ảnh — vùng chạm 44px cho ngón cái mẹ bế con */
.kb-like {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(42,33,25,.32); color: #fff; border-radius: 50%;
  font-size: 1.15rem; line-height: 1; backdrop-filter: blur(3px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.kb-like:hover { background: rgba(42,33,25,.55); transform: scale(1.08); }
.kb-like.on { background: var(--orange); color: #fff; }

/* Xem ảnh lớn: ảnh ở trên, khung tư vấn ở dưới */
.kb-lb { flex-direction: column; padding: 0; }
.kb-lb-stage { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 18px; }
/* Ảnh phải LUÔN vừa khung. Trước đây dùng max-height:100% nhưng phần trăm
   chiều cao KHÔNG tính được khi khung lấy chiều cao từ flex -> ảnh khổ dọc
   tràn ra ngoài màn hình (đo thật: ảnh cao 2030px trong khung cao 758px).
   object-fit:contain thì không bao giờ tràn và cũng không cắt xén ảnh. */
.kb-lb-stage img {
  position: absolute; inset: 14px;
  width: calc(100% - 28px); height: calc(100% - 28px);
  object-fit: contain; border-radius: 8px;
}
.kb-lb img.is-blur { filter: blur(14px); }              /* nền mờ trong lúc chờ bản lớn */
.kb-lb-panel {
  width: 100%; background: var(--paper); color: var(--ink);
  padding: 13px var(--gutter);
  /* Chừa vạch home indicator của iPhone, nếu không nút bị che */
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
}
.kb-lb-concept { font-size: 0.98rem; font-weight: 700; margin: 0 0 10px; }
.kb-lb-actions { display: flex; gap: 10px; }
.kb-lb-actions > * {
  flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); font-family: inherit; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.kb-lb-like { background: var(--paper); border: 1.5px solid var(--hairline-2); color: var(--ink); }
.kb-lb-like.on { border-color: var(--orange); color: var(--orange-text); background: var(--orange-050); }
.kb-lb-ask { background: var(--orange); color: #fff; border: 0; }
.kb-lb .kb-count { position: static; display: block; text-align: center; margin-top: 9px;
  background: none; color: var(--ink-3); font-size: 0.8rem; padding: 0; }

/* Thanh dính đáy: đếm số ảnh đã thích + gửi cho studio */
.kb-likebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  align-items: center; gap: 10px;
  padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline); box-shadow: 0 -6px 24px rgba(42,33,25,.08);
}
body.kb-has-likebar .kb-likebar { display: flex; }
/* Chừa chỗ cho thanh dính, nếu không hàng ảnh cuối bị che */
body.kb-has-likebar { padding-bottom: 78px; }
/* Đẩy cụm nút nổi VÀ nút "lên đầu trang" lên trên thanh dính, tránh đè chữ.
   Viết 2 dòng: dòng đầu là giá trị chắc chắn chạy, dòng sau cộng thêm vùng an toàn
   của iPhone. env() PHẢI có giá trị dự phòng, nếu không cả dòng bị bỏ qua. */
body.kb-has-likebar .fab,
body.kb-has-likebar .to-top.show,
body.kb-has-likebar .to-top {
  bottom: 84px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
.kb-likebar__info { flex: 1; min-width: 0; }
.kb-likebar__count { display: block; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.kb-likebar__hint { display: block; font-size: 0.76rem; color: var(--ink-3); }
.kb-likebar__clear {
  font-family: inherit; font-size: 0.82rem; color: var(--ink-3); background: none;
  border: 0; cursor: pointer; padding: 8px 6px; text-decoration: underline;
}
/* Là thẻ <a> chứ không phải <button> — xem ghi chú trong gallery.js.
   Vì vậy phải tự dựng lại dáng nút: inline-flex để min-height ăn, bỏ gạch chân. */
.kb-likebar__send {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: var(--orange); color: #fff; font-family: inherit; font-weight: 700;
  font-size: 0.95rem; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.kb-likebar__send:hover { background: var(--orange-600); }
.kb-likebar__send:visited { color: #fff; }

/* Lưới an toàn khi trình duyệt chặn chép tự động */
.kb-copysheet {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(42,33,25,.55);
}
.kb-copysheet__box {
  width: min(520px, 100%); max-height: 86dvh; overflow: auto;
  background: #fff; border-radius: 16px; padding: 18px;
  box-shadow: 0 18px 48px rgba(42,33,25,.24);
}
.kb-copysheet__box p { margin: 0 0 10px; font-size: 0.92rem; color: var(--ink-2, #5a5148); }
.kb-copysheet__box textarea {
  width: 100%; font-family: inherit; font-size: 0.86rem; line-height: 1.5;
  padding: 10px; border: 1px solid var(--hairline); border-radius: 10px;
  resize: vertical; background: #fbf9f7; color: var(--ink);
}
.kb-copysheet__row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.kb-copysheet__close {
  flex: 0 0 auto; font-family: inherit; font-size: 0.9rem; color: var(--ink-3);
  background: none; border: 0; cursor: pointer; padding: 10px 4px; text-decoration: underline;
}
.kb-copysheet__go {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: var(--r-pill); background: var(--orange);
  color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.kb-copysheet__go:hover { background: var(--orange-600); }
.kb-copysheet__go:visited { color: #fff; }
@media (max-width: 420px) { .kb-likebar__hint { display: none; } }

/* T17 — nhãn ĐỘ TUỔI: mẹ quét mắt 3 giây là biết con mình thuộc nhóm nào */
.kb-age {
  display: block; font-style: normal; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.92; margin-bottom: 3px;
}
.kb-cover .ov .kb-age { color: #fff; }
.kb-age--head {
  display: inline-block; margin: 0; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--olive-050); color: var(--olive-700); letter-spacing: 0.08em;
}

/* =========================================================
   ALBUM KHÁCH THẬT dưới bộ ảnh concept (js/gallery-khach.js)
   Chỉ hiện khi có album cùng loại — không có thì khối này ẩn hẳn,
   không để lại khoảng trống.
   ========================================================= */
.kb-khach {
  margin-top: 44px; padding-top: 34px;
  border-top: 1px solid var(--hairline);
}
.kb-khach[hidden] { display: none; }
.kb-khach__head { text-align: center; max-width: 640px; margin: 0 auto 20px; }
.kb-khach__title {
  margin: 0; font-family: var(--font-display, inherit);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem); font-weight: 700; color: var(--ink);
}
.kb-khach__sub { margin: 8px 0 0; font-size: 0.94rem; color: var(--ink-3); }
.kb-khach__more {
  display: block; margin-top: 16px; text-align: center;
  font-size: 0.94rem; font-weight: 600; color: var(--orange); text-decoration: none;
}
.kb-khach__more:hover { text-decoration: underline; }
@media (max-width: 520px) { .kb-khach { margin-top: 32px; padding-top: 26px; } }