:root{--bg-color: #181b1e;--text-color: #eee;--accent-color: #1DCABE;--border-color: rgba(255,255,255,.2);--dropdown-bg: #1a1a1a;--hover-bg: #333;--topbar-height: 50px;--font-family-base: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--search-btn-gradient: linear-gradient(to bottom left, #002B9F 0%, #00A290 35%, #39FFFD 100%);--search-btn-gradient-hover: linear-gradient(135deg, #00D3BB 0%, #4DFFF3 100%);--tag-all-bg: #FFBADE;--tag-all-hover: #E3A5C5;--tag-all-text: #000000;--logo-btn-bg: transparent;--logo-btn-hover-bg: rgba(255, 186, 222, .15);--logo-btn-border: transparent;--logo-btn-hover-border: #FFBADE;--logo-btn-radius: 6px;--logo-blog-btn-bg: transparent;--logo-blog-btn-hover-bg: rgba(255, 186, 222, .15);--logo-blog-btn-border: transparent;--logo-blog-btn-hover-border: #FFBADE;--logo-blog-btn-radius: 6px}.topbar{position:relative;width:100%;height:auto;background:var(--bg-color);border-bottom:1px solid var(--border-color);z-index:1000;padding:0 1rem;display:flex;align-items:center;font-family:var(--font-family-base);font-size:.875rem;color:var(--text-color);flex-wrap:wrap}body{margin:0;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:.875rem}.container{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem;width:100%;flex-wrap:wrap}.logo-btn{display:flex;align-items:center;gap:.5rem;background:var(--logo-btn-bg);border:1px solid var(--logo-btn-border);border-radius:var(--logo-btn-radius);padding:4px 8px;cursor:pointer;text-decoration:none;transition:background .2s ease,border-color .2s ease}.logo-btn:hover{background:var(--logo-btn-hover-bg);border-color:var(--logo-btn-hover-border)}.logo{display:flex;align-items:center;font-weight:900;font-size:1.125rem;color:var(--text-color);-webkit-user-select:none;user-select:none;gap:.5rem;white-space:nowrap}.logo-img{height:37px;width:auto;display:block}.logo-blog-btn{display:flex;align-items:center;gap:.5rem;background:var(--logo-btn-bg);border:1px solid var(--logo-btn-border);border-radius:var(--logo-btn-radius);padding:4px 8px;cursor:pointer;text-decoration:none;transition:background .2s ease,border-color .2s ease}.logo-blog-btn:hover{background:var(--logo-btn-hover-bg);border-color:var(--logo-btn-hover-border)}.logo-btn:active{transform:scale(.98)}.logo-blog{display:flex;align-items:center;font-weight:900;font-size:1.125rem;color:var(--text-color);-webkit-user-select:none;user-select:none;gap:.5rem;white-space:nowrap}.logo-blog-img{height:43px;width:auto;display:block}.search-wrapper{flex-grow:1;position:relative;display:flex;max-width:320px;margin:8px 0}.search-wrapper input[type=search]{width:100%;padding:.6rem 3rem .6rem 1rem;border-radius:4px;border:1px solid var(--border-color);background:#4d4d4d;color:var(--text-color);font-size:.9rem;box-shadow:none;transition:background-color .15s ease,border-color .15s ease}.search-wrapper input[type=search]:hover,.search-wrapper input[type=search]:focus{background:#666;border-color:#666}.search-wrapper input[type=search]::placeholder{color:#ccc;font-size:.85rem}.search-wrapper .search-btn{position:absolute;right:0;top:0;bottom:0;width:50px;height:100%;border:none;border-radius:0 4px 4px 0;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2028%2028'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3e%3c!--%20วงกลมใหญ่%20--%3e%3ccircle%20cx='10'%20cy='10'%20r='7'%20/%3e%3c!--%20ด้ามจับสั้น%20--%3e%3cline%20x1='15'%20y1='15'%20x2='20'%20y2='20'%20/%3e%3c/svg%3e") center/30px no-repeat,var(--search-btn-gradient);cursor:pointer;transition:background .3s ease;z-index:2}.search-wrapper .search-btn:hover{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2028%2028'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3e%3c!--%20วงกลมใหญ่%20--%3e%3ccircle%20cx='10'%20cy='10'%20r='7'%20/%3e%3c!--%20ด้ามจับสั้น%20--%3e%3cline%20x1='15'%20y1='15'%20x2='20'%20y2='20'%20/%3e%3c/svg%3e") center/30px no-repeat,var(--search-btn-gradient-hover)}.tags-container{position:relative;display:flex;align-items:center;width:100%;margin-top:6px}.tags-bar{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:6px 36px;gap:8px;scrollbar-width:none}.tags-bar::-webkit-scrollbar{display:none}:root{--accent-color: #1DCABE;--border-color: rgba(255,255,255,.2)}.tag-btn{padding:5px 13px;border-radius:999px;border:1px solid var(--border-color);background:#1dcabe1a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tag-btn:hover{background:#1dcabe40;color:#fff}.tag-btn.active{color:var(--accent-color);font-weight:400}.tag-btn.all{background:#1f1f1f;color:var(--text-color);border:1px solid var(--border-color)}.tag-btn.all.active{background:var(--tag-all-bg);color:var(--tag-all-text);border:1px solid var(--tag-all-bg)}.tag-btn.all:hover{background:var(--tag-all-hover);color:var(--tag-all-text)}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0009;color:var(--text-color);border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:1rem;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.scroll-btn:hover{background:#ddd;color:#000}@media (max-width: 600px){.container{flex-direction:column;align-items:center;gap:.6rem;padding-top:.6rem}.logo{order:1;width:100%;justify-content:center;margin-top:6px;font-size:1rem}.search-wrapper{order:2;width:100%;max-width:90%;margin:6px 0}.tags-container{order:3;width:100%}}.search-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--dropdown-bg);border:1px solid var(--border-color);border-top:none;border-radius:0 0 6px 6px;max-height:320px;overflow-y:auto;z-index:1000;list-style:none;margin:0;padding:0;opacity:1;transition:opacity .3s ease}.search-dropdown li{border-bottom:1px dashed #444}.search-dropdown li:last-child{border-bottom:none}.search-dropdown li a{display:block;width:100%;padding:10px 16px;text-decoration:none;color:var(--text-color);font-size:.9rem;transition:background .2s ease}.search-dropdown li a:hover,.search-dropdown li a.selected{background:#2a2a2a}.search-dropdown .info{display:flex;flex-direction:column}.search-dropdown .title{font-size:.95rem;font-weight:500;margin-bottom:2px}.search-dropdown .code{opacity:.7;font-size:.8rem}.search-dropdown mark{background-color:var(--search-btn-color);color:#000;padding:0 2px;border-radius:2px;transition:background-color .2s ease}.search-dropdown mark:hover{background-color:var(--search-btn-hover)}.container>.flex.items-center.gap-3{display:flex;align-items:center;gap:5rem}.container>.flex.items-center.gap-3>:first-child{margin-right:.75rem;flex-shrink:0}.container>.flex.items-center.gap-3>:nth-child(2){display:flex;align-items:center;gap:.5rem}@media (max-width: 600px){.container>.flex.items-center.gap-3{justify-content:center;gap:1rem;width:100%}.container>.flex.items-center.gap-3>:first-child{position:absolute;left:.75rem;margin-right:0}}