/* ==========================================================================
   FILE: base.css
   MỤC ĐÍCH: Thiết lập CSS cơ bản toàn cục (Global) cho toàn bộ trang web
   ========================================================================== */

body {
  /* Sử dụng font chữ an toàn, phổ biến trên hầu hết hệ điều hành */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8fafc; /* Màu nền xám nhạt dịu mắt (Tương đương Tailwind slate-50) */
}

/* ==========================================================================
   TÙY CHỈNH THANH CUỘN (SCROLLBAR) CHUNG
   Mục đích: Giúp thanh cuộn bớt thô và tiệp màu với giao diện ứng dụng
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px; /* Độ rộng của thanh cuộn dọc */
  height: 8px; /* Độ cao của thanh cuộn ngang */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Màu nền của rãnh cuộn */
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* Màu của thanh trượt */
  border-radius: 4px; /* Bo góc thanh trượt */
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* Đậm hơn một chút khi di chuột vào */
}

/* ==========================================================================
   TÙY CHỈNH THANH CUỘN RIÊNG CHO MODAL HƯỚNG DẪN
   Mục đích: Thanh cuộn mỏng hơn để không chiếm diện tích vùng đọc chữ
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Nền trong suốt */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px; /* Bo góc tròn trịa hơn */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}