Bộ nhận diện
Vui Cười Lên

<!-- 1. Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<!-- 2. Icon -->
<script src="https://unpkg.com/lucide@0.460.0"></script>

<!-- 3. Token thương hiệu, nạp TRƯỚC mọi CSS khác -->
<link rel="stylesheet" href="https://vuicuoilen.vn/css/brand-tokens.css">
<link rel="stylesheet" href="css/app.css">

<!-- 4. Favicon -->
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/trinhleminhan/img-all-site/main/vuicuoilen.com/favicon.png">

<a href="/" class="logo">
  <div class="logo-letters">
    <img src=".../V-VCL.svg" alt="V" class="logo-letter">
    <img src=".../C-VCL.svg" alt="C" class="logo-letter">
    <img src=".../L-VCL.svg" alt="L" class="logo-letter">
  </div>
  <span class="logo-text">Vui Cười Lên</span>
</a>

<style>
.logo-letters { display:flex; align-items:flex-end; gap:2px; height:45px; }
.logo-letter  { height:40px; width:auto; transform-origin:bottom center;
                transition: transform .3s var(--ease-bounce); }
.logo-text    { font-size:1.5rem; font-weight:800;
                background: var(--gradient-primary);
                -webkit-background-clip:text; background-clip:text;
                -webkit-text-fill-color:transparent; }
</style>

<!-- ĐÚNG: cả khối logo nằm trong một thẻ a -->
<a href="/" class="logo" aria-label="Vui Cười Lên, về trang chủ">
  <div class="logo-letters">
    <img src=".../V-VCL.svg" alt="" class="logo-letter">
    <img src=".../C-VCL.svg" alt="" class="logo-letter">
    <img src=".../L-VCL.svg" alt="" class="logo-letter">
  </div>
  <span class="logo-text">Vui Cười Lên</span>
</a>

<!-- SAI: logo trơ, không bấm được -->
<div class="logo">
  <img src=".../vuicuoilen.png" alt="Vui Cười Lên">
</div>

<!-- SAI: mỗi chữ một link, screen reader đọc thành ba link rời -->
<a href="/"><img src=".../V-VCL.svg" alt="V"></a>
<a href="/"><img src=".../C-VCL.svg" alt="C"></a>
<a href="/"><img src=".../L-VCL.svg" alt="L"></a>

@keyframes logoJump {
  0%   { transform: translateY(0)     scaleY(1)    scaleX(1); }
  20%  { transform: translateY(0)     scaleY(.85)  scaleX(1.08); }
  40%  { transform: translateY(-12px) scaleY(1.1)  scaleX(.95); }
  60%  { transform: translateY(-14px) scaleY(1.05) scaleX(1); }
  75%  { transform: translateY(-4px)  scaleY(1)    scaleX(1); }
  85%  { transform: translateY(0)     scaleY(.95)  scaleX(1.03); }
  100% { transform: translateY(0)     scaleY(1)    scaleX(1); }
}
.logo:hover .logo-letter:nth-child(1){ animation: logoJump .5s var(--ease-bounce) forwards; }
.logo:hover .logo-letter:nth-child(2){ animation: logoJump .5s var(--ease-bounce) .08s forwards; }
.logo:hover .logo-letter:nth-child(3){ animation: logoJump .5s var(--ease-bounce) .16s forwards; }

<link rel="icon" type="image/png"
      href="https://raw.githubusercontent.com/trinhleminhan/img-all-site/main/vuicuoilen.com/favicon.png">
<link rel="apple-touch-icon"
      href="https://raw.githubusercontent.com/trinhleminhan/img-all-site/main/vuicuoilen.com/favicon.png">

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">

--font-primary: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

p, li { line-height: 1.8; text-wrap: pretty; hyphens: none; }
h1, h2, h3, h4 { text-wrap: balance; }
.prose { max-width: 65ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 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 .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, 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);
}

/* Bọc bảng rộng trong khối này */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chặn tuyệt đối trang trượt ngang */
body { overflow-x: hidden; }

