/* =========================================================
 * MUSK MOTION
 *
 * Cấu hình CSS bắt buộc cho phần cuộn mượt.
 * ========================================================= */

/* =========================================================
 * CUỘN MƯỢT
 *
 * Class musk-smooth do motion.js gắn vào thẻ html khi cuộn mượt
 * thật sự chạy được.
 * ========================================================= */

/*
 * Tắt cuộn mượt sẵn có của trình duyệt. Để cả hai cùng chạy thì
 * chúng đánh nhau ở mỗi lần window.scrollTo và trang giật.
 */

html.musk-smooth,
html.musk-smooth body {
  scroll-behavior: auto !important;
}

/*
 * overflow-x: hidden trên html hoặc body biến chính thẻ đó thành
 * một vùng cuộn riêng, lúc đó vị trí cuộn của cửa sổ không đổi
 * và cuộn mượt lặng lẽ không chạy.
 *
 * Đổi sang clip: vẫn cắt phần tràn ngang y như hidden nhưng
 * KHÔNG tạo vùng cuộn, nên các thủ thuật nền tràn 100vw trong
 * theme vẫn an toàn.
 */

html.musk-smooth,
html.musk-smooth body {
  overflow-x: clip;
}

/* =========================================================
 * GIẢM CHUYỂN ĐỘNG
 *
 * Người dùng bật tuỳ chọn này trong hệ điều hành thì motion.js
 * không bật cuộn mượt, class musk-smooth cũng không được gắn -
 * ở đây chỉ cần chắc chắn trả cuộn về hành vi gốc.
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}