/* Trình đọc sổ tay nhận diện · Sinh Vũ DS v3.10
   Khối navy cố định cho vùng đọc, ảnh trang là nhân vật chính.
   Mobile trước: dưới 720px sách tự về một trang, thanh điều khiển dính đáy. */

.fb {
  --fb-bar: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--color-deep-navy);
  color: var(--text-primary);
}

/* ---- thanh trên ---- */
.fb__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--fb-bar);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.fb__bar--bottom {
  border-bottom: 0;
  border-top: 1px solid var(--hairline);
  justify-content: center;
  position: sticky;
  bottom: 0;
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  background: var(--color-deep-navy);
  z-index: var(--z-sticky);
}

.fb__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-2);
  margin-inline-start: calc(var(--space-2) * -1);
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out);
}

.fb__back:hover { color: var(--text-primary); }
.fb__back i { font-size: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.fb__back:hover i { transform: translateX(-3px); }

.fb__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb__title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--color-warm-cream);
}

/* ---- vùng sách ---- */
.fb__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-4) var(--space-2);
  min-height: 0;
}

/* Bề rộng khung do reader.js quyết định (thư viện tự gán max-width inline),
   ở đây chỉ đặt chiều cao và canh giữa. */
.fb__book {
  width: 100%;
  height: min(76svh, 900px);
  margin-inline: auto;
}

.fb__book .stf__item { background: var(--color-white); }

/* Tờ giấy đang lật chỉ tách lớp riêng lúc đang lật, để không tốn bộ nhớ khi đứng yên */
.fb[data-flipping] .fb__book .stf__item {
  will-change: transform;
  backface-visibility: hidden;
}

/* Bóng cả cuốn đổ xuống nền, đặt dưới trang */
.fb__shade {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--color-charcoal) 34%, transparent),
    0 22px 54px -16px color-mix(in srgb, var(--color-charcoal) 62%, transparent);
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Rãnh gáy giữa hai trang, thứ làm mắt tin đây là quyển sách */
.fb__gutter {
  position: absolute;
  pointer-events: none;
  /* trên trang đứng yên (7), dưới trang đang lật (9 và 11) và dưới bóng lật (16) */
  z-index: 8;
  width: 74px;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--color-charcoal) 6%, transparent) 26%,
    color-mix(in srgb, var(--color-charcoal) 20%, transparent) 47%,
    color-mix(in srgb, var(--color-charcoal) 26%, transparent) 50%,
    color-mix(in srgb, var(--color-charcoal) 20%, transparent) 53%,
    color-mix(in srgb, var(--color-charcoal) 6%, transparent) 74%,
    transparent 100%
  );
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Không bật tắt hai lớp này theo nhịp lật: tờ giấy đang lật đã nằm đè lên chúng
   (startZIndex 6 > z-index 5), còn ẩn hiện thì mắt đọc thành nhấp nháy. */

.fb__page {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--color-white);
}

/* ---- nút lật hai bên ---- */
.fb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-deep-navy) 82%, transparent);
  color: var(--text-primary);
  cursor: pointer;
  z-index: var(--z-base);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.fb__nav:hover { border-color: var(--color-signal-red); }
.fb__nav[disabled] { opacity: 0.25; cursor: default; }
.fb__nav i { font-size: 20px; }
.fb__nav--prev { left: var(--space-2); }
.fb__nav--next { right: var(--space-2); }

/* ---- thanh dưới ---- */
.fb__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fb__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.fb__icon:hover,
.fb__icon[aria-pressed="true"] {
  color: var(--text-primary);
  border-color: var(--color-signal-red);
}

.fb__icon i { font-size: 19px; }
.fb__icon[disabled] { opacity: 0.3; cursor: default; }

/* nút lật trong thanh dưới chỉ dành cho điện thoại, máy tính đã có nút hai bên */
.fb__icon--onlymobile { display: none; }

.fb__count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  min-width: 76px;
  text-align: center;
}

.fb__count b { color: var(--text-primary); font-weight: 600; }

/* ---- dải chọn trang ---- */
.fb__strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3) var(--space-4)
           calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-studio-blue);
  border-top: 1px solid var(--hairline);
  z-index: var(--z-overlay);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.fb__strip[data-open] { transform: translateY(0); }

.fb__strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.fb__strip-head span {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}

.fb__strip-scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}

.fb__thumb {
  flex: 0 0 auto;
  width: 64px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fb__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  background: var(--color-white);
}

.fb__thumb span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  padding-top: 3px;
}

.fb__thumb:hover { transform: translateY(-3px); }
.fb__thumb[aria-current="true"] { border-color: var(--color-signal-red); }
.fb__thumb[aria-current="true"] span { color: var(--text-primary); }

/* ---- xem trang phóng lớn ---- */
.fb__zoom {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: color-mix(in srgb, var(--color-deep-navy) 94%, transparent);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  overflow: auto;
  overscroll-behavior: contain;
}

.fb__zoom[hidden] { display: none; }

.fb__zoom img {
  /* mở ra là vừa màn hình, muốn xem sát thì chụm hai ngón hoặc cuộn */
  max-width: 100%;
  max-height: calc(100svh - var(--space-8));
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  touch-action: pinch-zoom;
}

.fb__zoom-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-deep-navy);
  color: var(--text-primary);
  cursor: pointer;
}

.fb__hint {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  padding-bottom: var(--space-3);
}

/* ---- danh mục sổ tay ---- */
.fbh__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

.fbh__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fbh__card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px -4px rgba(3, 29, 68, 0.08);
  transform: translateY(-3px);
}

.fbh__cover {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-paper);
  overflow: hidden;
}

.fbh__cover img {
  /* bìa hiện trọn vẹn, không cắt xén tác phẩm */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}

.fbh__body { display: block; padding: var(--space-4); }

.fbh__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 var(--space-1);
}

.fbh__meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---- mobile ---- */
@media (max-width: 720px) {
  .fb__bar { padding-inline: var(--space-3); }
  .fb__back span { display: none; }
  .fb__title { font-size: 15px; }
  .fb__stage { padding: var(--space-2) var(--space-2) 0; }
  .fb__book { height: min(74svh, 760px); }
  .fb__nav { display: none; }
  .fb__hint { display: none; }
  .fb__icon--onlymobile { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .fb__strip,
  .fb__thumb,
  .fb__nav,
  .fb__back i,
  .fbh__card { transition-duration: 0.001ms; }
}