/* Tailwind CSS bố cục chính cho mọi phần tử */
/* Reset CSS */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Bao gồm padding và border trong kích thước phần tử */
}

/* Khai báo biến */
:root {
  /* Bảng màu cho chung */
  --clr-primary: #3498db; /* Màu chính */
  --clr-primary-dark: #2980b9; /* Màu chính đậm */
  --clr-secondary: #2ecc71; /* Màu phụ */
  --clr-secondary-dark: #27ae60; /* Màu phụ đậm */
  --clr-accent: #e74c3c; /* Màu nhấn */

  /* Màu nền và văn bản */
  --clr-text: #333333; /* Màu văn bản chính */
  --clr-text-muted: #777777; /* Màu văn bản phụ */
  --clr-bg: #ffffff; /* Màu nền chính */
  --clr-bg-nav: #efe8d9; /* Màu nền thanh điều hướng */
  --clr-bg-hover: #3498db; /* Màu nền khi hover */
  --clr-bg-content: #f5f5f5; /* Màu nền nội dung */
  --clr-bg-alt: #f9f9f9; /* Màu nền thay thế */
  --clr-border: #dddddd; /* Màu viền */
  --clr-toast-bg: #fffae6; /* Màu nền thông báo */
  --clr-toast-text: #464747; /* Màu văn bản thông báo */
  --clr-notice-bg: #fffae6; /* Màu nền thông báo */
  --clr-notice-text: #665c00; /* Màu chữ thông báo */

  /* Kiểu chữ */
  --fs-scale: 62.5%; /* Tỷ lệ kích thước chữ */
  /* Khi --fs-scale = 62.5% -> 1rem = 10px, dùng rem tiện cho tính toán */
  --fs-xs: 1.2rem; /* 12px */
  --fs-sm: 1.4rem; /* 14px */
  --fs-base: 1.6rem; /* 16px */
  --fs-lg: 2rem; /* 20px */
  --fs-xl: 2.4rem; /* 24px */
  --fs-2xl: 3.2rem; /* 32px */
  --fs-3xl: 4.8rem; /* 48px */
  --fs-4xl: 6.4rem; /* 64px */

  --fw-normal: 400; /* Bình thường */
  --fw-medium: 500; /* Trung bình */
  --fw-semibold: 600; /* Đậm vừa */
  --fw-bold: 700; /* Đậm */

  /* Khoảng cách */
  --sp-1: 0.25rem; /* 4px */
  --sp-2: 0.5rem; /* 8px */
  --sp-3: 0.75rem; /* 12px */
  --sp-4: 1rem; /* 16px */
  --sp-5: 1.25rem; /* 24px */
  --sp-6: 1.5rem; /* 32px */
  --sp-8: 2rem; /* 40px */
  --sp-10: 2.5rem; /* 48px */
  --sp-12: 3rem; /* 64px */

  /* Khác */
  --radius: 0.3rem; /* Bo góc */
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bóng cơ bản */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* Bóng nhỏ */
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bóng vừa */
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2); /* Bóng lớn */

  --transition: 200ms ease; /* Chuyển tiếp mượt mà */
  --container: 1200px; /* Chiều rộng tối đa của container */
}

html {
  /* Sử dụng biến --fs-scale để chuẩn hoá: 62.5% => 1rem = 10px */
  font-size: var(--fs-scale); /* Ví dụ: 62.5% */
  scroll-behavior: smooth; /* Cuộn mượt mà */
}

body {
  width: 90%; /* Chiều rộng của trang */
  margin: 0 auto; /* Căn giữa trang */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Font chữ chính */
  font-size: var(--fs-base); /* Kích thước chữ cơ bản */
  font-weight: var(--fw-normal); /* Độ đậm chữ cơ bản */
  line-height: 1.5; /* Chiều cao dòng */
  color: var(--clr-text); /* Màu chữ chính */
  background-color: var(--clr-bg-content); /* Màu nền chính */
}

a {
  color: inherit; /* Kế thừa màu chữ từ cha */
  text-decoration: none; /* Bỏ gạch chân */
  transition: color var(--transition); /* Chuyển tiếp màu sắc */
}
a:hover {
  color: var(--clr-primary); /* Màu chữ khi hover */
}
/*Bố cục cho trang chủ*/

.container {
  max-width: var(--container); /* Chiều rộng tối đa của container */
  margin: 0 auto; /* Căn giữa container */
  padding: 0 var(--sp-4); /* Padding ngang */
}
.header,
.footer {
  background-color: var(--clr-bg); /* Màu nền thanh điều hướng */
  padding: var(--sp-2) 0; /* Padding trên dưới */
  box-shadow: var(--shadow-sm); /* Bóng nhỏ */
}

.main {
  padding: var(--sp-6) 0; /* Padding trên dưới */
}
.section {
  margin-bottom: var(--sp-8); /* Khoảng cách dưới mỗi section */
}
.section:last-child {
  margin-bottom: 0; /* Bỏ khoảng cách dưới cùng */
}

/* Thuộc tính thẻ */

.card {
  background-color: #ffffff; /* Màu nền thẻ */
  border: 1px solid var(--clr-border); /* Viền thẻ */
  border-radius: var(--radius); /* Bo góc thẻ */
  box-shadow: var(--shadow-sm); /* Bóng nhỏ */
  padding: var(--sp-4); /* Padding trong thẻ */
  transition: box-shadow var(--transition); /* Chuyển tiếp bóng */
}

