/* ============================================================
   planetBLU — riêng trang chủ: Banner · Dự án · About
   Phần dùng chung (khung, lưới, thanh) nằm ở css/thanh.css
   ============================================================ */
/* ---------- 1. Banner ---------- */
.pb-banner {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}
.pb-banner video,
.pb-banner img.pb-nen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;   /* nền động, không phải video để bấm xem */
}
.pb-banner .pb-giua {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Mặc định thấy băng chuyền; rê chuột vào banner thì băng chuyền lui đi và logo
   hiện lên. Hai lớp chồng nhau, chỉ đổi độ mờ nên chuyển mượt, không giật. */
.pb-banner .pb-nen { transition: opacity .45s ease; }
.pb-banner .pb-giua { opacity: 0; transition: opacity .45s ease; }
.pb-banner:hover .pb-nen { opacity: 0; }
.pb-banner:hover .pb-giua { opacity: 1; }

.pb-banner .pb-logo-lon { width: min(52vw, 620px); }
/* Chọn ảnh riêng cho lớp rê chuột (không kèm dòng chữ) thì cho ảnh phủ kín
   banner như lớp nền, chứ không bó nhỏ như logo. */
.pb-banner .pb-giua:not(:has(.pb-ghi-chu)) .pb-logo-lon {
  /* Trải theo khung banner bằng inset chứ không phải height:100% — là ô lưới
     được canh giữa nên nó không có chiều cao xác định để tính phần trăm. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pb-banner .pb-ghi-chu {
  margin-top: 26px;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- 2. Dự án ---------- */
.pb-du-an { padding: 100px 0; }

/* Trang Project dùng cùng danh sách/lưới với trang chủ. Page marker lấy cùng
   chuẩn thị giác của Archive và chừa chiều cao cho thanh điều hướng cố định. */
.pb-project-page {
  padding-top: calc(var(--cao-thanh) + 100px + 67.2px + 20px);
}
.pb-project-page .pb-du-an { padding-top: 0; }
.pb-project-page .pb-du-an > .pb-khung {
  --pb-grid-column: calc((100% - (11 * var(--ranh))) / 12);
  --pb-square-axis: calc((4 * var(--pb-grid-column)) + (3 * var(--ranh)) - (60px * .74));
  display: grid;
  grid-template-columns: var(--pb-square-axis) minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
}
.pb-project-page .pb-du-an .pb-ten-du-an {
  grid-column: 1;
  transform: translateX(-20px);
}
.pb-project-page .pb-du-an .pb-anh-du-an { grid-column: 2; }

/* ---------- Trang About us ----------
   Điểm neo là MÉP TRÁI ô vuông breadcrumb. Breadcrumb chiếm 4 cột và ô vuông
   nằm cuối vùng đó, nên trừ cạnh ô vuông để tìm đúng trục bắt đầu nội dung. */
.pb-about-page {
  --about-gap: 30px;
  padding-top: calc(var(--cao-thanh) + 100px + 67.2px + 20px);
}
.pb-about-layout {
  --pb-grid-column: calc((100% - (11 * var(--ranh))) / 12);
  --pb-square-axis: calc((4 * var(--pb-grid-column)) + (3 * var(--ranh)) - (60px * .74));
  display: grid;
  grid-template-columns: var(--pb-square-axis) minmax(0, 1fr);
  column-gap: 0;
  row-gap: var(--about-gap);
  align-items: start;
}
.pb-about-sections {
  padding-right: 0;
}
.pb-about-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(-20px);
}
.pb-about-menu::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(clamp(18px, 1.7vw, 24px) * .74);
  background: #000;
  pointer-events: none;
}
.pb-about-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: clamp(18px, 1.7vw, 24px);
  font-variation-settings: "wght" 589;
  line-height: 1;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  cursor: pointer;
  text-align: right;
  transition: color .18s ease;
}
.pb-about-overview .pb-about-tab,
.pb-artist-page .pb-about-tab,
.pb-project-detail-menu .pb-about-tab {
  line-height: 1;
}
.pb-about-tab.pb-o::after {
  width: .74em;
  height: 1em;
  margin-left: .34em;
  flex: 0 0 .74em;
  vertical-align: 0;
}
.pb-about-tab:hover { color: var(--xam); }
.pb-about-tab.is-active { color: var(--xam); }
.pb-about-current {
  margin: 0;
  transform: translateX(-20px);
  text-align: right;
  font-size: clamp(18px, 1.7vw, 24px);
  font-variation-settings: "wght" 589;
  line-height: 1.12;
  white-space: nowrap;
}
.pb-about-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
  scroll-margin-top: calc(var(--cao-thanh) + 20px);
}
.pb-about-logo {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
.pb-about-panel h2 {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-variation-settings: "wght" 589;
  line-height: 1.15;
}
.pb-about-copy,
.pb-about-panel > p {
  max-width: none;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.32;
}
.pb-about-copy {
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
}
.pb-about-copy p { margin: 0; }
.pb-inline-square {
  display: inline-block;
  width: .74em;
  height: .74em;
  margin-left: .12em;
  background: currentColor;
}
.pb-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ranh);
  align-items: stretch;
}
.pb-profile-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f2f1f3;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.pb-profile-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 564 / 793;
  object-fit: cover;
  object-position: center top;
  transition: opacity .25s ease;
}
.pb-profile-info {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  background: rgba(255, 255, 255, .78);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pb-profile-info h3 {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 24px);
  font-variation-settings: "wght" 589;
}
.pb-profile-info p { font-size: clamp(17px, 1.5vw, 22px); }
.pb-profile-card:hover .pb-profile-info,
.pb-profile-card:focus-within .pb-profile-info { opacity: 1; }
.pb-about-download {
  display: block;
  font-size: 16px;
  font-variation-settings: "wght" 589;
  line-height: 1.12;
}
.pb-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(40px, 8vw, 120px);
}
.pb-partner-card img {
  width: min(100%, 280px);
  height: 90px;
  object-fit: contain;
  object-position: left center;
}
.pb-partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
}
/* Logo và tên bọc trong một thẻ <a> khi đối tác có liên kết — giữ y nguyên
   dáng cũ, chỉ đổi con trỏ và làm mờ nhẹ lúc rê chuột. */
.pb-partner-link { display: block; transition: opacity .2s ease; }
.pb-partner-link:hover { opacity: .68; }