<div class="loading-screen">
  <div class="loading-logo-container">
    <div class="letter-wrapper">
      <img src=".../V-VCL.svg" alt="" class="loading-letter letter-v">
      <div class="letter-shadow"></div>
    </div>
    <div class="letter-wrapper">
      <img src=".../C-VCL.svg" alt="" class="loading-letter letter-c">
      <div class="letter-shadow"></div>
    </div>
    <div class="letter-wrapper">
      <img src=".../L-VCL.svg" alt="" class="loading-letter letter-l">
      <div class="letter-shadow"></div>
    </div>
    <div class="sparkles">
      <span class="sparkle"></span><span class="sparkle"></span>
      <span class="sparkle"></span><span class="sparkle"></span>
      <span class="sparkle"></span>
    </div>
  </div>
  <p class="loading-text">Đang tải niềm vui...</p>
</div>

.loading-screen {
  position: fixed; inset: 0;
  background: var(--gradient-primary);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  z-index: 9999; overflow: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; }

.loading-logo-container {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 8px; margin-bottom: 40px; position: relative; height: 180px;
}
.letter-wrapper { display: flex; flex-direction: column; align-items: center; }

.loading-letter {
  height: 120px; width: auto; transform-origin: bottom center;
  filter: drop-shadow(0 8px 25px rgba(255,255,255,.4));
}
.letter-v { animation: happyJump .8s cubic-bezier(.28,.84,.42,1) infinite;        }
.letter-c { animation: happyJump .8s cubic-bezier(.28,.84,.42,1) .15s infinite;   }
.letter-l { animation: happyJump .8s cubic-bezier(.28,.84,.42,1) .3s  infinite;   }

@keyframes happyJump {
  0%, 100% { transform: translateY(0)     scaleY(1)    scaleX(1);    }
  10%      { transform: translateY(0)     scaleY(.9)   scaleX(1.05); }
  30%      { transform: translateY(-50px) scaleY(1.1)  scaleX(.95);  }
  50%      { transform: translateY(-55px) scaleY(1.05) scaleX(1);    }
  70%      { transform: translateY(-20px) scaleY(1)    scaleX(1);    }
  80%      { transform: translateY(0)     scaleY(.92)  scaleX(1.04); }
  90%      { transform: translateY(-8px)  scaleY(1.02) scaleX(.98);  }
}

/* Bóng dưới chân, co lại khi chữ lên đỉnh */
.letter-shadow {
  width: 60px; height: 12px; margin-top: 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.25) 0%, transparent 70%);
  animation: shadowPulse .8s cubic-bezier(.28,.84,.42,1) infinite;
}
.letter-wrapper:nth-child(2) .letter-shadow { animation-delay: .15s; }
.letter-wrapper:nth-child(3) .letter-shadow { animation-delay: .3s;  }

@keyframes shadowPulse {
  0%, 100%  { transform: scaleX(1);   opacity: .6; }
  30%, 50%  { transform: scaleX(.5);  opacity: .2; }
  80%       { transform: scaleX(1.1); opacity: .7; }
}

.loading-text {
  color: #fff; font-size: 1.1rem; font-weight: 600;
  animation: textPulse 2s ease-in-out infinite;
}
@keyframes textPulse { 0%,100% { opacity:.7 } 50% { opacity:1 } }

@media (max-width: 480px) {
  .loading-letter { height: 80px; }
  .loading-logo-container { gap: 5px; height: 130px; }
  .letter-shadow { width: 40px; height: 8px; }
}

function initLoading() {
  const screen = document.querySelector('.loading-screen');
  if (!screen) return;

  const hide = () => {
    screen.classList.add('hidden');
    document.body.style.overflow = 'auto';
  };

  // Tắt ngay khi trang sẵn sàng, KHÔNG chờ hết 1.5 giây
  if (document.readyState === 'complete') hide();
  else window.addEventListener('load', hide, { once: true });

  // Chốt chặn: dù có gì kẹt cũng không giữ quá 1.5 giây
  setTimeout(hide, 1500);
}
document.addEventListener('DOMContentLoaded', initLoading);

