{"id":1731,"date":"2026-06-07T03:01:52","date_gmt":"2026-06-06T20:01:52","guid":{"rendered":"https:\/\/sptweave.com\/?page_id=1731"},"modified":"2026-06-07T03:24:31","modified_gmt":"2026-06-06T20:24:31","slug":"products-all","status":"publish","type":"page","link":"https:\/\/sptweave.com\/th\/products-all\/","title":{"rendered":"products all"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1731\" class=\"elementor elementor-1731\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc6318 e-flex e-con-boxed e-con e-parent\" data-id=\"1fc6318\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c35901 elementor-widget elementor-widget-html\" data-id=\"2c35901\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Thai:wght@300;400;500;600&display=swap');\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n\r\n:root {\r\n  --bg: #fafaf8;\r\n  --surface: #fff;\r\n  --border: #e8e4df;\r\n  --border-active: #1a1a1a;\r\n  --text-primary: #1a1a1a;\r\n  --text-secondary: #888880;\r\n  --tag-bg: #f0ede8;\r\n  --active-bg: #1a1a1a;\r\n  --active-text: #fff;\r\n}\r\n\r\n\/* ===== FULL-WIDTH BREAKOUT \u0e08\u0e32\u0e01 WordPress container ===== *\/\r\n#rope-shop-wrap {\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  position: relative !important;\r\n  left: 50% !important;\r\n  transform: translateX(-50%) !important;\r\n  margin-left: 0 !important;\r\n  margin-right: 0 !important;\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* Override WordPress theme container *\/\r\n#rope-shop-wrap *,\r\n#rope-shop-wrap *::before,\r\n#rope-shop-wrap *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#rope-shop {\r\n  font-family: 'Noto Sans Thai', sans-serif;\r\n  display: grid;\r\n  grid-template-columns: 220px 1fr 230px;\r\n  height: calc(100vh - 80px);\r\n  min-height: 600px;\r\n  width: 100%;\r\n  border: none;\r\n  border-radius: 0;\r\n  overflow: hidden;\r\n  background: var(--surface);\r\n  color: var(--text-primary);\r\n}\r\n\r\n\/* ===================== COL 1 ===================== *\/\r\n#rs-col1 {\r\n  border-right: 1px solid var(--border);\r\n  overflow-y: auto;\r\n  background: var(--surface);\r\n}\r\n\r\n.rs-col-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.15em;\r\n  text-transform: uppercase;\r\n  color: var(--text-secondary);\r\n  padding: 18px 18px 12px;\r\n  font-weight: 500;\r\n  border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.rs-cat-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 13px 18px;\r\n  cursor: pointer;\r\n  border-left: 3px solid transparent;\r\n  border-bottom: 1px solid var(--border);\r\n  transition: background 0.15s, border-color 0.15s;\r\n  user-select: none;\r\n}\r\n.rs-cat-item:hover { background: var(--tag-bg); }\r\n.rs-cat-item.active {\r\n  border-left-color: var(--border-active);\r\n  background: var(--tag-bg);\r\n}\r\n.rs-cat-item.active .rs-cat-name { font-weight: 600; }\r\n\r\n.rs-cat-thumb {\r\n  width: 46px; height: 46px;\r\n  border-radius: 8px;\r\n  background: var(--border);\r\n  flex-shrink: 0;\r\n  overflow: hidden;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 20px;\r\n}\r\n.rs-cat-thumb img { width:100%; height:100%; object-fit:cover; }\r\n.rs-cat-name { font-size: 13px; line-height: 1.4; }\r\n.rs-cat-count { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }\r\n\r\n\/* ===================== COL 2 ===================== *\/\r\n#rs-col2 {\r\n  padding: 20px;\r\n  overflow-y: auto;\r\n  background: var(--bg);\r\n}\r\n\r\n.rs-col2-header {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: space-between;\r\n  margin-bottom: 16px;\r\n  padding-bottom: 10px;\r\n  border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.rs-col2-title { font-size: 15px; font-weight: 500; }\r\n.rs-col2-count { font-size: 11px; color: var(--text-secondary); }\r\n\r\n.rs-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\r\n  gap: 12px;\r\n}\r\n\r\n.rs-empty {\r\n  grid-column: 1\/-1;\r\n  text-align: center;\r\n  padding: 50px 0;\r\n  color: var(--text-secondary);\r\n  font-size: 13px;\r\n}\r\n\r\n.rs-card {\r\n  cursor: pointer;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  border: 2px solid transparent;\r\n  background: var(--surface);\r\n  box-shadow: 0 1px 4px rgba(0,0,0,0.05);\r\n  transition: border-color 0.15s, transform 0.2s, box-shadow 0.2s;\r\n  animation: rsUp 0.25s ease both;\r\n}\r\n.rs-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-color: var(--border); }\r\n.rs-card.active { border-color: var(--border-active); }\r\n\r\n.rs-card-img {\r\n  width: 100%; aspect-ratio: 1;\r\n  background: var(--tag-bg);\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 34px;\r\n  overflow: hidden; position: relative;\r\n}\r\n.rs-card-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s; }\r\n.rs-card:hover .rs-card-img img { transform: scale(1.05); }\r\n.rs-card-img .rs-overlay {\r\n  position: absolute; inset: 0;\r\n  opacity: 0; transition: opacity 0.3s;\r\n  mix-blend-mode: multiply; pointer-events: none;\r\n}\r\n.rs-card-img .rs-overlay.on { opacity: 0.3; }\r\n\r\n.rs-card-info { padding: 8px 10px 10px; }\r\n.rs-card-name { font-size: 12px; font-weight: 500; line-height: 1.4; }\r\n.rs-card-sub  { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }\r\n.rs-card-price{ font-size: 12px; font-weight: 700; margin-top: 5px; }\r\n\r\n\/* Detail *\/\r\n.rs-detail { animation: rsUp 0.25s ease both; }\r\n.rs-back {\r\n  background: none; border: none; font-family: inherit;\r\n  font-size: 12px; color: var(--text-secondary); cursor: pointer;\r\n  padding: 4px 0; margin-bottom: 14px; display: flex; align-items: center; gap: 5px;\r\n  transition: color 0.15s;\r\n}\r\n.rs-back:hover { color: var(--text-primary); }\r\n.rs-detail-img {\r\n  width: 100%; aspect-ratio: 1;\r\n  background: var(--tag-bg);\r\n  border-radius: 10px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 72px; overflow: hidden; position: relative;\r\n  margin-bottom: 16px;\r\n}\r\n.rs-detail-img img { width:100%; height:100%; object-fit:cover; }\r\n.rs-detail-img .rs-overlay {\r\n  position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s;\r\n  mix-blend-mode: multiply; pointer-events: none;\r\n}\r\n.rs-detail-img .rs-overlay.on { opacity: 0.32; }\r\n.rs-detail-name  { font-size: 17px; font-weight: 600; letter-spacing:-0.02em; margin-bottom: 3px; }\r\n.rs-detail-sub   { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }\r\n.rs-detail-price { font-size: 18px; font-weight: 700; margin-bottom: 16px; }\r\n.rs-detail-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }\r\n.rs-detail-meta { font-size: 12px; color: var(--text-secondary); line-height: 2.2; }\r\n\r\n\/* ===================== COL 3 ===================== *\/\r\n#rs-col3 {\r\n  border-left: 1px solid var(--border);\r\n  padding: 18px 16px;\r\n  background: var(--surface);\r\n  overflow-y: auto;\r\n}\r\n\r\n.rs-nosel {\r\n  text-align: center;\r\n  padding: 40px 10px;\r\n  color: var(--text-secondary);\r\n  font-size: 12px;\r\n  line-height: 2;\r\n}\r\n.rs-nosel-icon { font-size: 26px; margin-bottom: 8px; }\r\n\r\n.rs-preview-box {\r\n  width: 100%; aspect-ratio: 1;\r\n  background: var(--tag-bg);\r\n  border-radius: 10px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 42px; overflow: hidden; position: relative;\r\n  margin-bottom: 14px;\r\n}\r\n.rs-preview-box img { width:100%; height:100%; object-fit:cover; }\r\n.rs-preview-box .rs-overlay {\r\n  position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s;\r\n  mix-blend-mode: multiply; pointer-events: none;\r\n}\r\n.rs-preview-box .rs-overlay.on { opacity: 0.38; }\r\n\r\n.rs-prod-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\r\n.rs-prod-sub  { font-size: 11px; color: var(--text-secondary); margin-bottom: 16px; }\r\n\r\n.rs-opt-label {\r\n  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;\r\n  color: var(--text-secondary); margin-bottom: 8px; font-weight: 500;\r\n}\r\n.rs-opt-sec { margin-bottom: 16px; }\r\n\r\n.rs-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 5px; }\r\n.rs-swatch {\r\n  width: 24px; height: 24px; border-radius: 50%;\r\n  cursor: pointer; border: 2px solid transparent;\r\n  transition: transform 0.15s;\r\n}\r\n.rs-swatch:hover { transform: scale(1.2); }\r\n.rs-swatch.on {\r\n  border-color: var(--border-active);\r\n  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--border-active);\r\n}\r\n.rs-color-label { font-size: 11px; color: var(--text-secondary); min-height: 15px; }\r\n\r\n.rs-patterns { display: flex; flex-direction: column; gap: 5px; }\r\n.rs-pat-btn {\r\n  display: flex; align-items: center; gap: 8px;\r\n  padding: 8px 10px;\r\n  border: 1px solid var(--border); border-radius: 6px;\r\n  cursor: pointer; font-family: inherit; font-size: 11px;\r\n  background: var(--surface); color: var(--text-primary);\r\n  transition: all 0.12s; text-align: left; width: 100%;\r\n}\r\n.rs-pat-btn:hover { border-color: var(--border-active); background: var(--tag-bg); }\r\n.rs-pat-btn.on { background: var(--active-bg); color: var(--active-text); border-color: var(--active-bg); }\r\n.rs-pat-swatch { width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0; }\r\n\r\n@keyframes rsUp {\r\n  from { opacity:0; transform:translateY(8px); }\r\n  to   { opacity:1; transform:translateY(0); }\r\n}\r\n\r\n\/* ===================== RESPONSIVE ===================== *\/\r\n@media(max-width:700px){\r\n  #rope-shop { grid-template-columns: 1fr; height: auto; }\r\n  #rs-col1 { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }\r\n  .rs-col-label { display: none; }\r\n  .rs-cat-item { flex-direction: column; align-items: center; text-align: center; min-width: 72px; border-left: none; border-bottom: 3px solid transparent; border-right: 1px solid var(--border); }\r\n  .rs-cat-item.active { border-left-color: transparent; border-bottom-color: var(--border-active); }\r\n  #rs-col3 { border-left: none; border-top: 1px solid var(--border); }\r\n}\r\n<\/style>\r\n\r\n<div id=\"rope-shop-wrap\">\r\n  <div id=\"rope-shop\">\r\n\r\n    <!-- COL 1 -->\r\n    <div id=\"rs-col1\">\r\n      <div class=\"rs-col-label\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/div>\r\n    <\/div>\r\n\r\n    <!-- COL 2 -->\r\n    <div id=\"rs-col2\">\r\n      <div class=\"rs-col2-header\">\r\n        <span class=\"rs-col2-title\" id=\"rs-title\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/span>\r\n        <span class=\"rs-col2-count\" id=\"rs-count\"><\/span>\r\n      <\/div>\r\n      <div id=\"rs-body\">\r\n        <div class=\"rs-grid\">\r\n          <div class=\"rs-empty\">\u2190 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e01\u0e48\u0e2d\u0e19<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- COL 3 -->\r\n    <div id=\"rs-col3\">\r\n      <div class=\"rs-col-label\">\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07<\/div>\r\n      <div id=\"rs-custom\">\r\n        <div class=\"rs-nosel\">\r\n          <div class=\"rs-nosel-icon\">\u2190<\/div>\r\n          \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e01\u0e48\u0e2d\u0e19\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst CATS = [\r\n  {\r\n    id:'decorative', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07', emoji:'\ud83e\udea2', img:'',\r\n    products:[\r\n      {id:'p1', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e21\u0e32\u0e42\u0e04\u0e23\u0e40\u0e21', sub:'\u0e02\u0e19\u0e32\u0e14 3mm', price:'\u0e3f120', emoji:'\ud83e\udea2', img:''},\r\n      {id:'p2', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e16\u0e31\u0e01',     sub:'\u0e02\u0e19\u0e32\u0e14 5mm', price:'\u0e3f150', emoji:'\ud83e\uddf5', img:''},\r\n      {id:'p3', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e1d\u0e49\u0e32\u0e22',   sub:'\u0e02\u0e19\u0e32\u0e14 2mm', price:'\u0e3f90',  emoji:'\ud83c\udf3f', img:''},\r\n    ]\r\n  },\r\n  {\r\n    id:'functional', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19', emoji:'\u2693', img:'',\r\n    products:[\r\n      {id:'p4', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e44\u0e19\u0e25\u0e48\u0e2d\u0e19',      sub:'10m\/\u0e21\u0e49\u0e27\u0e19', price:'\u0e3f200', emoji:'\ud83d\udd35', img:''},\r\n      {id:'p5', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e42\u0e1e\u0e25\u0e35\u0e40\u0e2d\u0e2a\u0e40\u0e15\u0e2d\u0e23\u0e4c',sub:'10m\/\u0e21\u0e49\u0e27\u0e19', price:'\u0e3f180', emoji:'\ud83d\udfe2', img:''},\r\n      {id:'p6', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e1b\u0e48\u0e32\u0e19',        sub:'5m\/\u0e21\u0e49\u0e27\u0e19',  price:'\u0e3f110', emoji:'\ud83d\udfe4', img:''},\r\n      {id:'p7', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e44\u0e08\u0e15\u0e49\u0e32',       sub:'20m\/\u0e21\u0e49\u0e27\u0e19', price:'\u0e3f350', emoji:'\ud83c\udf3e', img:''},\r\n    ]\r\n  },\r\n  {\r\n    id:'craft', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01 DIY', emoji:'\u2702\ufe0f', img:'',\r\n    products:[\r\n      {id:'p8', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e27\u0e2d\u0e41\u0e25\u0e19', sub:'50m\/\u0e21\u0e49\u0e27\u0e19', price:'\u0e3f80', emoji:'\ud83c\udfa8', img:''},\r\n      {id:'p9', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e23\u0e34\u0e1a\u0e1a\u0e34\u0e49\u0e19',sub:'20m\/\u0e21\u0e49\u0e27\u0e19', price:'\u0e3f95', emoji:'\ud83c\udf80', img:''},\r\n    ]\r\n  },\r\n  {\r\n    id:'gift', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e02\u0e2d\u0e07\u0e02\u0e27\u0e31\u0e0d', emoji:'\ud83c\udf81', img:'',\r\n    products:[\r\n      {id:'p10', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e0b\u0e32\u0e15\u0e34\u0e19',   sub:'\u0e15\u0e31\u0e14\u0e15\u0e32\u0e21\u0e2a\u0e31\u0e48\u0e07', price:'\u0e3f60\/m', emoji:'\u2728', img:''},\r\n      {id:'p11', name:'\u0e40\u0e0a\u0e37\u0e2d\u0e01\u0e01\u0e33\u0e21\u0e30\u0e2b\u0e22\u0e35\u0e48',sub:'\u0e15\u0e31\u0e14\u0e15\u0e32\u0e21\u0e2a\u0e31\u0e48\u0e07', price:'\u0e3f75\/m', emoji:'\ud83d\udc9c', img:''},\r\n    ]\r\n  },\r\n];\r\n\r\nconst COLORS = [\r\n  {id:'natural',    label:'\u0e40\u0e19\u0e40\u0e0a\u0e2d\u0e23\u0e31\u0e25', hex:'#d4c5a9'},\r\n  {id:'white',      label:'\u0e02\u0e32\u0e27',       hex:'#f0f0ea'},\r\n  {id:'black',      label:'\u0e14\u0e33',        hex:'#1a1a1a'},\r\n  {id:'brown',      label:'\u0e19\u0e49\u0e33\u0e15\u0e32\u0e25',    hex:'#8b6239'},\r\n  {id:'navy',       label:'\u0e01\u0e23\u0e21\u0e17\u0e48\u0e32',    hex:'#1e3560'},\r\n  {id:'sage',       label:'\u0e40\u0e02\u0e35\u0e22\u0e27',     hex:'#7a9e7e'},\r\n  {id:'terracotta', label:'\u0e14\u0e34\u0e19',       hex:'#b85c38'},\r\n  {id:'dusty',      label:'\u0e0a\u0e21\u0e1e\u0e39',      hex:'#d4a5a5'},\r\n];\r\n\r\nconst PATTERNS = [\r\n  {id:'plain',   label:'\u0e40\u0e23\u0e35\u0e22\u0e1a',          stripe:null},\r\n  {id:'stripe2', label:'\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07\u0e04\u0e39\u0e48',     stripe:'double'},\r\n  {id:'twist',   label:'\u0e25\u0e32\u0e22\u0e1a\u0e34\u0e14',        stripe:'twist'},\r\n  {id:'braid',   label:'\u0e25\u0e32\u0e22\u0e16\u0e31\u0e01 3 \u0e40\u0e2a\u0e49\u0e19',stripe:'braid'},\r\n];\r\n\r\nlet activeCatId = null;\r\nlet activeProd  = null;\r\nlet activeColor = COLORS[0];\r\nlet activePat   = PATTERNS[0];\r\nlet view        = 'grid';\r\n\r\nfunction lighten(hex, n){\r\n  const v = parseInt(hex.replace('#',''),16);\r\n  const r = Math.min(255,(v>>16)+n), g = Math.min(255,((v>>8)&0xff)+n), b = Math.min(255,(v&0xff)+n);\r\n  return '#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('');\r\n}\r\n\r\nfunction patStyle(p, hex){\r\n  const base = hex||'#d0c8be', light = lighten(base,45);\r\n  switch(p.stripe){\r\n    case 'double': return `background:repeating-linear-gradient(90deg,${base} 0,${base} 5px,${light} 5px,${light} 9px,${base} 9px,${base} 14px,#fff 14px,#fff 18px)`;\r\n    case 'twist':  return `background:repeating-linear-gradient(45deg,${base},${base} 4px,${light} 4px,${light} 8px)`;\r\n    case 'braid':  return `background:repeating-linear-gradient(135deg,${base},${base} 3px,${light} 3px,${light} 6px,#e0d8cc 6px,#e0d8cc 9px)`;\r\n    default:       return `background:${base}`;\r\n  }\r\n}\r\n\r\nfunction renderCats(){\r\n  const col = document.getElementById('rs-col1');\r\n  col.innerHTML = '<div class=\"rs-col-label\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/div>';\r\n  CATS.forEach((cat,i)=>{\r\n    const div = document.createElement('div');\r\n    div.className = 'rs-cat-item'+(activeCatId===cat.id?' active':'');\r\n    div.style.animationDelay = (i*0.05)+'s';\r\n    div.innerHTML = `\r\n      <div class=\"rs-cat-thumb\">\r\n        ${cat.img?`<img decoding=\"async\" src=\"${cat.img}\" alt=\"${cat.name}\" loading=\"lazy\">`:cat.emoji}\r\n      <\/div>\r\n      <div>\r\n        <div class=\"rs-cat-name\">${cat.name}<\/div>\r\n        <div class=\"rs-cat-count\">${cat.products.length} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/div>\r\n      <\/div>`;\r\n    div.addEventListener('click',()=>{\r\n      activeCatId = cat.id;\r\n      activeProd  = null;\r\n      view        = 'grid';\r\n      renderCats();\r\n      renderCol2();\r\n      renderCol3();\r\n    });\r\n    col.appendChild(div);\r\n  });\r\n}\r\n\r\nfunction renderCol2(){\r\n  const cat = CATS.find(c=>c.id===activeCatId);\r\n  if(!cat) return;\r\n  if(view==='detail' && activeProd) renderDetail(cat);\r\n  else renderGrid(cat);\r\n}\r\n\r\nfunction renderGrid(cat){\r\n  document.getElementById('rs-title').textContent = cat.name;\r\n  document.getElementById('rs-count').textContent = cat.products.length+' \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23';\r\n  const body = document.getElementById('rs-body');\r\n  body.innerHTML = '';\r\n  const grid = document.createElement('div');\r\n  grid.className = 'rs-grid';\r\n  cat.products.forEach((prod,i)=>{\r\n    const card = document.createElement('div');\r\n    card.className = 'rs-card';\r\n    card.style.animationDelay = (i*0.05)+'s';\r\n    card.innerHTML = `\r\n      <div class=\"rs-card-img\">\r\n        ${prod.img?`<img decoding=\"async\" src=\"${prod.img}\" alt=\"${prod.name}\" loading=\"lazy\">`:prod.emoji}\r\n        <div class=\"rs-overlay\"><\/div>\r\n      <\/div>\r\n      <div class=\"rs-card-info\">\r\n        <div class=\"rs-card-name\">${prod.name}<\/div>\r\n        <div class=\"rs-card-sub\">${prod.sub}<\/div>\r\n        <div class=\"rs-card-price\">${prod.price}<\/div>\r\n      <\/div>`;\r\n    card.addEventListener('click',()=>{\r\n      activeProd = prod;\r\n      view = 'detail';\r\n      renderCats();\r\n      renderCol2();\r\n      renderCol3();\r\n    });\r\n    grid.appendChild(card);\r\n  });\r\n  body.appendChild(grid);\r\n}\r\n\r\nfunction renderDetail(cat){\r\n  document.getElementById('rs-title').textContent = activeProd.name;\r\n  document.getElementById('rs-count').textContent = '';\r\n  const body = document.getElementById('rs-body');\r\n  const overlayBg = activeColor?activeColor.hex:'transparent';\r\n  const overlayOn = activeColor?'on':'';\r\n  body.innerHTML = `\r\n    <div class=\"rs-detail\">\r\n      <button class=\"rs-back\" id=\"rs-back-btn\">\u2190 \u0e01\u0e25\u0e31\u0e1a<\/button>\r\n      <div class=\"rs-detail-img\">\r\n        ${activeProd.img?`<img decoding=\"async\" src=\"${activeProd.img}\" alt=\"${activeProd.name}\" loading=\"lazy\">`:activeProd.emoji}\r\n        <div class=\"rs-overlay ${overlayOn}\" id=\"rs-detail-overlay\" style=\"background:${overlayBg}\"><\/div>\r\n      <\/div>\r\n      <div class=\"rs-detail-name\">${activeProd.name}<\/div>\r\n      <div class=\"rs-detail-sub\">${activeProd.sub}<\/div>\r\n      <div class=\"rs-detail-price\">${activeProd.price}<\/div>\r\n      <hr class=\"rs-detail-divider\">\r\n      <div class=\"rs-detail-meta\">\r\n        <div>\ud83d\udce6 \u0e2b\u0e21\u0e27\u0e14: ${cat.name}<\/div>\r\n        <div>\ud83d\udccf \u0e02\u0e19\u0e32\u0e14: ${activeProd.sub}<\/div>\r\n        <div>\ud83d\udcb0 \u0e23\u0e32\u0e04\u0e32: ${activeProd.price}<\/div>\r\n      <\/div>\r\n    <\/div>`;\r\n  document.getElementById('rs-back-btn').addEventListener('click',()=>{\r\n    view = 'grid';\r\n    activeProd = null;\r\n    document.getElementById('rs-title').textContent = cat.name;\r\n    document.getElementById('rs-count').textContent = cat.products.length+' \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23';\r\n    renderGrid(cat);\r\n    renderCol3();\r\n  });\r\n}\r\n\r\nfunction renderCol3(){\r\n  const el = document.getElementById('rs-custom');\r\n  if(!activeProd){\r\n    el.innerHTML = `<div class=\"rs-nosel\"><div class=\"rs-nosel-icon\">\u2190<\/div>\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e01\u0e48\u0e2d\u0e19<\/div>`;\r\n    return;\r\n  }\r\n  const overlayBg = activeColor?activeColor.hex:'transparent';\r\n  const overlayOn = activeColor?'on':'';\r\n  el.innerHTML = `\r\n    <div class=\"rs-preview-box\">\r\n      ${activeProd.img?`<img decoding=\"async\" src=\"${activeProd.img}\" alt=\"${activeProd.name}\" loading=\"lazy\">`:activeProd.emoji}\r\n      <div class=\"rs-overlay ${overlayOn}\" id=\"rs-prev-overlay\" style=\"background:${overlayBg}\"><\/div>\r\n    <\/div>\r\n    <div class=\"rs-prod-name\">${activeProd.name}<\/div>\r\n    <div class=\"rs-prod-sub\">${activeProd.sub} \u2014 ${activeProd.price}<\/div>\r\n    <div class=\"rs-opt-sec\">\r\n      <div class=\"rs-opt-label\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e35<\/div>\r\n      <div class=\"rs-swatches\">\r\n        ${COLORS.map(c=>`\r\n          <div class=\"rs-swatch${activeColor?.id===c.id?' on':''}\"\r\n               style=\"background:${c.hex}\" title=\"${c.label}\"\r\n               data-cid=\"${c.id}\"><\/div>`).join('')}\r\n      <\/div>\r\n      <div class=\"rs-color-label\" id=\"rs-clabel\">${activeColor?.label||''}<\/div>\r\n    <\/div>\r\n    <div class=\"rs-opt-sec\">\r\n      <div class=\"rs-opt-label\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e25\u0e32\u0e22<\/div>\r\n      <div class=\"rs-patterns\">\r\n        ${PATTERNS.map(p=>`\r\n          <button class=\"rs-pat-btn${activePat?.id===p.id?' on':''}\" data-pid=\"${p.id}\">\r\n            <div class=\"rs-pat-swatch\" style=\"${patStyle(p,activeColor?.hex)}\"><\/div>\r\n            ${p.label}\r\n          <\/button>`).join('')}\r\n      <\/div>\r\n    <\/div>`;\r\n\r\n  el.querySelectorAll('.rs-swatch').forEach(sw=>{\r\n    sw.addEventListener('click',()=>{\r\n      activeColor = COLORS.find(c=>c.id===sw.dataset.cid);\r\n      updateAllOverlays();\r\n      renderCol3();\r\n    });\r\n    sw.addEventListener('mouseenter',()=>{\r\n      const c = COLORS.find(c=>c.id===sw.dataset.cid);\r\n      const lbl = document.getElementById('rs-clabel');\r\n      if(lbl&&c) lbl.textContent = c.label;\r\n    });\r\n    sw.addEventListener('mouseleave',()=>{\r\n      const lbl = document.getElementById('rs-clabel');\r\n      if(lbl) lbl.textContent = activeColor?.label||'';\r\n    });\r\n  });\r\n\r\n  el.querySelectorAll('.rs-pat-btn').forEach(btn=>{\r\n    btn.addEventListener('click',()=>{\r\n      activePat = PATTERNS.find(p=>p.id===btn.dataset.pid);\r\n      renderCol3();\r\n    });\r\n  });\r\n}\r\n\r\nfunction updateAllOverlays(){\r\n  const d = document.getElementById('rs-detail-overlay');\r\n  if(d){\r\n    d.style.background = activeColor?activeColor.hex:'transparent';\r\n    activeColor ? d.classList.add('on') : d.classList.remove('on');\r\n  }\r\n}\r\n\r\n\/\/ INIT\r\nrenderCats();\r\nactiveCatId = CATS[0].id;\r\nrenderCats();\r\nrenderCol2();\r\n<\/script>\t\t\t\t<\/div>\n\t\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>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u2190 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e01\u0e48\u0e2d\u0e19 \u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07 \u2190 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e01\u0e48\u0e2d\u0e19<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-1731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/pages\/1731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/comments?post=1731"}],"version-history":[{"count":8,"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/pages\/1731\/revisions"}],"predecessor-version":[{"id":1794,"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/pages\/1731\/revisions\/1794"}],"wp:attachment":[{"href":"https:\/\/sptweave.com\/th\/wp-json\/wp\/v2\/media?parent=1731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}