/* ==========================================================================
   Thương Mái Trường Xưa — component CSS (bổ sung cho Tailwind utilities)
   Màu: giấy cũ · mực xanh · đỏ khăn quàng · đồng thau · xanh bảng đen
   ========================================================================== */
:root {
  --paper: #FBF7EE; --paper-2: #F3EAD6; --paper-3: #E6D8B8;
  --ink: #17254A; --ink-2: #2B437F;
  --scarlet: #B3322B; --brass: #C08A22; --board: #1D3B34;
  --line: rgba(23, 37, 74, .12);
}
html { scroll-behavior: smooth; }
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #2a3350;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #F1C9C5; color: #751E19; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: .9375rem;
  padding: .7rem 1.25rem; border-radius: .6rem; transition: transform .15s, background .15s, box-shadow .15s, color .15s; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--scarlet); color: #fff; box-shadow: 0 2px 0 #751E19, 0 10px 20px -10px rgba(179,50,43,.6); }
.btn-primary:hover { background: #962720; }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 2px 0 #0B1329; }
.btn-ink:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--paper-2); }

/* ---------- Chips / tags ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 500;
  background: #fff; color: var(--ink); border: 1px solid var(--line); transition: all .15s; }
.chip:hover, .chip[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag { display: inline-block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--scarlet); }

/* ---------- Book cover (CSS-only placeholder; thay bằng <img> khi có ảnh) ---------- */
.cover { container-type: inline-size; position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 14% 12% 14% 16%; border-radius: 3px 8px 8px 3px; overflow: hidden;
  font-family: "Playfair Display", Georgia, serif; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 14px 24px -12px rgba(23,37,74,.5); }
.cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.12) 60%, rgba(0,0,0,.08)); }
.cover::after { content: ""; position: absolute; inset: 6% 6% 6% 12%; border: 1.5px solid currentColor; opacity: .35; border-radius: 2px; pointer-events: none; }
.cover__title { font-weight: 800; font-size: 10.5cqw; line-height: 1.15; text-wrap: balance; }
.cover__rule { width: 28%; height: 2px; background: currentColor; opacity: .5; margin: 7cqw 0 5cqw; }
.cover__meta { font-family: "Be Vietnam Pro", sans-serif; font-size: 6.2cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .8; font-weight: 600; }
.tone-red    { background: #B3322B; color: #FBE9C8; }
.tone-blue   { background: #1F3260; color: #F0D9A0; }
.tone-green  { background: #2E5A4D; color: #F3E6C4; }
.tone-ochre  { background: #D9A441; color: #3A2A08; }
.tone-cream  { background: #F1E4C3; color: #6B2A22; }
.tone-brown  { background: #6A4631; color: #F2DDB6; }

/* ---------- Card book ---------- */
.book-card { display: block; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.book-card:hover { transform: translateY(-6px) rotate(-.4deg); }
.book-card:hover .book-card__title { color: var(--scarlet); }

/* ---------- Decorations ---------- */
.ruled { background-color: #FFFDF6; background-image: linear-gradient(to bottom, transparent 31px, rgba(60,110,190,.22) 32px); background-size: 100% 32px; position: relative; }
.ruled::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3.25rem; width: 2px; background: rgba(200,60,60,.35); }
.tape { position: absolute; width: 5.5rem; height: 1.6rem; background: rgba(217,164,65,.55); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  border: 3px double var(--scarlet); color: var(--scarlet); font-family: "Playfair Display", serif; font-weight: 800; line-height: 1.05; transform: rotate(-12deg); background: rgba(251,247,238,.6); }
.orn { display: flex; align-items: center; gap: .75rem; color: var(--brass); }
.orn::before, .orn::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, currentColor); }
.orn::after { background: linear-gradient(270deg, transparent, currentColor); }
.chalk { background-color: var(--board); background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.07), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(255,255,255,.05), transparent 50%); }
.chalk-text { color: #E9EFE6; }
.frame { border: 10px solid #8B5E3C; border-image: linear-gradient(135deg, #a8744a, #6d4a2f) 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 14px 28px -14px rgba(0,0,0,.5); }
.thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; color: rgba(255,255,255,.85); }
.thumb svg { width: 3rem; height: 3rem; opacity: .75; }
.thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.25), transparent 45%); }

/* ---------- Mega menu ---------- */
.mega { transition: opacity .15s, transform .15s; }
.mega[hidden] { display: block; opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; }

/* ---------- Article typography ---------- */
.prose-old { font-size: 1.0625rem; line-height: 1.85; color: #2a3350; }
.prose-old > * + * { margin-top: 1.15em; }
.prose-old h2 { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.6rem; line-height: 1.3; color: var(--ink); margin-top: 2em; }
.prose-old h3 { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-top: 1.6em; }
.prose-old a { color: var(--scarlet); text-decoration: underline; text-underline-offset: 3px; }
.prose-old blockquote { border-left: 4px solid var(--brass); background: rgba(228,188,99,.14); padding: 1rem 1.25rem; font-family: "Playfair Display", serif; font-style: italic; font-size: 1.15rem; color: var(--ink); border-radius: 0 .5rem .5rem 0; }
.prose-old ul { list-style: none; padding-left: 0; }
.prose-old ul li { position: relative; padding-left: 1.5rem; }
.prose-old ul li::before { content: "✎"; position: absolute; left: 0; color: var(--scarlet); }
.prose-old figure img, .prose-old figure .thumb { border-radius: .5rem; }
.prose-old figcaption { font-size: .85rem; color: #6b7390; margin-top: .5rem; text-align: center; font-style: italic; }
.prose-old > p:first-of-type::first-letter { font-family: "Playfair Display", serif; font-weight: 800; font-size: 3.6rem; float: left; line-height: .85; padding: .35rem .6rem 0 0; color: var(--scarlet); }

/* ---------- Forms ---------- */
.field { width: 100%; background: #fff; border: 1.5px solid #D9CFB6; border-radius: .6rem; padding: .75rem .95rem; font-size: .96rem; color: var(--ink); transition: border .15s, box-shadow .15s; }
.field::placeholder { color: #9aa0b5; }
.field:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 4px rgba(43,67,127,.15); }
.label { display: block; font-weight: 600; font-size: .875rem; color: var(--ink); margin-bottom: .4rem; }

/* ---------- Pagination ---------- */
.page-link { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: .6rem; font-weight: 600; font-size: .9rem; background: #fff; color: var(--ink); border: 1px solid var(--line); transition: all .15s; }
.page-link:hover { border-color: var(--ink); }
.page-link[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .book-card, .btn { transition: none; }
}
@media print { header, footer, .no-print { display: none !important; } body { background: #fff; } }

/* ---------- Quảng cáo / tài trợ ---------- */
.ad-slot { position: relative; margin: 2.5rem auto; max-width: 56rem; padding: 1.6rem .75rem .75rem; text-align: center; border: 1px dashed rgba(23,37,74,.18); border-radius: .75rem; background: rgba(243,234,214,.35); overflow: hidden; }
.ad-slot__label { position: absolute; top: .35rem; left: .75rem; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8a8fa5; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
@media print { .ad-slot { display: none !important; } }