/* ============================================================
   TRI THỨC NỀN — Thư viện lời giải
   Design System • tối giản, cao cấp (vibe Apple / Google)
   Một typeface duy nhất: Be Vietnam Pro (hỗ trợ tiếng Việt đầy đủ)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  /* Nền & bề mặt — gần trắng, sạch */
  --bg: #fbfcfb;
  --surface: #ffffff;
  --surface-2: #f5f7f6;

  /* Mực chữ */
  --ink: #11150f;
  --ink-soft: #565c54;
  --ink-mute: #949a91;
  --line: #ebeeeb;
  --line-strong: #dee3de;

  /* Một màu nhấn: xanh lá tinh */
  --brand: #15a35a;
  --brand-600: #0f8a4a;
  --brand-700: #0c6f3c;
  --brand-50: #eef9f2;
  --brand-100: #d6f0e0;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Bóng rất nhẹ, mềm */
  --shadow-xs: 0 1px 2px rgba(17,21,15,.04);
  --shadow-sm: 0 1px 3px rgba(17,21,15,.06), 0 1px 2px rgba(17,21,15,.04);
  --shadow-md: 0 10px 30px rgba(17,21,15,.08);
  --shadow-lg: 0 24px 60px rgba(17,21,15,.12);

  --maxw: 1140px;
  --header-h: 76px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Màu riêng từng môn — tươi, hài hoà, hợp trẻ em */
  --s-toan: #f5872e;            /* Toán — cam */
  --s-tieng-viet: #2d7ff0;      /* Tiếng Việt — xanh dương */
  --s-ngu-van: #2d7ff0;
  --s-tap-viet: #4aa3df;
  --s-tieng-anh: #e0556e;       /* Tiếng Anh — đỏ hồng */
  --s-tu-nhien-xa-hoi: #1fae6a; /* TN&XH — xanh lá */
  --s-dia-li: #15a37a;
  --s-sinh-hoc: #3fb950;
  --s-khoa-hoc: #1bb3c4;        /* Khoa học — xanh ngọc */
  --s-khtn: #1bb3c4;
  --s-hoa-hoc: #16b1a8;
  --s-vat-li: #5a6ad6;
  --s-dao-duc: #ec6a8e;         /* Đạo đức — hồng */
  --s-gdcd: #d98a3d;
  --s-gdktpl: #d98a3d;
  --s-hdtn: #8b5cf6;            /* HĐTN — tím */
  --s-am-nhac: #c061cb;         /* Âm nhạc — tím hồng */
  --s-mi-thuat: #ef7d54;
  --s-lich-su: #b07a3c;         /* Lịch sử — nâu vàng */
  --s-lich-su-dia-li: #8a8f3c;
  --s-cong-nghe: #6b7785;
  --s-tin-hoc: #3a82a8;
  --s-khac: #15a35a;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--brand-100); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(251,252,251,.8); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand-logo {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: transparent !important; border-radius: 0;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand small { display:block; font-weight:500; font-size:.66rem; color: var(--ink-mute); letter-spacing:0; margin-top:1px; }
.brand-name { line-height: 1.1; }
.header-spacer { flex: 1; }
.header-stat { font-size:.84rem; color: var(--ink-soft); font-weight:600; }

/* ---------- Main nav ---------- */
.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .9rem; color: var(--ink-soft);
  transition: all .16s var(--ease); white-space: nowrap;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.active { background: var(--ink); color: #fff; }
.nav-link.active:hover { background: var(--ink); color: #fff; }
.nav-link.soon { color: var(--ink-mute); cursor: default; }
.nav-link.soon:hover { background: transparent; color: var(--ink-mute); }
.nav-soon {
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-50); color: var(--brand-700); padding: 3px 8px; border-radius: var(--r-pill);
}

/* ---------- Hero ---------- */
.hero { padding: 76px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.8rem); font-weight: 800; letter-spacing: -0.04em; }
.hero h1 .grad { color: var(--brand); }
.hero p { max-width: 540px; margin: 18px auto 0; color: var(--ink-soft); font-size: 1.12rem; font-weight: 400; letter-spacing: -0.01em; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; padding:6px 14px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-pill);
  font-weight:600; font-size:.8rem; color:var(--ink-soft); box-shadow:var(--shadow-xs);
}
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--brand); }

/* ---------- Search ---------- */
.searchbar { margin: 32px auto 0; max-width: 480px; position: relative; }
.searchbar input {
  width: 100%; height: 52px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 0 22px; font-size: .98rem; color: var(--ink); font-weight:500; font-family:inherit;
  box-shadow: var(--shadow-xs); transition: border-color .2s, box-shadow .2s;
}
.searchbar input::placeholder { color: var(--ink-mute); }
.searchbar input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }

