#aSave[aria-pressed="true"] svg{fill:var(--brand);stroke:var(--brand);}

/* ---------- khung trang ---------- */
.album{padding:32px 40px 64px;max-width:1100px;}

@media (max-width:743px){
.album{padding:20px 24px 48px;} 
}

.album__title{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.25;}

.album__sub{font-size:15px;color:var(--text-2);margin-top:6px;}

@media (max-width:743px){
.album__title{font-size:22px;} 
}

/* ---------- lưới điều hướng ---------- */
.anav{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px;
  margin:28px 0 40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line-2);
}

@media (max-width:479px){
.anav{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;} 
}

.anav__item{
  display:block;text-align:left;color:inherit;
  border-radius:12px;
}

.anav__item:hover .anav__thumb{transform:scale(1.03);}

/* ⚠️ `display:block` là BẮT BUỘC. Đây là thẻ `<span>`, mặc định `display:inline`
   — mà `aspect-ratio` và `overflow:hidden` KHÔNG áp được lên phần tử inline.
   Thiếu dòng này thì ảnh tràn khỏi khung và đè lên tên phòng ở dưới; đo được
   `box` cao 46px trong khi ảnh trong nó cao 194px. */
.anav__box{
  display:block;
  aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:var(--hover-2);
}

.anav__thumb{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s cubic-bezier(.2,.6,.2,1);
}

.anav__name{
  display:block;font-size:14px;font-weight:600;margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.anav__count{display:block;font-size:13px;color:var(--text-2);}

/* ---------- một mục ảnh ---------- */
.asec{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:0 56px;
  padding:32px 0;
  scroll-margin-top:88px;          /* để thanh sticky không che tiêu đề khi nhảy neo */
}

.asec + .asec{border-top:1px solid var(--line-2);}

@media (max-width:950px){
.asec{grid-template-columns:1fr;gap:12px;padding:24px 0;}

}

.asec__head{position:sticky;top:88px;align-self:start;}

@media (max-width:950px){
.asec__head{position:static;} 
}

.asec__name{font-size:20px;font-weight:600;letter-spacing:-.01em;}

.asec__desc{font-size:14px;color:var(--text-2);margin-top:4px;line-height:1.4;}

.asec__photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

@media (max-width:600px){
.asec__photos{grid-template-columns:1fr;} 
}

.aphoto{
  margin:0;border-radius:12px;overflow:hidden;
  background:var(--hover-2);aspect-ratio:4/3;
}

/* Ảnh lẻ đầu tiên chiếm trọn hàng — giữ nhịp giống trang gốc */
.aphoto--wide{grid-column:1/-1;aspect-ratio:16/10;}

@media (max-width:600px){
.aphoto--wide{aspect-ratio:4/3;} 
}

.aphoto img{width:100%;height:100%;object-fit:cover;display:block;}

/* nút lên đầu trang */
.atop{
  position:fixed;right:24px;bottom:24px;z-index:40;
  display:none;align-items:center;gap:8px;
  min-height:44px;padding:0 18px;
  background:var(--text);color:#fff;border-radius:999px;
  font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);
}

.atop.is-on{display:inline-flex;}

.atop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}

@media (max-width:743px){
.atop{right:16px;bottom:16px;} 
}