/* ==========================================================
   album.css — Vòng xoay ảnh 3D cho trang chủ
   Mọi class đều có tiền tố "ab-" và nằm trong .ab
   => không đụng tới CSS cũ của trang.
   ========================================================== */
.ab{
  --cw:300px;                /* rộng 1 ảnh — JS tự cập nhật theo khung chứa */
  --ch:200px;                /* cao 1 ảnh (tỉ lệ 3:2) */
  position:relative;z-index:1;width:100%;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif JP","Hiragino Mincho ProN",Georgia,serif;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none;
}
.ab *{box-sizing:border-box}
.ab:focus-visible .ab-stage{outline:2px solid #12796d;outline-offset:4px;border-radius:12px}

/* ── sân khấu 3D ── */
.ab-stage{
  position:relative;width:100%;height:calc(var(--ch) * 1.3);
  overflow:hidden;               /* ảnh xa không làm trang bị cuộn ngang */
  touch-action:pan-y;            /* vuốt dọc vẫn cuộn trang, vuốt ngang để xoay */
  cursor:grab;
}
.ab-stage.drag{cursor:grabbing}
.ab-ring{position:absolute;inset:0}   /* perspective do JS đặt ở đây */
.ab-floor{
  position:absolute;left:50%;top:calc(var(--ch) * 1.1);width:calc(var(--cw) * 1.3);height:calc(var(--ch) * .14);
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(20,28,45,.38),transparent 70%);filter:blur(10px)
}

/* ── mỗi tấm ảnh ── */
.ab-card{
  position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);
  margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  border-radius:clamp(10px,calc(var(--cw) * .045),18px);overflow:hidden;cursor:pointer;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;
  background:linear-gradient(90deg,#d8cfbd 25%,#e8e1d2 50%,#d8cfbd 75%);background-size:200% 100%;animation:ab-sk 1.4s linear infinite;
  box-shadow:0 22px 40px -16px rgba(20,28,45,.55),0 4px 10px rgba(20,28,45,.2)
}
@keyframes ab-sk{to{background-position:-200% 0}}
.ab-card.ld{animation:none;background:#d8cfbd}   /* ngừng hiệu ứng chờ khi ảnh đã tải → bớt vẽ lại, mượt hơn */
.ab-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s;
  -webkit-user-drag:none;pointer-events:none}
.ab-card img.ok{opacity:1}
.ab-card::after{                 /* ánh bóng nhẹ + viền sáng */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.2),rgba(255,255,255,0) 40%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}
.ab-shade{position:absolute;inset:0;background:#0d1322;opacity:0;pointer-events:none;z-index:2;will-change:opacity}
.ab-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22% 6% 4.5%;
  background:linear-gradient(to top,rgba(10,14,24,.72),rgba(10,14,24,0));
  color:#fff;font-style:italic;letter-spacing:.02em;text-align:center;line-height:1.25;
  font-size:clamp(11px,calc(var(--cw) * .05),17px);text-shadow:0 1px 3px rgba(0,0,0,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;will-change:opacity
}

/* dòng "N bài ký đã được lưu" (giữ #statPosts của trang cũ) */
.ab-stat{margin-top:10px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#5c6479;letter-spacing:.02em}
.ab-stat b{color:#12796d;font-weight:600}

/* ── xem ảnh lớn (lightbox) ── */
.ab-lb{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;
  background:rgba(14,18,30,.9);opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ab-lb.open{opacity:1;pointer-events:auto}
.ab-lb img{max-width:min(94vw,1400px);max-height:78vh;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  background:#222;transform:scale(.97);transition:transform .35s}
.ab-lb.open img{transform:none}
.ab-lb p{color:#f1ead8;font:italic 15px/1.4 Georgia,serif;text-align:center;max-width:90vw;min-height:1.4em}
.ab-lb small{color:#9fa8c2;font:500 12px 'JetBrains Mono',monospace}
.ab-lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);width:44px;height:44px;border-radius:50%;
  font-size:20px;cursor:pointer;display:grid;place-items:center;transition:background .2s;padding:0}
.ab-lb button:hover{background:rgba(255,255,255,.25)}
.ab-lb .x{top:16px;right:16px}.ab-lb .pv{left:16px;top:50%}.ab-lb .nx{right:16px;top:50%}
@media (max-width:900px){
  .ab-lb .pv,.ab-lb .nx{top:auto;bottom:18px}.ab-lb .pv{left:calc(50% - 56px)}.ab-lb .nx{right:calc(50% - 56px)}
}
@media (prefers-reduced-motion:reduce){.ab-card{animation:none}}