.fade-in {
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in2 {
            animation: fadeIn2 0.25s ease-in-out;
        }

        @keyframes fadeIn2 {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

                /* CSS cho spacer */
                .spacer {
            display: block;
        }

        /* Class cho chiều cao */
        .ch-0 { height: 0; }
        .ch-1 { height: 0.25rem; } /* 4px */
        .ch-2 { height: 0.5rem; }  /* 8px */
        .ch-3 { height: 1rem; }    /* 16px */
        .ch-4 { height: 1.5rem; }  /* 24px */
        .ch-5 { height: 2rem; }    /* 32px */
        .ch-6 { height: 3rem; }    /* 48px */
        .ch-7 { height: 4rem; }    /* 64px */
        .ch-8 { height: 5rem; }    /* 80px */
        .ch-9 { height: 6rem; }    /* 96px */
        .ch-10 { height: 8rem; }   /* 128px */

        /* Class cho chiều rộng */
        .rw-0 { width: 0; }
        .rw-1 { width: 0.25rem; }  /* 4px */
        .rw-2 { width: 0.5rem; }   /* 8px */
        .rw-3 { width: 1rem; }     /* 16px */
        .rw-4 { width: 1.5rem; }   /* 24px */
        .rw-5 { width: 2rem; }     /* 32px */
        .rw-6 { width: 3rem; }     /* 48px */
        .rw-7 { width: 4rem; }     /* 64px */
        .rw-8 { width: 5rem; }     /* 80px */
        .rw-9 { width: 6rem; }     /* 96px */
        .rw-10 { width: 8rem; }    /* 128px */
        .rw-full { width: 100%; }
        .rw-auto { width: auto; }

        /* Responsive breakpoints */
        @media (min-width: 640px) {
            .sm\:ch-1 { height: 0.25rem; }
            .sm\:ch-2 { height: 0.5rem; }
            .sm\:ch-3 { height: 1rem; }
            .sm\:ch-4 { height: 1.5rem; }
            .sm\:ch-5 { height: 2rem; }
            .sm\:rw-1 { width: 0.25rem; }
            .sm\:rw-2 { width: 0.5rem; }
            .sm\:rw-3 { width: 1rem; }
            .sm\:rw-4 { width: 1.5rem; }
            .sm\:rw-5 { width: 2rem; }
        }

        @media (min-width: 1024px) {
            .lg\:ch-1 { height: 0.25rem; }
            .lg\:ch-2 { height: 0.5rem; }
            .lg\:ch-3 { height: 1rem; }
            .lg\:ch-4 { height: 1.5rem; }
            .lg\:ch-5 { height: 2rem; }
            .lg\:rw-1 { width: 0.25rem; }
            .lg\:rw-2 { width: 0.5rem; }
            .lg\:rw-3 { width: 1rem; }
            .lg\:rw-4 { width: 1.5rem; }
            .lg\:rw-5 { width: 2rem; }
        }

        /* Class cho spacer inline */
        .spacer-inline {
            display: inline-block;
            height: auto;
        }
        /* Scrollbar đẹp, màu nền nhạt */
        ::-webkit-scrollbar {
            width: 10px;
            background: #eef2ff;
        }
        ::-webkit-scrollbar-thumb {
            background: #c7d2fe;
            border-radius: 10px;
            border: 2px solid #eef2ff;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a5b4fc;
        }
        /* Firefox */
        html {
            scrollbar-color: #c7d2fe #eef2ff;
            scrollbar-width: thin;
        }