{"id":30,"date":"2026-03-04T23:55:49","date_gmt":"2026-03-04T16:55:49","guid":{"rendered":"https:\/\/le-lab.shop\/?page_id=30"},"modified":"2026-03-05T00:26:20","modified_gmt":"2026-03-04T17:26:20","slug":"%e0%b8%aa%e0%b8%a7%e0%b8%b1%e0%b8%aa%e0%b8%94%e0%b8%b5%e0%b8%9e%e0%b9%88%e0%b8%ad%e0%b8%9a%e0%b9%89%e0%b8%b2%e0%b8%99","status":"publish","type":"page","link":"https:\/\/le-lab.shop\/","title":{"rendered":"Brave Husband"},"content":{"rendered":"<!-- \u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e0a\u0e33\u0e23\u0e30 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32 | \u0e27\u0e32\u0e07\u0e43\u0e19 Custom HTML Block -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n#tpc-app {\r\n  --tpc-bg: #faf7f2;\r\n  --tpc-card: #ffffff;\r\n  --tpc-ink: #1a1208;\r\n  --tpc-muted: #8a7d6b;\r\n  --tpc-accent: #e8651a;\r\n  --tpc-accent2: #2d7d46;\r\n  --tpc-border: #e2d9cc;\r\n  --tpc-roll: #f5efe6;\r\n  --tpc-best: #fff8e8;\r\n  --tpc-best-border: #f0c040;\r\n  --tpc-shadow: 0 2px 20px rgba(0,0,0,0.07);\r\n  font-family: 'Sarabun', sans-serif;\r\n  background: var(--tpc-bg);\r\n  color: var(--tpc-ink);\r\n  border-radius: 16px;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n}\r\n\r\n#tpc-app *, #tpc-app *::before, #tpc-app *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#tpc-app .tpc-header {\r\n  background: var(--tpc-ink);\r\n  color: #fff;\r\n  padding: 28px 24px 22px;\r\n  text-align: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n#tpc-app .tpc-header::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255,255,255,0.03) 18px, rgba(255,255,255,0.03) 36px);\r\n}\r\n\r\n#tpc-app .tpc-header-roll { font-size: 48px; line-height: 1; display: block; margin-bottom: 6px; }\r\n\r\n#tpc-app .tpc-header h1 {\r\n  font-family: 'Space Mono', monospace;\r\n  font-size: clamp(16px, 4vw, 26px);\r\n  letter-spacing: -0.5px;\r\n  position: relative;\r\n}\r\n\r\n#tpc-app .tpc-header p {\r\n  font-size: 13px;\r\n  color: rgba(255,255,255,0.55);\r\n  margin-top: 6px;\r\n  position: relative;\r\n}\r\n\r\n#tpc-app .tpc-container { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; }\r\n\r\n#tpc-app .tpc-add-section {\r\n  background: var(--tpc-card);\r\n  border: 1.5px solid var(--tpc-border);\r\n  border-radius: 16px;\r\n  padding: 24px;\r\n  margin: 28px 0 20px;\r\n  box-shadow: var(--tpc-shadow);\r\n}\r\n\r\n#tpc-app .tpc-add-section h2 {\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  color: var(--tpc-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n  margin-bottom: 18px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n#tpc-app .tpc-form-grid {\r\n  display: grid;\r\n  grid-template-columns: 2fr 1fr 1fr 1fr auto;\r\n  gap: 10px;\r\n  align-items: end;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  #tpc-app .tpc-form-grid { grid-template-columns: 1fr 1fr; }\r\n  #tpc-app .tpc-name-field { grid-column: 1 \/ -1; }\r\n  #tpc-app .tpc-btn-add { grid-column: 1 \/ -1; }\r\n}\r\n\r\n#tpc-app label {\r\n  display: block;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--tpc-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.7px;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n#tpc-app input[type=\"text\"],\r\n#tpc-app input[type=\"number\"] {\r\n  width: 100%;\r\n  padding: 10px 13px;\r\n  border: 1.5px solid var(--tpc-border);\r\n  border-radius: 8px;\r\n  font-family: 'Sarabun', sans-serif;\r\n  font-size: 15px;\r\n  background: var(--tpc-bg);\r\n  color: var(--tpc-ink);\r\n  transition: border-color 0.15s;\r\n  outline: none;\r\n  -moz-appearance: textfield;\r\n}\r\n\r\n#tpc-app input::-webkit-outer-spin-button,\r\n#tpc-app input::-webkit-inner-spin-button { -webkit-appearance: none; }\r\n\r\n#tpc-app input:focus { border-color: var(--tpc-accent); background: #fff; }\r\n\r\n#tpc-app .tpc-btn-add {\r\n  padding: 11px 20px;\r\n  background: var(--tpc-accent);\r\n  color: #fff;\r\n  border: none;\r\n  border-radius: 8px;\r\n  font-family: 'Sarabun', sans-serif;\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n  transition: background 0.15s, transform 0.1s;\r\n  white-space: nowrap;\r\n}\r\n\r\n#tpc-app .tpc-btn-add:hover { background: #c9540e; }\r\n#tpc-app .tpc-btn-add:active { transform: scale(0.97); }\r\n\r\n#tpc-app .tpc-results-header {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: space-between;\r\n  margin: 28px 0 14px;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n}\r\n\r\n#tpc-app .tpc-results-header h2 {\r\n  font-family: 'Space Mono', monospace;\r\n  font-size: 15px;\r\n  color: var(--tpc-ink);\r\n}\r\n\r\n#tpc-app .tpc-sort-btns { display: flex; gap: 6px; flex-wrap: wrap; }\r\n\r\n#tpc-app .tpc-sort-btn {\r\n  padding: 5px 12px;\r\n  border: 1.5px solid var(--tpc-border);\r\n  border-radius: 20px;\r\n  font-size: 12px;\r\n  font-family: 'Sarabun', sans-serif;\r\n  font-weight: 600;\r\n  background: #fff;\r\n  color: var(--tpc-muted);\r\n  cursor: pointer;\r\n  transition: all 0.15s;\r\n}\r\n\r\n#tpc-app .tpc-sort-btn.active { background: var(--tpc-ink); color: #fff; border-color: var(--tpc-ink); }\r\n\r\n#tpc-app .tpc-cards { display: flex; flex-direction: column; gap: 12px; }\r\n\r\n#tpc-app .tpc-card {\r\n  background: var(--tpc-card);\r\n  border: 1.5px solid var(--tpc-border);\r\n  border-radius: 14px;\r\n  padding: 16px 18px;\r\n  box-shadow: var(--tpc-shadow);\r\n  display: grid;\r\n  grid-template-columns: auto 1fr auto auto;\r\n  gap: 12px;\r\n  align-items: center;\r\n  transition: transform 0.15s, box-shadow 0.15s;\r\n  position: relative;\r\n  overflow: hidden;\r\n  animation: tpcSlideIn 0.3s ease forwards;\r\n}\r\n\r\n@keyframes tpcSlideIn {\r\n  from { opacity: 0; transform: translateY(12px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n#tpc-app .tpc-card:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,0,0,0.1); }\r\n\r\n#tpc-app .tpc-card.best { background: var(--tpc-best); border-color: var(--tpc-best-border); }\r\n\r\n#tpc-app .tpc-card.best::before {\r\n  content: '\ud83c\udfc6 \u0e04\u0e38\u0e49\u0e21\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14';\r\n  position: absolute;\r\n  top: 0; right: 0;\r\n  background: var(--tpc-best-border);\r\n  color: #7a5500;\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  padding: 4px 12px;\r\n  border-radius: 0 14px 0 10px;\r\n}\r\n\r\n#tpc-app .tpc-rank {\r\n  font-family: 'Space Mono', monospace;\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  color: var(--tpc-border);\r\n  min-width: 32px;\r\n  text-align: center;\r\n}\r\n\r\n#tpc-app .tpc-card.best .tpc-rank { color: var(--tpc-best-border); }\r\n\r\n#tpc-app .tpc-brand-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }\r\n\r\n#tpc-app .tpc-specs { display: flex; flex-wrap: wrap; gap: 6px; }\r\n\r\n#tpc-app .tpc-spec-chip {\r\n  background: var(--tpc-roll);\r\n  border: 1px solid var(--tpc-border);\r\n  border-radius: 20px;\r\n  padding: 2px 10px;\r\n  font-size: 12px;\r\n  color: var(--tpc-muted);\r\n  font-weight: 600;\r\n}\r\n\r\n#tpc-app .tpc-card-value { text-align: right; }\r\n\r\n#tpc-app .tpc-cost-per-meter {\r\n  font-family: 'Space Mono', monospace;\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  color: var(--tpc-accent);\r\n  white-space: nowrap;\r\n}\r\n\r\n#tpc-app .tpc-card.best .tpc-cost-per-meter { color: var(--tpc-accent2); }\r\n\r\n#tpc-app .tpc-cost-label { font-size: 11px; color: var(--tpc-muted); margin-top: 2px; }\r\n#tpc-app .tpc-cost-total { font-size: 13px; color: var(--tpc-muted); margin-top: 4px; }\r\n\r\n#tpc-app .tpc-btn-remove {\r\n  background: #fff0ee;\r\n  border: 1.5px solid #f5c5bb;\r\n  color: #c0392b;\r\n  cursor: pointer;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n  padding: 4px 9px;\r\n  border-radius: 6px;\r\n  transition: all 0.15s;\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n  font-family: 'Sarabun', sans-serif;\r\n}\r\n\r\n#tpc-app .tpc-btn-remove:hover { background: #e74c3c; border-color: #e74c3c; color: #fff; }\r\n\r\n#tpc-app .tpc-btn-clear {\r\n  padding: 5px 14px;\r\n  border: 1.5px solid #f5c5bb;\r\n  border-radius: 20px;\r\n  font-size: 12px;\r\n  font-family: 'Sarabun', sans-serif;\r\n  font-weight: 600;\r\n  background: #fff0ee;\r\n  color: #c0392b;\r\n  cursor: pointer;\r\n  transition: all 0.15s;\r\n}\r\n\r\n#tpc-app .tpc-btn-clear:hover { background: #e74c3c; border-color: #e74c3c; color: #fff; }\r\n\r\n#tpc-app .tpc-bar-wrap {\r\n  margin-top: 8px;\r\n  height: 5px;\r\n  background: var(--tpc-border);\r\n  border-radius: 4px;\r\n  overflow: hidden;\r\n  max-width: 160px;\r\n  margin-left: auto;\r\n}\r\n\r\n#tpc-app .tpc-bar-fill {\r\n  height: 100%;\r\n  border-radius: 4px;\r\n  background: var(--tpc-accent);\r\n  transition: width 0.5s ease;\r\n}\r\n\r\n#tpc-app .tpc-card.best .tpc-bar-fill { background: var(--tpc-accent2); }\r\n\r\n#tpc-app .tpc-empty { text-align: center; padding: 60px 20px; color: var(--tpc-muted); }\r\n#tpc-app .tpc-empty-icon { font-size: 48px; margin-bottom: 12px; }\r\n#tpc-app .tpc-empty p { font-size: 16px; }\r\n\r\n#tpc-app .tpc-summary {\r\n  background: var(--tpc-ink);\r\n  color: #fff;\r\n  border-radius: 12px;\r\n  padding: 16px 20px;\r\n  margin: 20px 0;\r\n  display: flex;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n#tpc-app .tpc-summary-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }\r\n\r\n#tpc-app .tpc-summary-value {\r\n  font-family: 'Space Mono', monospace;\r\n  font-size: 18px;\r\n  font-weight: 700;\r\n  color: var(--tpc-best-border);\r\n}\r\n\r\n#tpc-app .tpc-summary-label {\r\n  color: rgba(255,255,255,0.5);\r\n  font-size: 11px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n#tpc-app .tpc-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.15); }\r\n\r\n#tpc-app .tpc-error { color: #e03030; font-size: 12px; margin-top: 6px; min-height: 16px; }\r\n\r\n\/* AUTOCOMPLETE *\/\r\n#tpc-app .tpc-autocomplete-wrap { position: relative; }\r\n\r\n#tpc-app .tpc-suggestions {\r\n  position: absolute;\r\n  top: calc(100% + 4px);\r\n  left: 0; right: 0;\r\n  background: #fff;\r\n  border: 1.5px solid var(--tpc-accent);\r\n  border-radius: 10px;\r\n  box-shadow: 0 8px 24px rgba(0,0,0,0.12);\r\n  z-index: 9999;\r\n  overflow: hidden;\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n}\r\n\r\n#tpc-app .tpc-suggestion-item {\r\n  padding: 10px 14px;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  transition: background 0.1s;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-family: 'Sarabun', sans-serif;\r\n}\r\n\r\n#tpc-app .tpc-suggestion-item:hover,\r\n#tpc-app .tpc-suggestion-item.highlighted { background: var(--tpc-roll); }\r\n\r\n#tpc-app .tpc-suggestion-tag {\r\n  font-size: 10px;\r\n  padding: 1px 7px;\r\n  border-radius: 10px;\r\n  font-weight: 600;\r\n  margin-left: auto;\r\n  white-space: nowrap;\r\n}\r\n\r\n#tpc-app .tag-preset { background: var(--tpc-border); color: var(--tpc-muted); }\r\n#tpc-app .tag-custom { background: #e8f5ee; color: var(--tpc-accent2); border: 1px solid #b8dfc8; }\r\n#tpc-app .tag-new    { background: #fff3e8; color: var(--tpc-accent);  border: 1px solid #f5d0b0; }\r\n<\/style>\r\n\r\n<div id=\"tpc-app\">\r\n  <div class=\"tpc-header\">\r\n    <span class=\"tpc-header-roll\">\ud83e\uddfb<\/span>\r\n    <h1>TOILET PAPER CALCULATOR<\/h1>\r\n    <p>\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e0a\u0e33\u0e23\u0e30 \u2014 \u0e2b\u0e32\u0e17\u0e35\u0e48\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"tpc-container\">\r\n    <div class=\"tpc-add-section\">\r\n      <h2>\u271a \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/h2>\r\n      <div class=\"tpc-form-grid\">\r\n        <div class=\"tpc-name-field\">\r\n          <label for=\"tpc-brand\">\u0e22\u0e35\u0e48\u0e2b\u0e49\u0e2d \/ \u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/label>\r\n          <div class=\"tpc-autocomplete-wrap\">\r\n            <input type=\"text\" id=\"tpc-brand\" placeholder=\"\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e22\u0e35\u0e48\u0e2b\u0e49\u0e2d...\" autocomplete=\"off\">\r\n            <div class=\"tpc-suggestions\" id=\"tpc-suggestions\" style=\"display:none\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div>\r\n          <label for=\"tpc-price\">\u0e23\u0e32\u0e04\u0e32 (\u0e1a\u0e32\u0e17)<\/label>\r\n          <input type=\"number\" id=\"tpc-price\" placeholder=\"0\" min=\"0\" step=\"0.01\">\r\n        <\/div>\r\n        <div>\r\n          <label for=\"tpc-rolls\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e21\u0e49\u0e27\u0e19<\/label>\r\n          <input type=\"number\" id=\"tpc-rolls\" placeholder=\"0\" min=\"1\" step=\"1\">\r\n        <\/div>\r\n        <div>\r\n          <label for=\"tpc-length\">\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e27\/\u0e21\u0e49\u0e27\u0e19 (\u0e21.)<\/label>\r\n          <input type=\"number\" id=\"tpc-length\" placeholder=\"0\" min=\"0\" step=\"0.1\">\r\n        <\/div>\r\n        <div>\r\n          <button class=\"tpc-btn-add\" id=\"tpc-btn-add\">\u0e40\u0e1e\u0e34\u0e48\u0e21<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"tpc-error\" id=\"tpc-error\"><\/div>\r\n    <\/div>\r\n\r\n    <div id=\"tpc-summary\" style=\"display:none\" class=\"tpc-summary\"><\/div>\r\n\r\n    <div class=\"tpc-results-header\">\r\n      <h2>\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a<\/h2>\r\n      <div class=\"tpc-sort-btns\">\r\n        <button class=\"tpc-sort-btn active\" data-sort=\"value\">\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32 \u2191<\/button>\r\n        <button class=\"tpc-sort-btn\" data-sort=\"name\">\u0e0a\u0e37\u0e48\u0e2d<\/button>\r\n        <button class=\"tpc-sort-btn\" data-sort=\"price\">\u0e23\u0e32\u0e04\u0e32<\/button>\r\n        <button class=\"tpc-btn-clear\" id=\"tpc-btn-clear\">\ud83d\uddd1 \u0e25\u0e49\u0e32\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tpc-cards\" id=\"tpc-cards\">\r\n      <div class=\"tpc-empty\"><div class=\"tpc-empty-icon\">\ud83e\uddfb<\/div><p>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a<\/p><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  var products = [];\r\n  var sortBy = 'value';\r\n  var highlightIdx = -1;\r\n\r\n  var PRESET_BRANDS = [\r\n    '\u0e2a\u0e01\u0e4a\u0e2d\u0e15\u0e15\u0e4c', '\u0e2a\u0e01\u0e4a\u0e2d\u0e15\u0e15\u0e4c 3 \u0e0a\u0e31\u0e49\u0e19', 'Zilk', 'Zilk Double Roll',\r\n    'Family', 'Cellox', 'Paseo', 'Genki', 'Vinda', 'Kleenex',\r\n    'Beautex', 'Tempo', 'Nice', '\u0e44\u0e27\u0e17\u0e4c', '\u0e40\u0e1a\u0e2a\u0e17\u0e4c'\r\n  ];\r\n  var customBrands = [];\r\n\r\n  var DEFAULT_DATA = [\r\n    { brand: '\u0e2a\u0e01\u0e4a\u0e2d\u0e15\u0e15\u0e4c 3 \u0e0a\u0e31\u0e49\u0e19', price: 99, rolls: 12, length: 30 },\r\n    { brand: 'Zilk Double Roll', price: 79, rolls: 8, length: 45 },\r\n    { brand: 'Family', price: 45, rolls: 6, length: 20 },\r\n  ];\r\n  DEFAULT_DATA.forEach(function(d) {\r\n    products.push({ brand: d.brand, price: d.price, rolls: d.rolls, length: d.length, id: Date.now() + Math.random() });\r\n  });\r\n\r\n  function uid() { return Date.now() + Math.random(); }\r\n\r\n  function el(id) { return document.getElementById(id); }\r\n\r\n  function escHtml(s) {\r\n    return String(s).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;');\r\n  }\r\n\r\n  \/\/ --- AUTOCOMPLETE ---\r\n  function getAllBrands() {\r\n    var used = products.map(function(p) { return p.brand; });\r\n    var all = PRESET_BRANDS.map(function(b) { return { name: b, type: 'preset' }; });\r\n    customBrands.forEach(function(b) {\r\n      if (!PRESET_BRANDS.includes(b)) all.push({ name: b, type: 'custom' });\r\n    });\r\n    return all.filter(function(b) { return !used.includes(b.name); });\r\n  }\r\n\r\n  function renderSuggestions() {\r\n    var val = el('tpc-brand').value.trim();\r\n    var box = el('tpc-suggestions');\r\n    highlightIdx = -1;\r\n    var all = getAllBrands();\r\n    var matches = val ? all.filter(function(b) { return b.name.toLowerCase().includes(val.toLowerCase()); }) : all;\r\n    var showNew = val && !all.find(function(b) { return b.name.toLowerCase() === val.toLowerCase(); });\r\n    var items = matches.slice(0, 8);\r\n    if (showNew) items.push({ name: val, type: 'new' });\r\n    if (!items.length) { box.style.display = 'none'; return; }\r\n    box.innerHTML = items.map(function(b) {\r\n      var tagLabel = b.type === 'preset' ? '\u0e15\u0e31\u0e49\u0e07\u0e15\u0e49\u0e19' : b.type === 'custom' ? '\u0e40\u0e04\u0e22\u0e43\u0e0a\u0e49' : '+ \u0e43\u0e2b\u0e21\u0e48';\r\n      var tagClass = b.type === 'preset' ? 'tag-preset' : b.type === 'custom' ? 'tag-custom' : 'tag-new';\r\n      return '<div class=\"tpc-suggestion-item\" data-name=\"' + escHtml(b.name) + '\">' +\r\n        escHtml(b.name) +\r\n        '<span class=\"tpc-suggestion-tag ' + tagClass + '\">' + tagLabel + '<\/span>' +\r\n        '<\/div>';\r\n    }).join('');\r\n    box.style.display = 'block';\r\n\r\n    box.querySelectorAll('.tpc-suggestion-item').forEach(function(item) {\r\n      item.addEventListener('mousedown', function(e) {\r\n        e.preventDefault();\r\n        selectBrand(item.getAttribute('data-name'));\r\n      });\r\n    });\r\n  }\r\n\r\n  function selectBrand(name) {\r\n    el('tpc-brand').value = name;\r\n    closeSuggestions();\r\n    el('tpc-price').focus();\r\n  }\r\n\r\n  function closeSuggestions() {\r\n    el('tpc-suggestions').style.display = 'none';\r\n    highlightIdx = -1;\r\n  }\r\n\r\n  el('tpc-brand').addEventListener('input', renderSuggestions);\r\n  el('tpc-brand').addEventListener('focus', renderSuggestions);\r\n  el('tpc-brand').addEventListener('keydown', function(e) {\r\n    var box = el('tpc-suggestions');\r\n    var items = box.querySelectorAll('.tpc-suggestion-item');\r\n    if (box.style.display === 'none' || !items.length) {\r\n      if (e.key === 'Enter') { e.preventDefault(); addProduct(); }\r\n      return;\r\n    }\r\n    if (e.key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      highlightIdx = Math.min(highlightIdx + 1, items.length - 1);\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      highlightIdx = Math.max(highlightIdx - 1, -1);\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      if (highlightIdx >= 0) {\r\n        selectBrand(items[highlightIdx].getAttribute('data-name'));\r\n      } else {\r\n        closeSuggestions();\r\n        addProduct();\r\n      }\r\n      return;\r\n    } else if (e.key === 'Escape') {\r\n      closeSuggestions(); return;\r\n    }\r\n    items.forEach(function(item, i) { item.classList.toggle('highlighted', i === highlightIdx); });\r\n  });\r\n\r\n  document.addEventListener('click', function(e) {\r\n    if (!e.target.closest('#tpc-app .tpc-autocomplete-wrap')) closeSuggestions();\r\n  });\r\n\r\n  \/\/ --- ADD PRODUCT ---\r\n  function addProduct() {\r\n    var brand = el('tpc-brand').value.trim();\r\n    var price = parseFloat(el('tpc-price').value);\r\n    var rolls = parseInt(el('tpc-rolls').value);\r\n    var length = parseFloat(el('tpc-length').value);\r\n    var errEl = el('tpc-error');\r\n\r\n    if (!brand)           { errEl.textContent = '\u26a0\ufe0f \u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48\u0e0a\u0e37\u0e48\u0e2d\u0e22\u0e35\u0e48\u0e2b\u0e49\u0e2d'; return; }\r\n    if (!price || price <= 0) { errEl.textContent = '\u26a0\ufe0f \u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48\u0e23\u0e32\u0e04\u0e32\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07'; return; }\r\n    if (!rolls || rolls < 1)  { errEl.textContent = '\u26a0\ufe0f \u0e08\u0e33\u0e19\u0e27\u0e19\u0e21\u0e49\u0e27\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 0'; return; }\r\n    if (!length || length <= 0){ errEl.textContent = '\u26a0\ufe0f \u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e27\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07'; return; }\r\n    errEl.textContent = '';\r\n\r\n    if (!PRESET_BRANDS.includes(brand) && !customBrands.includes(brand)) customBrands.push(brand);\r\n    products.push({ brand: brand, price: price, rolls: rolls, length: length, id: uid() });\r\n    ['tpc-brand','tpc-price','tpc-rolls','tpc-length'].forEach(function(id) { el(id).value = ''; });\r\n    render();\r\n    el('tpc-brand').focus();\r\n  }\r\n\r\n  el('tpc-btn-add').addEventListener('click', addProduct);\r\n\r\n  \/\/ Enter key on number fields\r\n  ['tpc-price','tpc-rolls','tpc-length'].forEach(function(id) {\r\n    el(id).addEventListener('keydown', function(e) {\r\n      if (e.key === 'Enter') { e.preventDefault(); addProduct(); }\r\n    });\r\n  });\r\n\r\n  \/\/ --- CLEAR ALL ---\r\n  el('tpc-btn-clear').addEventListener('click', function() {\r\n    if (!products.length) return;\r\n    var confirmBar = document.createElement('div');\r\n    confirmBar.id = 'tpc-confirm-bar';\r\n    confirmBar.style.cssText = 'background:#fff3f2;border:1.5px solid #f5c5bb;border-radius:10px;padding:12px 16px;margin-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:Sarabun,sans-serif;font-size:14px;color:#c0392b;';\r\n    confirmBar.innerHTML = '<span>\u26a0\ufe0f \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e25\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ' + products.length + ' \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23?<\/span>' +\r\n      '<button id=\"tpc-confirm-yes\" style=\"background:#e74c3c;color:#fff;border:none;border-radius:6px;padding:5px 14px;font-family:Sarabun,sans-serif;font-weight:700;cursor:pointer;font-size:13px;\">\u0e25\u0e1a\u0e40\u0e25\u0e22<\/button>' +\r\n      '<button id=\"tpc-confirm-no\" style=\"background:#fff;color:#888;border:1.5px solid #ddd;border-radius:6px;padding:5px 14px;font-family:Sarabun,sans-serif;font-weight:700;cursor:pointer;font-size:13px;\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>';\r\n\r\n    var existing = el('tpc-confirm-bar');\r\n    if (existing) existing.remove();\r\n    el('tpc-btn-clear').parentNode.parentNode.appendChild(confirmBar);\r\n\r\n    el('tpc-confirm-yes').addEventListener('click', function() {\r\n      products = [];\r\n      confirmBar.remove();\r\n      render();\r\n    });\r\n    el('tpc-confirm-no').addEventListener('click', function() {\r\n      confirmBar.remove();\r\n    });\r\n  });\r\n\r\n  \/\/ --- SORT ---\r\n  document.querySelectorAll('#tpc-app .tpc-sort-btn').forEach(function(btn) {\r\n    btn.addEventListener('click', function() {\r\n      sortBy = btn.getAttribute('data-sort');\r\n      document.querySelectorAll('#tpc-app .tpc-sort-btn').forEach(function(b) { b.classList.remove('active'); });\r\n      btn.classList.add('active');\r\n      render();\r\n    });\r\n  });\r\n\r\n  \/\/ --- REMOVE ---\r\n  function removeProduct(id) {\r\n    products = products.filter(function(p) { return p.id !== id; });\r\n    render();\r\n  }\r\n\r\n  function calcValue(p) {\r\n    var total = p.rolls * p.length;\r\n    return total > 0 ? p.price \/ total : Infinity;\r\n  }\r\n\r\n  \/\/ --- RENDER ---\r\n  function render() {\r\n    var sorted = products.map(function(p) {\r\n      return { brand: p.brand, price: p.price, rolls: p.rolls, length: p.length, id: p.id,\r\n               totalMeters: p.rolls * p.length, costPerMeter: calcValue(p) };\r\n    });\r\n\r\n    if (sortBy === 'value') sorted.sort(function(a,b) { return a.costPerMeter - b.costPerMeter; });\r\n    else if (sortBy === 'name') sorted.sort(function(a,b) { return a.brand.localeCompare(b.brand, 'th'); });\r\n    else sorted.sort(function(a,b) { return a.price - b.price; });\r\n\r\n    var container = el('tpc-cards');\r\n\r\n    if (!sorted.length) {\r\n      container.innerHTML = '<div class=\"tpc-empty\"><div class=\"tpc-empty-icon\">\ud83e\uddfb<\/div><p>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a<\/p><\/div>';\r\n      el('tpc-summary').style.display = 'none';\r\n      return;\r\n    }\r\n\r\n    var maxCost = Math.max.apply(null, sorted.map(function(p) { return p.costPerMeter; }));\r\n    var minCost = Math.min.apply(null, sorted.map(function(p) { return p.costPerMeter; }));\r\n\r\n    container.innerHTML = sorted.map(function(p, i) {\r\n      var isBest = i === 0 && sortBy === 'value';\r\n      var barWidth = maxCost > 0 ? Math.round((p.costPerMeter \/ maxCost) * 100) : 0;\r\n      var saving = (i > 0 && sortBy === 'value')\r\n        ? '<div class=\"tpc-cost-total\">\u0e41\u0e1e\u0e07\u0e01\u0e27\u0e48\u0e32\u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a 1: +' + ((p.costPerMeter - minCost) \/ minCost * 100).toFixed(0) + '%<\/div>'\r\n        : '<div class=\"tpc-cost-total\">\u0e23\u0e27\u0e21 ' + p.totalMeters.toFixed(1) + ' \u0e21.<\/div>';\r\n      return '<div class=\"tpc-card' + (isBest ? ' best' : '') + '\" data-id=\"' + p.id + '\">' +\r\n        '<div class=\"tpc-rank\">' + (i+1) + '<\/div>' +\r\n        '<div>' +\r\n          '<div class=\"tpc-brand-name\">' + escHtml(p.brand) + '<\/div>' +\r\n          '<div class=\"tpc-specs\">' +\r\n            '<span class=\"tpc-spec-chip\">\ud83d\udcb0 ' + p.price.toFixed(2) + ' \u0e1a\u0e32\u0e17<\/span>' +\r\n            '<span class=\"tpc-spec-chip\">\ud83e\uddfb ' + p.rolls + ' \u0e21\u0e49\u0e27\u0e19<\/span>' +\r\n            '<span class=\"tpc-spec-chip\">\ud83d\udccf ' + p.length + ' \u0e21.\/\u0e21\u0e49\u0e27\u0e19<\/span>' +\r\n          '<\/div>' +\r\n        '<\/div>' +\r\n        '<div class=\"tpc-card-value\">' +\r\n          '<div class=\"tpc-cost-per-meter\">' + p.costPerMeter.toFixed(3) + '<\/div>' +\r\n          '<div class=\"tpc-cost-label\">\u0e1a\u0e32\u0e17\/\u0e40\u0e21\u0e15\u0e23<\/div>' +\r\n          saving +\r\n          '<div class=\"tpc-bar-wrap\"><div class=\"tpc-bar-fill\" style=\"width:' + barWidth + '%\"><\/div><\/div>' +\r\n        '<\/div>' +\r\n        '<button class=\"tpc-btn-remove\" data-id=\"' + p.id + '\">\u2715 \u0e25\u0e1a<\/button>' +\r\n        '<\/div>';\r\n    }).join('');\r\n\r\n    \/\/ bind remove buttons\r\n    container.querySelectorAll('.tpc-btn-remove').forEach(function(btn) {\r\n      btn.addEventListener('click', function() {\r\n        removeProduct(Number(btn.getAttribute('data-id')));\r\n      });\r\n    });\r\n\r\n    \/\/ summary\r\n    var strip = el('tpc-summary');\r\n    if (sorted.length >= 2 && sortBy === 'value') {\r\n      var best = sorted[0], worst = sorted[sorted.length-1];\r\n      var savePct = ((worst.costPerMeter - best.costPerMeter) \/ worst.costPerMeter * 100).toFixed(0);\r\n      strip.style.display = 'flex';\r\n      strip.innerHTML =\r\n        '<div class=\"tpc-summary-item\"><span class=\"tpc-summary-value\">' + sorted.length + '<\/span><span class=\"tpc-summary-label\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/span><\/div>' +\r\n        '<div class=\"tpc-divider\"><\/div>' +\r\n        '<div class=\"tpc-summary-item\"><span class=\"tpc-summary-value\">' + escHtml(best.brand) + '<\/span><span class=\"tpc-summary-label\">\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/span><\/div>' +\r\n        '<div class=\"tpc-divider\"><\/div>' +\r\n        '<div class=\"tpc-summary-item\"><span class=\"tpc-summary-value\">' + savePct + '%<\/span><span class=\"tpc-summary-label\">\u0e16\u0e39\u0e01\u0e01\u0e27\u0e48\u0e32\u0e15\u0e31\u0e27\u0e41\u0e1e\u0e07\u0e2a\u0e38\u0e14<\/span><\/div>' +\r\n        '<div class=\"tpc-divider\"><\/div>' +\r\n        '<div class=\"tpc-summary-item\"><span class=\"tpc-summary-value\">' + best.costPerMeter.toFixed(3) + ' \u0e1a.\/\u0e21.<\/span><span class=\"tpc-summary-label\">\u0e23\u0e32\u0e04\u0e32\u0e14\u0e35\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/span><\/div>';\r\n    } else {\r\n      strip.style.display = 'none';\r\n    }\r\n  }\r\n\r\n  render();\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/le-lab.shop\/index.php?rest_route=\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/le-lab.shop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/le-lab.shop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/le-lab.shop\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/le-lab.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30"}],"version-history":[{"count":5,"href":"https:\/\/le-lab.shop\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/le-lab.shop\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/le-lab.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}