@font-face{font-family:Roboto Condensed;src:url(../../../fonts/Roboto_Condensed-Regular.woff2) format("woff2"),url(../../../fonts/Roboto_Condensed-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Roboto Condensed;src:url(../../../fonts/Roboto_SemiCondensed-Bold.woff2) format("woff2"),url(../../../fonts/Roboto_SemiCondensed-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}body{font-family:Roboto Condensed,sans-serif}.home-page{--bg-page:#303030;--bg-site:#272727;--card-bg:#1f1f1f;--card-hover-bg:#2b2b2b;--card-border-radius:4px;--card-title-color:#ddd;--card-title-hover-color:#fff;--gap-size:12px;background-color:var(--bg-site);margin:0;font-family:Inter,Noto Sans JP,sans-serif;line-height:1.6}.hero-section{position:relative;background-color:#1a1a1a;border-radius:12px;max-width:1500px;margin:0rem auto;overflow:hidden;box-shadow:0 4px 12px #000000b3;-webkit-backdrop-filter:none;backdrop-filter:none;height:340px}.hero-bg{position:absolute;inset:0;z-index:0}.hero-bg img{position:absolute;top:0;left:60%;transform:translate(-50%);width:60%;height:100%;object-fit:cover;display:block}.hero-close-btn{position:absolute;top:12px;right:12px;background:transparent;border:none;color:#fff;font-size:28px;font-weight:700;width:32px;height:32px;cursor:pointer;z-index:2}.hero-close-btn:hover{background:#fff3;transform:scale(1.1)}.hero-content{z-index:1;display:flex;align-items:flex-start;justify-content:flex-start;height:100%;padding:2rem;gap:1.5rem;flex-wrap:wrap;flex-direction:column;position:relative}.hero-text{color:#fff;max-width:500px;display:flex;padding:1rem;flex-direction:column;gap:.5rem}.hero-title{font-size:2.8rem;margin-bottom:.5rem}.hero-description{font-size:1.2rem;opacity:.9;margin-bottom:2.5rem}.home-page .hero-title,.home-page .hero-description,.home-page .page-title{font-weight:800}@media (max-width: 768px){.hero-text .hero-title,.hero-text .hero-description{display:none}.hero-bg img{left:50%;transform:translate(-50%);width:100%;object-fit:cover}}@media (max-width: 768px){.hero-section{display:none}}.home-page a{font-size:inherit;text-decoration:none;cursor:pointer}.home-page .overlay,.home-page .modal,.home-page .blocking-layer{pointer-events:none}.blog-page{--bg-page: #303030;--card-bg: #1f1f1f;--card-hover-bg: #2b2b2b;--card-border-radius: 12px;--card-shadow: 0 2px 8px rgba(0,0,0,.5);--card-title-color: #ddd;--card-title-hover-color: #fff;--card-meta-color: #888;--gap-size: 16px;--divider-color: rgba(255,255,255,.08);background-color:var(--bg-page)!important;color:#ddd;min-height:100vh;padding:2rem 1rem;font-family:Inter,Noto Sans JP,sans-serif}.blog-page-title{font-size:2rem;font-weight:800;margin-bottom:2rem;color:var(--card-title-color)}.blog-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--gap-size)}.blog-item{display:flex;flex-direction:row;cursor:pointer;padding:12px;border-bottom:1px solid var(--divider-color);gap:0}.blog-item:last-child{border-bottom:none}.blog-item:hover .blog-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:#fff}.blog-image{flex:0 0 290px;height:170px;overflow:hidden}.blog-image img{width:100%;height:120%;object-fit:cover;display:block;border-right:1px solid #2b2b2b}.blog-content{flex:1 1 auto;padding-left:16px;display:flex;flex-direction:column;gap:6px;justify-content:center}.blog-title{color:var(--card-title-color);font-weight:600;text-decoration:none;font-size:1.2rem;transition:color .2s ease}.blog-title:hover{color:inherit}.blog-excerpt{color:#bbb;font-size:.95rem;line-height:1.4;margin-bottom:4px}.blog-meta{color:var(--card-meta-color);font-size:.8rem}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:2rem}.page-btn{padding:.4rem .8rem;border:1px solid #444;border-radius:6px;text-decoration:none;color:#ddd;background:var(--card-bg);transition:background .2s,color .2s}.page-btn:hover{background:var(--card-hover-bg);color:#fff}.page-info{color:#aaa;font-size:.9rem}@media (max-width: 640px){.blog-item{flex-direction:row;gap:5px}.blog-image{flex:0 0 250px;height:150px;border-right:1px solid #2b2b2b}.blog-content{padding-left:5px}.blog-title{font-size:1rem}.blog-excerpt{font-size:.9rem}.blog-meta{font-size:.75rem}}html,body,#svelte{background-color:#272727!important;transition:background-color .2s ease}.blog-page::-webkit-scrollbar{width:8px}.blog-page::-webkit-scrollbar-track{background:#2b2b2b}.blog-page::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.blog-page::-webkit-scrollbar-thumb:hover{background:#777}.blog-page .pagination{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}.blog-page .pagination .dots{display:flex;align-items:center;padding:0;color:#aaa;font-weight:900}.blog-page .pagination button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #00bfae;background-color:#303030;color:#00d3bb;font-size:1.1rem;font-weight:600;border-radius:50%;cursor:pointer;transition:all .25s ease}.blog-page .pagination button:hover:not(:disabled){background-color:#00bfae;color:#000}.blog-page .pagination button.active{background-color:#00d3bb;color:#000;border-color:#00d3bb}.blog-page .pagination button:disabled{opacity:.3;cursor:not-allowed}.blog-page .pagination button.prev:before,.blog-page .pagination button.next:after{font-weight:500;font-size:2rem;color:inherit;margin-bottom:5px}.blog-page .pagination button.prev:before{content:"‹"}.blog-page .pagination button.next:after{content:"›"}@media (max-width: 640px){.blog-item{flex-direction:column;align-items:flex-start}.blog-image{flex:unset;max-width:300px;width:100%;height:auto;margin:0 auto;border-right:none}.blog-image img{width:100%;height:auto;object-fit:contain;display:block}.blog-content{padding-left:0;padding-top:8px}}.blog-item{opacity:0;transform:translateY(20px);animation:cardFadeUp .6s ease-out forwards}.blog-item:nth-child(1){animation-delay:.1s}.blog-item:nth-child(2){animation-delay:.2s}.blog-item:nth-child(3){animation-delay:.3s}.blog-item:nth-child(4){animation-delay:.4s}@keyframes cardFadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.article-page-container{max-width:900px;margin:2rem auto;padding:2rem;background-color:#1e1e1e;border-radius:16px;font-family:Inter,Noto Sans JP,sans-serif;color:#eee;line-height:1.8}.cover-container{width:100%;overflow:hidden;border-radius:12px;margin-bottom:1.5rem}.cover-container img{width:100%;height:auto;display:block;border-radius:12px;object-fit:cover;transition:transform .3s ease}.cover-container img:hover{transform:scale(1.02)}.article-title{font-size:2rem;font-weight:800;margin-bottom:.5rem}.article-meta{font-size:.9rem;color:#aaa;margin-bottom:1rem}.article-tags{margin-bottom:1.5rem;font-size:.95rem;color:#fff}.article-tags a{color:#00d3bb;text-decoration:underline;margin-right:.4rem}.article-tags a:hover{color:#00a290}.article-content h1,.article-content h2,.article-content h3{color:#00d3bb;font-size:1.1rem;margin-top:2.5rem;margin-bottom:2rem;font-weight:700}.article-content p{margin-bottom:1rem;font-size:1rem;line-height:1.7}.article-content strong{font-weight:700}.article-content em{font-style:italic}.article-content a{color:#1dcabe;text-decoration:underline}.article-content a:hover{color:#00a290}.article-content img{max-width:100%;height:auto;margin:16px 0;border-radius:8px;display:block;box-shadow:0 4px 12px #00000080}@media (max-width: 768px){.article-page-container{padding:1rem}.article-title{font-size:1.6rem}.article-content h1{font-size:1.5rem}.article-content h2{font-size:1.3rem}.article-content h3{font-size:1.1rem}}: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}}