/* Minification failed. Returning unminified contents.
(1,15): run-time error CSS1031: Expected selector, found '='
(1,15): run-time error CSS1025: Expected comma or open brace, found '='
(506,11): run-time error CSS1030: Expected identifier, found 'init('
(506,11): run-time error CSS1031: Expected selector, found 'init('
(506,11): run-time error CSS1025: Expected comma or open brace, found 'init('
(508,8): run-time error CSS1031: Expected selector, found '='
(508,8): run-time error CSS1025: Expected comma or open brace, found '='
(594,8): run-time error CSS1030: Expected identifier, found 'init('
(594,8): run-time error CSS1031: Expected selector, found 'init('
(594,8): run-time error CSS1025: Expected comma or open brace, found 'init('
 */
var menu_ctrl = {
    cacheVersionKey: 'vszc',
    eventsBound: false,

    init: function () {
        this.loadDataMenu();
    },

    getStorageKey: function (zoneCode) {
        return zoneCode;
    },

    getStoredVersion: function () {
        try {
            return localStorage.getItem(this.cacheVersionKey) || '';
        } catch (e) {
            return '';
        }
    },

    isCacheStale: function () {
        var vrCache = document.querySelector('body').getAttribute('data-cachemenu') || '';
        if (this.getStoredVersion() !== vrCache) {
            return true;
        }

        var zones = document.querySelectorAll('.zone-menu');
        for (var i = 0; i < zones.length; i++) {
            var zoneCode = zones[i].getAttribute('data-zone');
            if (!zoneCode) {
                continue;
            }
            try {
                if (!localStorage.getItem(this.getStorageKey(zoneCode))) {
                    return true;
                }
            } catch (e) {
                return true;
            }
        }

        return false;
    },

    restoreZoneCache: function () {
        var self = this;
        document.querySelectorAll('.zone-menu').forEach(function (item) {
            var zoneCode = item.getAttribute('data-zone');
            if (!zoneCode) {
                return;
            }
            var htmlZone = '';
            try {
                htmlZone = localStorage.getItem(self.getStorageKey(zoneCode));
            } catch (e) { }
            item.innerHTML = htmlZone || '';
        });
    },

    loadDataMenu: function () {
        this.restoreZoneCache();
        menu_ctrl.initMenuTab();

        if (!this.isCacheStale()) {
            menu_ctrl.initEvent();
            return;
        }

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Misc/GetDataMenuZone', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var rs = JSON.parse(xhr.responseText);
                menu_ctrl.loadData(rs.DataZoneMenu || [], rs.DataVr || '');
            }
        };
        xhr.send('&vr=');
    },

    loadData: function (listItem, version) {
        if (!listItem || !listItem.length) {
            menu_ctrl.initEvent();
            return;
        }

        var itemBox = '<div class="w-20-100 fl mb25"><div class="flex"><div class="border-bottom__white w-full"></div><div class="item-box-menu"></div></div><div class="mt10 pl25 font15 font-helvetica"><div class="pt10"><span class="bold color-blue-7 uppercase">Liên hệ tòa soạn</span></div><div class="pt10 font20"><span class="bold white"><i class="icon-phone mr2"></i> 0912312519</span></div><div class="pt10"><span class="bold color-blue-7 uppercase">Liên hệ quảng cáo</span></div><div class="pt10"><span class="white">Ms Linh<span class="bold ml2"> 098 9033388</span></span></div></div></div>';

        for (var i = 0; i < listItem.length; i++) {
            var item = listItem[i];
            var zoneCode = item.ZoneCode;
            if (!zoneCode) {
                continue;
            }

            var zoneEl = document.querySelector('.zone-menu[data-zone="' + zoneCode + '"]');
            if (!zoneEl) {
                continue;
            }

            if (item.Html != null && item.Html.length > 10) {
                zoneEl.innerHTML = item.Html;
            } else {
                var type = item.Type;
                zoneEl.innerHTML = menu_ctrl.getThemeZoneItem(type);

                var zoneAppend = zoneEl.querySelector('.zone-append');
                var listParent = item.ListParent || [];

                if (zoneAppend) {
                    for (var k = 0; k < listParent.length; k++) {
                        var parent = listParent[k];
                        var div = document.createElement('div');
                        var menu = menu_ctrl.getThemeZoneItemFist(type)
                            .replaceAll('{{link}}', parent.Link || '#')
                            .replaceAll('{{name}}', parent.Name || '')
                            .replaceAll('{{title}}', parent.Name || '')
                            .replaceAll('{{cate}}', parent.CateId || '');

                        div.innerHTML = menu;

                        if (parent.IsSearchChild == 1) {
                            menu_ctrl.initZoneChild(type, parent.ListChild || [], div);
                        }

                        if (type === 2 && k === 5) {
                            var boxDiv = document.createElement('div');
                            boxDiv.innerHTML = itemBox;
                            zoneAppend.appendChild(boxDiv.firstChild);
                        }

                        zoneAppend.appendChild(div.firstChild);
                    }
                }
            }

            try {
                var storageKey = menu_ctrl.getStorageKey(zoneCode);
                localStorage.removeItem(storageKey);
                localStorage.setItem(storageKey, zoneEl.innerHTML);
            } catch (e) { }
        }

        try {
            localStorage.removeItem(menu_ctrl.cacheVersionKey);
            localStorage.setItem(menu_ctrl.cacheVersionKey, version);
        } catch (e) { }

        menu_ctrl.initMenuTab();
        menu_ctrl.initEvent();
    },

    initZoneChild: function (type, listChild, div) {
        var zoneChild = div.querySelector('.zone-child');
        if (!zoneChild) {
            return;
        }

        if (type === 2 || type === 3) {
            for (var k = 0; k < listChild.length; k++) {
                var child = listChild[k];
                var className = (k > 4) ? ' menu-hide hide' : '';
                var childStr = '<li class="' + className + ' pt5">' +
                    '<a href="' + child.Link + '" class="font13" title="' + child.Name + '">' + child.Name + '</a>' +
                    '</li>';
                zoneChild.appendChild(menu_ctrl.getElm(childStr));
            }

            if (zoneChild.querySelector('.menu-hide')) {
                var zoneParent = div.querySelector('.zone-parent');
                if (zoneParent) {
                    zoneParent.appendChild(menu_ctrl.getElm('<a class="b-click font13 underline blue-vne view-more-menu" title="xem thêm">Xem thêm</a>'));
                }
            }
        } else if (type === 1) {
            for (var i = 0; i < listChild.length; i++) {
                var tabChild = listChild[i];
                var tabStr = '<li class="menu-tab" data-cate="' + tabChild.CateId + '">' +
                    '<a class="gray-51 pl9 pr9" href="' + tabChild.Link + '" title="' + tabChild.Name + '">' + tabChild.Name + '</a>' +
                    '</li>';
                zoneChild.appendChild(menu_ctrl.getElm(tabStr));
            }
        } else if (type === 8) {
            for (var j = 0; j < listChild.length; j++) {
                var subChild = listChild[j];
                var subStr = '<li class="menu-tab child-menu" data-cate="' + subChild.CateId + '" data-name="' + subChild.Name + '" data-link="' + subChild.Link + '"></li>';
                zoneChild.appendChild(menu_ctrl.getElm(subStr));
            }
        }
    },

    initMenuTab: function () {
        menu_ctrl.syncMenuTabFromMeta();
        menu_ctrl.syncSubMenuTab();
        menu_ctrl.syncBreadcrumbMenu();
    },

    syncMenuTabFromMeta: function () {
        var zoneMenu = document.querySelector('.zone-menu[data-zone="menu_tab_pc"]');
        var ulSet = document.querySelector('.ul-set-menu');
        if (!zoneMenu || !ulSet) {
            return;
        }

        var inputCate = document.querySelector('meta[name="tt_category_id"]');
        if (!inputCate) {
            return;
        }

        var idCate = inputCate.getAttribute('value');
        var idCateChild = inputCate.getAttribute('content');
        var menuParent = zoneMenu.querySelector('.menu-tab[data-cate="' + idCate + '"]');
        if (!menuParent) {
            return;
        }

        var ulGet = menuParent.querySelector('.zone-child');
        if (!ulGet) {
            return;
        }

        ulSet.innerHTML = ulGet.innerHTML;

        var active = ulSet.querySelector('.menu-tab[data-cate="' + idCateChild + '"]');
        if (active) {
            var link = active.querySelector('a');
            if (link) {
                link.classList.add('active');
            }
        }
    },

    syncSubMenuTab: function () {
        var zoneSubMenu = document.querySelector('.zone-menu[data-zone="zone_sub_menu_mobile"]');
        var ulSet = document.querySelector('.ul-set-menu');
        if (!zoneSubMenu || !ulSet) {
            return;
        }

        var inputCategory = document.querySelector('input.id-category');
        if (!inputCategory || !inputCategory.dataset.id) {
            return;
        }

        var idCate = inputCategory.dataset.id;
        var menu = zoneSubMenu.querySelector('.menu-tab[data-cate="' + idCate + '"]');
        if (!menu) {
            return;
        }

        ulSet.innerHTML = '';
        var childs = [];

        if (menu.classList.contains('parent-menu')) {
            childs = menu.querySelectorAll('.child-menu');
        } else {
            var parent = menu.closest('.parent-menu');
            if (!parent) {
                return;
            }
            childs = parent.querySelectorAll('.child-menu');
        }

        childs.forEach(function (child) {
            var cls = child.dataset.cate === idCate ? ' class="active"' : '';
            ulSet.innerHTML += '<li class="menu-tab" data-cate="' + child.dataset.cate + '">' +
                '<a' + cls + ' href="' + child.dataset.link + '">' + child.dataset.name + '</a>' +
                '</li>';
        });
    },

    syncBreadcrumbMenu: function () {
        var inputCate = document.querySelector('input.id-category');
        var pageInput = document.querySelector('input#page_view');
        if (!inputCate || !pageInput) {
            return;
        }

        var page = pageInput.value;
        var zoneMenu = document.querySelector('.zone-menu[data-zone="zone_sub_menu_mobile"]') ||
            document.querySelector('.zone-menu[data-zone="zone_menu_tab_mobile"]');
        if (!zoneMenu) {
            return;
        }

        var idCate = inputCate.getAttribute('data-id');
        if (!idCate || page === 'home') {
            return;
        }

        var menuActive = zoneMenu.querySelector('.menu-tab[data-cate="' + idCate + '"]');
        if (!menuActive) {
            return;
        }

        if (page !== 'detail') {
            var ul = zoneMenu.querySelector('.ul-set-menu');
            var ulSon = zoneMenu.querySelector('.ul-set-menu-son');
            if (!ul || !ulSon) {
                return;
            }

            if (menuActive.classList.contains('parent-menu')) {
                var nameParent = menuActive.getAttribute('data-name');
                var linkParent = menuActive.getAttribute('data-link');
                var ulStr = '<li class="pl5 pt5 mr10 li-icon"><a href="/" class="pl10 pr10 tc bold"><i class="fa fa-home color-blue-1 font16"></i></a></li><li class="pr5 li-bot"><h1><a href="{{link}}" title="{{name}}" class="color-blue-1 font14 pl10 pr10 uppercase">{{name}}</a></h1></li><li class="next-menu icon-right-mb li-bot icon-share" style="display:none!important"></li>';
                ulStr = ulStr.replaceAll('{{name}}', nameParent).replaceAll('{{link}}', linkParent);
                ul.innerHTML = ulStr;

                var childNodes = menuActive.querySelectorAll('li');
                var lastChild = ulSon.lastChild;
                childNodes.forEach(function (child) {
                    var nameChild = child.getAttribute('data-name');
                    var linkChild = child.getAttribute('data-link');
                    var newElement = document.createElement('ul');
                    var liStr = '<li class="relative"><a href="{{link}}" class="bg-white pl10 pr10 radius-3">{{name}}</a></li>';
                    liStr = liStr.replaceAll('{{name}}', nameChild).replaceAll('{{link}}', linkChild);
                    newElement.innerHTML = liStr;
                    ulSon.insertBefore(newElement.firstChild, lastChild);
                });
            } else {
                var parentMenu = menuActive.closest('.parent-menu');
                if (!parentMenu) {
                    return;
                }

                var nameChildItem = menuActive.getAttribute('data-name');
                var linkChildItem = menuActive.getAttribute('data-link');
                var nameParentItem = parentMenu.getAttribute('data-name');
                var linkParentItem = parentMenu.getAttribute('data-link');
                var ulStrParent = '<li class="pl5 pt5 mr10 li-icon"><a href="/" class="pl10 pr10 tc bold"><i class="fa fa-home color-blue-1 font16"></i></a></li> <li class="pr5 li-bot"><h1><a href="{{link-p}}" title="{{name-p}}" class="color-blue-1 font14 pl10 pr10 uppercase">{{name-p}}</a><h1></li> ';
                var ulStrSon = '<li class="relative"><a href="{{link-c}}" title="{{name-c}}" class="bg-white pl10 pr10 radius-3 color-blue-1">{{name-c}}</a></li>';
                ulStrParent = ulStrParent.replaceAll('{{name-p}}', nameParentItem).replaceAll('{{link-p}}', linkParentItem);
                ulStrSon = ulStrSon.replaceAll('{{name-c}}', nameChildItem).replaceAll('{{link-c}}', linkChildItem);
                ul.innerHTML = ulStrParent;
                ulSon.innerHTML = ulStrSon;
            }
            return;
        }

        var spanSet = document.querySelector('.span-set-menu');
        if (!spanSet || menuActive.classList.contains('parent-menu')) {
            return;
        }

        var parentForDetail = menuActive.closest('.parent-menu');
        if (!parentForDetail) {
            return;
        }

        var detailStr = '<a href="{{link-p}}" title="{{name-p}}" class="color-blue-1 font18 opensans-bold">{{name-p}}<i class="fa fa-angle-double-right pl10 pr10 text-crumb"></i></a>';
        detailStr = detailStr.replaceAll('{{name-p}}', parentForDetail.getAttribute('data-name')).replaceAll('{{link-p}}', parentForDetail.getAttribute('data-link'));
        spanSet.innerHTML = detailStr;
    },

    initEvent: function () {
        if (this.eventsBound) {
            return;
        }
        this.eventsBound = true;

        var acMenu = document.getElementsByClassName('ac-menu')[0];
        var body = document.getElementsByTagName('body')[0];

        if (acMenu) {
            acMenu.addEventListener('click', function () {
                body.classList.toggle('show_menu');
            });
        }

        var clMenu = document.getElementsByClassName('cl-menu');
        for (var i = 0; i < clMenu.length; i++) {
            clMenu[i].addEventListener('click', function () {
                body.classList.toggle('show_menu');
            });
        }

        var next = document.querySelector('.next-menu');
        if (next) {
            next.addEventListener('click', function () {
                var scrollDiv = document.querySelector('.div-scroll');
                if (scrollDiv) {
                    scrollDiv.scrollLeft += 50;
                }
            });
        }

        var menuOther = document.querySelector('.btn-menu-other');
        var overlayMenu = document.querySelector('.overlay-menu');
        var boxMenuOther = document.querySelector('.box-other-menu');

        if (menuOther && boxMenuOther) {
            menuOther.addEventListener('click', function () {
                menuOther.classList.toggle('active');
                boxMenuOther.classList.toggle('hide');

                if (boxMenuOther.classList.contains('hide')) {
                    menuOther.innerHTML = '<i class="icon-menu"></i>';
                } else {
                    menuOther.innerHTML = '<i class="fa fa-times item-icon"></i>';
                }

                var container = boxMenuOther.closest('div');
                if (container) {
                    container.querySelectorAll('.menu-hide').forEach(function (item) {
                        item.classList.add('hide');
                    });
                    container.querySelectorAll('.view-more-menu').forEach(function (item) {
                        item.innerHTML = 'Xem thêm';
                    });
                }
            });
        }

        if (overlayMenu && boxMenuOther) {
            overlayMenu.addEventListener('click', function () {
                if (menuOther) {
                    menuOther.classList.remove('active');
                }
                boxMenuOther.classList.add('hide');
            });
        }

        menu_ctrl.bindViewMoreHandler('.zone-menu[data-zone="menu_ex_pc"]');
        menu_ctrl.bindViewMoreHandler('.zone-menu[data-zone="zone_menu_bot"]');
    },

    bindViewMoreHandler: function (selector) {
        var area = document.querySelector(selector);
        if (!area) {
            return;
        }

        area.addEventListener('click', function (event) {
            var target = event.target;
            if (!target.classList.contains('view-more-menu')) {
                return;
            }

            var container = target.closest('div');
            if (!container) {
                return;
            }

            container.querySelectorAll('.menu-hide').forEach(function (item) {
                item.classList.toggle('hide');
            });

            target.innerHTML = (target.textContent.trim() === 'Xem thêm') ? 'Thu gọn' : 'Xem thêm';
        });
    },

    getThemeZoneItem: function (typeTheme) {
        switch (typeTheme) {
            case 1:
                return '<div class="flex border flex-align-center space-between"><a href="/" title="dspl" class="pl10"><i class="icon-home-dspl color-white" aria-hidden="true"></i></a><div class="flex flex-align-center zone-append div-menu"></div><a href="javascript:;" class="btn-menu-other a-menu-other"><i class="icon-menu"></i></a></div>';
            case 2:
                return '<div class="ms-menu mt50 transition-ef w-page-submenu clearfix hide box-other-menu z-100"> <div class="border pt10 w-page bt-5-blue"> <div class="w-full mg-auto all-catelink row zone-append menu-ex-pc"> </div> </div> </div>';
            case 3:
                return '<div class="ms-menu transition-ef w-page-submenu clearfix box-other-menu pl-14 pr-14" > <div class="pt10 w-full bb-3-blue"> <div class="w-full mg-auto all-catelink row zone-append menu-ex-pc"> </div> </div> </div>';
            case 4:
                return '<div class="navfooter bg-red"><div class="main fit-x"><ul class="tc font12 lh-38 uppercase setlast-li zone-append"> </ul></div></div>';
            case 5:
                return '<ul class="lh0 clearfix bg-blue-1"> <li class="fl"><a class="btn-menu h40 w40 lh-40 cl-menu"><i class="font22 bold ics-cancel"></i></a></li> <li class="lh0 m-auto logo-ex"><a class="logo-img pd5" href="/"></a></li> </ul> <ul class="addon-feather gray-51 tl pd10 bor-4bot-e5 font16 clearfix"> <li class="fl w50-100 pl5 pr5 lh0"><a class="w-full borbot-d9-doted gray-71 lh-45 ellipsis btn-sharefb" href="javascript:;"><i class="fa fa-share-alt font16 mr5"></i>Chia sẻ trang</a></li> <li class="fl w50-100 pl5 pr5 lh0"><a class="w-full borbot-d9-doted gray-71 lh-45 ellipsis" href="/main-rss.html"><i class="fa fa-rss font16 mr5"></i>RSS</a></li> </ul> <ul class="menu-pagelink pd10 bor-4bot-e5 tl uppercase clearfix opensans-semibold zone-append" id="ul_ex"> </ul> <a class="close-menu cursor tc opensans-semibold radius-circle pt10 pb10 w33-100 mt20 bg-gray-e5 gray-51 cl-menu"><i class="fa fa-times-circle mr2"></i>Đóng</a>';
            case 6:
                return '<ul class="pr30 lh-40 zone-append" id="ul_scroll_menu"> <li class="li-icon"><a class="pr10 tc bold gray-51" href="/" title="dspl"><i class="fa fa-home home-icon color-blue-4" aria-hidden="true"></i></a></li></ul>';
            case 7:
                return '<aside id="footer-category" class="bor-4top-e5 is-footer"> <div class="main pt15 pb15 clearfix"> <ul class="uppercase clearfix opensans-semibold zone-append"></ul> </div> </aside>';
            case 8:
                return '<div class="bg-white"><div class="div-scroll"><ul class="pr30 lh-30 ul-set-menu"></ul></div><div class="border-top mb-2"></div><div class="border-top mb-2"></div><div class="border-top"></div><div class="div-scroll"><ul class="pr30 lh-38 ul-set-menu-son ul-none"></ul></div></div><div class="zone-append hide"></div>';
            default:
                return '';
        }
    },

    getThemeZoneItemFist: function (typeTheme) {
        switch (typeTheme) {
            case 1:
                return '<div class="menu-tab menu-parent" data-cate="{{cate}}"><a href="{{link}}" title="{{title}}" class="white uppercase text-no-wrap py-14 px-12 font17 bold relative">{{name}}</a><ul class="ms-sub-navigation uppercase lh-35 font11 semibold clearfix zone-child hide"></ul></div>';
            case 2:
                return '<div class="w-20-100 fl pl25 mb20 zone-parent"> <a href="{{link}}" class="cate-mt-link bold relative uppercase" title="{{title}}">{{name}}</a> <ul class="mt10 zone-child font-helvetica"> </ul> </div>';
            case 3:
                return '<div class="w-20-100 fl pl25 mb20 zone-parent"> <a href="{{link}}" class="cate-mt-link bold relative uppercase font-char" title="{{title}}">{{name}}</a> <ul class="mt10 zone-child"> </ul> </div>';
            case 4:
                return '<li class="inline relative"><a class="nav-link white pl10 pr10" href="{{link}}" title="{{title}}">{{name}}</a></li>';
            case 5:
                return '<li class="fl w50-100 pl5 pr5 lh0"> <a class="w-full borbot-d9-doted gray-51 lh-45 ellipsis" href="{{link}}" title="{{title}}">{{name}}</a></li>';
            case 6:
                return '<li class="li-top"><a class="pl10 pr10 tc bold ms-fs-28 color-blue-5 uppercase" href="{{link}}" title="{{title}}">{{name}}</a></li>';
            case 7:
                return '<li class="fl w50-100 pl5 pr5 lh0"><h4><a class="w-full borbot-d9-doted lh-40 ellipsis" href="{{link}}" title="{{title}}">{{name}}</a></h4></li>';
            case 8:
                return '<div class="menu-tab parent-menu" data-cate="{{cate}}" data-name="{{name}}" data-link="{{link}}"><ul class="zone-child"></ul></div>';
            default:
                return '<div></div>';
        }
    },

    getElm: function (str) {
        var div = document.createElement('div');
        div.innerHTML = str;
        return div.firstChild;
    }
};

