{"id":26,"date":"2026-09-12T20:20:32","date_gmt":"2026-09-12T13:20:32","guid":{"rendered":"https:\/\/test.onsello.com\/?page_id=26"},"modified":"2026-09-18T20:58:16","modified_gmt":"2026-09-18T13:58:16","slug":"%e0%b8%9a%e0%b8%97%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1","status":"publish","type":"page","link":"https:\/\/test.onsello.com\/en\/%e0%b8%9a%e0%b8%97%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1\/","title":{"rendered":"Article"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26\" class=\"elementor elementor-26\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53186c1 e-con-full e-flex e-con e-parent\" data-id=\"53186c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c66225 elementor-widget elementor-widget-html\" data-id=\"5c66225\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n WORDPRESS BY ONSELLO\r\n ARTICLES \/ KNOWLEDGE HUB\r\n Dynamic WordPress REST API\r\n Elementor Custom HTML Ready\r\n HTML + CSS + JS\r\n========================================================= -->\r\n\r\n<div id=\"wpbo-articles-hub\">\r\n\r\n<style>\r\n\/* =========================================================\r\n   ROOT\r\n========================================================= *\/\r\n\r\n#wpbo-articles-hub{\r\n  --art-blue:#1672e8;\r\n  --art-blue-dark:#0c5fc5;\r\n  --art-blue-soft:#eef6ff;\r\n\r\n  --art-purple:#6556e4;\r\n  --art-purple-soft:#f4f2ff;\r\n\r\n  --art-green:#16a34a;\r\n  --art-orange:#f59e0b;\r\n\r\n  --art-navy:#0f172a;\r\n  --art-text:#475569;\r\n  --art-muted:#64748b;\r\n\r\n  --art-border:#e1e8f0;\r\n  --art-soft:#f8fafc;\r\n  --art-white:#ffffff;\r\n\r\n  --art-shadow:\r\n    0 18px 50px rgba(15,23,42,.07);\r\n\r\n  --art-shadow-hover:\r\n    0 26px 60px rgba(15,23,42,.12);\r\n\r\n  position:relative;\r\n  overflow:hidden;\r\n\r\n  width:100%;\r\n\r\n  color:var(--art-text);\r\n\r\n  background:#fff;\r\n\r\n  font-family:inherit;\r\n}\r\n\r\n#wpbo-articles-hub *,\r\n#wpbo-articles-hub *::before,\r\n#wpbo-articles-hub *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n#wpbo-articles-hub a{\r\n  text-decoration:none;\r\n}\r\n\r\n#wpbo-articles-hub button,\r\n#wpbo-articles-hub input{\r\n  font-family:inherit;\r\n}\r\n\r\n.wpbo-art-container{\r\n  width:min(1200px,calc(100% - 40px));\r\n  margin:0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO\r\n========================================================= *\/\r\n\r\n.wpbo-art-hero{\r\n  position:relative;\r\n\r\n  padding:105px 0 90px;\r\n\r\n  overflow:hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 90% 10%,\r\n      rgba(22,114,232,.12),\r\n      transparent 28%\r\n    ),\r\n    radial-gradient(\r\n      circle at 7% 95%,\r\n      rgba(101,86,228,.08),\r\n      transparent 28%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      #ffffff 0%,\r\n      #f9fbff 100%\r\n    );\r\n}\r\n\r\n.wpbo-art-hero::before{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  width:540px;\r\n  height:540px;\r\n\r\n  right:-270px;\r\n  top:-330px;\r\n\r\n  border:1px solid rgba(22,114,232,.10);\r\n  border-radius:50%;\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n.wpbo-art-hero::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  width:320px;\r\n  height:320px;\r\n\r\n  left:-210px;\r\n  bottom:-220px;\r\n\r\n  border:1px solid rgba(101,86,228,.08);\r\n  border-radius:50%;\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n.wpbo-art-hero-inner{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  max-width:840px;\r\n\r\n  margin:0 auto;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.wpbo-art-eyebrow{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n\r\n  margin-bottom:18px;\r\n\r\n  padding:7px 13px;\r\n\r\n  border:1px solid rgba(22,114,232,.08);\r\n  border-radius:999px;\r\n\r\n  background:#eef6ff;\r\n  color:#1672e8;\r\n\r\n  font-size:12px;\r\n  font-weight:750;\r\n}\r\n\r\n.wpbo-art-eyebrow-dot{\r\n  width:7px;\r\n  height:7px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:#1672e8;\r\n\r\n  box-shadow:\r\n    0 0 0 4px rgba(22,114,232,.08);\r\n}\r\n\r\n.wpbo-art-hero h1{\r\n  margin:0;\r\n\r\n  color:var(--art-navy);\r\n\r\n  font-size:clamp(42px,5vw,64px);\r\n  line-height:1.08;\r\n\r\n  font-weight:850;\r\n  letter-spacing:-.04em;\r\n}\r\n\r\n.wpbo-art-gradient{\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #1672e8,\r\n      #6556e4\r\n    );\r\n\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n\r\n  -webkit-text-fill-color:transparent;\r\n}\r\n\r\n.wpbo-art-hero-desc{\r\n  max-width:720px;\r\n\r\n  margin:22px auto 0;\r\n\r\n  color:#64748b;\r\n\r\n  font-size:16px;\r\n  line-height:1.9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO STATS\r\n========================================================= *\/\r\n\r\n.wpbo-art-hero-stats{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n\r\n  gap:10px;\r\n\r\n  margin-top:28px;\r\n}\r\n\r\n.wpbo-art-stat{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n\r\n  padding:9px 13px;\r\n\r\n  border:1px solid #e0e8f1;\r\n  border-radius:10px;\r\n\r\n  background:rgba(255,255,255,.82);\r\n\r\n  color:#64748b;\r\n\r\n  font-size:11px;\r\n\r\n  backdrop-filter:blur(8px);\r\n}\r\n\r\n.wpbo-art-stat strong{\r\n  color:#172033;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOOLBAR WRAPPER\r\n========================================================= *\/\r\n\r\n.wpbo-art-content{\r\n  padding:0 0 100px;\r\n}\r\n\r\n.wpbo-art-toolbar-wrap{\r\n  position:relative;\r\n  z-index:5;\r\n\r\n  margin-top:-37px;\r\n  margin-bottom:50px;\r\n}\r\n\r\n.wpbo-art-toolbar{\r\n  padding:20px;\r\n\r\n  border:1px solid #e1e8f0;\r\n  border-radius:20px;\r\n\r\n  background:#fff;\r\n\r\n  box-shadow:\r\n    0 22px 55px rgba(15,23,42,.09);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH\r\n========================================================= *\/\r\n\r\n.wpbo-art-search-row{\r\n  display:grid;\r\n\r\n  grid-template-columns:1fr auto;\r\n\r\n  gap:12px;\r\n\r\n  align-items:center;\r\n}\r\n\r\n.wpbo-art-search{\r\n  position:relative;\r\n}\r\n\r\n.wpbo-art-search svg{\r\n  position:absolute;\r\n\r\n  left:17px;\r\n  top:50%;\r\n\r\n  width:18px;\r\n  height:18px;\r\n\r\n  color:#8491a3;\r\n\r\n  transform:translateY(-50%);\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n.wpbo-art-search input{\r\n  width:100%;\r\n  height:52px;\r\n\r\n  padding:\r\n    0 18px\r\n    0 48px;\r\n\r\n  border:1px solid #dbe4ed;\r\n  border-radius:12px;\r\n\r\n  outline:none;\r\n\r\n  background:#fbfdff;\r\n  color:#172033;\r\n\r\n  font-size:13px;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.wpbo-art-search input::placeholder{\r\n  color:#94a3b8;\r\n}\r\n\r\n.wpbo-art-search input:focus{\r\n  border-color:#8fc2f8;\r\n\r\n  background:#fff;\r\n\r\n  box-shadow:\r\n    0 0 0 4px rgba(22,114,232,.07);\r\n}\r\n\r\n.wpbo-art-search-button{\r\n  min-height:52px;\r\n\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:7px;\r\n\r\n  padding:0 20px;\r\n\r\n  border:0;\r\n  border-radius:12px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #1672e8,\r\n      #0c67d7\r\n    );\r\n\r\n  color:#fff;\r\n\r\n  font-size:12px;\r\n  font-weight:750;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.wpbo-art-search-button:hover{\r\n  transform:translateY(-1px);\r\n\r\n  box-shadow:\r\n    0 10px 23px rgba(22,114,232,.20);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CATEGORY FILTER\r\n========================================================= *\/\r\n\r\n.wpbo-art-filter-row{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n\r\n  margin-top:14px;\r\n\r\n  overflow-x:auto;\r\n\r\n  scrollbar-width:none;\r\n}\r\n\r\n.wpbo-art-filter-row::-webkit-scrollbar{\r\n  display:none;\r\n}\r\n\r\n.wpbo-art-filter{\r\n  flex:0 0 auto;\r\n\r\n  padding:8px 13px;\r\n\r\n  border:1px solid #dee6ef;\r\n  border-radius:999px;\r\n\r\n  background:#fff;\r\n  color:#5f6d80;\r\n\r\n  font-size:11px;\r\n  font-weight:650;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.18s ease;\r\n}\r\n\r\n.wpbo-art-filter:hover{\r\n  border-color:#bdd8f8;\r\n\r\n  color:#1672e8;\r\n\r\n  background:#f8fbff;\r\n}\r\n\r\n.wpbo-art-filter.active{\r\n  border-color:#1672e8;\r\n\r\n  background:#1672e8;\r\n\r\n  color:#fff;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION HEADER\r\n========================================================= *\/\r\n\r\n.wpbo-art-heading{\r\n  display:flex;\r\n  align-items:flex-end;\r\n  justify-content:space-between;\r\n\r\n  gap:20px;\r\n\r\n  margin-bottom:26px;\r\n}\r\n\r\n.wpbo-art-heading-left small{\r\n  display:block;\r\n\r\n  margin-bottom:5px;\r\n\r\n  color:#1672e8;\r\n\r\n  font-size:10px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:.07em;\r\n}\r\n\r\n.wpbo-art-heading h2{\r\n  margin:0;\r\n\r\n  color:#0f172a;\r\n\r\n  font-size:clamp(28px,4vw,38px);\r\n  line-height:1.2;\r\n\r\n  font-weight:800;\r\n  letter-spacing:-.025em;\r\n}\r\n\r\n.wpbo-art-result-count{\r\n  color:#718096;\r\n\r\n  font-size:11px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURED ARTICLE\r\n========================================================= *\/\r\n\r\n.wpbo-art-featured{\r\n  display:none;\r\n\r\n  margin-bottom:26px;\r\n\r\n  overflow:hidden;\r\n\r\n  border:1px solid #e0e8f0;\r\n  border-radius:24px;\r\n\r\n  background:#fff;\r\n\r\n  box-shadow:var(--art-shadow);\r\n\r\n  transition:.25s ease;\r\n}\r\n\r\n.wpbo-art-featured.show{\r\n  display:grid;\r\n\r\n  grid-template-columns:1.05fr .95fr;\r\n}\r\n\r\n.wpbo-art-featured:hover{\r\n  transform:translateY(-3px);\r\n\r\n  box-shadow:var(--art-shadow-hover);\r\n}\r\n\r\n.wpbo-art-featured-media{\r\n  position:relative;\r\n\r\n  min-height:360px;\r\n\r\n  overflow:hidden;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #eaf4ff,\r\n      #f4f2ff\r\n    );\r\n}\r\n\r\n.wpbo-art-featured-media img{\r\n  width:100%;\r\n  height:100%;\r\n\r\n  position:absolute;\r\n\r\n  inset:0;\r\n\r\n  object-fit:cover;\r\n\r\n  transition:transform .5s ease;\r\n}\r\n\r\n.wpbo-art-featured:hover\r\n.wpbo-art-featured-media img{\r\n  transform:scale(1.035);\r\n}\r\n\r\n.wpbo-art-featured-placeholder{\r\n  width:100%;\r\n  height:100%;\r\n\r\n  min-height:360px;\r\n\r\n  display:grid;\r\n  place-items:center;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 70% 20%,\r\n      rgba(22,114,232,.15),\r\n      transparent 32%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #eef6ff,\r\n      #f8fbff\r\n    );\r\n}\r\n\r\n.wpbo-art-featured-placeholder span{\r\n  color:rgba(22,114,232,.15);\r\n\r\n  font-size:120px;\r\n  font-weight:900;\r\n}\r\n\r\n.wpbo-art-featured-body{\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n\r\n  padding:42px;\r\n}\r\n\r\n.wpbo-art-featured-label{\r\n  display:inline-flex;\r\n  align-self:flex-start;\r\n\r\n  margin-bottom:15px;\r\n\r\n  padding:6px 9px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#eef6ff;\r\n  color:#1672e8;\r\n\r\n  font-size:9px;\r\n  font-weight:800;\r\n}\r\n\r\n.wpbo-art-featured-category{\r\n  margin-bottom:8px;\r\n\r\n  color:#1672e8;\r\n\r\n  font-size:10px;\r\n  font-weight:750;\r\n}\r\n\r\n.wpbo-art-featured-title{\r\n  margin:0 0 12px;\r\n\r\n  color:#0f172a;\r\n\r\n  font-size:clamp(25px,3vw,36px);\r\n  line-height:1.3;\r\n\r\n  font-weight:800;\r\n  letter-spacing:-.02em;\r\n}\r\n\r\n.wpbo-art-featured-excerpt{\r\n  margin:0 0 20px;\r\n\r\n  color:#64748b;\r\n\r\n  font-size:13px;\r\n  line-height:1.85;\r\n}\r\n\r\n.wpbo-art-featured-meta{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n\r\n  gap:10px;\r\n\r\n  margin-bottom:22px;\r\n\r\n  color:#8290a3;\r\n\r\n  font-size:10px;\r\n}\r\n\r\n.wpbo-art-featured-link{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:7px;\r\n\r\n  align-self:flex-start;\r\n\r\n  min-height:44px;\r\n\r\n  padding:0 16px;\r\n\r\n  border-radius:10px;\r\n\r\n  background:#1672e8;\r\n\r\n  color:#fff !important;\r\n\r\n  font-size:11px;\r\n  font-weight:750;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.wpbo-art-featured-link:hover{\r\n  background:#0d63ce;\r\n\r\n  transform:translateY(-1px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARTICLES GRID\r\n========================================================= *\/\r\n\r\n.wpbo-art-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:repeat(3,minmax(0,1fr));\r\n\r\n  gap:19px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\n.wpbo-art-card{\r\n  min-width:0;\r\n\r\n  overflow:hidden;\r\n\r\n  border:1px solid #e1e8f0;\r\n  border-radius:18px;\r\n\r\n  background:#fff;\r\n\r\n  box-shadow:\r\n    0 10px 30px rgba(15,23,42,.035);\r\n\r\n  transition:\r\n    transform .23s ease,\r\n    border-color .23s ease,\r\n    box-shadow .23s ease;\r\n}\r\n\r\n.wpbo-art-card:hover{\r\n  transform:translateY(-6px);\r\n\r\n  border-color:#c3daf4;\r\n\r\n  box-shadow:\r\n    0 22px 48px rgba(15,23,42,.09);\r\n}\r\n\r\n.wpbo-art-card-media{\r\n  position:relative;\r\n\r\n  height:200px;\r\n\r\n  overflow:hidden;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #edf6ff,\r\n      #f4f2ff\r\n    );\r\n}\r\n\r\n.wpbo-art-card-media img{\r\n  width:100%;\r\n  height:100%;\r\n\r\n  object-fit:cover;\r\n\r\n  transition:transform .5s ease;\r\n}\r\n\r\n.wpbo-art-card:hover\r\n.wpbo-art-card-media img{\r\n  transform:scale(1.045);\r\n}\r\n\r\n.wpbo-art-card-placeholder{\r\n  width:100%;\r\n  height:100%;\r\n\r\n  display:grid;\r\n  place-items:center;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 75% 20%,\r\n      rgba(22,114,232,.11),\r\n      transparent 35%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #eef6ff,\r\n      #fafcff\r\n    );\r\n}\r\n\r\n.wpbo-art-card-placeholder span{\r\n  color:rgba(22,114,232,.15);\r\n\r\n  font-size:62px;\r\n  font-weight:900;\r\n}\r\n\r\n.wpbo-art-card-category{\r\n  position:absolute;\r\n\r\n  left:13px;\r\n  top:13px;\r\n\r\n  padding:5px 8px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.92);\r\n  color:#1672e8;\r\n\r\n  box-shadow:\r\n    0 5px 15px rgba(15,23,42,.08);\r\n\r\n  font-size:9px;\r\n  font-weight:750;\r\n\r\n  backdrop-filter:blur(8px);\r\n}\r\n\r\n.wpbo-art-card-body{\r\n  padding:20px;\r\n}\r\n\r\n.wpbo-art-card-meta{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n\r\n  gap:7px;\r\n\r\n  margin-bottom:9px;\r\n\r\n  color:#8793a4;\r\n\r\n  font-size:9.5px;\r\n}\r\n\r\n.wpbo-art-card-title{\r\n  min-height:53px;\r\n\r\n  margin:0 0 9px;\r\n\r\n  color:#0f172a;\r\n\r\n  font-size:16px;\r\n  line-height:1.55;\r\n\r\n  font-weight:750;\r\n}\r\n\r\n.wpbo-art-card-title a{\r\n  color:inherit !important;\r\n}\r\n\r\n.wpbo-art-card-excerpt{\r\n  display:-webkit-box;\r\n\r\n  min-height:62px;\r\n\r\n  margin:0 0 15px;\r\n\r\n  overflow:hidden;\r\n\r\n  color:#69778a;\r\n\r\n  font-size:11px;\r\n  line-height:1.75;\r\n\r\n  -webkit-box-orient:vertical;\r\n  -webkit-line-clamp:3;\r\n}\r\n\r\n.wpbo-art-card-bottom{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n\r\n  gap:10px;\r\n\r\n  padding-top:14px;\r\n\r\n  border-top:1px solid #edf1f5;\r\n}\r\n\r\n.wpbo-art-card-author{\r\n  min-width:0;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  gap:7px;\r\n\r\n  color:#7b8798;\r\n\r\n  font-size:9px;\r\n}\r\n\r\n.wpbo-art-author-avatar{\r\n  width:26px;\r\n  height:26px;\r\n\r\n  flex:0 0 26px;\r\n\r\n  display:grid;\r\n  place-items:center;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:50%;\r\n\r\n  background:#eef6ff;\r\n  color:#1672e8;\r\n\r\n  font-size:8px;\r\n  font-weight:800;\r\n}\r\n\r\n.wpbo-art-author-avatar img{\r\n  width:100%;\r\n  height:100%;\r\n\r\n  object-fit:cover;\r\n}\r\n\r\n.wpbo-art-card-link{\r\n  flex:0 0 auto;\r\n\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:4px;\r\n\r\n  color:#1672e8 !important;\r\n\r\n  font-size:10px;\r\n  font-weight:750;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOAD MORE\r\n========================================================= *\/\r\n\r\n.wpbo-art-load-wrap{\r\n  display:none;\r\n\r\n  margin-top:36px;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.wpbo-art-load-wrap.show{\r\n  display:block;\r\n}\r\n\r\n.wpbo-art-load{\r\n  min-height:48px;\r\n\r\n  padding:0 20px;\r\n\r\n  border:1px solid #cfe0f3;\r\n  border-radius:11px;\r\n\r\n  background:#fff;\r\n  color:#1672e8;\r\n\r\n  font-size:11px;\r\n  font-weight:750;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.wpbo-art-load:hover{\r\n  border-color:#1672e8;\r\n\r\n  background:#f5faff;\r\n\r\n  transform:translateY(-1px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SKELETON\r\n========================================================= *\/\r\n\r\n.wpbo-art-skeleton-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:repeat(3,1fr);\r\n\r\n  gap:19px;\r\n}\r\n\r\n.wpbo-art-skeleton{\r\n  overflow:hidden;\r\n\r\n  border:1px solid #e8edf3;\r\n  border-radius:18px;\r\n\r\n  background:#fff;\r\n}\r\n\r\n.wpbo-art-skeleton-media{\r\n  height:200px;\r\n\r\n  background:#edf2f7;\r\n}\r\n\r\n.wpbo-art-skeleton-body{\r\n  padding:20px;\r\n}\r\n\r\n.wpbo-art-skeleton-line{\r\n  height:11px;\r\n\r\n  margin-bottom:10px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#edf2f7;\r\n}\r\n\r\n.wpbo-art-skeleton-line.short{\r\n  width:40%;\r\n}\r\n\r\n.wpbo-art-skeleton-line.mid{\r\n  width:70%;\r\n}\r\n\r\n.wpbo-art-skeleton-line.long{\r\n  width:92%;\r\n}\r\n\r\n.wpbo-art-skeleton-media,\r\n.wpbo-art-skeleton-line{\r\n  position:relative;\r\n\r\n  overflow:hidden;\r\n}\r\n\r\n.wpbo-art-skeleton-media::after,\r\n.wpbo-art-skeleton-line::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  inset:0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(255,255,255,.65),\r\n      transparent\r\n    );\r\n\r\n  transform:translateX(-100%);\r\n\r\n  animation:\r\n    wpboArtShimmer\r\n    1.4s\r\n    infinite;\r\n}\r\n\r\n@keyframes wpboArtShimmer{\r\n\r\n  100%{\r\n    transform:translateX(100%);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EMPTY \/ ERROR\r\n========================================================= *\/\r\n\r\n.wpbo-art-state{\r\n  display:none;\r\n\r\n  padding:55px 25px;\r\n\r\n  border:1px dashed #cad8e7;\r\n  border-radius:18px;\r\n\r\n  background:#fbfdff;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.wpbo-art-state.show{\r\n  display:block;\r\n}\r\n\r\n.wpbo-art-state-icon{\r\n  width:54px;\r\n  height:54px;\r\n\r\n  display:grid;\r\n  place-items:center;\r\n\r\n  margin:0 auto 13px;\r\n\r\n  border-radius:15px;\r\n\r\n  background:#eef6ff;\r\n  color:#1672e8;\r\n\r\n  font-size:20px;\r\n}\r\n\r\n.wpbo-art-state h3{\r\n  margin:0 0 6px;\r\n\r\n  color:#172033;\r\n\r\n  font-size:17px;\r\n}\r\n\r\n.wpbo-art-state p{\r\n  max-width:520px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#718096;\r\n\r\n  font-size:11.5px;\r\n  line-height:1.75;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n========================================================= *\/\r\n\r\n.wpbo-art-cta-section{\r\n  padding:0 0 95px;\r\n}\r\n\r\n.wpbo-art-cta{\r\n  padding:48px 30px;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:25px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 10% 0%,\r\n      rgba(255,255,255,.16),\r\n      transparent 28%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #1672e8,\r\n      #6556e4\r\n    );\r\n\r\n  text-align:center;\r\n}\r\n\r\n.wpbo-art-cta small{\r\n  display:inline-flex;\r\n\r\n  margin-bottom:13px;\r\n\r\n  padding:6px 10px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.14);\r\n  color:#fff;\r\n\r\n  font-size:10px;\r\n  font-weight:700;\r\n}\r\n\r\n.wpbo-art-cta h2{\r\n  margin:0 auto 10px;\r\n\r\n  max-width:650px;\r\n\r\n  color:#fff;\r\n\r\n  font-size:clamp(27px,4vw,39px);\r\n  line-height:1.25;\r\n\r\n  font-weight:800;\r\n}\r\n\r\n.wpbo-art-cta p{\r\n  max-width:620px;\r\n\r\n  margin:0 auto 21px;\r\n\r\n  color:rgba(255,255,255,.83);\r\n\r\n  font-size:13px;\r\n  line-height:1.8;\r\n}\r\n\r\n.wpbo-art-cta a{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  min-height:45px;\r\n\r\n  padding:0 17px;\r\n\r\n  border-radius:10px;\r\n\r\n  background:#fff;\r\n  color:#1672e8 !important;\r\n\r\n  font-size:11px;\r\n  font-weight:750;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.wpbo-art-cta a:hover{\r\n  transform:translateY(-2px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1024px){\r\n\r\n  .wpbo-art-grid,\r\n  .wpbo-art-skeleton-grid{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  .wpbo-art-featured.show{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .wpbo-art-featured-media{\r\n    min-height:330px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:767px){\r\n\r\n  .wpbo-art-container{\r\n    width:min(calc(100% - 28px),1200px);\r\n  }\r\n\r\n  .wpbo-art-hero{\r\n    padding:\r\n      70px 0\r\n      70px;\r\n  }\r\n\r\n  .wpbo-art-hero h1{\r\n    font-size:38px;\r\n  }\r\n\r\n  .wpbo-art-hero-desc{\r\n    font-size:14px;\r\n  }\r\n\r\n  .wpbo-art-toolbar-wrap{\r\n    margin-top:-28px;\r\n    margin-bottom:38px;\r\n  }\r\n\r\n  .wpbo-art-toolbar{\r\n    padding:14px;\r\n  }\r\n\r\n  .wpbo-art-search-row{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .wpbo-art-search-button{\r\n    width:100%;\r\n  }\r\n\r\n  .wpbo-art-heading{\r\n    align-items:flex-start;\r\n    flex-direction:column;\r\n  }\r\n\r\n  .wpbo-art-featured-body{\r\n    padding:25px 21px;\r\n  }\r\n\r\n  .wpbo-art-featured-media{\r\n    min-height:235px;\r\n  }\r\n\r\n  .wpbo-art-featured-placeholder{\r\n    min-height:235px;\r\n  }\r\n\r\n  .wpbo-art-grid,\r\n  .wpbo-art-skeleton-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .wpbo-art-card-media{\r\n    height:215px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #wpbo-articles-hub *,\r\n  #wpbo-articles-hub *::before,\r\n  #wpbo-articles-hub *::after{\r\n    transition:none !important;\r\n    animation:none !important;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n HERO\r\n========================================================= -->\r\n\r\n<section class=\"wpbo-art-hero\">\r\n\r\n  <div class=\"wpbo-art-container\">\r\n\r\n    <div class=\"wpbo-art-hero-inner\">\r\n\r\n\r\n      <div class=\"wpbo-art-eyebrow\">\r\n\r\n        <span class=\"wpbo-art-eyebrow-dot\"><\/span>\r\n\r\n        WORDPRESS KNOWLEDGE CENTER\r\n\r\n      <\/div>\r\n\r\n\r\n      <h1>\r\n        \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\r\n        <span class=\"wpbo-art-gradient\">\r\n          WordPress\r\n        <\/span>\r\n      <\/h1>\r\n\r\n\r\n      <p class=\"wpbo-art-hero-desc\">\r\n        \u0e23\u0e27\u0e21\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04 \u0e41\u0e25\u0e30\u0e27\u0e34\u0e18\u0e35\u0e41\u0e01\u0e49\u0e1b\u0e31\u0e0d\u0e2b\u0e32 WordPress\r\n        \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 \u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e14\u0e49\u0e27\u0e22 Astra \u0e41\u0e25\u0e30 Elementor\r\n        \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07 SEO, Email, Performance\r\n        \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e14\u0e39\u0e41\u0e25\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\r\n      <\/p>\r\n\r\n\r\n      <div class=\"wpbo-art-hero-stats\">\r\n\r\n        <div class=\"wpbo-art-stat\">\r\n          <span>\u25cf<\/span>\r\n          <strong id=\"wpboArtTotalHero\">\u2014<\/strong>\r\n          \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\r\n        <\/div>\r\n\r\n\r\n        <div class=\"wpbo-art-stat\">\r\n          <span>\u2713<\/span>\r\n          \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\r\n        <\/div>\r\n\r\n\r\n        <div class=\"wpbo-art-stat\">\r\n          <span>\u21bb<\/span>\r\n          \u0e14\u0e36\u0e07\u0e08\u0e32\u0e01 WordPress \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n CONTENT\r\n========================================================= -->\r\n\r\n<section class=\"wpbo-art-content\">\r\n\r\n  <div class=\"wpbo-art-container\">\r\n\r\n\r\n    <!-- =====================================================\r\n         TOOLBAR\r\n    ====================================================== -->\r\n\r\n    <div class=\"wpbo-art-toolbar-wrap\">\r\n\r\n      <div class=\"wpbo-art-toolbar\">\r\n\r\n\r\n        <div class=\"wpbo-art-search-row\">\r\n\r\n\r\n          <div class=\"wpbo-art-search\">\r\n\r\n            <svg\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\">\r\n\r\n              <circle\r\n                cx=\"11\"\r\n                cy=\"11\"\r\n                r=\"8\">\r\n              <\/circle>\r\n\r\n              <path d=\"m21 21-4.3-4.3\"><\/path>\r\n\r\n            <\/svg>\r\n\r\n\r\n            <input\r\n              id=\"wpboArtSearch\"\r\n              type=\"search\"\r\n              autocomplete=\"off\"\r\n              placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e40\u0e0a\u0e48\u0e19 Elementor, SEO, Forminator, WordPress...\">\r\n\r\n          <\/div>\r\n\r\n\r\n          <button\r\n            id=\"wpboArtSearchButton\"\r\n            class=\"wpbo-art-search-button\"\r\n            type=\"button\">\r\n\r\n            \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\r\n\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div\r\n          id=\"wpboArtFilters\"\r\n          class=\"wpbo-art-filter-row\">\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"wpbo-art-filter active\"\r\n            data-category=\"all\">\r\n\r\n            \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         HEADING\r\n    ====================================================== -->\r\n\r\n    <div class=\"wpbo-art-heading\">\r\n\r\n      <div class=\"wpbo-art-heading-left\">\r\n\r\n        <small>\r\n          LATEST ARTICLES\r\n        <\/small>\r\n\r\n        <h2>\r\n          \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n        <\/h2>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        id=\"wpboArtResultCount\"\r\n        class=\"wpbo-art-result-count\">\r\n\r\n        \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21...\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         FEATURED POST\r\n    ====================================================== -->\r\n\r\n    <article\r\n      id=\"wpboArtFeatured\"\r\n      class=\"wpbo-art-featured\">\r\n    <\/article>\r\n\r\n\r\n    <!-- =====================================================\r\n         SKELETON\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"wpboArtSkeleton\"\r\n      class=\"wpbo-art-skeleton-grid\">\r\n\r\n\r\n      <div class=\"wpbo-art-skeleton\">\r\n\r\n        <div class=\"wpbo-art-skeleton-media\"><\/div>\r\n\r\n        <div class=\"wpbo-art-skeleton-body\">\r\n\r\n          <div class=\"wpbo-art-skeleton-line short\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line long\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line mid\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line long\"><\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"wpbo-art-skeleton\">\r\n\r\n        <div class=\"wpbo-art-skeleton-media\"><\/div>\r\n\r\n        <div class=\"wpbo-art-skeleton-body\">\r\n\r\n          <div class=\"wpbo-art-skeleton-line short\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line long\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line mid\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line long\"><\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"wpbo-art-skeleton\">\r\n\r\n        <div class=\"wpbo-art-skeleton-media\"><\/div>\r\n\r\n        <div class=\"wpbo-art-skeleton-body\">\r\n\r\n          <div class=\"wpbo-art-skeleton-line short\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line long\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line mid\"><\/div>\r\n          <div class=\"wpbo-art-skeleton-line long\"><\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         ARTICLES GRID\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"wpboArtGrid\"\r\n      class=\"wpbo-art-grid\">\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         EMPTY\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"wpboArtEmpty\"\r\n      class=\"wpbo-art-state\">\r\n\r\n      <div class=\"wpbo-art-state-icon\">\r\n        \u2315\r\n      <\/div>\r\n\r\n      <h3>\r\n        \u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32\r\n      <\/h3>\r\n\r\n      <p>\r\n        \u0e25\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32\r\n        \u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e2d\u0e37\u0e48\u0e19\r\n        \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         ERROR\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"wpboArtError\"\r\n      class=\"wpbo-art-state\">\r\n\r\n      <div class=\"wpbo-art-state-icon\">\r\n        !\r\n      <\/div>\r\n\r\n      <h3>\r\n        \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e44\u0e14\u0e49\r\n      <\/h3>\r\n\r\n      <p>\r\n        \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32 WordPress REST API\r\n        \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e39\u0e48\r\n        \u0e41\u0e25\u0e30\u0e25\u0e2d\u0e07\u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         LOAD MORE\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"wpboArtLoadWrap\"\r\n      class=\"wpbo-art-load-wrap\">\r\n\r\n      <button\r\n        id=\"wpboArtLoadMore\"\r\n        type=\"button\"\r\n        class=\"wpbo-art-load\">\r\n\r\n        \u0e14\u0e39\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u2193\r\n\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n CTA\r\n========================================================= -->\r\n\r\n<section class=\"wpbo-art-cta-section\">\r\n\r\n  <div class=\"wpbo-art-container\">\r\n\r\n    <div class=\"wpbo-art-cta\">\r\n\r\n      <small>\r\n        WORDPRESS BY ONSELLO\r\n      <\/small>\r\n\r\n      <h2>\r\n        \u0e40\u0e1e\u0e34\u0e48\u0e07\u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e0a\u0e49 WordPress?\r\n      <\/h2>\r\n\r\n      <p>\r\n        \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\r\n        \u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 WordPress,\r\n        Astra Theme,\r\n        Elementor \u0e41\u0e25\u0e30 Plugin \u0e17\u0e35\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\r\n        \u0e01\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e21\u0e37\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e08\u0e23\u0e34\u0e07\r\n      <\/p>\r\n\r\n      <a href=\"\/\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\/\">\r\n        \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 WordPress \u2192\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n JAVASCRIPT\r\n========================================================= -->\r\n\r\n<script>\r\n(function(){\r\n\r\n  'use strict';\r\n\r\n\r\n  \/* =======================================================\r\n     ROOT\r\n  ======================================================= *\/\r\n\r\n  const root =\r\n    document.getElementById(\r\n      'wpbo-articles-hub'\r\n    );\r\n\r\n\r\n  if(!root){\r\n    return;\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     CONFIG\r\n  ======================================================= *\/\r\n\r\n  const CONFIG = {\r\n\r\n    \/* \u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e23\u0e31\u0e49\u0e07\u0e41\u0e23\u0e01 *\/\r\n    initialVisible: 6,\r\n\r\n    \/* \u0e08\u0e33\u0e19\u0e27\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e01\u0e14 Load More *\/\r\n    loadMoreAmount: 6,\r\n\r\n    \/* \u0e08\u0e33\u0e19\u0e27\u0e19 Post \u0e15\u0e48\u0e2d Request \u0e02\u0e2d\u0e07 WP REST API *\/\r\n    apiPerPage: 100\r\n\r\n  };\r\n\r\n\r\n  \/* =======================================================\r\n     ELEMENTS\r\n  ======================================================= *\/\r\n\r\n  const grid =\r\n    document.getElementById(\r\n      'wpboArtGrid'\r\n    );\r\n\r\n  const featured =\r\n    document.getElementById(\r\n      'wpboArtFeatured'\r\n    );\r\n\r\n  const skeleton =\r\n    document.getElementById(\r\n      'wpboArtSkeleton'\r\n    );\r\n\r\n  const emptyState =\r\n    document.getElementById(\r\n      'wpboArtEmpty'\r\n    );\r\n\r\n  const errorState =\r\n    document.getElementById(\r\n      'wpboArtError'\r\n    );\r\n\r\n  const searchInput =\r\n    document.getElementById(\r\n      'wpboArtSearch'\r\n    );\r\n\r\n  const searchButton =\r\n    document.getElementById(\r\n      'wpboArtSearchButton'\r\n    );\r\n\r\n  const filters =\r\n    document.getElementById(\r\n      'wpboArtFilters'\r\n    );\r\n\r\n  const resultCount =\r\n    document.getElementById(\r\n      'wpboArtResultCount'\r\n    );\r\n\r\n  const totalHero =\r\n    document.getElementById(\r\n      'wpboArtTotalHero'\r\n    );\r\n\r\n  const loadWrap =\r\n    document.getElementById(\r\n      'wpboArtLoadWrap'\r\n    );\r\n\r\n  const loadButton =\r\n    document.getElementById(\r\n      'wpboArtLoadMore'\r\n    );\r\n\r\n\r\n  \/* =======================================================\r\n     STATE\r\n  ======================================================= *\/\r\n\r\n  let allPosts = [];\r\n\r\n  let categories = {};\r\n\r\n  let activeCategory = 'all';\r\n\r\n  let searchKeyword = '';\r\n\r\n  let visibleCount =\r\n    CONFIG.initialVisible;\r\n\r\n\r\n  \/* =======================================================\r\n     REST API\r\n  ======================================================= *\/\r\n\r\n  const siteOrigin =\r\n    window.location.origin;\r\n\r\n  const apiBase =\r\n    siteOrigin +\r\n    '\/wp-json\/wp\/v2';\r\n\r\n\r\n  \/* =======================================================\r\n     HELPERS\r\n  ======================================================= *\/\r\n\r\n  function decodeHTML(html){\r\n\r\n    const textarea =\r\n      document.createElement(\r\n        'textarea'\r\n      );\r\n\r\n    textarea.innerHTML =\r\n      html || '';\r\n\r\n    return textarea.value;\r\n\r\n  }\r\n\r\n\r\n  function stripHTML(html){\r\n\r\n    const div =\r\n      document.createElement(\r\n        'div'\r\n      );\r\n\r\n    div.innerHTML =\r\n      html || '';\r\n\r\n    return (\r\n      div.textContent ||\r\n      div.innerText ||\r\n      ''\r\n    )\r\n      .replace(\/\\s+\/g,' ')\r\n      .trim();\r\n\r\n  }\r\n\r\n\r\n  function truncate(text,length){\r\n\r\n    text =\r\n      text || '';\r\n\r\n    if(\r\n      text.length <= length\r\n    ){\r\n      return text;\r\n    }\r\n\r\n    return (\r\n      text.substring(\r\n        0,\r\n        length\r\n      ).trim() +\r\n      '\u2026'\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function formatDate(dateString){\r\n\r\n    try{\r\n\r\n      const date =\r\n        new Date(\r\n          dateString\r\n        );\r\n\r\n      return new Intl.DateTimeFormat(\r\n        'th-TH',\r\n        {\r\n          day:'numeric',\r\n          month:'short',\r\n          year:'numeric'\r\n        }\r\n      ).format(date);\r\n\r\n    }catch(error){\r\n\r\n      return '';\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function readingTime(post){\r\n\r\n    const text =\r\n      stripHTML(\r\n        post.content &&\r\n        post.content.rendered\r\n          ? post.content.rendered\r\n          : ''\r\n      );\r\n\r\n    const words =\r\n      text\r\n        .split(\/\\s+\/)\r\n        .filter(Boolean)\r\n        .length;\r\n\r\n    const minutes =\r\n      Math.max(\r\n        1,\r\n        Math.ceil(\r\n          words \/ 220\r\n        )\r\n      );\r\n\r\n    return (\r\n      minutes +\r\n      ' \u0e19\u0e32\u0e17\u0e35'\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function getFeaturedImage(post){\r\n\r\n    try{\r\n\r\n      const media =\r\n        post._embedded[\r\n          'wp:featuredmedia'\r\n        ][0];\r\n\r\n      if(\r\n        media &&\r\n        media.source_url\r\n      ){\r\n        return {\r\n          url:\r\n            media.source_url,\r\n\r\n          alt:\r\n            media.alt_text ||\r\n            stripHTML(\r\n              post.title.rendered\r\n            )\r\n        };\r\n      }\r\n\r\n    }catch(error){}\r\n\r\n    return null;\r\n\r\n  }\r\n\r\n\r\n  function getAuthor(post){\r\n\r\n    try{\r\n\r\n      const author =\r\n        post._embedded.author[0];\r\n\r\n      return {\r\n\r\n        name:\r\n          author.name ||\r\n          'WordPress by Onsello',\r\n\r\n        avatar:\r\n          author.avatar_urls\r\n            ? (\r\n                author.avatar_urls['48'] ||\r\n                author.avatar_urls['96']\r\n              )\r\n            : null\r\n\r\n      };\r\n\r\n    }catch(error){\r\n\r\n      return {\r\n        name:\r\n          'WordPress by Onsello',\r\n\r\n        avatar:null\r\n      };\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function getCategoryIds(post){\r\n\r\n    return Array.isArray(\r\n      post.categories\r\n    )\r\n      ? post.categories\r\n      : [];\r\n\r\n  }\r\n\r\n\r\n  function getCategoryName(post){\r\n\r\n    const ids =\r\n      getCategoryIds(\r\n        post\r\n      );\r\n\r\n    if(!ids.length){\r\n      return 'WordPress';\r\n    }\r\n\r\n    const first =\r\n      ids[0];\r\n\r\n    return (\r\n      categories[first] ||\r\n      'WordPress'\r\n    );\r\n\r\n  }\r\n\r\n\r\n  function escapeAttribute(value){\r\n\r\n    return String(\r\n      value || ''\r\n    )\r\n      .replace(\/&\/g,'&amp;')\r\n      .replace(\/\"\/g,'&quot;')\r\n      .replace(\/<\/g,'&lt;')\r\n      .replace(\/>\/g,'&gt;');\r\n\r\n  }\r\n\r\n\r\n  function escapeHTML(value){\r\n\r\n    return String(\r\n      value || ''\r\n    )\r\n      .replace(\/&\/g,'&amp;')\r\n      .replace(\/<\/g,'&lt;')\r\n      .replace(\/>\/g,'&gt;')\r\n      .replace(\/\"\/g,'&quot;')\r\n      .replace(\/'\/g,'&#039;');\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     FETCH ALL CATEGORIES\r\n  ======================================================= *\/\r\n\r\n  async function fetchCategories(){\r\n\r\n    try{\r\n\r\n      const response =\r\n        await fetch(\r\n          apiBase +\r\n          '\/categories?per_page=100&hide_empty=true'\r\n        );\r\n\r\n\r\n      if(!response.ok){\r\n        return;\r\n      }\r\n\r\n\r\n      const data =\r\n        await response.json();\r\n\r\n\r\n      data.forEach(\r\n        function(category){\r\n\r\n          categories[\r\n            category.id\r\n          ] =\r\n            decodeHTML(\r\n              category.name\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n      renderFilters();\r\n\r\n    }catch(error){\r\n\r\n      console.warn(\r\n        'WPBO categories:',\r\n        error\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     FETCH ALL POSTS\r\n  ======================================================= *\/\r\n\r\n  async function fetchAllPosts(){\r\n\r\n    let page = 1;\r\n\r\n    let collected = [];\r\n\r\n    let totalPages = 1;\r\n\r\n\r\n    do{\r\n\r\n      const endpoint =\r\n        apiBase +\r\n        '\/posts' +\r\n        '?per_page=' +\r\n        CONFIG.apiPerPage +\r\n        '&page=' +\r\n        page +\r\n        '&_embed=1' +\r\n        '&orderby=date' +\r\n        '&order=desc' +\r\n        '&status=publish';\r\n\r\n\r\n      const response =\r\n        await fetch(\r\n          endpoint\r\n        );\r\n\r\n\r\n      if(!response.ok){\r\n\r\n        throw new Error(\r\n          'WordPress REST API error'\r\n        );\r\n\r\n      }\r\n\r\n\r\n      const posts =\r\n        await response.json();\r\n\r\n\r\n      collected =\r\n        collected.concat(\r\n          posts\r\n        );\r\n\r\n\r\n      totalPages =\r\n        parseInt(\r\n          response.headers.get(\r\n            'X-WP-TotalPages'\r\n          ) || '1',\r\n          10\r\n        );\r\n\r\n\r\n      page++;\r\n\r\n    }while(\r\n      page <= totalPages\r\n    );\r\n\r\n\r\n    return collected;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     FILTER BUTTONS\r\n  ======================================================= *\/\r\n\r\n  function renderFilters(){\r\n\r\n    if(!filters){\r\n      return;\r\n    }\r\n\r\n\r\n    const ids =\r\n      Object.keys(\r\n        categories\r\n      );\r\n\r\n\r\n    ids.forEach(\r\n      function(id){\r\n\r\n        const button =\r\n          document.createElement(\r\n            'button'\r\n          );\r\n\r\n\r\n        button.type =\r\n          'button';\r\n\r\n\r\n        button.className =\r\n          'wpbo-art-filter';\r\n\r\n\r\n        button.dataset.category =\r\n          id;\r\n\r\n\r\n        button.textContent =\r\n          categories[id];\r\n\r\n\r\n        filters.appendChild(\r\n          button\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     FILTER POSTS\r\n  ======================================================= *\/\r\n\r\n  function filteredPosts(){\r\n\r\n    return allPosts.filter(\r\n      function(post){\r\n\r\n        let matchCategory =\r\n          true;\r\n\r\n\r\n        if(\r\n          activeCategory !==\r\n          'all'\r\n        ){\r\n\r\n          matchCategory =\r\n            getCategoryIds(\r\n              post\r\n            )\r\n              .map(String)\r\n              .includes(\r\n                String(\r\n                  activeCategory\r\n                )\r\n              );\r\n\r\n        }\r\n\r\n\r\n        let matchSearch =\r\n          true;\r\n\r\n\r\n        if(searchKeyword){\r\n\r\n          const searchable =\r\n            [\r\n              stripHTML(\r\n                post.title.rendered\r\n              ),\r\n\r\n              stripHTML(\r\n                post.excerpt.rendered\r\n              ),\r\n\r\n              stripHTML(\r\n                post.content.rendered\r\n              ),\r\n\r\n              getCategoryName(\r\n                post\r\n              )\r\n\r\n            ]\r\n              .join(' ')\r\n              .toLowerCase();\r\n\r\n\r\n          matchSearch =\r\n            searchable.includes(\r\n              searchKeyword.toLowerCase()\r\n            );\r\n\r\n        }\r\n\r\n\r\n        return (\r\n          matchCategory &&\r\n          matchSearch\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     FEATURED POST\r\n  ======================================================= *\/\r\n\r\n  function renderFeatured(post){\r\n\r\n    if(\r\n      !featured ||\r\n      !post\r\n    ){\r\n\r\n      if(featured){\r\n        featured.classList.remove(\r\n          'show'\r\n        );\r\n      }\r\n\r\n      return;\r\n    }\r\n\r\n\r\n    const image =\r\n      getFeaturedImage(\r\n        post\r\n      );\r\n\r\n\r\n    const category =\r\n      escapeHTML(\r\n        getCategoryName(\r\n          post\r\n        )\r\n      );\r\n\r\n\r\n    const title =\r\n      escapeHTML(\r\n        stripHTML(\r\n          post.title.rendered\r\n        )\r\n      );\r\n\r\n\r\n    const excerpt =\r\n      escapeHTML(\r\n        truncate(\r\n          stripHTML(\r\n            post.excerpt.rendered ||\r\n            post.content.rendered\r\n          ),\r\n          220\r\n        )\r\n      );\r\n\r\n\r\n    const link =\r\n      escapeAttribute(\r\n        post.link\r\n      );\r\n\r\n\r\n    const date =\r\n      escapeHTML(\r\n        formatDate(\r\n          post.date\r\n        )\r\n      );\r\n\r\n\r\n    const read =\r\n      escapeHTML(\r\n        readingTime(\r\n          post\r\n        )\r\n      );\r\n\r\n\r\n    const mediaHTML =\r\n      image\r\n\r\n      ? `\r\n        <img\r\n          src=\"${escapeAttribute(image.url)}\"\r\n          alt=\"${escapeAttribute(image.alt)}\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\">\r\n      `\r\n\r\n      : `\r\n        <div class=\"wpbo-art-featured-placeholder\">\r\n          <span>W<\/span>\r\n        <\/div>\r\n      `;\r\n\r\n\r\n    featured.innerHTML = `\r\n\r\n      <div class=\"wpbo-art-featured-media\">\r\n\r\n        ${mediaHTML}\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"wpbo-art-featured-body\">\r\n\r\n        <span class=\"wpbo-art-featured-label\">\r\n          \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\r\n        <\/span>\r\n\r\n        <div class=\"wpbo-art-featured-category\">\r\n          ${category}\r\n        <\/div>\r\n\r\n        <h2 class=\"wpbo-art-featured-title\">\r\n          ${title}\r\n        <\/h2>\r\n\r\n        <p class=\"wpbo-art-featured-excerpt\">\r\n          ${excerpt}\r\n        <\/p>\r\n\r\n        <div class=\"wpbo-art-featured-meta\">\r\n\r\n          <span>\r\n            ${date}\r\n          <\/span>\r\n\r\n          <span>\r\n            \u2022\r\n          <\/span>\r\n\r\n          <span>\r\n            \u0e2d\u0e48\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 ${read}\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <a\r\n          class=\"wpbo-art-featured-link\"\r\n          href=\"${link}\">\r\n\r\n          \u0e2d\u0e48\u0e32\u0e19\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\r\n          <span>\u2192<\/span>\r\n\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    featured.classList.add(\r\n      'show'\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     POST CARD\r\n  ======================================================= *\/\r\n\r\n  function createPostCard(post){\r\n\r\n    const image =\r\n      getFeaturedImage(\r\n        post\r\n      );\r\n\r\n\r\n    const author =\r\n      getAuthor(\r\n        post\r\n      );\r\n\r\n\r\n    const category =\r\n      escapeHTML(\r\n        getCategoryName(\r\n          post\r\n        )\r\n      );\r\n\r\n\r\n    const title =\r\n      escapeHTML(\r\n        stripHTML(\r\n          post.title.rendered\r\n        )\r\n      );\r\n\r\n\r\n    const excerpt =\r\n      escapeHTML(\r\n        truncate(\r\n          stripHTML(\r\n            post.excerpt.rendered ||\r\n            post.content.rendered\r\n          ),\r\n          150\r\n        )\r\n      );\r\n\r\n\r\n    const date =\r\n      escapeHTML(\r\n        formatDate(\r\n          post.date\r\n        )\r\n      );\r\n\r\n\r\n    const read =\r\n      escapeHTML(\r\n        readingTime(\r\n          post\r\n        )\r\n      );\r\n\r\n\r\n    const link =\r\n      escapeAttribute(\r\n        post.link\r\n      );\r\n\r\n\r\n    const imageHTML =\r\n      image\r\n\r\n      ? `\r\n        <img\r\n          src=\"${escapeAttribute(image.url)}\"\r\n          alt=\"${escapeAttribute(image.alt)}\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\">\r\n      `\r\n\r\n      : `\r\n        <div class=\"wpbo-art-card-placeholder\">\r\n          <span>W<\/span>\r\n        <\/div>\r\n      `;\r\n\r\n\r\n    const avatarHTML =\r\n      author.avatar\r\n\r\n      ? `\r\n        <img\r\n          src=\"${escapeAttribute(author.avatar)}\"\r\n          alt=\"${escapeAttribute(author.name)}\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\">\r\n      `\r\n\r\n      : `\r\n        W\r\n      `;\r\n\r\n\r\n    const article =\r\n      document.createElement(\r\n        'article'\r\n      );\r\n\r\n\r\n    article.className =\r\n      'wpbo-art-card';\r\n\r\n\r\n    article.innerHTML = `\r\n\r\n      <a\r\n        href=\"${link}\"\r\n        class=\"wpbo-art-card-media\">\r\n\r\n        ${imageHTML}\r\n\r\n        <span class=\"wpbo-art-card-category\">\r\n          ${category}\r\n        <\/span>\r\n\r\n      <\/a>\r\n\r\n\r\n      <div class=\"wpbo-art-card-body\">\r\n\r\n\r\n        <div class=\"wpbo-art-card-meta\">\r\n\r\n          <span>\r\n            ${date}\r\n          <\/span>\r\n\r\n          <span>\r\n            \u2022\r\n          <\/span>\r\n\r\n          <span>\r\n            ${read}\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <h3 class=\"wpbo-art-card-title\">\r\n\r\n          <a href=\"${link}\">\r\n            ${title}\r\n          <\/a>\r\n\r\n        <\/h3>\r\n\r\n\r\n        <p class=\"wpbo-art-card-excerpt\">\r\n          ${excerpt}\r\n        <\/p>\r\n\r\n\r\n        <div class=\"wpbo-art-card-bottom\">\r\n\r\n\r\n          <div class=\"wpbo-art-card-author\">\r\n\r\n            <span class=\"wpbo-art-author-avatar\">\r\n              ${avatarHTML}\r\n            <\/span>\r\n\r\n            <span>\r\n              ${escapeHTML(author.name)}\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n          <a\r\n            class=\"wpbo-art-card-link\"\r\n            href=\"${link}\">\r\n\r\n            \u0e2d\u0e48\u0e32\u0e19\u0e15\u0e48\u0e2d\r\n            <span>\u2192<\/span>\r\n\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n\r\n    return article;\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     RENDER\r\n  ======================================================= *\/\r\n\r\n  function render(){\r\n\r\n    const posts =\r\n      filteredPosts();\r\n\r\n\r\n    if(skeleton){\r\n\r\n      skeleton.style.display =\r\n        'none';\r\n\r\n    }\r\n\r\n\r\n    if(grid){\r\n\r\n      grid.innerHTML =\r\n        '';\r\n\r\n    }\r\n\r\n\r\n    if(emptyState){\r\n\r\n      emptyState.classList.remove(\r\n        'show'\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if(errorState){\r\n\r\n      errorState.classList.remove(\r\n        'show'\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if(totalHero){\r\n\r\n      totalHero.textContent =\r\n        allPosts.length;\r\n\r\n    }\r\n\r\n\r\n    if(resultCount){\r\n\r\n      resultCount.textContent =\r\n        posts.length +\r\n        ' \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21';\r\n\r\n    }\r\n\r\n\r\n    if(\r\n      posts.length === 0\r\n    ){\r\n\r\n      featured.classList.remove(\r\n        'show'\r\n      );\r\n\r\n\r\n      emptyState.classList.add(\r\n        'show'\r\n      );\r\n\r\n\r\n      loadWrap.classList.remove(\r\n        'show'\r\n      );\r\n\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     Featured article\r\n     \u0e43\u0e0a\u0e49\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e15\u0e2d\u0e19\u0e14\u0e39 \"\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\"\r\n     \u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e21\u0e35\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32\r\n    *\/\r\n\r\n    let gridPosts =\r\n      posts;\r\n\r\n\r\n    if(\r\n      activeCategory === 'all' &&\r\n      !searchKeyword\r\n    ){\r\n\r\n      renderFeatured(\r\n        posts[0]\r\n      );\r\n\r\n\r\n      gridPosts =\r\n        posts.slice(1);\r\n\r\n    }else{\r\n\r\n      featured.classList.remove(\r\n        'show'\r\n      );\r\n\r\n    }\r\n\r\n\r\n    const visiblePosts =\r\n      gridPosts.slice(\r\n        0,\r\n        visibleCount\r\n      );\r\n\r\n\r\n    visiblePosts.forEach(\r\n      function(post){\r\n\r\n        grid.appendChild(\r\n          createPostCard(\r\n            post\r\n          )\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    if(\r\n      visibleCount <\r\n      gridPosts.length\r\n    ){\r\n\r\n      loadWrap.classList.add(\r\n        'show'\r\n      );\r\n\r\n    }else{\r\n\r\n      loadWrap.classList.remove(\r\n        'show'\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =======================================================\r\n     SEARCH\r\n  ======================================================= *\/\r\n\r\n  function applySearch(){\r\n\r\n    searchKeyword =\r\n      searchInput.value\r\n        .trim();\r\n\r\n\r\n    visibleCount =\r\n      CONFIG.initialVisible;\r\n\r\n\r\n    render();\r\n\r\n  }\r\n\r\n\r\n  searchButton.addEventListener(\r\n    'click',\r\n    applySearch\r\n  );\r\n\r\n\r\n  searchInput.addEventListener(\r\n    'keydown',\r\n    function(event){\r\n\r\n      if(\r\n        event.key ===\r\n        'Enter'\r\n      ){\r\n\r\n        event.preventDefault();\r\n\r\n        applySearch();\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/*\r\n   Live search\r\n   \u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e2b\u0e25\u0e31\u0e07\u0e2b\u0e22\u0e38\u0e14\u0e1e\u0e34\u0e21\u0e1e\u0e4c\r\n  *\/\r\n\r\n  let searchTimer;\r\n\r\n\r\n  searchInput.addEventListener(\r\n    'input',\r\n    function(){\r\n\r\n      clearTimeout(\r\n        searchTimer\r\n      );\r\n\r\n\r\n      searchTimer =\r\n        setTimeout(\r\n          function(){\r\n\r\n            searchKeyword =\r\n              searchInput.value\r\n                .trim();\r\n\r\n\r\n            visibleCount =\r\n              CONFIG.initialVisible;\r\n\r\n\r\n            render();\r\n\r\n          },\r\n          300\r\n        );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =======================================================\r\n     CATEGORY FILTER\r\n  ======================================================= *\/\r\n\r\n  filters.addEventListener(\r\n    'click',\r\n    function(event){\r\n\r\n      const button =\r\n        event.target.closest(\r\n          '.wpbo-art-filter'\r\n        );\r\n\r\n\r\n      if(!button){\r\n        return;\r\n      }\r\n\r\n\r\n      filters\r\n        .querySelectorAll(\r\n          '.wpbo-art-filter'\r\n        )\r\n        .forEach(\r\n          function(item){\r\n\r\n            item.classList.remove(\r\n              'active'\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      button.classList.add(\r\n        'active'\r\n      );\r\n\r\n\r\n      activeCategory =\r\n        button.dataset.category;\r\n\r\n\r\n      visibleCount =\r\n        CONFIG.initialVisible;\r\n\r\n\r\n      render();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =======================================================\r\n     LOAD MORE\r\n  ======================================================= *\/\r\n\r\n  loadButton.addEventListener(\r\n    'click',\r\n    function(){\r\n\r\n      visibleCount +=\r\n        CONFIG.loadMoreAmount;\r\n\r\n\r\n      render();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =======================================================\r\n     INIT\r\n  ======================================================= *\/\r\n\r\n  async function init(){\r\n\r\n    try{\r\n\r\n\r\n      await Promise.all([\r\n\r\n        fetchCategories(),\r\n\r\n        fetchAllPosts()\r\n          .then(\r\n            function(posts){\r\n\r\n              allPosts =\r\n                posts;\r\n\r\n            }\r\n          )\r\n\r\n      ]);\r\n\r\n\r\n      render();\r\n\r\n\r\n    }catch(error){\r\n\r\n\r\n      console.error(\r\n        'WPBO Articles:',\r\n        error\r\n      );\r\n\r\n\r\n      if(skeleton){\r\n\r\n        skeleton.style.display =\r\n          'none';\r\n\r\n      }\r\n\r\n\r\n      if(featured){\r\n\r\n        featured.classList.remove(\r\n          'show'\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if(errorState){\r\n\r\n        errorState.classList.add(\r\n          'show'\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if(resultCount){\r\n\r\n        resultCount.textContent =\r\n          '\u0e42\u0e2b\u0e25\u0e14\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08';\r\n\r\n      }\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  init();\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WORDPRESS KNOWLEDGE CENTER \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 WordPress \u0e23\u0e27\u0e21\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04 \u0e41\u0e25\u0e30\u0e27\u0e34\u0e18\u0e35\u0e41\u0e01\u0e49\u0e1b\u0e31\u0e0d\u0e2b\u0e32 WordPress \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 \u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e14\u0e49\u0e27\u0e22 Astra \u0e41\u0e25\u0e30 Elementor \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07 SEO, Email, Performance \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e14\u0e39\u0e41\u0e25\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 \u25cf [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":4,"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/pages\/26\/revisions\/231"}],"wp:attachment":[{"href":"https:\/\/test.onsello.com\/en\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}