/* Đợt 1: dòng thời gian kiểu sổ nhật ký. Hiệu ứng chỉ dùng transform và opacity. */
.fa-notebook { display: flex; flex-direction: column; gap: 2.2rem; }
.fa-notebook-page { --nb-line: 2rem; position: relative; padding: 1.4rem 1.6rem 1.8rem 3.6rem; border-radius: 4px 14px 14px 4px;
  background:
    linear-gradient(90deg, transparent 2.9rem, rgba(242, 139, 107, .45) 2.9rem, rgba(242, 139, 107, .45) calc(2.9rem + 1.5px), transparent calc(2.9rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--nb-line) - 1px), rgba(214, 160, 96, .25) calc(var(--nb-line) - 1px) var(--nb-line)),
    var(--nb-paper, #FFFCF4);
  box-shadow: 0 1px 0 #fff inset, 0 18px 36px -22px rgba(120, 70, 25, .5), 0 2px 0 #F1E2C8, 0 4px 0 #EAD7B7; color: #4A3426; }
/* gáy lò xo bên trái */
.fa-notebook-page::before { content: ''; position: absolute; left: .7rem; top: 1rem; bottom: 1rem; width: 18px;
  background: radial-gradient(circle at 9px 9px, #3B2A20 0 4px, #CDB89C 4.5px 6.5px, transparent 7px) 0 0 / 18px 26px repeat-y; opacity: .85; }
/* trang hơi nghiêng xen kẽ cho tự nhiên */
.fa-notebook-page.pg1 { transform: rotate(.35deg); } .fa-notebook-page.pg3 { transform: rotate(-.3deg); }

.fa-notebook-date { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 1rem;
  font-family: 'Patrick Hand', 'Be Vietnam Pro', cursive; font-weight: 400; line-height: var(--nb-line); color: #6B3E1E; }
.fa-notebook-date .dow { font-size: 1.15rem; color: #B85E1E; }
.fa-notebook-date .day { font-size: 1.75rem; transform: rotate(-1.5deg); display: inline-block; }
.fa-notebook-date .count { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: .74rem; font-weight: 600; color: #8A5A2B;
  background: #FFE9C6; padding: .05rem .6rem; border-radius: 999px; line-height: 1.6; align-self: center; }

/* ảnh dán vào sổ: lệch nhẹ, có mẩu băng dính trên đầu */
.fa-notebook-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6rem 1.3rem; align-items: start; }
.fa-notebook .fa-photo { position: relative; margin: 0; background: var(--nb-photo, #fff); border-radius: 2px; border: 0; padding: 8px 8px 0;
  box-shadow: 0 8px 18px -10px rgba(80, 45, 15, .55); transform: rotate(-2.2deg); }
.fa-notebook .fa-photo:nth-child(4n+2) { transform: rotate(1.8deg) translateY(6px); }
.fa-notebook .fa-photo:nth-child(4n+3) { transform: rotate(-1deg) translateY(-2px); }
.fa-notebook .fa-photo:nth-child(4n+4) { transform: rotate(2.6deg) translateY(4px); }
@media (hover: hover) { .fa-notebook .fa-photo:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 2; } }
.fa-notebook .fa-photo:focus-visible { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 2; }
.fa-notebook .fa-photo::before { content: ''; position: absolute; z-index: 1; top: -9px; left: 50%; width: 64px; height: 20px; margin-left: -32px;
  background: rgba(255, 221, 150, .72); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(120, 80, 30, .2); }
.fa-notebook .fa-photo:nth-child(even)::before { background: rgba(250, 190, 175, .7); transform: rotate(5deg); }
.fa-notebook .fa-photo:nth-child(3n)::before { background: rgba(190, 220, 180, .72); }
.fa-notebook .fa-photo-frame { border-radius: 1px; }

/* hình dán nhỏ ở góc trang */
.fa-sticker { position: absolute; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.25rem; background: #fff; box-shadow: 0 3px 8px -3px rgba(90, 50, 20, .45); pointer-events: none; }
.fa-sticker.a { top: -14px; right: 18px; transform: rotate(12deg); }
.fa-sticker.b { bottom: -12px; right: 38%; transform: rotate(-10deg) scale(.85); }
.fa-sticker.k0 { color: #E5534B; } .fa-sticker.k1 { color: #F5A623; } .fa-sticker.k2 { color: #D9708F; } .fa-sticker.k3 { color: #F08A24; }
.fa-sticker.k4 { color: #6FA8DC; } .fa-sticker.k5 { color: #8E6CC0; } .fa-sticker.k6 { color: #E26D5A; }

@media (max-width: 767px) {
  .fa-notebook-page { padding: 1.1rem .9rem 1.4rem 2.6rem; }
  .fa-notebook-page { background-position: -.9rem 0, 0 0, 0 0; }
  .fa-notebook-page::before { left: .35rem; }
  .fa-notebook-photos { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .8rem; }
  .fa-notebook .fa-photo { padding: 5px 5px 0; }
  .fa-sticker { width: 34px; height: 34px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .fa-notebook .fa-photo { transition: none; } }