<style>
    /* Tùy chỉnh placeholder */
    .search-field::placeholder {
        font-size: 16px; 
        font-style: italic;
        color: #888;
    }
</style>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        !function (t) {
            "use strict";
            t.fn.placeholderTypewriter = function (e) {
                var n = t.extend({
                    delay: 50,   // Thời gian gõ từng ký tự
                    pause: 1000, // Thời gian nghỉ sau khi gõ xong
                    cursorBlinkSpeed: 500, // Tốc độ nháy con trỏ
                    text: []
                }, e);


                function r(t, e) {
                    t.attr("placeholder", ""); // Xóa placeholder trước
                    let cursor = "|"; // Biểu tượng con trỏ nhấp nháy
                    
                    function typeEffect(el, textIndex, charIndex, callback) {
                        var text = n.text[textIndex];
                        if (charIndex < text.length) {
                            el.attr("placeholder", text.substring(0, charIndex + 1) + cursor);
                            setTimeout(() => typeEffect(el, textIndex, charIndex + 1, callback), n.delay);
                        } else {
                            setTimeout(callback, n.pause);
                        }
                    }


                    function deleteEffect(el, callback) {
                        var placeholderText = el.attr("placeholder");
                        if (placeholderText.length > 1) {
                            el.attr("placeholder", placeholderText.slice(0, -2) + "|"); // Xóa ký tự cuối cùng, giữ con trỏ
                            setTimeout(() => deleteEffect(el, callback), n.delay);
                        } else {
                            callback();
                        }
                    }


                    typeEffect(t, e, 0, function () {
                        setTimeout(() => deleteEffect(t, function () {
                            r(t, (e + 1) % n.text.length);
                        }), n.pause);
                    });


                    // Hiệu ứng nháy con trỏ
                    setInterval(() => {
                        let placeholder = t.attr("placeholder");
                        if (placeholder.endsWith("|")) {
                            t.attr("placeholder", placeholder.slice(0, -1)); // Ẩn con trỏ
                        } else {
                            t.attr("placeholder", placeholder + "|"); // Hiện con trỏ
                        }
                    }, n.cursorBlinkSpeed);
                }


                return this.each(function () {
                    r(t(this), 0);
                });
            };
        }(jQuery);


        var placeholderText = [
            "Thủ thuật Theme Flatsome",
            "WordPress cơ bản",
            "Custom WooCommerce nâng cao",
            "Link download theme Flatsome",
            "WordPress nâng cao"
        ];


        $(".search-field").placeholderTypewriter({
            text: placeholderText,
            delay: 70,   // Điều chỉnh tốc độ gõ chữ
            pause: 1200, // Điều chỉnh thời gian nghỉ giữa các chuỗi
            cursorBlinkSpeed: 600 // Điều chỉnh tốc độ nhấp nháy của con trỏ
        });
    });
</script>