.skeleton {
  background: linear-gradient(90deg,
    var(--light-color) 25%,
    #FFE4EF 50%,
    var(--light-color) 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skelShimmer 1.4s ease-in-out infinite;
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

async function submitForm(btn, payload) {
  const original = btn.innerHTML;
  btn.disabled = true;                       // khoá NGAY, chống bấm hai lần
  btn.innerHTML = '<span class="btn-spinner"></span>Đang gửi...';

  try {
    const res = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (!res.ok) throw new Error('Gửi thất bại');
    showToast('Đã gửi, chúng tôi sẽ liên hệ trong 24 giờ');
  } catch (err) {
    showToast('Không gửi được, vui lòng thử lại hoặc gọi 0981875139');
  } finally {
    btn.disabled = false;                    // LUÔN mở khoá, kể cả khi lỗi
    btn.innerHTML = original;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-letter, .letter-shadow,
  .sparkle, .skeleton, .btn-spinner { animation: none; }
  .loading-letter { transform: none; }
}

<!-- Báo cho trình đọc màn hình biết đang tải -->
<div class="loading-screen" role="status" aria-live="polite">
  <p class="loading-text">Đang tải niềm vui...</p>
</div>

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; font-size:1rem; font-weight:600;
  border-radius: var(--border-radius); transition: var(--transition);
  min-height:44px; cursor:pointer; border:none; font-family:var(--font-primary);
}
.btn-primary        { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Biến thể đặc, đạt WCAG AA cho chữ nhỏ */
.btn-solid          { background: var(--primary-deep); color:#fff; box-shadow: var(--shadow-sm); }
.btn-solid:hover    { background:#AD1457; transform: translateY(-2px); }

.btn-secondary      { background:#fff; color: var(--primary-deep); border:2px solid var(--primary-color); }
.btn-secondary:hover{ background: var(--primary-color); color:#fff; }

.btn-ghost          { background:transparent; color: var(--text-light); }
.btn-ghost:hover    { color: var(--primary-deep); background: var(--light-color); }

.btn-danger         { background: var(--danger-color); color:#fff; }
.btn-icon           { width:45px; height:45px; border-radius:50%; padding:0; }
.btn:disabled       { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.section-tag {
  display:inline-block; background: var(--gradient-primary); color:#fff;
  padding:8px 20px; border-radius:20px;
  font-size:.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
}

.card {
  background:#fff; border-radius: var(--border-radius-lg); padding:35px;
  box-shadow: var(--shadow-sm); transition: var(--transition);
  position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--gradient-primary);
  transform: scaleX(0); transform-origin:left; transition: var(--transition);
}
.card:hover          { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card:hover::before  { transform: scaleX(1); }

.team-card {
  background:#fff; border-radius: var(--border-radius-lg); padding:30px;
  box-shadow: var(--shadow-sm); position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  transition: transform .3s ease, box-shadow .3s ease;

  /* Tối ưu hiệu năng, xem phần dưới */
  contain: layout style paint;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Lớp 1: viền phát sáng, chỉ chừa lại vòng 2px */
.team-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:2px;
  background: radial-gradient(
    400px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    var(--card-glow-color, rgba(255,107,107,.5)),
    transparent 40%
  );
  /* Mẹo mask: phủ kín rồi khoét rỗng ruột, chỉ còn viền */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0; transition: opacity .4s ease-out; pointer-events:none;
}

/* Lớp 2: quầng sáng nền, nằm dưới nội dung */
.team-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(
    300px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    var(--card-glow-color, rgba(255,107,107,.08)),
    transparent 40%
  );
  opacity:0; transition: opacity .4s ease-out; pointer-events:none;
  z-index:-1;
}

/* Proximity: con trỏ ở BẤT KỲ ĐÂU trong lưới thì CẢ CỤM cùng sáng.
   Đây là chi tiết quan trọng nhất, đừng đổi thành .team-card:hover */
.teams-grid:hover .team-card::before,
.teams-grid:hover .team-card::after {
  opacity:1;
  transition: opacity .15s ease-in;  /* vào nhanh, ra chậm */
}

.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Màu quầng sáng riêng cho từng nhóm */
.team-card:has(.team-icon.marketing) { --card-glow-color: rgba(255,107,107,.6); }
.team-card:has(.team-icon.legal)     { --card-glow-color: rgba(74,144,164,.6); }
.team-card:has(.team-icon.business)  { --card-glow-color: rgba(102,126,234,.6); }
.team-card:has(.team-icon.dev)       { --card-glow-color: rgba(17,153,142,.6); }
.team-card:has(.team-icon.hr)        { --card-glow-color: rgba(255,105,180,.6); }
.team-card:has(.team-icon.it)        { --card-glow-color: rgba(52,152,219,.6); }

function initCardGlowEffect() {
  const grids = document.querySelectorAll('.teams-grid, .channel-grid');

  grids.forEach(grid => {
    if (grid.dataset.glowInit) return;   // chống gắn listener hai lần
    grid.dataset.glowInit = 'true';

    const cards = Array.from(grid.querySelectorAll('.team-card, .channel-card'));
    if (!cards.length) return;

    let rafId = null;
    let mouseX = 0, mouseY = 0;

    // MỘT listener cho cả lưới, không phải mỗi card một cái
    grid.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;

      // Bỏ qua nếu đã có khung hình đang chờ.
      // mousemove bắn ~120 lần/giây, màn hình chỉ vẽ 60 lần/giây.
      if (rafId) return;

      rafId = requestAnimationFrame(() => {
        for (let i = 0; i < cards.length; i++) {
          const rect = cards[i].getBoundingClientRect();
          cards[i].style.setProperty('--mouse-x', (mouseX - rect.left) + 'px');
          cards[i].style.setProperty('--mouse-y', (mouseY - rect.top)  + 'px');
        }
        rafId = null;
      });
    }, { passive: true });
  });
}

document.addEventListener('DOMContentLoaded', initCardGlowEffect);
setTimeout(initCardGlowEffect, 1000);  // chạy lại cho card render bằng JS

/**
 * Đọc màu chủ đạo của một ảnh đã tải xong.
 * Trả về [r, g, b], hoặc null nếu không đọc được.
 * Ảnh BẮT BUỘC có crossorigin="anonymous" và server phải trả
 * header Access-Control-Allow-Origin, nếu không canvas sẽ bị "nhiễm bẩn"
 * và getImageData ném lỗi bảo mật.
 */
function getDominantColor(img) {
  const S = 32;                       // 32x32 là đủ, nhanh hơn ảnh gốc hàng trăm lần
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = S;
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  ctx.drawImage(img, 0, 0, S, S);

  let data;
  try {
    data = ctx.getImageData(0, 0, S, S).data;
  } catch (e) {
    return null;                      // thiếu CORS, giữ màu mặc định
  }

  const buckets = new Map();
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];
    if (a < 200) continue;                       // bỏ pixel trong suốt
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    if (max < 45 || min > 220) continue;         // bỏ quá tối và quá sáng
    if (max - min < 25) continue;                // bỏ pixel xám

    // Gom sắc độ gần nhau vào chung một ô
    const key = (r >> 4) + '|' + (g >> 4) + '|' + (b >> 4);
    const acc = buckets.get(key) || { n: 0, r: 0, g: 0, b: 0 };
    acc.n++; acc.r += r; acc.g += g; acc.b += b;
    buckets.set(key, acc);
  }

  let best = null;
  buckets.forEach(v => { if (!best || v.n > best.n) best = v; });
  if (!best) return null;             // ảnh toàn xám hoặc toàn trắng

  return [
    Math.round(best.r / best.n),
    Math.round(best.g / best.n),
    Math.round(best.b / best.n)
  ];
}

/** Gán màu quầng sáng cho card theo ảnh đại diện bên trong nó. */
function applyAvatarGlow(card) {
  const img = card.querySelector('.team-avatar');
  if (!img) return;                   // card dùng icon, giữ màu gán cứng

  const run = () => {
    const rgb = getDominantColor(img);
    if (!rgb) return;                 // đọc lỗi thì giữ màu mặc định
    card.style.setProperty('--card-glow-color', `rgba(${rgb.join(',')},.6)`);
  };

  // Ảnh có thể đã nằm sẵn trong cache
  if (img.complete && img.naturalWidth) run();
  else img.addEventListener('load', run, { once: true });
}

document.querySelectorAll('.team-card, .channel-card').forEach(applyAvatarGlow);

@media (prefers-reduced-motion: reduce) {
  .team-card::before,
  .team-card::after { display: none; }
  .team-card:hover  { transform: none; }
}

.form-group label {
  display:block; font-weight:600; color: var(--text-color); margin-bottom:8px;
}
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:15px;
  border:2px solid var(--light-color); border-radius: var(--border-radius);
  font-family:inherit; font-size:1rem; transition: var(--transition);
}
.form-group input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255,105,180,.15);
  outline: 2px solid transparent; /* giữ outline cho chế độ tương phản cao */
}
.form-group .error { color:#C0392B; font-size:.9rem; margin-top:6px; }
.form-group input[aria-invalid="true"] { border-color: var(--danger-color); }

# 1. Luôn đọc cả hai trước khi bắt tay
curl -s https://vuicuoilen.vn/llms.txt        # NỘI DUNG: dịch vụ, bài viết, URL
curl -s https://vuicuoilen.vn/data/brand.json # HÌNH THỨC: màu, font, component

# 2. Cần biết toàn bộ URL đang tồn tại
curl -s https://vuicuoilen.vn/sitemap.xml

# 3. Cần chi tiết một trang cụ thể thì đọc chính trang đó
curl -s https://vuicuoilen.vn/services/social-media

Bạn đang làm việc cho thương hiệu Vui Cười Lên (VCL).

BẮT BUỘC đọc trước khi viết bất kỳ dòng code hoặc nội dung nào:
  https://vuicuoilen.vn/llms.txt                 (NỘI DUNG: dịch vụ, giá, bài viết, URL)
  https://vuicuoilen.vn/data/brand.json          (HÌNH THỨC: token máy đọc)
  https://vuicuoilen.vn/docs/brand-guidelines.md (hướng dẫn đầy đủ)
  https://vuicuoilen.vn/css/brand-tokens.css     (biến CSS)

Ràng buộc về nội dung:
- KHÔNG bịa tên dịch vụ, giá, tiêu đề bài viết hay đường dẫn.
  Mọi thứ đó lấy từ llms.txt, được sinh động từ dữ liệu thật.
- Link nội bộ không có đuôi .html, đối chiếu với sitemap.xml.

Ràng buộc về thiết kế:
- Màu: chỉ dùng token trong brand.json. Hồng chủ đạo #FF69B4 chỉ làm nền,
  chữ hồng dùng #C2185B.
- Font: Nunito, weight 400/500/600/700/800. Không thêm font khác.
- Đoạn văn tiếng Việt: line-height 1.8.
- Icon: Lucide dạng nét. Không emoji trong UI.
- Mỗi màn hình chỉ một nút primary.
- Khối logo luôn bọc trong <a href="/">.
- Thanh cuộn dùng gradient hồng chuẩn VCL, không để mặc định xám.
- Có trạng thái tải: khung xương khi gọi dữ liệu, spinner trong nút khi gửi form.
- Đạt WCAG 2.1 AA: tương phản chữ >= 4.5:1, vùng chạm >= 44px.
- Có khối prefers-reduced-motion.

Ràng buộc về câu chữ:
- Không dùng dấu gạch dài, không hứa hẹn tuyệt đối.