/**Reset CSS, Scrollbar, và các style cơ bản cho body, h1-h6.**/
/**File này sẽ đóng vai trò là "nền móng" cho website. Nó chứa các quy tắc reset trình duyệt, 
cài đặt font chữ chung, thanh cuộn (scrollbar), và các lớp tiện ích (utility classes) dùng chung
 cho toàn bộ web.**/
/* ============================================
   BASE.CSS - THIẾT LẬP CƠ BẢN & UTILITIES
   ============================================ */

/* 1. RESET & BASIC SETUP */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
}

/* 2. PAGE VISIBILITY (QUAN TRỌNG CHO SINGLE PAGE APP) */
.page {
  display: none;
  width: 100%;
  min-height: 100vh;
  padding-top: 80px; /* Tránh bị Header che */
  animation: fadeEffect 0.5s;
}

.page.active {
  display: block;
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 3. CUSTOM SCROLLBAR (THANH CUỘN ĐẸP) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-secondary) var(--bg-secondary);
}

/* 4. TYPOGRAPHY (FONT CHỮ CƠ BẢN) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", "Rajdhani", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.5px; /* Thu hẹp khoảng cách chữ xíu cho chặt chẽ */
}

h1 {
  font-size: var(--font-hero);
}
h2 {
  font-size: var(--font-xxl);
}
h3 {
  font-size: var(--font-xl);
}
h4 {
  font-size: var(--font-lg);
}

a {
  color: var(--accent-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-primary);
}

/* 5. UTILITY CLASSES (CÁC LỚP TIỆN ÍCH DÙNG CHUNG) */
.hidden {
  display: none !important;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-muted {
  color: var(--text-muted);
}
.text-success {
  color: var(--success);
}
.text-error {
  color: var(--error);
}
.text-warning {
  color: var(--warning);
}

/* Spacing Helpers */
.mt-1 {
  margin-top: var(--spacing-sm);
}
.mt-2 {
  margin-top: var(--spacing-md);
}
.mt-3 {
  margin-top: var(--spacing-lg);
}
.mb-1 {
  margin-bottom: var(--spacing-sm);
}
.mb-2 {
  margin-bottom: var(--spacing-md);
}
.mb-3 {
  margin-bottom: var(--spacing-lg);
}

/* Flex Helpers */
.flex {
  display: flex;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gap-1 {
  gap: var(--spacing-sm);
}
.gap-2 {
  gap: var(--spacing-md);
}
.gap-3 {
  gap: var(--spacing-lg);
}