/* =====================================================================
   Khung viền ảnh và trình chiếu "lật trang sách"
   - Mỗi kiểu khung là một class "fr-<mã>" trên thẻ ảnh (.fa-photo) và trên ô xem thử (.fa-frame-demo).
   - Thêm kiểu mới: thêm 1 dòng trong AlbumDisplay.FRAMES và một khối CSS ở đây.
   - Chỉ dùng CSS (gradient, bóng đổ), không tải ảnh từ mạng.
   ===================================================================== */

/* ---------- Ô "Cách xem ảnh" ---------- */
.fa-view-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.fa-frame-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .75rem; }
.fa-frame-opt { display: flex; flex-direction: column; align-items: center; gap: .4rem; cursor: pointer; padding: .55rem .35rem; border-radius: 14px;
  border: 2px solid transparent; transition: border-color .2s, background-color .2s; }
.fa-frame-opt:hover { background: var(--fa-soft); }
.fa-frame-opt:has(input:checked) { border-color: var(--fa-amber); background: #FFF6E6; }
.fa-frame-opt:has(input:focus-visible) { outline: 3px solid var(--fa-honey); outline-offset: 2px; }
.fa-frame-name { font-size: .8rem; font-weight: 600; color: var(--fa-ink); text-align: center; }
.fa-frame-demo { display: block; width: 74px; padding: 5px 5px 14px; background: #fff; border: 1px solid var(--fa-line); border-radius: 6px; }
.fa-frame-demo-img { display: block; aspect-ratio: 4 / 5; border-radius: 3px;
  background: linear-gradient(160deg, #FFD79A 0%, #F7A86B 45%, #8FC7A8 46%, #5E9E7E 100%); }
.fa-pick-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.fa-pick { cursor: pointer; }
.fa-pick > span { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--fa-line);
  background: #fff; font-size: .9rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s; }
.fa-pick:hover > span { border-color: var(--fa-honey); }
.fa-pick input:checked + span { background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber)); border-color: transparent; color: #fff; }
.fa-pick input:focus-visible + span { outline: 3px solid var(--fa-honey); outline-offset: 2px; }

/* ---------- 1. Polaroid: viền trắng dày, đáy rộng như ảnh chụp lấy liền ---------- */
.fa-photo.fr-polaroid, .fa-frame-demo.fr-polaroid { background: #fffdf8; border: 0; border-radius: 3px; padding: 12px 12px 0;
  box-shadow: 0 2px 4px rgba(60, 40, 20, .12), 0 10px 22px rgba(60, 40, 20, .14); }
.fa-frame-demo.fr-polaroid { padding: 5px 5px 18px; }
.fa-photo.fr-polaroid .fa-photo-frame, .fa-frame-demo.fr-polaroid .fa-frame-demo-img { border-radius: 0; }
.fa-photo.fr-polaroid .fa-photo-info { padding: .7rem .2rem 1rem; text-align: center; }
.fa-photo.fr-polaroid .fa-photo-info .cap { font-size: 1.2rem; }

/* ---------- 2. Khung gỗ: vân gỗ ấm, ảnh lõm vào trong ---------- */
.fa-photo.fr-go, .fa-frame-demo.fr-go { border: 0; border-radius: 4px; padding: 12px 12px 0;
  background: repeating-linear-gradient(95deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 7px),
              linear-gradient(135deg, #A86B3C, #7A4521 55%, #9A5E31);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 170, .25), 0 6px 16px rgba(60, 30, 10, .3); }
.fa-frame-demo.fr-go { padding: 6px 6px 14px; }
.fa-photo.fr-go .fa-photo-frame, .fa-frame-demo.fr-go .fa-frame-demo-img { border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 3px #5C3317; }
.fa-photo.fr-go .fa-photo-info .cap { color: #FFF3DF; }
.fa-photo.fr-go .fa-photo-info small { color: #F2D9B8; }

/* ---------- 3. Khung vàng: viền vàng ánh kim, hai đường chỉ ---------- */
.fa-photo.fr-vang, .fa-frame-demo.fr-vang { border: 0; border-radius: 4px; padding: 12px 12px 0;
  background: linear-gradient(135deg, #F7E3A1 0%, #D4A33B 30%, #FFF0B8 50%, #C08A22 72%, #F3D683 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), inset 0 0 0 5px rgba(140, 95, 15, .35), 0 6px 18px rgba(120, 80, 10, .28); }
.fa-frame-demo.fr-vang { padding: 6px 6px 14px; }
.fa-photo.fr-vang .fa-photo-frame, .fa-frame-demo.fr-vang .fa-frame-demo-img { border-radius: 1px; box-shadow: 0 0 0 2px #8C5F0F, 0 0 0 4px #FFF4C8; }
.fa-photo.fr-vang .fa-photo-info .cap { color: #4A3006; }
.fa-photo.fr-vang .fa-photo-info small { color: #6B4A10; }

/* ---------- 4. Viền hoa: nền hồng nhạt rắc chấm hoa nhỏ ---------- */
.fa-photo.fr-hoa, .fa-frame-demo.fr-hoa { border: 2px solid #F6C4CF; border-radius: 16px; padding: 12px 12px 0;
  background: radial-gradient(circle at 25% 25%, #F59AB0 0 2.5px, transparent 3px),
              radial-gradient(circle at 75% 70%, #F9C46B 0 2px, transparent 2.5px),
              radial-gradient(circle at 70% 20%, #9BD3AE 0 1.8px, transparent 2.3px),
              #FFF1F4;
  background-size: 22px 22px, 26px 26px, 30px 30px, auto; }
.fa-frame-demo.fr-hoa { padding: 6px 6px 14px; background-size: 14px 14px, 16px 16px, 18px 18px, auto; }
.fa-photo.fr-hoa .fa-photo-frame, .fa-frame-demo.fr-hoa .fa-frame-demo-img { border-radius: 10px; box-shadow: 0 0 0 3px #fff; }
.fa-photo.fr-hoa .fa-photo-info { background: rgba(255, 255, 255, .88); border-radius: 10px; margin: .45rem 0 .6rem; padding: .4rem .55rem; }

/* ---------- 5. Cuộn phim: nền đen, lỗ phim trên và dưới ---------- */
.fa-photo.fr-phim, .fa-frame-demo.fr-phim { border: 0; border-radius: 3px; padding: 18px 8px 0; background: #161210; position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.fa-photo.fr-phim::before, .fa-photo.fr-phim::after { content: ""; position: absolute; left: 6px; right: 6px; height: 7px;
  background: repeating-linear-gradient(90deg, #F4EDE2 0 7px, transparent 7px 14px); border-radius: 1px; opacity: .9; }
.fa-photo.fr-phim::before { top: 5px; }
.fa-photo.fr-phim::after { bottom: 5px; }
.fa-frame-demo.fr-phim { padding: 11px 5px 11px; }
.fa-frame-demo.fr-phim::before, .fa-frame-demo.fr-phim::after { content: ""; position: absolute; left: 4px; right: 4px; height: 4px;
  background: repeating-linear-gradient(90deg, #F4EDE2 0 4px, transparent 4px 8px); }
.fa-frame-demo.fr-phim::before { top: 3px; }
.fa-frame-demo.fr-phim::after { bottom: 3px; }
.fa-photo.fr-phim .fa-photo-frame, .fa-frame-demo.fr-phim .fa-frame-demo-img { border-radius: 2px; }
.fa-photo.fr-phim .fa-photo-info { padding-bottom: 1.3rem; }
.fa-photo.fr-phim .fa-photo-info .cap { color: #FFF3DF; }
.fa-photo.fr-phim .fa-photo-info small { color: #CDBFAE; }

/* ---------- 6. Con tem: mép răng cưa như tem thư ---------- */
.fa-photo.fr-tem, .fa-frame-demo.fr-tem { border: 0; border-radius: 0; padding: 14px;
  /* phần giữa tô kín, chỉ vòng ngoài (phần đệm 14px) có lỗ tròn nên thành mép răng cưa */
  background: linear-gradient(#FFFDF6, #FFFDF6) content-box,
              radial-gradient(circle at 7px 7px, transparent 4.5px, #FFFDF6 5px) -7px -7px / 14px 14px;
  filter: drop-shadow(0 3px 6px rgba(60, 40, 20, .22)); }
.fa-frame-demo.fr-tem { padding: 8px;
  background: linear-gradient(#FFFDF6, #FFFDF6) content-box,
              radial-gradient(circle at 4px 4px, transparent 2.6px, #FFFDF6 3px) -4px -4px / 8px 8px; }
.fa-photo.fr-tem .fa-photo-info { padding-bottom: .2rem; }
.fa-photo.fr-tem .fa-photo-frame, .fa-frame-demo.fr-tem .fa-frame-demo-img { border-radius: 0; box-shadow: 0 0 0 1px rgba(120, 80, 40, .25); }

/* ---------- 7. Bo tròn: mềm mại, không viền ---------- */
.fa-photo.fr-tron, .fa-frame-demo.fr-tron { border: 0; border-radius: 26px; padding: 0; background: #fff; overflow: hidden;
  box-shadow: 0 8px 22px rgba(120, 70, 20, .16); }
.fa-frame-demo.fr-tron { border-radius: 16px; padding-bottom: 12px; }
.fa-photo.fr-tron .fa-photo-frame, .fa-frame-demo.fr-tron .fa-frame-demo-img { border-radius: 0; }
.fa-photo.fr-tron .fa-photo-info { padding: .6rem .9rem .8rem; }

/* Điện thoại: khung mỏng hơn cho ảnh to hơn */
@media (max-width: 767px) {
  .fa-photo.fr-polaroid, .fa-photo.fr-go, .fa-photo.fr-vang, .fa-photo.fr-hoa { padding: 7px 7px 0; }
  .fa-photo.fr-tem { padding: 10px 10px 2px; }
  .fa-photo.fr-phim { padding: 14px 5px 0; }
}

/* =====================================================================
   Cuốn album lật từng trang (album-book.js)
   - Mở ra 2 trang; mỗi tờ giấy có mặt trước (trang phải) và mặt sau (trang trái), lật quanh gáy sách.
   - Điện thoại dọc: 1 trang, tờ giấy lật sang trái rồi mờ đi.
   - Chỉ đổi transform và opacity nên mượt.
   ===================================================================== */
.fa-show-progress.run { animation-duration: var(--fa-delay, 4s); }
.fa-book-view { position: fixed; inset: 0; z-index: 2000; color: #fff; opacity: 0; transition: opacity .4s var(--fa-ease); overflow: hidden; touch-action: none;
  background: radial-gradient(ellipse at 50% 45%, #6B4A2E 0%, #3A2716 55%, #1E130B 100%); }
.fa-book-view.is-open { opacity: 1; }
.fa-book-view .fa-show-bar { z-index: 5; }
.fa-book-view.is-paused .fa-show-progress { animation-play-state: paused; }
.fa-book-stage { position: absolute; inset: 64px 12px 24px; display: grid; place-items: center; perspective: 2600px; }

/* Kích thước một trang (tỉ lệ 3:4), vừa màn hình */
.fa-book-view { --pw: min(44vw, calc((100vh - 110px) * .75)); --ph: calc(var(--pw) * 4 / 3); }
.fa-book-view.is-single { --pw: min(88vw, calc((100dvh - 110px) * .75)); }
/* Điện thoại: tính theo phần màn hình nhìn thấy (dvh), không tính phần thanh địa chỉ của trình duyệt */
@supports (height: 100dvh) {
  .fa-book-view { --pw: min(44vw, calc((100dvh - 110px) * .75)); }
}
/* Điện thoại xoay ngang (màn hình thấp): thu gọn lề trên/dưới để sách to và nằm giữa phần còn lại */
@media (orientation: landscape) and (max-height: 500px) {
  .fa-book-stage { inset: 58px 12px 12px; }
  .fa-book-view, .fa-book-view.is-single { --pw: min(44vw, calc((100vh - 74px) * .75)); }
  @supports (height: 100dvh) {
    .fa-book-view, .fa-book-view.is-single { --pw: min(44vw, calc((100dvh - 74px) * .75)); }
  }
}
.fa-book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.45, .05, .3, 1); }
.fa-book.is-closed-front { transform: translateX(calc(var(--pw) * -.5)); }   /* sách gập: bìa nằm giữa màn hình */
.fa-book.is-closed-back { transform: translateX(calc(var(--pw) * .5)); }
.is-single .fa-book { width: var(--pw); }
.is-single .fa-book.is-closed-front, .is-single .fa-book.is-closed-back { transform: none; }
.fa-book-shadow { position: absolute; inset: 4% 2% -3%; border-radius: 10px; background: rgba(0, 0, 0, .45); filter: blur(18px); transform: translateZ(-2px); }
.fa-book-spine { position: absolute; left: calc(50% - 6px); top: -1%; width: 12px; height: 102%; border-radius: 6px;
  background: linear-gradient(90deg, #4A2C17, #8A5A33 50%, #4A2C17); transform: translateZ(-1px); }
.is-single .fa-book-spine { left: -6px; }

/* Tờ giấy: nằm ở nửa phải, lật quanh mép trái (gáy sách) */
.fa-leaf2 { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.45, .05, .3, 1); cursor: pointer; }
.is-single .fa-leaf2 { left: 0; width: 100%; }
.fa-leaf2.is-flipped { transform: rotateY(-180deg); }
.fa-leaf2.is-moving { z-index: 999 !important; }
.is-single .fa-leaf2.is-flipped { opacity: 0; transition: transform .95s cubic-bezier(.45, .05, .3, 1), opacity .25s .7s; }
.is-single .fa-leaf2 { transition: transform .95s cubic-bezier(.45, .05, .3, 1), opacity .2s; }
.fa-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.fa-face.back { transform: rotateY(180deg); }
.fa-face.front { border-radius: 2px 10px 10px 2px; }
.fa-face.back { border-radius: 10px 2px 2px 10px; }

/* Trang giấy kem, hơi tối ở phía gáy sách */
.fa-bk-page { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fa-ink);
  background: radial-gradient(ellipse at 60% 40%, rgba(255, 255, 255, .5), transparent 60%), #FBF4E6; }
.fa-face.front .fa-bk-page { box-shadow: inset 16px 0 22px -14px rgba(70, 40, 15, .45), inset -1px 0 0 rgba(0, 0, 0, .08); }
.fa-face.back .fa-bk-page { box-shadow: inset -16px 0 22px -14px rgba(70, 40, 15, .45), inset 1px 0 0 rgba(0, 0, 0, .08); }
.fa-bk-intro { text-align: center; color: #8B6A4A; padding: 0 12%; }
.fa-bk-intro-heart { display: block; font-size: calc(var(--pw) * .09); color: #E8833A; margin-bottom: .4rem; }
.fa-bk-intro-title { font-family: 'Playfair Display', Georgia, serif; font-size: calc(var(--pw) * .06); color: #5A3A20; margin: 0 0 .5rem; }
.fa-bk-intro-sub { font-family: 'Patrick Hand', cursive; font-size: calc(var(--pw) * .05); margin: 0; }

/* Ảnh dán trên trang: viền trắng, 4 góc giấy, chú thích viết tay */
.fa-bk-mount { margin: 0; width: 84%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.fa-bk-photo { position: relative; background: #fff; padding: 8px; box-shadow: 0 3px 10px rgba(70, 40, 15, .25); max-width: 100%; }
.fa-bk-photo img { display: block; max-width: 100%; max-height: calc(var(--ph) * .66); object-fit: contain; min-width: 60px; min-height: 60px;
  background: #F1E7D6; }
.fa-face.front .fa-bk-photo { transform: rotate(-1.2deg); }
.fa-face.back .fa-bk-photo { transform: rotate(1deg); }
.fa-bk-corner { position: absolute; width: 22px; height: 22px; background: #5C3A1E; opacity: .92; }
.fa-bk-corner.tl { left: -4px; top: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.fa-bk-corner.tr { right: -4px; top: -4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.fa-bk-corner.bl { left: -4px; bottom: -4px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.fa-bk-corner.br { right: -4px; bottom: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.fa-bk-mount figcaption { text-align: center; line-height: 1.25; max-width: 100%; }
.fa-bk-mount .cap { display: block; font-family: 'Patrick Hand', 'Be Vietnam Pro', cursive; font-size: calc(var(--pw) * .055); color: #5A3A20; }
.fa-bk-mount small { display: block; font-size: .72rem; color: #8B6A4A; }
.fa-bk-num { position: absolute; bottom: 10px; font-size: .75rem; color: #A88663; font-family: 'Patrick Hand', cursive; }
.fa-face.front .fa-bk-num { right: 16px; }
.fa-face.back .fa-bk-num { left: 16px; }

/* Bìa trước: da nâu, chữ vàng */
.fa-bk-page.cover, .fa-bk-page.back { color: #FCE6B0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px),
              radial-gradient(ellipse at 30% 25%, #9A6236, #6E3F1F 55%, #4E2A12); }
.fa-face.front .fa-bk-page.cover { box-shadow: inset 10px 0 14px -8px rgba(0, 0, 0, .55), inset 0 0 0 10px rgba(252, 230, 176, .08); }
.fa-bk-cover-box { width: 78%; padding: 12% 6%; border: 2px solid rgba(245, 200, 110, .75); outline: 1px solid rgba(245, 200, 110, .35); outline-offset: 6px;
  text-align: center; border-radius: 6px; }
.fa-bk-cover-sun { display: block; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle, #FFD978 0 45%, transparent 47%), conic-gradient(from 0deg, #F5C86E 0 8deg, transparent 8deg 30deg) ; }
.fa-bk-cover-title { font-family: 'Playfair Display', Georgia, serif; font-size: calc(var(--pw) * .085); margin: 0 0 .4rem; color: #FCE6B0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.fa-bk-cover-sub { margin: 0; font-size: .9rem; opacity: .85; letter-spacing: .08em; text-transform: uppercase; }
.fa-bk-back-box { font-family: 'Patrick Hand', cursive; font-size: calc(var(--pw) * .07); }

@media (prefers-reduced-motion: reduce) {
  .fa-leaf2, .fa-book { transition: none !important; }
}
.fa-leaf2.no-anim, .fa-book-view .no-anim { transition: none !important; }
.fa-leaf2.is-far { display: none; }   /* tờ ở xa trang đang xem: ẩn hẳn cho nhẹ bộ nhớ (album-book.js) */