/* AIHA 3D Flip Book — lưới ấn phẩm + trình đọc. Token theo theme HEZA (xanh var(--heza-c-blue, #0071bd), navy var(--heza-c-navy, #0f3a66), bo góc 6px). */
:root { --aiha-fb-accent: #0071bd; --aiha-fb-ink: #0f3a66; --aiha-fb-muted: #475569; --aiha-fb-line: #e2e8f0; --aiha-fb-tint: #f1f6fa; --aiha-fb-cta: #d0322f; }

.aiha-fb-grid { display: grid; grid-template-columns: repeat(var(--aiha-fb-cols, 4), minmax(0, 1fr)); gap: 28px 24px; margin: 24px 0; padding: 0; list-style: none; }
.aiha-fb-card { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.aiha-fb-card__cover { position: relative; display: block; aspect-ratio: 600 / 848; overflow: hidden; border: 1px solid var(--aiha-fb-line); border-radius: var(--heza-radius, 6px); background: var(--aiha-fb-tint); box-shadow: 0 6px 18px rgba(15, 58, 102, .10); }
.wp-block-post-content .aiha-fb-card__cover img, .aiha-fb-card__cover img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; object-position: top; }
.aiha-fb-card__placeholder { display: grid; place-items: center; height: 100%; color: var(--aiha-fb-ink); font-weight: 800; letter-spacing: .06em; }
.aiha-fb-card__title { margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; color: var(--aiha-fb-ink); font-size: 16px !important; line-height: 1.4; font-weight: 700; }
.aiha-fb-card__title::after, .aiha-fb-card__title::before { display: none !important; }
.aiha-fb-card__meta { margin: 0; color: var(--aiha-fb-muted); font-size: 13px; }
.aiha-fb-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.aiha-fb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 14px; border: 1px solid var(--aiha-fb-line); border-radius: var(--heza-radius, 6px); background: #fff; color: var(--aiha-fb-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: border-color .15s ease, background-color .15s ease; }
.aiha-fb-btn:hover { border-color: var(--aiha-fb-accent); }
.aiha-fb-btn--primary { border-color: var(--aiha-fb-cta); background: var(--aiha-fb-cta); color: #fff !important; }
.aiha-fb-btn--primary:hover { border-color: #b0241f; background: #b0241f; }
.aiha-fb-btn:active { transform: translateY(1px); }
.aiha-fb-btn:focus-visible, .aiha-fb-card__cover:focus-visible, .aiha-fb-tool:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .aiha-fb-card__cover { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease; }
  .aiha-fb-card__cover:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15, 58, 102, .16); }
}
/* Một cuốn (bài quy hoạch, trang đơn): bìa trái, thông tin phải */
.aiha-fb-grid--single { grid-template-columns: minmax(140px, 220px) 1fr; max-width: 720px; padding: 16px; border: 1px solid var(--aiha-fb-line); border-radius: var(--heza-radius, 6px); background: var(--aiha-fb-tint); }
.aiha-fb-grid--single .aiha-fb-card { display: contents; }
.aiha-fb-grid--single .aiha-fb-card__cover { grid-row: 1 / span 4; }
.aiha-fb-grid--single .aiha-fb-card__title, .aiha-fb-grid--single .aiha-fb-card__meta, .aiha-fb-grid--single .aiha-fb-card__actions { grid-column: 2; align-self: start; }
.aiha-fb-grid--single .aiha-fb-card__actions { align-self: end; }
.aiha-fb-empty { color: var(--aiha-fb-muted); }
@media (max-width: 1024px) { .aiha-fb-grid:not(.aiha-fb-grid--single) { grid-template-columns: repeat(min(var(--aiha-fb-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .aiha-fb-grid:not(.aiha-fb-grid--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .aiha-fb-grid--single { grid-template-columns: 120px 1fr; gap: 6px 14px; }
  .aiha-fb-card__actions .aiha-fb-btn { flex: 1 1 auto; }
}

/* ---------- Trình đọc ---------- */
html.aiha-fb-open { overflow: hidden; }
.aiha-fb-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0b1b2d; color: #fff; }
.aiha-fb-dialog::backdrop { background: rgba(6, 18, 32, .82); }
.aiha-fb-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.aiha-fb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px clamp(12px, 2.5vw, 24px); background: #0f2741; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.aiha-fb-bar__title { flex: 1 1 260px; min-width: 0; margin: 0 !important; overflow: hidden; color: #fff !important; font-size: 16px !important; line-height: 1.3; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.aiha-fb-bar__title::after { display: none !important; }
.aiha-fb-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.aiha-fb-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--heza-radius, 6px); background: transparent; color: #fff !important; font: inherit; font-size: 14px; text-decoration: none !important; cursor: pointer; }
.aiha-fb-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.aiha-fb-tool:disabled { opacity: .35; cursor: default; }
.aiha-fb-tool .dashicons { width: 20px; height: 20px; font-size: 20px; }
.aiha-fb-pageno { display: inline-flex; align-items: center; gap: 2px; color: rgba(255, 255, 255, .85); font-size: 14px; font-variant-numeric: tabular-nums; }
.aiha-fb-pageno__input { width: 56px; height: 40px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--heza-radius, 6px); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; text-align: center; }
.aiha-fb-stage { position: relative; display: grid; place-items: center; overflow: hidden; outline: 0; touch-action: pan-y pinch-zoom; }
.aiha-fb-stage.is-zoomed { place-items: start center; overflow: auto; touch-action: auto; }
.aiha-fb-spread { display: flex; align-items: center; justify-content: center; padding: 24px; perspective: 2200px; }
.aiha-fb-page { display: block; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.aiha-fb-spread.is-pair .aiha-fb-page:first-child { box-shadow: -8px 12px 40px rgba(0, 0, 0, .45), inset -14px 0 18px -14px rgba(0, 0, 0, .35); }
.aiha-fb-spread.is-pair .aiha-fb-page:last-child { box-shadow: 8px 12px 40px rgba(0, 0, 0, .45); }
.aiha-fb-status { position: absolute; inset: auto 0 24px; margin: auto; width: fit-content; padding: 8px 14px; border-radius: var(--heza-radius, 6px); background: rgba(15, 39, 65, .9); color: #fff; font-size: 14px; }
.aiha-fb-status[hidden] { display: none; }
.aiha-fb-error { display: grid; gap: 14px; justify-items: center; max-width: 420px; padding: 24px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .aiha-fb-spread.is-turn-next { animation: aiha-fb-turn-next .38s cubic-bezier(.16, 1, .3, 1); transform-origin: left center; }
  .aiha-fb-spread.is-turn-prev { animation: aiha-fb-turn-prev .38s cubic-bezier(.16, 1, .3, 1); transform-origin: right center; }
}
@keyframes aiha-fb-turn-next { from { opacity: .35; transform: rotateY(-14deg) translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes aiha-fb-turn-prev { from { opacity: .35; transform: rotateY(14deg) translateX(-18px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .aiha-fb-bar { padding: 8px 10px; }
  .aiha-fb-bar__title { flex-basis: 100%; font-size: 14px !important; }
  .aiha-fb-tool__label { display: none; }
  .aiha-fb-bar__tools { width: 100%; justify-content: space-between; gap: 4px; }
  .aiha-fb-tool[data-act="zoomin"], .aiha-fb-tool[data-act="zoomout"], .aiha-fb-tool[data-act="fullscreen"] { display: none; }
  .aiha-fb-tool { min-width: 40px; padding: 0 8px; }
  .aiha-fb-pageno__input { width: 48px; }
  .aiha-fb-spread { padding: 12px; }
}
