/* =====================================================
   VUI CƯỜI LÊN (VCL) - BRAND DESIGN TOKENS
   Version: 1.0  |  Cập nhật: 2026-08-27
   Nguồn chuẩn: https://vuicuoilen.vn/brand
   -----------------------------------------------------
   File này là NGUỒN DUY NHẤT cho màu sắc, font, spacing
   của mọi dự án mang thương hiệu Vui Cười Lên.
   Copy nguyên file này vào dự án mới, import trước mọi CSS khác.
   ===================================================== */

:root {
  /* ---------- BRAND / PRIMARY (Hồng - lấy từ logo) ---------- */
  --primary-color: #FF69B4;   /* Hồng chủ đạo. Dùng cho: nền nút, gradient, icon, viền, highlight */
  --primary-dark:  #E91E8C;   /* Hồng đậm. Dùng cho: hover, đáy gradient, trạng thái active */
  --primary-light: #FFAEC9;   /* Hồng nhạt. Dùng cho: đỉnh gradient, nền mềm, selection */
  --primary-deep:  #C2185B;   /* Hồng sâu ĐẠT AA (5.87:1 với trắng).
                                 BẮT BUỘC dùng cho: chữ hồng trên nền trắng, link,
                                 nền nút có chữ nhỏ. KHÔNG dùng #FF69B4 cho chữ. */

  /* ---------- SECONDARY (Tím - bổ trợ) ---------- */
  --secondary-color: #9B59B6; /* Tím bổ trợ. Dùng cho: badge phụ, biểu đồ, phân biệt nhóm dịch vụ */
  --secondary-dark:  #8E44AD; /* Tím đậm. Dùng cho: hover của secondary, chữ tím trên trắng (5.87:1) */
  --secondary-light: #BB8FCE; /* Tím nhạt. Nền/viền mềm. KHÔNG dùng cho chữ */

  /* ---------- ACCENT ---------- */
  --accent-color: #FFD1DC;    /* Hồng phấn. Chỉ dùng làm NỀN (badge, tag, khối nổi). Không dùng cho chữ */

  /* ---------- STATUS ---------- */
  --success-color: #2ECC71;   /* Thành công. Nền + icon. Chữ xanh trên trắng dùng #1E8449 */
  --warning-color: #F39C12;   /* Cảnh báo. Nền + icon. Chữ cam trên trắng dùng #B35C00 */
  --danger-color:  #E74C3C;   /* Lỗi / xoá. Nền + icon. Chữ đỏ trên trắng dùng #C0392B */
  --info-color:    #3498DB;   /* Thông tin trung tính */

  /* ---------- NEUTRAL ---------- */
  --dark-color:  #2D2D2D;     /* Nền footer, nền tối, tiêu đề lớn */
  --light-color: #FFF0F5;     /* Nền section xen kẽ (hồng phớt), viền input mặc định */
  --text-color:  #333333;     /* Chữ body (12.63:1) */
  --text-light:  #666666;     /* Chữ phụ, mô tả (5.74:1 - đạt AA) */
  --text-muted:  #999999;     /* Chỉ dùng cho chữ ≥ 24px hoặc placeholder (2.85:1 - KHÔNG đạt AA) */
  --border-color: #EAEAEA;    /* Viền chia khối */
  --white: #FFFFFF;
  --black: #000000;

  /* ---------- GRADIENTS (theo gradient của logo) ---------- */
  --gradient-primary: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-color) 100%);
  --gradient-warm:    linear-gradient(135deg, #FF69B4 0%, #FFAEC9 100%);
  --gradient-purple:  linear-gradient(135deg, #9B59B6 0%, #FF69B4 100%);

  /* ---------- SHADOW ---------- */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);    /* Nút, header */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);  /* Card, hover nút */
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);   /* Card hover, dropdown */
  --shadow-xl: 0 12px 48px rgba(0,0,0,0.25); /* Modal */

  /* ---------- RADIUS ---------- */
  --border-radius:    12px;   /* Nút, input, card nhỏ */
  --border-radius-lg: 20px;   /* Card lớn, khối nổi */
  --border-radius-pill: 999px;/* Badge, tag, nút tròn */

  /* ---------- TYPOGRAPHY ---------- */
  --font-primary: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;  /* Nút, nav, label */
  --font-weight-bold: 700;      /* Tiêu đề nhỏ */
  --font-weight-black: 800;     /* H1, H2, logo-text */
  --line-height-base: 1.6;      /* Body */
  --line-height-relaxed: 1.8;   /* Đoạn văn tiếng Việt (có dấu, cần thoáng) */
  --line-height-tight: 1.2;     /* H1 */

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-pad: 20px;
  --section-pad-y: 80px;

  /* ---------- MOTION ---------- */
  --transition: all 0.3s ease;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Hiệu ứng "nhún vui" đặc trưng VCL */
}

/* =====================================================
   BASE STYLES
   -----------------------------------------------------
   Phần dưới đây KHÔNG phải token mà là style áp dụng ngay.
   Đây là những thứ phải giống nhau ở mọi sản phẩm VCL,
   nạp file này là có luôn, không phải chép lại từng dự án.
   ===================================================== */

/* ---------- Thanh cuộn chuẩn VCL ---------- */
/* Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--light-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--primary-light) 0%,
    var(--primary-color) 50%,
    var(--secondary-color) 100%);
  border-radius: 10px;
  border: 2px solid var(--light-color); /* viền cùng màu rãnh, tạo cảm giác nổi */
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    var(--primary-color) 0%,
    var(--primary-dark) 50%,
    var(--secondary-dark) 100%);
  border-color: var(--white);
}

::-webkit-scrollbar-thumb:active {
  background: var(--primary-dark); /* đang kéo thì bỏ gradient */
}

::-webkit-scrollbar-corner {
  background: var(--light-color);
}

/* Firefox: không hỗ trợ gradient cho thanh cuộn, dùng màu đặc */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--light-color);
}

/* ---------- Màu bôi đen chữ ---------- */
::selection {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ---------- Chặn trang trượt ngang ---------- */
/* Bảng rộng, khối code, lưới ngang phải tự cuộn trong khung của nó
   bằng overflow-x: auto, không được đẩy cả trang trượt ngang. */
body {
  overflow-x: hidden;
}

/* ---------- Tôn trọng người tắt chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}