body {
      font-family: 'Inter', sans-serif;
      background-color: #f9fafb;
      color: #111827;
    }
    .hero-section {
      background-image: url('/images/cantho.jpg');
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .hero-overlay {
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
    }

    .grid.overflow-x-auto {
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #d1d5db #f3f4f6;
      gap: 1.5rem;
      padding-bottom: 1rem;
    }
    .grid.overflow-x-auto::-webkit-scrollbar {
      height: 8px;
      background-color: #f3f4f6;
    }
    .grid.overflow-x-auto::-webkit-scrollbar-thumb {
      background-color: #d1d5db;
      border-radius: 10px;
    }
 .nav-link {
    position: relative;
    color: #374151; /* text-gray-700 */
    transition: all 0.2s ease;
  }
  .nav-link:hover {
    color: #f97316; /* orange-500 */
  }
  .nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -4px;
    background-color: #f97316;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after,
  .nav-link.active::after {
    width: 100%;
  }
  .nav-link.active {
    color: #f97316;
    font-weight: 600;
  }
  :root {
      --primary: #FF5722;
      --primary-hover: #E64A19;
      --bg: #f9fafb;
      --text: #111827;
      --secondary-text: #4b5563;
      --card-bg: #fff;
      --filter-bg: #FFFFFF;
      --border-color: #e5e7eb;
    }
    body { margin:0; font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

    /* NAVBAR */
    .navbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--card-bg); border-bottom:1px solid var(--border-color); position:sticky; top:0; z-index:1000; }
    .logo { display:flex; align-items:center; font-weight:800; font-size:20px; gap:8px; color:var(--primary); text-decoration:none; }
    .flag { width:24px; height:24px; border-radius:2px; }
    .navbar nav a { margin:0 12px; text-decoration:none; color:var(--secondary-text); font-weight:600; transition:0.2s; display:inline-flex; align-items:center; gap:5px;}
    .navbar nav a:hover, .navbar nav a.active { color:var(--primary); }
    .navbar nav a.active { font-weight:700; position:relative; }
    .navbar nav a.active::after { content:''; position:absolute; bottom:-15px; left:0; width:100%; height:3px; background:var(--primary); border-radius:2px; }
    .actions { display:flex; align-items:center; gap:10px; }
    .btn { border:none; padding:8px 16px; border-radius:20px; cursor:pointer; font-weight:600; font-size:14px; transition:0.2s; text-decoration:none; display:inline-block; }
    .btn.primary { background:var(--primary); color:#fff; white-space:nowrap; }
    .btn.primary:hover { background:var(--primary-hover); }
    .icon-btn { background:none; border:none; font-size:24px; cursor:pointer; color:var(--secondary-text); padding:0; }