.pb-partner-card h3 {
  margin: 0;
  font-size: 18px;
  font-variation-settings: "wght" 589;
}
.pb-partner-card p {
  max-width: 340px;
  font-size: 16px;
  line-height: 1.25;
}
.pb-about-section {
  margin-top: var(--about-gap);
  scroll-margin-top: calc(var(--cao-thanh) + 20px);
  align-items: start;
}
.pb-about-section#artist-profile {
  margin-top: var(--about-gap);
}
.pb-about-section#profile-print {
  align-items: start;
}
.pb-about-section#profile-print .pb-about-section-title,
.pb-about-section#profile-print .pb-about-download {
  margin-top: 0;
}
.pb-about-section-title {
  margin: 0;
  padding-right: 0;
  transform: translateX(-20px);
  text-align: right;
  font-size: 20px;
  font-variation-settings: "wght" 589;
  line-height: 1.12;
  white-space: nowrap;
}
.pb-about-section-body {
  min-width: 0;
}
.pb-about-contact { display: grid; gap: 14px; font-size: clamp(24px, 3vw, 42px); }
.pb-about-contact a { transition: color .18s ease; }
.pb-about-contact a:hover { color: var(--xam); }
.pb-about-section:last-child { padding-bottom: 80px; }

/* ---------- Trang chi tiết nghệ sĩ ---------- */
.pb-artist-page .pb-artist-portrait {
  display: block;
  grid-column: 2;
  width: min(100%, 560px);
  height: auto;
  aspect-ratio: 564 / 793;
  object-fit: cover;
  object-position: center top;
}
.pb-artist-page .pb-about-sections { grid-column: 1; }
.pb-artist-page .pb-about-current { grid-column: 1; }
.pb-artist-page .pb-artist-biography { grid-column: 2; }
.pb-artist-biography { align-self: start; }
.pb-artist-copy {
  min-width: 0;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.32;
}

/* Kích thước đang duyệt riêng trên trang About Us. */
.pb-about-overview .pb-about-menu::before {
  width: calc(clamp(18px, 1.7vw, 24px) * .74);
}
.pb-artist-page .pb-about-menu::before {
  width: calc(clamp(18px, 1.7vw, 24px) * .74);
}
.pb-about-overview .pb-about-tab,
.pb-about-overview .pb-about-current,
.pb-about-overview .pb-about-section-title,
.pb-artist-page .pb-about-tab,
.pb-artist-page .pb-about-current,
.pb-artist-page .pb-about-section-title {
  font-size: clamp(18px, 1.7vw, 24px);
}
.pb-about-overview .pb-about-current {
  transform: translate(-20px, -2px);
}
.pb-about-overview .pb-about-panel h2,
.pb-about-overview .pb-about-copy,
.pb-about-overview .pb-about-panel > p,
.pb-artist-page .pb-about-panel h2,
.pb-artist-page .pb-about-copy,
.pb-artist-page .pb-about-panel > p,
.pb-artist-page .pb-artist-copy {
  font-size: 16px;
}
.pb-artist-copy p { margin: 0; }
.pb-artist-copy p + p { margin-top: var(--about-gap); }

/* ---------- Trang Event ---------- */
.pb-event-lead { min-width: 0; }
.pb-event-lead > h2 {
  margin: 0;
  font-size: clamp(52px, 5vw, 72px);
  font-variation-settings: "wght" 450;
  line-height: 1;
}
.pb-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--about-gap);
}
.pb-event-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.pb-event-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pb-event-card__info { padding-top: 12px; }
.pb-event-card__info h3 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 36px);
  font-variation-settings: "wght" 589;
  line-height: 1.08;
}
.pb-event-card__info p,
.pb-event-card__info time { margin: 5px 0 0; font-size: 16px; }
.pb-event-card { transition: opacity .2s ease; }
.pb-event-card:hover { opacity: .45; }
.pb-event-empty { margin: 0; font-size: clamp(32px, 5vw, 70px); }

/* ---------- Trang Archive ---------- */
.pb-archive-page {
  --about-gap: 30px;
  padding-top: calc(var(--cao-thanh) + 100px + 67.2px + 20px);
}
.pb-archive-head { align-items: start; }
.pb-archive-menu { justify-self: stretch; }
.pb-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.pb-archive-card {
  display: block;
  border: 1px solid #000;
  padding: 22px;
  min-width: 0;
  transition: color .2s ease, border-color .2s ease;
}
.pb-archive-meta {
  min-height: 78px;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.25;
}
.pb-archive-cover {
  display: flex;
  align-items: flex-start;
  margin-top: 30px;
  min-height: 480px;
  padding: 28px;
  color: #fff;
  background: #000;
  transition: opacity .2s ease;
}
.pb-archive-cover h3 {
  max-width: 12em;
  font-size: clamp(24px, 2.6vw, 38px);
  font-variation-settings: "wght" 589;
  line-height: 1.25;
}
.pb-archive-card:hover { color: var(--xam); border-color: var(--xam); }
.pb-archive-card:hover .pb-archive-cover { opacity: .75; }

/* ---------- Trang chi tiết bài viết ---------- */
.pb-article-page {
  --about-gap: 30px;
  padding-top: 20px;
  padding-bottom: 80px;
}
.pb-article-page .pb-about-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ranh);
}
.pb-article-page .pb-about-layout > [aria-hidden="true"] { grid-column: 1 / span 4; }
.pb-article-page .pb-article-content {
  grid-column: 5 / -1;
  /* Nội dung lấy mép trái ô vuông của tiêu đề làm trục chuẩn. */
  justify-self: stretch;
  width: 100%;
}
.pb-article-content { min-width: 0; }
.pb-article-featured { margin: 0 0 var(--about-gap); }
.pb-article-featured img { width: 100%; height: auto; }
.pb-entry-content {
  font-size: 16px;
  line-height: 1.32;
}
.pb-entry-content > * { margin: 0; }
.pb-entry-content > * + * { margin-top: var(--about-gap); }
.pb-entry-content h1,
.pb-entry-content h2,
.pb-entry-content h3,
.pb-entry-content h4 {
  font-size: inherit;
  font-variation-settings: "wght" 589;
  line-height: 1.25;
}
.pb-entry-content img { max-width: 100%; height: auto; }

/* ---------- Chi tiết dự án: lấy Giants làm chuẩn ---------- */
.pb-project-detail {
  --about-gap: 30px;
  padding-top: calc(var(--cao-thanh) + 100px + 67.2px + 20px);
  padding-bottom: 80px;
}
.pb-project-detail-head { align-items: start; }
/* Không có cột menu thì nội dung phải tự nhảy sang cột 2, bằng không lưới xếp
   nó vào cột 1 — chỗ vốn dành cho menu — và cả trang lệch hẳn sang trái. */
