/* ================= MOBILE FIRST ================= */

/* Mobile rất nhỏ (≤ 320px) */
@media (max-width: 320px) {
  h1 { font-size: 22px; line-height: 28px; }
  h2 { font-size: 20px; line-height: 26px; }
  h3 { font-size: 18px; line-height: 24px; }
  h4 { font-size: 16px; line-height: 22px; }
  h5 { font-size: 14px; line-height: 20px; }
  h6 { font-size: 12px; line-height: 18px; }
}

/* Mobile phổ thông (321px - 480px) */
@media (min-width: 321px) and (max-width: 480px) {
  h1 { font-size: 28px; line-height: 36px; }
  h2 { font-size: 24px; line-height: 28px; }
  h3 { font-size: 22px; line-height: 26px; }
  h4 { font-size: 18px; line-height: 24px; }
  h5 { font-size: 16px; line-height: 22px; }
  h6 { font-size: 14px; line-height: 20px; }
}

/* Phablet & Tablet dọc (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  h1 { font-size: 36px; line-height: 42px; }
  h2 { font-size: 28px; line-height: 32px; }
  h3 { font-size: 24px; line-height: 28px; }
  h4 { font-size: 20px; line-height: 26px; }
  h5 { font-size: 18px; line-height: 24px; }
  h6 { font-size: 16px; line-height: 22px; }
}


/* ================= LAPTOP & DESKTOP CHUẨN ================= */

/* Laptop & Desktop (769px - 1440px) */
@media (min-width: 769px) {
  h1 { font-size: 42px; line-height: 52px; }
  h2 { font-size: 34px; line-height: 40px; }
  h3 { font-size: 28px; line-height: 34px; }
  h4 { font-size: 24px; line-height: 30px; }
  h5 { font-size: 22px; line-height: 28px; }  
  h6 { font-size: 18px; line-height: 24px; }
}


/* ================= DESKTOP LỚN / 2K ================= */

@media (min-width: 1441px) and (max-width: 1920px) {
  h1 { font-size: 48px; line-height: 64px; }
  h2 { font-size: 38px; line-height: 52px; }
  h3 { font-size: 32px; line-height: 42px; }
  h4 { font-size: 26px; line-height: 36px; }
  h5 { font-size: 24px; line-height: 32px; }
  h6 { font-size: 20px; line-height: 28px; }
}


/* ================= MÀN HÌNH RẤT LỚN (4K & 8K) ================= */

/* 4K (≥ 1920px) */
@media (min-width: 1920px) {
  h1 { font-size: 50px; line-height: 72px; }
  h2 { font-size: 36px; line-height: 52px; }
  h3 { font-size: 32px; line-height: 46px; }
  h4 { font-size: 30px; line-height: 38px; }
  h5 { font-size: 26px; line-height: 36px; }
  h6 { font-size: 22px; line-height: 30px; }
}

/* 8K (≥ 2560px) */
@media (min-width: 2560px) {
  h1 { font-size: 53px; line-height: 80px; }
  h2 { font-size: 42px; line-height: 64px; }
  h3 { font-size: 38px; line-height: 52px; }
  h4 { font-size: 36px; line-height: 44px; }
  h5 { font-size: 30px; line-height: 42px; }
  h6 { font-size: 24px; line-height: 32px; }
}