menu_ctrl.init();

layout = {
    init: function () {
        var element_view = document.querySelector(".load-extra-topview");
        if (element_view) {
            var category = element_view.getAttribute("data-category");
            var author = element_view.getAttribute("data-author");
            var channel = element_view.getAttribute("data-channel");
            let send = "";
            if (category) {
                send = "categoryId=" + category + "&pageIndex=1";
                layout.getlayout(send);
            } else if (author) {
                send = "authorId=" + author + "&pageIndex=1";
                layout.getlayout(send);
            } else if (channel) {
                send = "channelId=" + channel + "&pageIndex=1";
                layout.getlayout(send);
            } else {
                send = "pageIndex=1";
                layout.getlayout(send);
            }
        }


    },
    getlayout: function (send) {
        var element_view = document.querySelector(".load-extra-topview");
        var element_cmt = document.querySelector(".load-extra-topcomment");
        console.log("ok");
        var xvr = new XMLHttpRequest();
        xvr.open("POST", "/Author/GetArticleInTopView", true);
        xvr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xvr.onreadystatechange = function () {
            if (xvr.readyState === 4 && xvr.status === 200) {
                element_view.innerHTML = xvr.responseText;
            }
        };
        xvr.send(send);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/Author/GetArticleInTopComment", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                element_cmt.innerHTML = xhr.responseText;
            }
        };
        xhr.send(send);


        layout.loadlayout();
    },
    loadlayout: function () {
        var topview = document.getElementsByClassName("btn-extra-topview")[0];
        var topcomment = document.getElementsByClassName("btn-extra-topcomment")[0];
        var view = document.getElementsByClassName("load-extra-topview")[0];
        var comment = document.getElementsByClassName("load-extra-topcomment")[0];
        if (topview) {
            topview.addEventListener('click', function () {
                if (topview.classList.contains('comment')) {
                    console.log('Đã tồn tại lớp "comment".');
                } else {
                    topview.classList.add('comment');
                    topcomment.classList.remove('comment');
                    topcomment.classList.add('comment-read');
                    view.classList.remove('hide');
                    comment.classList.add('hide');
                }
            });
        }
        if (topcomment) {
            topcomment.addEventListener('click', function () {
                if (topcomment.classList.contains('comment')) {
                    console.log('Đã tồn tại lớp "comment".');
                } else {
                    topview.classList.remove('comment');
                    topview.classList.add('comment-read');
                    topcomment.classList.add('comment');
                    view.classList.add('hide');
                    comment.classList.remove('hide');
                }
            });
        }
       
    },
};
layout.init();