/* Dòng ghi công (Artist / Production team) ở đầu trang Collection. */
.pb-collection-ghi-cong { margin-bottom: 30px; }
.pb-ghi-cong-noi-dung {
  grid-column: 2;
  font-size: 16px;
  line-height: 1.4;
}
.pb-ghi-cong-noi-dung p { margin: 0; }
.pb-ghi-cong-noi-dung strong { font-variation-settings: "wght" 630; }
@media (max-width: 700px) {
  .pb-collection-ghi-cong { display: block; margin-bottom: 20px; }
  .pb-ghi-cong-noi-dung { font-size: 15px; }
}

.pb-project-intro.pb-khong-menu { grid-column: 2; }
.pb-project-intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
  font-size: 16px;
  line-height: 1.32;
}
.pb-project-statement p { margin: 0; }
.pb-project-statement p + p { margin-top: var(--about-gap); }
.pb-project-main-image,
.pb-project-video {
  display: block;
  width: 100%;
  height: auto;
}
.pb-project-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--about-gap);
}
.pb-project-gallery-card {
  position: relative;
  grid-column: span 2;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}
.pb-project-gallery-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.pb-project-gallery-card img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity .25s ease;
}
.pb-project-gallery-card:first-child {
  grid-column: 1 / -1;
}
.pb-project-gallery-card:first-child img {
  height: auto;
  aspect-ratio: auto;
}
.pb-project-gallery-card:nth-child(2),
.pb-project-gallery-card:nth-child(3) { grid-column: span 3; }
.pb-project-gallery-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-size: clamp(18px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
/* Hiệu ứng rê chuột áp cho MỌI ô có nhãn, không riêng ô dẫn sang bộ sưu tập —
   dự án không dùng bộ sưu tập vẫn hiện năm và tên khi rê vào. */
.pb-project-gallery-card:hover img,
.pb-project-gallery-card:focus-within img { opacity: .2; }
.pb-project-gallery-card:hover .pb-project-gallery-caption,
.pb-project-gallery-card:focus-within .pb-project-gallery-caption { opacity: 1; }

/* Collection dùng đúng lưới 2 cột và nhịp 30px của trang chi tiết dự án. */
.pb-collection-block { scroll-margin-top: calc(var(--cao-thanh) + 20px); }
.pb-collection-block video,
.pb-collection-gallery img,
.pb-technical-gallery img {
  display: block;
  width: 100%;
  height: auto;
}
.pb-collection-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
}
.pb-collection-gallery img:first-child {
  grid-column: 1 / -1;
}
.pb-collection-gallery img:nth-child(2),
.pb-collection-gallery img:nth-child(3) { grid-column: span 3; }
.pb-collection-gallery img:nth-child(n+4) { grid-column: span 2; }
.pb-collection-product {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.pb-collection-product:first-child { grid-column: 1 / -1; }
.pb-collection-product:nth-child(2),
.pb-collection-product:nth-child(3) { grid-column: span 3; }
.pb-collection-product:nth-child(n+4) { grid-column: span 2; }
.pb-collection-product img { transition: opacity .2s ease; }
.pb-collection-product-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #000;
  text-align: center;
  font-size: clamp(18px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.pb-collection-product:hover img,
.pb-collection-product:focus-visible img { opacity: .2; }
.pb-collection-product:hover .pb-collection-product-title,
.pb-collection-product:focus-visible .pb-collection-product-title { opacity: 1; }

body.pb-modal-open { overflow: hidden; }
.pb-product-modal[hidden] { display: none; }
.pb-product-modal {
  position: fixed;
  z-index: 10000;
  inset: var(--cao-thanh) 0 0;
  overflow: hidden;
  padding: 20px;
  /* Nền mờ tối phía sau để người xem nhận ra đây là lớp phủ tạm, bấm ra ngoài
     là đóng — trước đây nền trắng kín nên trông y như một trang mới. */
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
}
.pb-product-close {
  /* Nằm bên TRÁI và NGOÀI khối trắng, trên nền mờ: thấy ngay chỗ để tắt mà
     không đè lên tên tác phẩm — thứ luôn nằm ở góc trái khối nội dung.
     Màn hẹp không còn chỗ bên ngoài thì nó lùi vào sát mép trái màn hình. */
  position: fixed;
  z-index: 10003;
  top: calc(var(--cao-thanh) + 16px);
  left: max(10px, calc(50% - 620px - 62px));
  right: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  /* Mũi tên trên, chữ dưới — rõ nghĩa hơn dấu × với người chưa quen. */
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 52px;
}
/* Chuyển qua lại giữa các Collection của cùng một dự án. Mũi tên đen nổi trên
   nền trắng của trang — không dựng dải xám, vì dải ấy cắt trang làm ba mảng. */
.pb-trang-truoc,
.pb-trang-sau {
  position: fixed;
  z-index: 60;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: #000;
  font-size: 13px;
  line-height: 1;
  opacity: .72;
  transition: opacity .2s ease;
}
.pb-trang-truoc { left: max(8px, calc(50% - 620px - 76px)); }
.pb-trang-sau { right: max(8px, calc(50% - 620px - 76px)); }
.pb-trang-truoc:hover,
.pb-trang-sau:hover { opacity: 1; }
.pb-trang-truoc svg,
.pb-trang-sau svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.pb-trang-truoc span,
.pb-trang-sau span { font-variation-settings: "wght" 589; }
/* Mở popup tác phẩm thì giấu đi, kẻo hai bộ mũi tên chồng lên nhau. */
body.pb-modal-open .pb-trang-truoc,
body.pb-modal-open .pb-trang-sau { display: none; }
@media (max-width: 900px) {
  .pb-trang-truoc,
  .pb-trang-sau {
    position: absolute;
    top: calc(var(--cao-thanh) + 4px);
    bottom: auto;
    transform: none;
    padding: 8px 10px;
    font-size: 11px;
  }
  /* Chừa một hàng cho Back / Next giữa thanh menu và tiêu đề. */
  body:has(.pb-trang-truoc, .pb-trang-sau) .pb-breadcrumb {
    padding-top: calc(var(--cao-thanh) + 64px);
  }
  .pb-trang-truoc svg,
  .pb-trang-sau svg { width: 20px; height: 20px; }
}

/* Nút sang tác phẩm kế tiếp — soi gương với nút Trở về ở bên trái. */
.pb-product-next {
  position: fixed;
  z-index: 10003;
  top: calc(var(--cao-thanh) + 16px);
  right: max(10px, calc(50% - 620px - 62px));
  left: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 52px;
}
.pb-product-next[hidden] { display: none; }
.pb-product-next svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.pb-product-next span {
  font-variation-settings: "wght" 589;
  letter-spacing: .01em;
}
.pb-product-next:hover,
.pb-product-next:focus-visible { color: var(--xam); }

.pb-product-close svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.pb-product-close span {
  font-variation-settings: "wght" 589;
  letter-spacing: .01em;
}
.pb-product-close:hover,
.pb-product-close:focus-visible { color: var(--xam); }
.pb-product-modal-inner {
  /* Khối trắng nổi lên trên nền mờ. */
  position: relative;
  background: #fff;
  padding: 24px;
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  height: calc(100dvh - var(--cao-thanh) - 40px);
  max-height: calc(100dvh - var(--cao-thanh) - 40px);
  box-sizing: border-box;
  overflow: hidden;
}
.pb-product-copy {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.pb-product-copy h2 {
  display: block;
  margin: 0 0 30px;
  text-align: left;
  font-size: clamp(30px, 3.5vw, 50px);
  font-variation-settings: "wght" 589;
  line-height: 1;
}
.pb-product-copy h2::after {
  content: none;
  display: none;
}
/* Ba khối Artwork Type / Size / Details trong popup, cách nhau đúng 10px. */
.pb-product-field + .pb-product-field { margin-top: 10px; }
.pb-product-field strong { font-variation-settings: "wght" 630; }
.pb-product-field-body { margin-top: 10px; }
.pb-product-field-body p + p { margin-top: 1em; }
/* Liên kết trong chữ: gạch chân mảnh cho phân biệt, không đổi phông. */
.pb-product-field-body a,
.pb-doan a,
.pb-about-copy a { text-decoration: underline; text-underline-offset: .18em; }
/* Khung nhúng (YouTube, bản đồ…): giữ đúng kích thước người nhập khai trong
   [embed width= height=], chỉ ép không vượt quá bề ngang cột. Không ghi kích
   thước thì WordPress dùng mặc định 1240×698 nên nó tự tràn hết cột.

   Bắt theo KHUNG NỘI DUNG (.pb-khung) chứ không liệt kê từng khối chữ: liệt kê
   thì sót một chỗ là trang có thanh cuộn ngang, mà chỗ sót chỉ lộ ra khi đúng
   nội dung đó có video. Banner nằm ngoài .pb-khung nên không dính luật này. */
.pb-khung iframe,
.pb-khung embed,
.pb-khung object,
.pb-product-modal iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* Ảnh và video tải lên cũng không được vượt khung. */
.pb-khung img,
.pb-khung video,
.pb-product-modal img {
  max-width: 100%;
}
/* Khối bọc do WordPress sinh ra quanh video nhúng. */
.pb-khung .wp-video,
.pb-khung .wp-block-embed,
.pb-khung .wp-caption { max-width: 100% !important; }

.pb-product-description {
  max-width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0;
  text-align: left;
  white-space: pre-line;
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  letter-spacing: normal;
  line-height: 1.32;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 38px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 38px), transparent 100%);
}
.pb-product-description::-webkit-scrollbar { display: none; }
.pb-product-description.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.pb-product-media {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
.pb-product-main {
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  max-height: none;
  flex: 1 1 0;
  /* contain chứ không cover: cover cắt bớt ảnh cho đầy khung, nên mỗi máy một
     tỉ lệ màn là mất một phần tác phẩm khác nhau. contain giữ trọn khung hình,
     thừa chỗ thì để trắng. */
  object-fit: contain;
  object-position: center;
}
.pb-product-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 0 0 auto;
}
.pb-product-thumbs::-webkit-scrollbar { display: none; }
.pb-product-thumbs button {
  flex: 0 0 calc((100% - 50px) / 6);
  max-width: 96px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  scroll-snap-align: start;
}
.pb-product-thumbs button.is-active { border-color: #000; }
/* Ảnh nhỏ cũng hiện trọn khung hình, thừa chỗ thì để nền trắng — nhìn vào là
   biết đúng tấm nào, không bị cắt mất phần chính của tác phẩm. */
.pb-product-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
.pb-collection-copy { font-size: 16px; line-height: 1.35; }
.pb-collection-note { font-size: 14px; line-height: 1.35; }
.pb-collection-row { align-items: start; }
.pb-collection-row + .pb-collection-row { margin-top: 30px; }
/* Cột trái đã có menu mục rồi, in thêm tên mục cạnh từng khối là lặp hai lần
   cùng một chữ. Giấu ở khổ máy tính; khổ điện thoại vẫn giữ vì ở đó menu nằm
   tuốt trên đầu, xa khối nội dung. */
.pb-collection-row .pb-about-current { display: none; }
/* Giấu nhãn đi thì phần nội dung tụt về cột 1 — ghim lại cột 2 cho thẳng hàng
   với phần chữ và với các khối còn lại. */
.pb-collection-row .pb-collection-block { grid-column: 2; }

.pb-technical-content { display: flex; flex-direction: column; gap: 30px; }
.pb-technical-content > a { color: inherit; text-decoration: none; font-size: 16px; }
.pb-technical-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

@media (max-width: 700px) {
  .pb-about-page { padding-top: calc(var(--cao-thanh) + 100px + 67.2px + 20px); }
  .pb-about-layout { display: block; }
  .pb-about-sections {
    padding: 0 0 var(--about-gap);
  }
  /* Giữ nguyên lối canh phải của bản máy tính: dải đen vẽ bằng ::before neo vào
     mép phải khối, nên nếu đổi mục sang canh trái thì chữ một nơi dải một nẻo.
     Canh phải cũng đúng nhịp với menu điện thoại và danh sách dự án. */
  .pb-about-menu {
    align-items: flex-end;
    transform: none;
  }
  .pb-about-tab { text-align: right; }
  .pb-about-current { display: none; }
  /* Nhưng trong trang bộ sưu tập thì phải hiện: bấm Video ở menu là cuộn tới
     đây, không có tên mục thì chẳng biết đã tới đúng chỗ chưa. */
  .pb-collection-row .pb-about-current {
    display: block;
    margin-bottom: 20px;
    transform: none;
    /* Canh trái cho thẳng cột với nội dung và ảnh ngay bên dưới. */
    text-align: left;
  }
  /* Neo mép trên mục cách thanh cố định, không thì thanh đè lên tên mục. */
  .pb-collection-row { scroll-margin-top: calc(var(--cao-thanh) + 20px); }
  .pb-about-panel { margin-top: var(--about-gap); }
  /* Menu mục (Video / Collection / Exhibition…) nằm sát nội dung ngay dưới,
     chừa 20px cho dễ thở. */
  .pb-about-menu { margin-bottom: 20px; }
  .pb-about-section-title {
    margin-bottom: 20px;
    padding-right: 0;
    text-align: left;
    transform: none;
  }
  .pb-profile-grid { grid-template-columns: 1fr; }
  .pb-partner-grid { grid-template-columns: 1fr; }
  .pb-archive-grid { grid-template-columns: 1fr; }
  .pb-event-grid { grid-template-columns: 1fr; }
  .pb-article-page .pb-about-layout { display: block; }

  .pb-project-page .pb-du-an > .pb-khung { display: block; }
  .pb-project-page .pb-du-an .pb-ten-du-an { transform: none; }
  .pb-project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
  .pb-project-gallery-card:nth-child(n) { grid-column: span 1; }
  .pb-project-gallery-card:first-child { grid-column: 1 / -1; }
}

/* Khổ hẹp nhất vẫn giữ hai ảnh một hàng — dồn về một cột thì trang dài lê thê
   mà ảnh cũng chẳng rõ thêm. Chỉ thu hẹp khoảng hở lại. */
@media (max-width: 430px) {
  .pb-project-gallery { gap: 10px; }
}

@media (max-width: 700px) {
  /* Cùng nhịp với lưới ảnh ở trang chủ và trang dự án: tấm đầu trọn bề ngang,
     các tấm sau hai cái một hàng. */
  .pb-collection-gallery,
  .pb-technical-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
  .pb-collection-gallery > *:nth-child(n),
  .pb-technical-gallery > *:nth-child(n),
  .pb-collection-product:nth-child(n) { grid-column: span 1; }
  .pb-collection-gallery > *:first-child,
  .pb-technical-gallery > *:first-child { grid-column: 1 / -1; }
  .pb-product-modal { padding: 20px 15px 30px; }
  .pb-product-modal { overflow-y: auto; }
  .pb-product-modal-inner { grid-template-columns: 1fr; gap: 20px; height: auto; max-height: none; overflow: visible; }
  .pb-product-media { grid-row: 1; }
  .pb-product-copy { grid-row: 2; }
  .pb-product-copy { display: block; max-height: none; }
  .pb-product-description { overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  .pb-product-media { display: block; height: auto; overflow: visible; }
  .pb-product-copy h2 { justify-content: flex-start; text-align: left; font-size: clamp(28px, 10vw, 42px); }
  .pb-product-main { height: auto; min-height: 48vh; max-height: 65vh; object-fit: contain; }
  .pb-product-thumbs button { flex-basis: calc((100% - 30px) / 4); }
}

/* Tên dự án chiếm 4 cột đầu, lưới ảnh 8 cột còn lại */
.pb-du-an .pb-ten-du-an { grid-column: 1 / span 4; align-self: start; }
/* Không chừa hở giữa các dòng: ô vuông cao đúng bằng dòng nên chúng chạm nhau
   thành một dải liền, thêm bao nhiêu dự án cũng vậy. */
.pb-du-an .pb-ten-du-an li + li { margin-top: 0; }
.pb-du-an .pb-ten-du-an a {
  font-size: clamp(24px, 2.4vw, 34px);
  font-variation-settings: "wght" 589;
  line-height: 1.12;
  display: flex;
  justify-content: flex-end;   /* ô vuông thẳng một cột bên phải */
  align-items: center;
  transition: color .2s ease;
}
/* Ô vuông của tên dự án cao bằng trọn dòng để dải liền mạch; bề ngang vẫn bằng
   ô vuông ở những chỗ khác. */
.pb-du-an .pb-ten-du-an .pb-o::after {
  height: 1.12em;
  margin-left: .3em;
  vertical-align: middle;
}
.pb-du-an .pb-ten-du-an a:hover { color: var(--xam); }

.pb-du-an .pb-anh-du-an { grid-column: 5 / -1; }
/* Lưới ảnh 3 cột:
     ô 1        ảnh lớn, chiếm 2 cột × 2 hàng
     ô 2, 3     cột phải, xếp chồng
     ô 4–6      một hàng ba ảnh
     ô 7–9      một hàng ba ảnh nữa
   Tối đa 9 ảnh (front-page.php cắt sẵn). */
.pb-du-an .pb-anh-du-an .pb-luoi { --cot: 3; }

/* Thẻ ảnh: mỗi thẻ 4 cột trong lưới 8 cột của cột ảnh → 2 ảnh một hàng.
   Ảnh nằm TRÊN nhãn; rê chuột thì ảnh mờ để lộ năm và tên dự án phía sau. */
.pb-the {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  grid-column: span 1;
}
/* Ảnh đầu tiên: to gấp đôi cả hai chiều */
.pb-the:first-child { grid-column: span 2; grid-row: span 2; }
.pb-the:first-child img { height: 100%; aspect-ratio: auto; }
.pb-the img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity .25s ease;
}
.pb-the:hover img { opacity: .3; }
.pb-nhan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}

/* Trang Project gồm 9 ảnh liên tục:
   - ảnh 1 lớn hết chiều ngang;
   - ảnh 2–3 chia đôi hàng kế tiếp;
   - ảnh 4–9 chia 3 cột × 2 hàng ở phần dưới. */
.pb-project-page .pb-anh-du-an .pb-luoi {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
}
.pb-project-page .pb-the,
.pb-project-page .pb-the:first-child {
  grid-column: span 2;
  grid-row: span 1;
}
.pb-project-page .pb-the:first-child { grid-column: 1 / -1; }
.pb-project-page .pb-the:nth-child(2),
.pb-project-page .pb-the:nth-child(3) { grid-column: span 3; }
.pb-project-page .pb-the img,
.pb-project-page .pb-the:first-child img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pb-project-page .pb-the:first-child img { aspect-ratio: 1.12 / 1; }

@media (max-width: 700px) {
  .pb-project-page .pb-anh-du-an .pb-luoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
  .pb-project-page .pb-the,
  .pb-project-page .pb-the:nth-child(2),
  .pb-project-page .pb-the:nth-child(3) { grid-column: span 1; }
  .pb-project-page .pb-the:first-child { grid-column: 1 / -1; }
}

/* Khổ hẹp nhất vẫn giữ hai ảnh một hàng (ảnh đầu vẫn trọn bề ngang) — dồn về
   một cột thì trang dài lê thê mà ảnh chẳng rõ thêm. Chỉ bớt khoảng hở. */
@media (max-width: 430px) {
  .pb-project-page .pb-anh-du-an .pb-luoi { gap: 10px; }
}

/* ---------- 3. About ----------
   Chữ bên trái · ảnh bên phải chạy suốt chiều cao khối · "More" canh phải nằm
   giữa tiêu đề và các đoạn văn · dưới cùng là dải chân trang.
   ---------------------------------------------------------------- */
.pb-about { padding: 110px 0 0; }

.pb-about .pb-gioi-thieu {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
}
.pb-about h2 {
  font-size: clamp(22px, 2.5vw, 34px);
  font-variation-settings: "wght" 630;
  letter-spacing: -.045em;
  line-height: 1.12;
  max-width: none;
}
/* "More" canh phải, nằm giữa tiêu đề và phần chữ. */
.pb-about .pb-cuoi {
  margin: 0;
  padding: 70px 0 26px;
  display: flex;
  justify-content: flex-end;
}
.pb-about .pb-cuoi .pb-more {
  font-size: 15px;
  font-variation-settings: "wght" 630;
  line-height: 1;
}
.pb-about .pb-doan {
  margin: 0;
  padding: 0;
  font-size: clamp(13px, 1vw, 15px);
  font-variation-settings: "wght" 327;
  letter-spacing: -.035em;
  line-height: 1.45;
}
.pb-about .pb-doan p + p { margin-top: 1.45em; }

/* Ảnh nửa phải, cao bằng cả cột chữ. */
.pb-about .pb-anh-about {
  grid-column: 8 / -1;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
}
.pb-about .pb-anh-about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Dải chân trang ---------- */
.pb-chan {
  margin-top: 60px;
  padding: 28px 0 44px;
  border-top: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pb-chan-logo { flex: none; }
.pb-chan-logo img { width: 112px; height: auto; display: block; }

.pb-chan-lien-he {
  display: flex;
  gap: clamp(24px, 6vw, 96px);
  font-size: 18px;
  font-variation-settings: "wght" 400;
}
.pb-chan-lien-he a { transition: color .2s ease; }
.pb-chan-lien-he a:hover,
.pb-chan-lien-he a:focus-visible { color: var(--xam); }

/* ---------- khổ hẹp ---------- */
@media (max-width: 900px) {
  :root { --ranh: 16px; }
  .pb-du-an .pb-ten-du-an,
  .pb-du-an .pb-anh-du-an { grid-column: 1 / -1; }
  .pb-du-an .pb-anh-du-an { margin-top: 46px; }
  .pb-du-an .pb-anh-du-an .pb-luoi { --cot: 4; }
  .pb-the.rong-8 { grid-column: span 4; }
  .pb-du-an .pb-ten-du-an a { justify-content: flex-start; }
}

@media (max-width: 640px) {
  /* Thanh điều hướng ở khổ điện thoại do css/thanh.css lo, vì thanh có mặt
     trên mọi trang chứ không riêng các trang dựng bằng HTML. */

  /* css/thanh.css đã trả breadcrumb về dòng chảy ở khổ này, nên các trang
     không cần chừa sẵn khoảng cố định 67.2px cho tiêu đề một dòng nữa —
     chừa thêm là thừa một khoảng trắng lớn. Phải đặt ở đây chứ không đặt
     trong thanh.css: tệp này nạp sau nên quy tắc gốc sẽ đè ngược lại. */
  .pb-project-page,
  .pb-about-page,
  .pb-archive-page,
  .pb-project-detail,
  .pb-artist-page,
  .pb-article-page { padding-top: 0; }

  /* ----- Banner -----
     Màn cảm ứng không rê chuột được, nên lớp thứ hai đổi bằng CHẠM: js/trang-chu.js
     gắn lớp .pb-cham lên banner. Không có JS thì vẫn thấy lớp nền, không gãy. */
  /* Khổ dọc mà cắt theo 100svh thì ảnh ngang mất gần hết hai bên. Ở đây bỏ
     chiều cao cố định: lớp nền nằm trong dòng chảy và giữ đúng tỉ lệ gốc, nên
     chiều cao banner do chính ảnh/video quyết định — thấy trọn khung hình.
     Chừa sẵn chiều cao thanh điều hướng, vì thanh cố định sẽ che mất mép trên. */
  .pb-banner {
    height: auto;
    min-height: 0;
    padding-top: var(--cao-thanh);
  }
  .pb-banner video.pb-nen,
  .pb-banner img.pb-nen {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  /* Lớp thứ hai chồng đúng lên lớp nền (trừ phần chừa cho thanh). */
  .pb-banner .pb-giua {
    position: absolute;
    inset: var(--cao-thanh) 0 0;
    height: auto;
  }
  .pb-banner .pb-giua:not(:has(.pb-ghi-chu)) .pb-logo-lon {
    object-fit: contain;
  }

  .pb-banner:hover .pb-nen  { opacity: 1; }
  .pb-banner:hover .pb-giua { opacity: 0; }
  .pb-banner.pb-cham .pb-nen  { opacity: 0; }
  .pb-banner.pb-cham .pb-giua { opacity: 1; }
  /* Logo mặc định (khi chưa chọn ảnh riêng) nhỏ quá ở khổ dọc. */
  .pb-banner .pb-logo-lon { width: min(78vw, 420px); }
  .pb-banner .pb-ghi-chu { margin-top: 18px; font-size: 14px; }

  /* ----- Dự án -----
     Bố cục máy tính (tên bên trái, lưới 3 cột bên phải) không vừa khổ dọc: tên
     dự án dài bị ngắt dòng làm ô vuông rời ra giữa chừng. Ở đây xếp dọc: tên
     nằm trên, lưới ảnh 2 cột nằm dưới, ảnh đầu chiếm trọn bề ngang. */
  .pb-du-an { padding: 70px 0; }
  .pb-du-an .pb-ten-du-an li + li { margin-top: 0; }
  .pb-du-an .pb-ten-du-an a {
    justify-content: flex-end;
    align-items: flex-start;   /* ngắt dòng thì ô vuông vẫn nằm ngang dòng đầu */
    font-size: clamp(24px, 8.4vw, 34px);
    line-height: 1.16;
    /* Tên dài phải xuống dòng chứ không được tràn ra ngoài màn hình: hộp chữ
       là một ô flex nên mặc định nó không chịu co, phải mở min-width. */
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: right;
  }
  .pb-du-an .pb-ten-du-an li { max-width: 100%; }
  .pb-du-an .pb-ten-du-an .pb-o::after { height: 1.16em; }

  .pb-du-an .pb-anh-du-an .pb-luoi { --cot: 2; }
  .pb-du-an .pb-the:first-child { grid-column: span 2; grid-row: auto; }
  .pb-du-an .pb-the:first-child img { height: auto; aspect-ratio: 1 / 1; }
  .pb-du-an .pb-the .pb-nhan { font-size: 12px; }
  /* Khổ điện thoại: hai khối xếp dọc, ảnh nằm dưới chữ. */
  .pb-about { padding: 70px 0 0; }
  .pb-about .pb-gioi-thieu,
  .pb-about .pb-anh-about { grid-column: 1 / -1; }
  .pb-about .pb-anh-about { margin-top: 40px; }
  .pb-about .pb-anh-about img { height: auto; }
  .pb-about .pb-doan { font-size: 16px; line-height: 1.45; }
  .pb-about .pb-cuoi { padding: 40px 0 24px; }
  .pb-about h2 { font-size: clamp(24px, 7.4vw, 32px); }

  /* Chân trang xếp dọc cho khỏi chật. */
  .pb-chan {
    margin-top: 40px;
    padding: 18px 0 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .pb-chan-lien-he { gap: 24px; font-size: 16px; }
  .pb-chan-logo img { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ===================== Trang Gallery =====================
   Đảo bảng màu: nền xanh đậm #002440, chữ và ô vuông ■ #DBDFD9.

   Đổi hai biến --den/--xam là xong phần lớn, vì cả giao diện đều vẽ chữ và ô
   vuông theo chúng. Chỉ còn ba chỗ ghi màu cứng phải nói riêng: nền body, nền
   thanh điều hướng/chân trang, và logo (ảnh PNG đen, phải lật thành trắng). */
body.pb-gallery {
  --den: #DBDFD9;
  --xam: #7a8f9c;
  background: #002440;
  color: #DBDFD9;
}
body.pb-gallery .pb-thanh,
body.pb-gallery .pb-chan,
body.pb-gallery .pb-thanh .pb-con { background: #002440; }
/* Bảng menu phủ màn hình trên điện thoại. Chọn kỹ tới .pb-thanh vì quy tắc gốc
   của bảng này cũng nhắm hai lớp, nhắm một lớp thì nền trắng vẫn thắng — chữ
   sáng trên nền trắng gần như không đọc nổi. */
body.pb-gallery .pb-thanh .pb-nav:not(.pb-language-nav) { background: #002440; }
body.pb-gallery .pb-logo img,
body.pb-gallery .pb-chan-logo img { filter: brightness(0) invert(1); }
/* Ba vạch của nút menu trên điện thoại cũng vẽ bằng màu nền tối, phải lật. */
body.pb-gallery .pb-nut-menu span { background: #DBDFD9; }

.pb-gallery-page { padding-bottom: 0; }

/* Tiêu đề "Gallery ■" đứng yên cùng cặp ảnh thay vì cuộn mất. Trang này không
   có nội dung chạy dọc nên tiêu đề trôi đi chỉ để lại một khoảng trống, trong
   khi giữ nó lại thì bố cục trước và sau khi cuộn y hệt nhau. */
body.pb-gallery .pb-breadcrumb { position: fixed; }

/* Chiều cao dành cho khung ảnh: trừ thanh điều hướng và dải tiêu đề. */
body.pb-gallery { --cao-tieu-de: 190px; }

/* Ống cuộn: mỗi cặp ảnh chiếm một màn hình chiều cao. Người xem cuộn qua đoạn
   nào thì JS bật cặp tương ứng — ảnh đứng yên, chỉ nội dung thay. */
/* Thêm một màn hình làm đuôi: giữ khung ảnh dính tới cặp cuối, đồng thời làm
   chỗ để cuộn tiếp rồi quay vòng về cặp đầu. */
.pb-gallery-cuon { height: calc((var(--so-cap, 1) + 1) * 100svh); }
.pb-gallery-khung {
  position: sticky;
  /* Mốc cho ô đếm cặp đặt tuyệt đối ngay bên trên lưới ảnh. */
  /* JS ghi --dinh-khung = đáy ô vuông ■ + 10px; giá trị trong ngoặc chỉ là chỗ
     đứng tạm trước khi đo xong, để trang không giật. */
  top: var(--dinh-khung, calc(var(--cao-thanh) + var(--cao-tieu-de)));
  height: calc(100svh - var(--dinh-khung, calc(var(--cao-thanh) + var(--cao-tieu-de))));
  display: grid;
  align-items: start;
}
/* Số thứ tự cặp đang xem — "1/3". Nằm sát mép phải lưới ảnh, ngang với tiêu đề,
   nhờ vậy vừa cho biết đang ở đâu vừa cho biết còn mấy lần cuộn nữa. */
.pb-gallery-dem {
  position: absolute;
  right: clamp(40px, 6.7vw, 96px);
  bottom: calc(100% + 10px);
  font-size: 18px;
  line-height: 1;
  font-variation-settings: "wght" 589;
  opacity: .8;
}

/* Các cặp chồng khít lên nhau trong cùng một ô lưới, chỉ cặp đang xem mới hiện.
   Mép trái thẳng hàng với ô vuông ■ sau chữ "Gallery" — JS đo rồi ghi vào
   --bat-dau; chưa đo xong thì tạm lùi theo khung chung để trang không giật. */
.pb-gallery-san {
  display: grid;
  padding-left: var(--bat-dau, calc(50% - var(--khung) / 2));
  padding-right: clamp(40px, 6.7vw, 96px);
}
.pb-gallery-cap {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  /* Căn mép TRÊN, không căn giữa: ba cặp ảnh chồng cùng một ô lưới nên ô ấy cao
     bằng cặp cao nhất; căn giữa thì cặp thấp hơn bị đẩy tụt xuống, không còn
     cách ô vuông ■ đúng 10px nữa. */
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.pb-gallery-cap.dang-xem { opacity: 1; visibility: visible; }
/* Ảnh vừa khít chiều cao khung, không cắt xén. */
.pb-gallery-o { display: grid; justify-items: center; }
.pb-gallery-o img {
  max-width: 100%;
  max-height: calc(100svh - var(--dinh-khung, calc(var(--cao-thanh) + var(--cao-tieu-de))) - 40px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.pb-gallery-trong { opacity: .7; padding: 40px 0; }

@media (max-width: 700px) {
  /* Màn hình hẹp: hai tấm xếp dọc, vẫn trọn trong một màn hình. */
  body.pb-gallery { --cao-tieu-de: 130px; }
  /* KHÔNG bám theo ô vuông ■ nữa: trên màn hẹp ô vuông nằm gần mép phải, bám
     theo nó thì lưới ảnh chỉ còn vài chục pixel bề ngang. Lùi vào hai bên bằng
     nhau như mọi trang khác. */
  .pb-gallery-san { padding-left: 20px; padding-right: 20px; }
  .pb-gallery-cap { grid-template-columns: 1fr; gap: 12px; }
  .pb-gallery-o img { max-height: calc((100svh - var(--dinh-khung, calc(var(--cao-thanh) + var(--cao-tieu-de))) - 36px) / 2); }
  /* Tiêu đề trên điện thoại canh phải, nên ô đếm dời sang trái cho khỏi đè. */
  .pb-gallery-dem { left: 20px; right: auto; bottom: calc(100% + 8px); font-size: 14px; }
}

/* Địa chỉ liên hệ: cạnh logo trên desktop, dưới logo trên mobile. */
.pb-chan-thong-tin { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.pb-chan-dia-chi { margin: 0; }
.pb-chan-dien-thoai { display: inline-block; }
.pb-chan-lien-he { flex-shrink: 0; gap: clamp(16px, 2vw, 32px); font-size: 14px; }
.pb-chan-lien-he > :nth-child(3) { order: -1; }
@media (max-width: 900px) {
  .pb-chan { flex-direction: column; align-items: center; gap: 24px; padding-bottom: 30px; }
  .pb-chan-lien-he { order: -1; width: 100%; justify-content: space-between; gap: 10px; font-size: 14px; }
  .pb-chan-lien-he > :nth-child(2) { order: -2; }
  .pb-chan-logo img { width: 112px; }
  .pb-chan-thong-tin { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; font-size: 14px; width: 100%; }
  .pb-chan-dien-thoai { order: -1; }
  .pb-chan-dia-chi { max-width: 430px; text-wrap: pretty; }
}

.pb-youtube { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.pb-youtube iframe, .pb-youtube-play, .pb-youtube-play img { display: block; width: 100%; height: 100%; border: 0; }
.pb-youtube iframe { position: absolute; inset: 0; }
.pb-youtube-play { position: relative; padding: 0; cursor: pointer; background: #000; color: #fff; }
.pb-youtube-play img { object-fit: cover; }
.pb-youtube-play span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 12px; padding: 12px 24px; font-size: 30px; background: #000b; }
.pb-banner .pb-youtube-nen { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; pointer-events: none; }
.pb-youtube-poster { width: 100%; height: 100%; object-fit: cover; }
.pb-banner .pb-youtube-nen iframe { width: max(100%, 177.78svh); height: max(100%, 56.25vw); top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Footer desktop: các cột cùng mép trên. */
@media (min-width: 901px) {
  .pb-chan { align-items: flex-start; }
  .pb-chan-lien-he { line-height: 1.45; }
}

@media (min-width: 901px) {
  a.pb-chan-logo { margin-top: -5px; }
}

/* Mô tả dùng hết bề rộng cột nội dung. */
.pb-project-statement { width: 100%; max-width: none; overflow-wrap: anywhere; }

/* Tách phần mô tả Collection khỏi lưới ảnh phía trên. */
.pb-collection-detail > .pb-collection-row + .pb-project-detail-head { margin-top: 30px; }

/* Căn đều mô tả; chỉ thu gọn khi bộ điều khiển đã sẵn sàng. */
.pb-project-statement { text-align: justify; }
.pb-project-statement.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.pb-project-statement.is-collapsed > p + p { margin-top: 0; }
.pb-project-read-more {
  align-self: flex-start;
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  margin-top: -18px;
  cursor: pointer;
}
.pb-project-read-more[hidden] { display: none; }

/* Giữ định dạng văn bản của trình soạn thảo ở các khối nội dung. */
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) ul { list-style: disc outside; padding-left: 1.5em; margin: 1em 0; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) ol { list-style: decimal outside; padding-left: 1.5em; margin: 1em 0; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) ul ul { list-style-type: circle; margin: .4em 0; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) li + li { margin-top: .35em; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) :is(strong, b) { font-weight: 700; font-variation-settings: normal; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) :is(em, i) { font-style: italic; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) a { text-decoration: underline; }
:is(.pb-artist-copy, .pb-artist-biography .pb-about-copy, .pb-project-statement, .pb-collection-copy, .pb-collection-note) blockquote { border-left: 3px solid currentColor; padding-left: 1em; margin: 1em 0; }

/* Dòng cuối mờ dần khi thu gọn; nút ở giữa cột nội dung. */
.pb-project-statement.is-collapsed {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.32em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.32em), transparent 100%);
}
.pb-project-read-more { align-self: center; text-align: center; }

/* Checklist kỹ thuật: canh trục nội dung và giữ ảnh rõ, không tràn khung. */
.pb-article-page .pb-about-layout { grid-template-columns: var(--pb-square-axis) minmax(0, 1fr); column-gap: 0; }
.pb-article-page .pb-about-layout > [aria-hidden="true"] { grid-column: 1; }
.pb-article-page .pb-article-content { grid-column: 2; }
.pb-partner-card, .pb-profile-info, .pb-about-section-body { min-width: 0; }
.pb-profile-info p { margin-top: 8px; }
.pb-partner-card .wp-caption { width: 100% !important; max-width: 100% !important; }
.pb-entry-content img:not(.emoji), .pb-artist-copy img:not(.emoji) { width: 100%; height: auto; }
.pb-entry-content .wp-caption, .pb-artist-copy .wp-caption { width: 100% !important; max-width: 100% !important; }
.pb-entry-content p:empty, .pb-artist-copy p:empty { display: none; }
.pb-gallery-caption { margin-top: 10px; font-size: 14px; line-height: 1.35; }
.pb-event-past-list { list-style: none; display: grid; gap: 16px; }
@media (max-width: 900px) {
 .pb-article-page .pb-about-layout { display: block; }
 .pb-article-page .pb-about-layout > [aria-hidden="true"] { display: none; }
}

/* Desktop: đo theo font hiện tại để dòng mô tả khoảng 80 ký tự. */
@media (min-width: 901px) {
  .pb-project-statement { max-width: 66ch; }
  .pb-project-read-more { width: 100%; max-width: 66ch; align-self: flex-start; text-align: center; }
}