/* Ý 17 "Ngày này năm xưa" và ý 18 "Thả tim, bình luận". Chỉ animate transform và opacity. */

/* ----- Ý 17 ----- */
.fa-memories { background: radial-gradient(circle at 5% 0%, rgba(255, 190, 120, .45), transparent 55%), var(--fa-surface);
  border: 1px solid var(--fa-line); border-radius: 18px; padding: 1.1rem 1.2rem .6rem; box-shadow: var(--fa-shadow); margin-bottom: 1.75rem; }
.fa-memories h2 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; display: flex; align-items: center; gap: .45rem; }
.fa-memories h2 i { color: var(--fa-amber); }
.fa-memories h2 small { font-weight: 500; color: var(--fa-muted); font-size: .8rem; }
.fa-memory-years { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.fa-memory-year { min-width: 0; max-width: 100%; }
.fa-memory-label { margin: 0 0 .45rem; font-size: .85rem; color: var(--fa-muted); display: flex; gap: .5rem; align-items: center; }
.fa-memory-label .ago { font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber));
  padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; }
.fa-memory-strip { display: flex; gap: .8rem; overflow-x: auto; padding: .2rem .2rem .9rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.fa-memory-strip .fa-photo { flex: 0 0 170px; margin: 0; scroll-snap-align: start; }
.fa-memory-strip .fa-photo:nth-child(odd) { transform: rotate(-1.4deg); }
.fa-memory-strip .fa-photo:nth-child(even) { transform: rotate(1.2deg); }
.fa-memory-strip .fa-photo:hover { transform: rotate(0) translateY(-4px); }
.fa-memory-strip .fa-photo-frame img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
@media (max-width: 575px) { .fa-memory-strip .fa-photo { flex-basis: 132px; } }

/* ----- Ý 18: nút tim và bình luận trong trình xem ảnh ----- */
.pswp__button--fa-like, .pswp__button--fa-comments { width: auto !important; min-width: 50px; padding: 0 .55rem !important;
  display: inline-flex !important; align-items: center; gap: .3rem; color: #fff; font-size: 1.15rem; text-decoration: none; }
.pswp__button--fa-like .n, .pswp__button--fa-comments .n { font-size: .85rem; font-weight: 600; }
.pswp__button--fa-like.is-liked i { color: #ff5a7a; }
.pswp__button--fa-like i { display: inline-block; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.pswp__button--fa-like.pop i { transform: scale(1.35); }

/* Nút trên thanh trình xem ảnh: sáng rõ, có bóng tối nhẹ phía sau để nổi trên mọi ảnh */
.pswp .pswp__top-bar { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.pswp .pswp__button { opacity: 1 !important; color: #fff; --pswp-icon-color: #fff; --pswp-icon-color-secondary: rgba(0, 0, 0, .6); }
.pswp .pswp__button i, .pswp .pswp__button .n { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.pswp .pswp__button svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.pswp .pswp__button:hover, .pswp .pswp__button:focus-visible { background: rgba(255, 255, 255, .18); border-radius: 999px; }
/* Nút xoá ảnh: nền đỏ cho dễ thấy */
.pswp__button--fa-delete { display: inline-flex !important; align-items: center; justify-content: center; font-size: 1.15rem; }
.pswp__button--fa-delete[hidden] { display: none !important; }
.pswp__button--fa-delete i { background: #e5484d; border-radius: 999px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; filter: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.pswp .pswp__button--fa-delete:hover i { background: #c9363b; }
.pswp .pswp__button--fa-like.is-liked i { color: #ff5a7a; }

/* ----- Ý 18: trang một ảnh ----- */
.fa-photo-page { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 991px) { .fa-photo-page { grid-template-columns: 1fr; } }
.fa-photo-big { background: #fff; padding: 10px 10px 14px; border-radius: 14px; border: 1px solid var(--fa-line); box-shadow: var(--fa-shadow); }
.fa-photo-big img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: 8px; display: block; background: var(--fa-soft); }
.fa-photo-big figcaption { padding: .6rem .2rem 0; } .fa-photo-big figcaption small { color: var(--fa-muted); display: block; }
.fa-social { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 18px; padding: 1.1rem 1.2rem; box-shadow: var(--fa-shadow); }
.fa-like-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fa-like-btn { border: 1px solid var(--fa-line); background: #fff; border-radius: 999px; padding: .45rem 1rem; font-weight: 600; color: var(--fa-ink);
  display: inline-flex; gap: .4rem; align-items: center; }
.fa-like-btn i { transition: transform .3s cubic-bezier(.22, 1, .36, 1); display: inline-block; }
.fa-like-btn:hover i { transform: scale(1.2); }
.fa-like-btn.is-liked { background: #fff0f3; border-color: #ffc2cf; } .fa-like-btn.is-liked i { color: #ff5a7a; }
.fa-likers { color: var(--fa-muted); font-size: .88rem; }
.fa-comments { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; }
.fa-comment { display: flex; gap: .6rem; align-items: flex-start; }
.fa-comment .bubble { background: #fff; border: 1px solid var(--fa-line); border-radius: 4px 14px 14px 14px; padding: .5rem .75rem; flex: 1; min-width: 0; }
.fa-comment .bubble b { font-size: .88rem; } .fa-comment .bubble small { color: var(--fa-muted); font-size: .75rem; margin-left: .35rem; }
.fa-comment .bubble p { margin: .15rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.fa-comment form { margin: 0; } .fa-comment .del { border: 0; background: none; color: var(--fa-muted); padding: .2rem .35rem; }
.fa-comment .del:hover { color: #c0392b; }
.fa-comment-empty { color: var(--fa-muted); font-size: .9rem; }

/* ----- Ý 20: ảnh trùng và ảnh gần giống ----- */
.fa-dup { border-radius: 18px; padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; border: 1px solid var(--fa-line); box-shadow: var(--fa-shadow); background: var(--fa-surface); }
.fa-dup h2 { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; display: flex; gap: .45rem; align-items: center; }
.fa-dup-blocked { background: #fff6ee; border-color: #f6cfa6; } .fa-dup-blocked h2 i { color: #d9741f; }
.fa-dup-similar h2 i { color: var(--fa-amber); }
.fa-dup-hint { color: var(--fa-muted); font-size: .9rem; margin-bottom: .8rem; }
.fa-dup-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fa-dup-list li { display: flex; gap: .75rem; align-items: center; background: #fff; border: 1px solid var(--fa-line); border-radius: 14px; padding: .5rem; }
.fa-dup-list li div { min-width: 0; line-height: 1.3; } .fa-dup-list b { display: block; overflow-wrap: anywhere; }
.fa-dup-list small { display: block; color: var(--fa-muted); }
.fa-dup-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.fa-dup-card { background: #fff; border: 1px solid var(--fa-line); border-radius: 14px; padding: .8rem; margin-bottom: .8rem; }
.fa-dup-compare { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.fa-dup-compare figure { margin: 0; width: 170px; max-width: calc(50% - 1.5rem); }
.fa-dup-compare img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; background: var(--fa-soft); }
.fa-dup-compare figcaption { font-size: .78rem; color: var(--fa-muted); margin-top: .3rem; overflow-wrap: anywhere; }
.fa-dup-compare .tag { display: inline-block; font-weight: 600; font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; background: var(--fa-soft); color: var(--fa-amber-dark); }
.fa-dup-compare .tag.new { background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber)); color: #fff; }
.fa-dup-vs { color: var(--fa-muted); font-size: 1.2rem; }
.fa-dup-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; } .fa-dup-actions form { margin: 0; }

/* ----- Ý 22: kiểm tra ảnh trùng trên trình duyệt, ngay khi chọn ảnh ----- */
.fa-pre { margin-top: 1rem; }
.fa-pre .fa-dup { margin-bottom: .8rem; box-shadow: none; }
.fa-pre-wait, .fa-pre-ok { color: var(--fa-muted); font-size: .9rem; margin: 0; display: flex; gap: .45rem; align-items: center; }
.fa-pre-ok i { color: #3f9a5a; }
.fa-pre-chosen { font-weight: 600; font-size: .9rem; padding: .35rem .9rem; border-radius: 999px; animation: fa-pop .3s var(--fa-ease) both; }
.fa-pre-chosen.keep { background: #e8f5ec; color: #2f7a47; }
.fa-pre-chosen.skip { background: var(--fa-soft); color: var(--fa-muted); }