/* ---------- Filters ---------- */
.filters { position: sticky; top: var(--header-h); z-index: 40; background: rgba(251,252,251,.85); backdrop-filter: blur(16px); padding: 14px 0 6px; }
.filter-row { display:flex; gap: 8px; align-items:center; overflow-x:auto; padding-bottom: 8px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-label { font-size:.7rem; font-weight:700; color: var(--ink-mute); text-transform:uppercase; letter-spacing:.08em; flex-shrink:0; padding-right:6px; }

.chip {
  flex-shrink: 0; height: 36px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  font-weight: 600; font-size: .87rem; white-space: nowrap; font-family:inherit;
  transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Section heading ---------- */
.section-head { display:flex; align-items:baseline; gap:12px; margin: 44px 0 22px; }
.section-head h2 { font-size: 1.6rem; font-weight: 800; letter-spacing:-0.03em; }
.section-head .count { color: var(--ink-mute); font-size: .88rem; font-weight: 500; }

/* ---------- Book grid ---------- */
.book-grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 12px; }

/* ---------- Book card — bìa tối giản ---------- */
.book-card { position: relative; cursor: pointer; display:flex; flex-direction:column;
  animation: fade .5s var(--ease) both; }
.book-card .cover { transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.book-card:hover .cover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Bìa: nền màu môn dịu, bo góc, đổ bóng mềm — có hình minh hoạ SVG */
.cover {
  position: relative; aspect-ratio: 1 / 1.4; border-radius: 16px;
  background:
    radial-gradient(120% 80% at 78% 0%, color-mix(in srgb, var(--subject-color) 60%, #fff 40%) 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--subject-color) 80%, #000 22%) 0%, transparent 60%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--subject-color) 92%, #fff 8%) 0%,
      color-mix(in srgb, var(--subject-color) 72%, #000 18%) 100%);
  box-shadow: var(--shadow-md); overflow: hidden; color:#fff;
  padding: 20px; display:flex; flex-direction:column;
}
.cover-art {
  position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
}
.cover-photo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; pointer-events:none;
}
.cover-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; border-radius:16px;
}
.cover::after { /* lớp tối ở đáy cho chữ trắng đọc rõ trên ảnh + sáng nhẹ phía trên */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 22%),
    linear-gradient(0deg, rgba(17,21,15,.62) 0%, rgba(17,21,15,.18) 34%, transparent 56%);
}
.cover-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.cover-grade {
  font-weight:700; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(255,255,255,.22); padding: 4px 11px; border-radius: var(--r-pill); backdrop-filter: blur(4px);
}
.cover-body { flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.cover-subject { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; opacity:.78; margin-bottom:7px; }
.cover-title {
  font-weight:800; font-size:1.42rem; line-height:1.18; letter-spacing:-0.02em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.cover-foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cover-wordmark { font-weight:700; font-size:.66rem; letter-spacing:.02em; opacity:.82; }
.cover-vol { font-size:.64rem; font-weight:700; background: rgba(255,255,255,.2); padding: 3px 9px; border-radius:var(--r-pill); }
.cover-ribbon { /* pill gọn thay cho ribbon chéo */
  position:absolute; top:16px; right:16px; z-index:3;
  background:#fff; color:var(--brand-700); font-weight:700; font-size:.6rem; padding: 4px 10px; border-radius: var(--r-pill);
  letter-spacing:.04em; text-transform:uppercase; box-shadow: var(--shadow-xs);
}

/* meta dưới bìa — gọn */
.book-meta { padding: 13px 4px 0; }
.book-name {
  font-weight:600; font-size:.96rem; color: var(--ink); line-height:1.32; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.book-foot { margin-top:7px; display:flex; align-items:center; gap:8px; }
.book-tag {
  font-size:.68rem; font-weight:700; letter-spacing:.01em; padding: 3px 9px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.tag-sgk { background: var(--brand-50); color: var(--brand-700); }
.tag-vbt { background: #fff4e0; color: #b4690e; }
.book-sol { font-size:.8rem; font-weight:500; color: var(--ink-mute); margin-left:auto; }
.read-btn { display:none; }

/* ---------- States ---------- */
.state { text-align:center; padding: 90px 20px; color: var(--ink-mute); }
.state .big { font-size: 1.4rem; margin-bottom: 8px; font-weight:800; color: var(--ink); letter-spacing:-0.02em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 40px 0; color: var(--ink-mute); font-size:.85rem; text-align:center; }
.site-footer strong { color: var(--ink-soft); font-weight:700; }
.site-footer .disclaimer { max-width: 620px; margin: 10px auto 0; font-size:.78rem; line-height:1.6; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color:#fff; font-size: 20px; display:grid; place-items:center;
  box-shadow: var(--shadow-md); opacity:0; pointer-events:none; transform: translateY(10px);
  transition: all .25s var(--ease); z-index: 45;
}
.to-top.show { opacity:1; pointer-events:auto; transform: translateY(0); }
.to-top:hover { transform: translateY(-2px); }

@keyframes fade { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media (max-width: 640px) {
  .hero { padding: 48px 0 28px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
  .brand small { display:none; }
  /* Nav trên mobile: cho phép cuộn ngang + nén padding để vừa 375px */
  .site-header .container { gap: 10px; }
  .brand-logo { width: 44px; height: 44px; }
  .brand { font-size: .98rem; }
  .main-nav {
    flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
    justify-content: flex-end;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-link { padding: 0 11px; font-size: .82rem; height: 34px; flex-shrink: 0; }
}