@layer utilities {
    @font-face {
        font-family: 'SVN-ProductSans';
        src: url('font/SVN-ProductSans.woff2') format('woff2'),
             url('font/SVN-ProductSans.html') format('woff'),
             url('font/SVN-ProductSans-2.html') format('truetype');
        font-weight: normal;
        font-style: normal;
      }
      
      @font-face {
        font-family: 'SVN-ProductSansBold';
        src: url('font/SVN-ProductSansBold.woff2') format('woff2'),
             url('font/SVN-ProductSansBold.html') format('woff'),
             url('font/SVN-ProductSansBold-2.html') format('truetype');
        font-weight: bold;
        font-style: normal;
      }

      h1, h2, h3, h4, h5, h6, a {
        font-family: 'SVN-ProductSansBold', sans-serif;
        font-weight: 700; /* Bold cho tất cả các thẻ heading */
      }
    
      /* Định dạng cho paragraph */
      p {
        font-family: 'SVN-ProductSans', sans-serif;
        font-weight: 400; /* Regular cho các thẻ p */
      }
      
    
    

    .active-tab {
        background-image: url('icon/tab_bg.webp');
        /* Thay đường dẫn với file ảnh của bạn */
        background-size: contain;
        /* Đảm bảo hình nền tự động điều chỉnh kích thước theo text */
        background-repeat: no-repeat;
        background-position: center;
        padding: 10px 20px;
        /* Căn chỉnh padding để phù hợp với background */
    }

    .menu-container {
        overflow-x: auto;
        /* Cho phép cuộn ngang khi không đủ chỗ */
        -ms-overflow-style: none;
        /* Ẩn thanh cuộn trên IE và Edge */
        scrollbar-width: none;
        /* Ẩn thanh cuộn trên Firefox */
    }

    .menu-container::-webkit-scrollbar {
        display: none;
        /* Ẩn thanh cuộn trên Chrome, Safari */
    }

    /* Ẩn thanh cuộn trên trình duyệt WebKit (Chrome, Safari) */
    ::-webkit-scrollbar {
        display: none;
    }
    html {
        scroll-behavior: smooth;
    }
    
    /* Ẩn hoàn toàn thanh cuộn nhưng vẫn giữ chức năng cuộn */
    body {
        overflow-y: scroll;
        /* Đảm bảo vẫn cuộn được theo chiều dọc */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE và Edge */
    }

    body::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari và các trình duyệt WebKit */
    }

    .spine-player {
        z-index: -1;
    }

    /* Ẩn thanh cuộn ngang nhưng vẫn giữ tính năng cuộn */
    .scrollbar-hide {
        -ms-overflow-style: none;
        /* IE và Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari và các trình duyệt sử dụng WebKit */
    }

    /* Thiết lập background duy nhất cho trang */
    body {
        background-image: url('icon/bg_pc.webp');
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        will-change: transform;
    }

    /* Background cho mobile */
    @media (max-width: 768px) {
        body {
            background-image: url('./icon/bg_mb.webp');
        }
    }

    /* Menu height và căn giữa */
    nav {
        height: 3rem;
        display: flex;
        align-items: center;
    }
    div#spine-player {
        height: 700px;
    }
    div#spine-player-mobile {
        height: 500px;
        margin-top: -3em;
    }
    .dot {
        transition: opacity 0.3s ease, background-color 0.3s ease;
    }

    .swiper-container {
        width: 100%;
        max-width: 100%; /* Adjust this to control the container's width */
        overflow: hidden;
      }
      
      .swiper-wrapper {
        display: flex;
        transition: transform 0.3s ease;
      }
 
      .swiper-button-next, .swiper-button-prev {
        position: absolute;
        width: 50px;  /* Điều chỉnh kích thước phù hợp */
        height: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;  /* Đảm bảo nút có độ trong suốt hoàn toàn hiển thị */
        border: none;  /* Loại bỏ border nếu có */
    }
    
    /* Nút next */
    .swiper-button-next {
        background-image: url('icon/btn_next.webp');  /* Đường dẫn đến hình ảnh của nút Next */
        right: -20px;  /* Điều chỉnh vị trí qua phải */
    }
    
    /* Nút prev */
    .swiper-button-prev {
        background-image: url('icon/btn_prev.webp');  /* Đường dẫn đến hình ảnh của nút Prev */
        left: -20px;  /* Điều chỉnh vị trí qua trái */
    }
    
    /* Ẩn các mũi tên SVG mặc định */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;  /* Ẩn mũi tên SVG mặc định của Swiper */
    }
    .ytp-cued-thumbnail-overlay-image {
        border-radius: 12px;
    }
            

    main {
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
    }
    
    section {
        scroll-snap-align: start;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

 
    @media (min-width: 768px) and (max-width: 1024px) {
      .ipad-fix {
        justify-content: flex-start; /* Điều chỉnh nếu cần để các phần tử hợp lý trên iPad Pro */
        /* Điều chỉnh khoảng cách để không có khoảng cách quá lớn */
        flex-wrap: wrap;
      }
      .padding-fix-ipad {
        padding-top: 4em;
      }
    }
 
  
}
/* Thêm icon vào nội dung chữ web-link */

.web-link {
    font-size: 1.5em !important;
}

.blink {
    animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
    0% { color: yellow; }
    50% { color: red; }
    100% { color: yellow; }
}