/* ============================================================
   Responsive tinh chỉnh — Moban 8-10-12
   (Cấu trúc grid-template-areas nằm trong main.css)
   ============================================================ */

/* ===== Máy tính bảng & mobile ngang ===== */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .container { padding: 0 16px; }
    .layout-grid { padding: 22px 0 44px; }
    .hero-title { font-size: 24px; }
    .hero-desc { font-size: 14px; }
    .btn { padding: 9px 16px; font-size: 13px; }
    .btn-login { display: none; }
    .board-title { margin-bottom: 16px; }
    .m-card-body { padding: 14px 14px 16px; }
    .m-card-title { font-size: 15px; }
    .post-board-title { font-size: 24px; }
    .post-board-content { font-size: 16px; }
    .post-board-meta { flex-wrap: wrap; gap: 10px; }
    .archive-board { padding: 22px 20px; }
    .footer-widgets { padding: 34px 0 20px; }
}

/* ===== Điện thoại nhỏ ===== */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .container { padding: 0 12px; }
    .logo-img { max-height: 38px; }
    .header-inner { gap: 12px; padding: 10px 0; }
    .btn-register { padding: 8px 12px; font-size: 12px; }
    .hero-board-caption { padding: 18px 16px; }
    .hero-title { font-size: 21px; }
    .board-title { font-size: 19px; padding-left: 14px; }
    .m-card-title { font-size: 15px; }
    .m-card-excerpt { font-size: 13px; }
    .post-board { padding: 20px 14px; }
    .post-board-title { font-size: 21px; }
    .post-board-content { font-size: 15px; line-height: 1.75; }
    .post-download-cta { padding: 20px 16px; }
    .side-card { padding: 18px 16px; }
    .disclaimer-text { font-size: 12px; }
}

/* ===== Tôn trọng người dùng giảm chuyển động ===== */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001s; transition-duration: 0.001s; }
    .scroll-reveal { opacity: 1; transform: none; }
}