/* =====================================================================================
   FORM "QUYỂN SÁCH" — thẻ đăng ký nhìn như quyển sách, xuất hiện bằng hiệu ứng mở bìa sách.
   • Hai trang (form + giải thích): có gáy sách ở giữa, giấy kem, độ dày xếp trang, dải đánh dấu trang.
   • Một thẻ: bìa sách lật mở từ mép trái để lộ trang giấy.
   • Chỉ dùng transform/opacity trong lúc lật; tự tắt khi người dùng bật "giảm chuyển động".
   • Nếu JS không chạy: nội dung vẫn tự hiện sau 3 giây (failsafe), form không bao giờ bị mất.
   ===================================================================================== */
@keyframes bkFailsafe { to { visibility: visible; } }
html.bk-on .vol-hero-inner:not(.bk-js), html.bk-on .item-hero-inner:not(.bk-js), html.bk-on .support-hero-row:not(.bk-js),
html.bk-on .donor-form-card:not(.bk-js), html.bk-on .contact-grid:not(.bk-js),
/* .support-hero-card ĐỨNG RIÊNG (không nằm trong .support-hero-row) mới áp dụng "bìa đơn" —
   trang đã gộp vào .support-hero-row (vd. hocthem.html) thì .support-hero-card chỉ là trang trái
   của sách mở, đã được .support-hero-row quản lý ẩn/hiện, không cần (và không nên) áp dụng ở đây nữa. */
html.bk-on .support-photo-hero-inner > .support-hero-card:not(.bk-js) {
  visibility: hidden; animation: bkFailsafe 0s 3s forwards !important;
}
.bk-js { animation: none !important; }
.bk-busy, .bk-busy * { pointer-events: none !important; }

/* ---- lá bìa lật ---- */
.bk-leaf { position: absolute; top: 0; z-index: 40; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; visibility: visible; pointer-events: none; }
.bk-leaf.spread { left: 50%; width: 50%; height: 100%; }
.bk-leaf.cover { left: 0; width: 100%; height: 100%; }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: var(--bk-r, 22px); }
.bk-leaf.spread .bk-face { border-radius: 0 var(--bk-r, 22px) var(--bk-r, 22px) 0; }
.bk-leaf.spread .bk-back { border-radius: var(--bk-r, 22px) 0 0 var(--bk-r, 22px); }
.bk-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* mặt trước: bìa sách */
.bk-front { background: radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.28), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(250,204,21,.10), transparent 60%), linear-gradient(150deg, #0a1230 0%, #11235e 55%, #1b3b8f 100%);
  color: #fff; display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(2,8,30,.7); }
.bk-front::before { content: ''; position: absolute; inset: 16px 16px 16px 26px; border: 2px solid rgba(250,204,21,.55); border-radius: 10px; pointer-events: none; }
.bk-front::after { content: ''; position: absolute; inset: 24px 24px 24px 34px; border: 1px solid rgba(250,204,21,.28); border-radius: 6px; pointer-events: none; }
.bk-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.10) 55%, rgba(0,0,0,.2)); }
/* padding-right dư ra để né dải ruy băng góc bìa (.bk-cover-ribbon: cách mép phải 46px, rộng 26px) */
.bk-cover-in { padding: 2.2rem 5.5rem 2.2rem 3rem; max-width: 100%; position: relative; z-index: 2; }
.bk-cover-in img { width: min(200px, 62%); height: auto; margin: 0 auto 1.1rem; display: block; opacity: .95; }
.bk-cover-title { font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.4);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bk-cover-rule { width: 64px; height: 3px; background: linear-gradient(90deg, #facc15, #fde68a); border-radius: 3px; margin: .9rem auto .8rem; }
.bk-cover-sub { font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: #bcd0ff; font-weight: 600; }
.bk-cover-ribbon { position: absolute; top: -2px; right: 46px; width: 26px; height: 92px; background: linear-gradient(180deg, #ef4444, #b91c1c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); box-shadow: 0 6px 12px rgba(0,0,0,.35); z-index: 3; }

/* mặt sau: trang giấy */
.bk-back { transform: rotateY(180deg); background: linear-gradient(90deg, #fbf7ec, #fffdf8 12%, #fffdf8); }
.bk-leaf.cover .bk-back { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(37,99,235,.07) 31px 32px), linear-gradient(90deg, #f3eee0, #fffdf8 10%, #fffdf8); }
.bk-leaf.spread .bk-back { background: #fffdf8; }
.bk-leaf.spread .bk-back > .bk-replica { position: absolute; inset: 0; margin: 0 !important; width: 100% !important; height: 100% !important; flex: none !important; max-width: none !important; min-width: 0 !important; border: 0 !important; overflow: hidden; }

/* ---- diện mạo "quyển sách" sau khi mở ---- */
/* CHỈ bo góc 1 LẦN DUY NHẤT ở khung ngoài (.bk-book, đã có border-radius + overflow:hidden từ
   trước) — 2 nửa bên trong để góc VUÔNG, nhờ khung ngoài tự cắt gọn nên không còn khe hở/đường
   nối lệch pixel giữa 2 nửa như khi mỗi nửa tự bo góc riêng. */
.bk-book { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; --bk-r: 22px;
  box-shadow: 0 44px 80px -12px rgba(8,20,45,.55) !important; overflow: hidden !important; }
.bk-book > :first-child { background: linear-gradient(90deg, #fffdf8 0%, #fffdf8 88%, #f4efe1 100%) !important; border-radius: 0 !important; border: 0 !important; }
.bk-book > :nth-child(2) { background: linear-gradient(90deg, #f1ecdd 0%, #fbf8ee 9%, #fffdf8 100%) !important; border-radius: 0 !important; border: 0 !important; }
.bk-book::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 84px; margin-left: -42px; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, rgba(15,23,42,.045) 34%, rgba(15,23,42,.15) 50%, rgba(15,23,42,.045) 66%, transparent 100%); }
.bk-ribbon { position: absolute; top: -1px; left: calc(50% + 34px); width: 24px; height: 84px; z-index: 7; background: linear-gradient(180deg, #ef4444, #b91c1c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); pointer-events: none; transform-origin: top; animation: bkRibbon .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes bkRibbon { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 899px) {
  .bk-book::before, .bk-ribbon { display: none; }
  .bk-book > :first-child { background: #fffdf8 !important; }
  .bk-book > :nth-child(2) { background: #fbf8ee !important; }
}
/* thẻ đơn: trang giấy có gáy khâu bên trái + độ dày trang */
.bk-note { box-shadow: inset 16px 0 22px -16px rgba(15,23,42,.28), 0 1px 0 #fff, 0 3px 0 #e6eaf3, 0 4px 0 #fff, 0 6px 0 #d9dfec, 0 30px 70px rgba(2,10,30,.45) !important; }
.bk-note { background-image: linear-gradient(90deg, #f6f1e4 0, #fffdf8 6%, #fffdf8 100%) !important; }

/* nội dung hiện dần sau khi mở bìa */
@keyframes bkPop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bk-pop { animation: bkPop .6s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .bk-pop, .bk-ribbon { animation: none; } html.bk-on .vol-hero-inner, html.bk-on .item-hero-inner, html.bk-on .support-hero-row, html.bk-on .donor-form-card, html.bk-on .support-hero-card, html.bk-on .contact-grid { visibility: visible !important; } }