/* ==========================================================================
   Đáp ứng theo thiết bị. Breakpoint: <480, 480–768, 768–1024, >1024. In ấn A4 ngang.
   ========================================================================== */

/* ---------- Dưới 1024px: máy tính bảng và điện thoại ---------- */
@media (max-width: 1023.98px) {
  .header-search { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { justify-content: flex-start; }

  /* Giá sách vuốt ngang */
  .shelf { display: flex; gap: 14px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 6px var(--gutter) 18px; margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .shelf::-webkit-scrollbar { height: 6px; }
  .shelf::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
  .grade-card { flex: 0 0 clamp(200px, 30vw, 250px); scroll-snap-align: start; }

  /* Trang A4 -> tờ giấy mềm; bảng giữ khung ô cột như bản A4, vuốt ngang để xem đủ cột */
  .sheet { padding: 22px 16px 26px; font-size: 15px; }
  .plan-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px; }
  .plan-table { min-width: 860px; font-size: 13px; }
  .plan-table thead th { font-size: 12.5px; }
  .plan-table .th-note { display: none; }
  .plan-table .sem-row td { text-align: left; padding-left: 14px; }
  .scroll-hint { display: flex; }
  .plan-cards { display: none; }
  .legend-table { font-size: 11.5px; }
  .signature { gap: 8px; }
  .signature .sig-name { margin-top: 40px; }
  .doc-top { flex-direction: column; align-items: stretch; }
  .site-footer .container { grid-template-columns: 1fr; }
}

/* ---------- 768px – 1024px ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grade-card { flex-basis: calc((100% - 28px) / 3); }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Dưới 768px ---------- */
@media (max-width: 767.98px) {
  :root { --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.35rem; }
  .site-header .container { min-height: 62px; gap: 10px; }
  .brand-logo { width: 42px; height: 42px; }
  .brand-logo.has-img { width: 44px; height: 44px; }
  .brand-school { font-size: 13px; letter-spacing: .03em; }
  .brand-sub { font-size: 12px; }
  .hero-title { font-size: clamp(1.45rem, 1.05rem + 2.6vw, 1.9rem); }
  .hero-intro { font-size: var(--fs-sm); }
  .school-tag { font-size: var(--fs-md); padding: 12px 18px 12px 14px; letter-spacing: .04em; gap: 10px; }
  .school-tag .tag-icon { width: 32px; height: 32px; }
  .search-box form { flex-direction: column; }
  .search-box .btn { width: 100%; }
  .grade-card { flex: 0 0 min(72vw, 250px); }
  .subject-grid { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr; }
  .template-card { padding: 14px; }
  .template-card .btn { justify-self: stretch; width: 100%; }
  .subject-card { padding: 14px; }
  .subject-icon { width: 50px; height: 50px; border-radius: 14px; }
  .doc-title { font-size: 1.25rem; }
  .doc-title .subject-icon { width: 40px; height: 40px; border-radius: 11px; }
  .doc-actions .btn { flex: 1 1 auto; }
  .plan-toolbar { padding: 10px; gap: 8px; }
  .plan-toolbar .field { flex-basis: 100%; }
  .plan-toolbar select.input { flex: 1 1 100%; }
  .segmented { width: 100%; justify-content: stretch; }
  .segmented button { flex: 1; padding-inline: 8px; }
  .section-head h2 { font-size: var(--fs-xl); }
  .footer-bottom .container { flex-direction: column; }
}

/* ---------- Dưới 480px ---------- */
@media (max-width: 479.98px) {
  :root { --gutter: 16px; }
  .brand-school { max-width: 62vw; }
  .brand-sub { max-width: 62vw; }
  .hero-title { font-size: clamp(1.3rem, 1rem + 2.6vw, 1.6rem); }
  .grade-card { flex: 0 0 78vw; }
  .grade-number { width: 40px; height: 40px; font-size: 1.3rem; border-radius: 12px; }
  .sheet { padding: 16px 12px 20px; border-radius: 4px; font-size: 14px; }
  .plan-table { min-width: 780px; font-size: 12.5px; }
}

/* ---------- In ấn: chỉ in trang A4 kế hoạch, khổ ngang ---------- */
@media print {
  @page { size: A4 landscape; margin: 12mm 14mm; }
  body { background: #fff; }
  .site-header, .site-footer, .hero, .plan-toolbar, .doc-top, .skip-link, .plan-filter-note .link, .section-shelf, .subject-section { display: none !important; }
  .doc-section, .doc-section .container { padding: 0 !important; width: auto !important; }
  .sheet-wrap { display: block; }
  .sheet { max-width: none; width: auto; padding: 0; border: 0; box-shadow: none; border-radius: 0; font-size: 12pt; }
  .plan-table-wrap { display: block !important; overflow: visible; }
  .scroll-hint { display: none !important; }
  .plan-table { min-width: 0; font-size: 9.5pt; }
  .plan-table th, .plan-table td { border-color: #000; }
  .plan-table thead { display: table-header-group; }
  .plan-table tr { break-inside: avoid; }
  .plan-cards { display: none !important; }
  .badge { border: 1px solid #999; background: none !important; color: #000 !important; }
  .badge::before { display: none; }
  mark { background: none; font-weight: 700; }
  .signature { break-inside: avoid; }
}