.card:hover {
  box-shadow: var(--shadow-md); /* Bóng thẻ khi hover */
}

/* Liên kết điều hướng */
.nav-link {
  margin-right: var(--sp-6); /* Khoảng cách giữa các liên kết */
  font-weight: var(--fw-medium); /* Độ đậm chữ liên kết */
}
.nav-link:last-child {
  margin-right: 0; /* Bỏ khoảng cách sau liên kết cuối */
}
.nav-link:hover {
  color: var(--clr-primary); /* Màu chữ liên kết khi hover */
}

/* Button */
.button {
  display: inline-block; /* Hiển thị dạng khối nội tuyến */
  padding: var(--sp-2) var(--sp-4); /* Padding trong nút */
  background-color: var(--clr-primary); /* Màu nền nút */
  color: #ffffff; /* Màu chữ nút */
  border-radius: var(--radius); /* Bo góc nút */
  box-shadow: var(--shadow); /* Bóng nút */
  transition: background-color var(--transition), box-shadow var(--transition); /* Chuyển tiếp màu nền và bóng */
}
.button:hover {
  background-color: var(--clr-primary-dark); /* Màu nền nút khi hover */
  box-shadow: var(--shadow-md); /* Bóng nút khi hover */
}
.button-primary {
  background-color: var(--clr-primary); /* Màu nền nút chính */
}
.button-primary:hover {
  background-color: var(--clr-primary-dark); /* Màu nền nút chính khi hover */
}
.button-secondary {
  background-color: var(--clr-secondary); /* Màu nền nút phụ */
}
.button-secondary:hover {
  background-color: var(--clr-secondary-dark); /* Màu nền nút phụ khi hover */
}
.button-accent {
  background-color: var(--clr-accent); /* Màu nền nút nhấn */
}
.button-accent:hover {
  background-color: darken(
    var(--clr-accent),
    10%
  ); /* Màu nền nút nhấn khi hover */
}
.button:disabled {
  background-color: var(--clr-border); /* Màu nền nút khi bị vô hiệu hóa */
  cursor: not-allowed; /* Con trỏ không được phép */
  box-shadow: none; /* Bỏ bóng */
}
.button:disabled:hover {
  background-color: var(--clr-border); /* Giữ nguyên màu nền khi hover */
}

/* Toast Notification */
.toast {
  position: fixed; /* Cố định vị trí */
  bottom: 20px; /* Cách đáy màn hình */
  left: 20px; /* Cách trái màn hình */
  background-color: var(--clr-toast-bg); /* Màu nền thông báo */
  color: var(--clr-toast-text); /* Màu chữ thông báo */
  padding: var(--sp-3) var(--sp-4); /* Padding trong thông báo */
  border-radius: var(--radius); /* Bo góc thông báo */
  box-shadow: var(--shadow-lg); /* Bóng lớn */
  z-index: 9999; /* Ưu tiên hiển thị trên cùng */
  display: flex; /* Hiển thị theo hàng */
  align-items: center; /* Căn giữa theo chiều dọc */
  gap: var(--sp-2); /* Khoảng cách giữa các phần tử */
  max-width: 350px; /* Chiều rộng tối đa */
  animation: slideInLeft 0.3s ease-out; /* Hiệu ứng xuất hiện */
  font-size: var(--fs-normal); /* Kích thước chữ */
  font-weight: bold; /* Chữ in đậm */
}

.toast.hide {
  animation: slideOutLeft 0.3s ease-out forwards; /* Hiệu ứng ẩn đi */
}

.toast__icon {
  font-size: var(--fs-lg); /* Kích thước chữ lớn */
  flex-shrink: 0; /* Không co giãn */
}

.toast__message {
  flex: 1; /* Chiếm không gian còn lại */
  line-height: 1.4; /* Chiều cao dòng */
}

.toast__close {
  background: transparent; /* Nền trong suốt */
  border: none; /* Bỏ viền */
  color: var(--clr-toast-text); /* Màu chữ */
  font-size: var(--fs-lg); /* Kích thước chữ lớn */
  cursor: pointer; /* Con trỏ chuột khi hover */
  padding: 0; /* Padding trong suốt */
  line-height: 1; /* Chiều cao dòng */
  opacity: 0.7; /* Độ mờ */
  transition: opacity var(--transition); /* Chuyển tiếp độ mờ */
  flex-shrink: 0; /* Không co giãn */
}

.toast__close:hover {
  opacity: 1; /* Độ mờ khi hover */
}

/* Keyframes cho hiệu ứng toast */
@keyframes slideInLeft {
  from {
    transform: translateX(-400px); /* Vị trí ban đầu */
    opacity: 0; /* Độ mờ ban đầu */
  }
  to {
    transform: translateX(0); /* Vị trí kết thúc */
    opacity: 1; /* Độ mờ khi kết thúc */
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0); /* Vị trí ban đầu */
    opacity: 1; /* Độ mờ ban đầu */
  }
  to {
    transform: translateX(-400px); /* Vị trí kết thúc */
    opacity: 0; /* Độ mờ khi kết thúc */
  }
}