html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #FAF7F2;
      overflow-x: hidden;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    img, video {
      max-width: 100%;
    }

    .hero-bg {
      background-image: url("../images/hero_bg_new.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .hero-copy {
      max-width: 980px;
    }

    .hero-title {
      max-width: min(980px, calc(100vw - 3rem));
      font-size: clamp(2.35rem, 5.1vw, 4.35rem);
      line-height: 1.18;
      letter-spacing: 0;
      text-wrap: balance;
      overflow: visible;
    }

    .hero-title .block {
      padding-block: 0.06em;
    }

    .hero-title-desktop {
      display: block;
    }

    .hero-title-mobile {
      display: none;
    }

    @media (min-width: 768px) {
      .hero-bg {
        background-attachment: fixed;
      }
    }

    /* Hiệu ứng Fade In Up khi cuộn */
    .fade-in-up {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .fade-in-up.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Hiệu ứng nút bấm phát sáng */
    .btn-glow {
      position: relative;
      overflow: hidden;
    }

    .btn-glow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transform: rotate(45deg);
      transition: 0.5s;
      opacity: 0;
    }

    .btn-glow:hover::after {
      left: 120%;
      opacity: 1;
      transition: 0.7s ease-in-out;
    }

    /* Hiệu ứng hover cho thẻ card dịch vụ */
    .premium-card {
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .premium-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(31, 17, 15, 0.12);
      border-color: #EA580C;
    }

    /* Hiệu ứng zoom nhẹ cho hình ảnh */
    .img-container {
      overflow: hidden;
    }

    .img-zoom {
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .img-container:hover .img-zoom {
      transform: scale(1.06);
    }

    .group:hover .group-hover\:scale-105 {
      transform: scale(1.05);
    }

    .group:hover .group-hover\:scale-110 {
      transform: scale(1.1);
    }

    .group:hover .group-hover\:rotate-6 {
      transform: rotate(6deg);
    }

    .group:hover .group-hover\:translate-y-0 {
      transform: translateY(0);
    }

    .group:hover .group-hover\:translate-x-2 {
      transform: translateX(0.5rem);
    }

    .group:hover .group-hover\:opacity-90 {
      opacity: 0.9;
    }

    #sanpham .group img {
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #sanpham .group:hover img {
      transform: scale(1.1);
    }

    #sanpham .group .absolute.inset-0 {
      transition: opacity 0.3s ease;
    }

    #sanpham .group:hover .absolute.inset-0 {
      opacity: 0.9;
    }

    #sanpham .group .translate-y-4 {
      transition: transform 0.3s ease;
    }

    #sanpham .group:hover .translate-y-4 {
      transform: translateY(0);
    }

    /* Icon bay bay */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .animate-float {
      animation: float 3s ease-in-out infinite;
    }

    .subtle-grid-pattern {
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    @media (max-width: 767px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      header .h-20 {
        position: relative;
        width: 100vw !important;
        max-width: 100vw !important;
      }

      header .max-w-7xl {
        width: 100vw !important;
        max-width: 100vw !important;
      }

      #mobileMenuBtn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: static;
        margin-left: .75rem;
        z-index: 60;
      }

      #home h1,
      #home .fade-in-up {
        width: calc(100vw - 3.5rem) !important;
        max-width: calc(100vw - 3.5rem) !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        white-space: normal !important;
      }

      .hero-title {
        font-size: 2.25rem;
        line-height: 1.18;
      }

      .hero-title-desktop {
        display: none;
      }

      .hero-title-mobile {
        display: block;
      }

      #home p {
        width: min(300px, calc(100vw - 5rem)) !important;
        max-width: min(300px, calc(100vw - 5rem)) !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
      }

      #home a {
        display: block !important;
        width: min(300px, calc(100vw - 5rem)) !important;
        max-width: min(300px, calc(100vw - 5rem)) !important;
      }
    }