/* ── webfonts ───────────────────────────────────────────────────────────────
   The theme declares 'Manrope', 'Azeret Mono' and 'Poppins' but ships no
   @font-face and no font files, so every page fell back to the system
   monospace. These are the real families, self-hosted (latin subset, ~50 KB).
   Neither family covers Thai, so Thai copy and the ฿ sign use a system font. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/azeret-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

.o9-hide{display:none!important}
.o9-muted{color:#9a9a9a;font-size:14px;line-height:1.6}.o9-muted a,.o9-table a{color:#ddf247}
.o9-muted code,.o9-code{font-family:'Space Mono',monospace;color:#ddf247;word-break:break-all}
.center{text-align:center}.pt-20{padding-top:20px}.pt-30{padding-top:30px}
.o9-view{min-height:120px}
.o9-fav{color:#ddf247!important;background:#161616}
.o9-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.o9-filters input,.o9-filters select,.o9-form input,.o9-form select,.o9-form textarea{background:#1d1d1d;border:1px solid #333;border-radius:12px;color:#fff;padding:12px 16px;font-size:14px;min-width:0}
.o9-filters input[name=q]{flex:1 1 220px}.o9-filters input[type=number]{width:110px}
.o9-form{display:flex;flex-direction:column;gap:16px}.o9-form label{display:flex;flex-direction:column;gap:8px;color:#bbb;font-size:14px}
.o9-form textarea{resize:vertical}.o9-form .o9-check{flex-direction:row;align-items:center;gap:10px}.o9-form .o9-check input{width:auto}
.o9-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:600px){.o9-two{grid-template-columns:1fr}}
.o9-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:30px}
.o9-stats div{background:#262626;border-radius:16px;padding:18px 20px}.o9-stats span{display:block;color:#9a9a9a;font-size:13px;margin-bottom:6px}.o9-stats b{font-size:22px;color:#fff}
.o9-list{display:flex;flex-direction:column;gap:14px}
.o9-row{display:flex;align-items:center;gap:16px;background:#262626;border-radius:16px;padding:14px}
.o9-row>img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none}.o9-grow{flex:1;min-width:0}.o9-grow h6{margin-bottom:4px}
.o9-actions{display:flex;gap:8px;flex-wrap:wrap}.o9-actions .tf-button,.o9-row>.tf-button{height:40px;padding:0 16px}
@media(max-width:700px){.o9-row{flex-wrap:wrap}}
.o9-badge{font-size:11px;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:#333;color:#bbb;margin-left:6px;vertical-align:middle}
.o9-badge.published{background:#ddf247;color:#161616}
.o9-table{background:#262626;border-radius:16px;overflow:hidden}
.o9-tr{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;padding:14px 18px;border-top:1px solid #333;font-size:14px;color:#ddd}
.o9-tr.head{border-top:0;color:#9a9a9a;font-size:12px;text-transform:uppercase}.o9-tr span{overflow:hidden;text-overflow:ellipsis}
.o9-tr .pos{color:#ddf247}.o9-tr .neg{color:#ff7a7a}
.o9-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.o9-modal{position:relative;background:#1d1d1d;border:1px solid #333;border-radius:20px;padding:32px;width:100%;max-width:440px;max-height:92vh;overflow:auto}
.o9-modal.wide{max-width:880px}.o9-modal.small{max-width:420px}.o9-x{position:absolute;right:16px;top:10px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.o9-h{margin-bottom:18px}
.o9-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px}@media(max-width:760px){.o9-detail{grid-template-columns:1fr}}
.o9-detail>img{width:100%;border-radius:16px;object-fit:cover;aspect-ratio:1}
.o9-desc{margin:14px 0;color:#ddd;line-height:1.7;font-size:14px}
.o9-tags span{display:inline-block;background:#333;border-radius:20px;padding:4px 12px;font-size:12px;margin:0 6px 6px 0;color:#ddd}
.o9-buy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.o9-buy h5{color:#ddf247;margin-right:auto;font-size:24px}
.o9-toast{position:fixed;right:20px;bottom:20px;background:#262626;border:1px solid #ddf247;color:#fff;padding:14px 20px;border-radius:14px;z-index:100000;opacity:0;transform:translateY(10px);transition:.3s;max-width:360px}
.o9-toast.bad{border-color:#ff7a7a}.o9-toast.show{opacity:1;transform:none}
.card-small-main img,.card-small .author img{object-fit:cover}
.tf-card-box.style-4 .card-media img{width:100%;aspect-ratio:1;object-fit:cover}

/* ── dark-theme contrast layer ──────────────────────────────────────────────
   The OpenN9 template ships light-theme text colours (black headings, black body)
   and no .tf-button anchor style, but assets/css/style.css sets body{background:#161616}.
   Without this layer: hero headings, subtitles and <button class="tf-button style-1">
   labels render dark-on-dark (hero h1 measured 3.3:1) or lime-on-lime (0 dark pixels). */
body{color:#ddd}
h1,h2,h3,h4,h5,h6,.tf-title{color:#fff}
.flat-pages-title-home3 p,.pages-title p,.heading-section p{color:#bbb}
p,li,label{color:#ddd}

/* Buttons: one legible primary style for both <a> and <button> variants. */
a.tf-button,button.tf-button,input.tf-button{background:#ddf247;color:#161616;border:0}
a.tf-button:hover,button.tf-button:hover,input.tf-button:hover{background:#cbe63c;color:#161616}
a.tf-button:focus-visible,button.tf-button:focus-visible,input.tf-button:focus-visible{outline:2px solid #fff;outline-offset:2px}
a.tf-button.style-1.type-1,button.tf-button.style-1.type-1{background:rgba(255,255,255,.06);color:#dee8e8}
a.tf-button.style-1.type-1:hover,button.tf-button.style-1.type-1:hover{background:#ddf247;color:#161616}
.header_1 .tf-button{background:#ddf247;color:#161616}

/* Blog (pages ship raw ids, no stylesheet of their own) */
#blog-detail-body{color:#ccc;line-height:1.85;font-size:16px}
#blog-detail-body h1,#blog-detail-body h2,#blog-detail-body h3,#blog-detail-body h4{color:#fff;margin:28px 0 12px}
#blog-detail-body p{margin-bottom:16px}
#blog-detail-body a{color:#ddf247}
#blog-detail-body img,#blog-detail-body video{max-width:100%;border-radius:14px;margin:12px 0}
#blog-detail-body ul,#blog-detail-body ol{margin:0 0 16px 22px}
#blog-detail-body blockquote{border-left:3px solid #ddf247;padding:4px 18px;color:#bbb;margin:16px 0}
#blog-detail-body code{background:#262626;padding:2px 6px;border-radius:6px;font-family:monospace}
#blog-grid,#blog-recent{color:#ddd}
#blog-grid h5,#blog-recent a{color:#fff}
#blog-grid h5 a:hover{color:#ddf247}

/* WOW.js is loaded (assets/js/wow.min.js) but animate.css is not, and nothing calls
   new WOW() — the hero h1/subtitle/CTA stay at opacity:0 / visibility:hidden and the
   first screen of the site renders blank. Above-the-fold content is never hidden. */
#home-hero h1,#home-hero p,#home-hero .flat-button,#home-hero .tf-button{
  opacity:1!important;visibility:visible!important;transform:none!important}

/* The theme sets width:100% on inputs/selects, which forces each filter control
   onto its own row inside .o9-filters. */
.o9-filters input,.o9-filters select{width:auto}
.o9-filters input[name=q]{flex:1 1 220px}

/* Empty state */
.o9-empty{text-align:center;padding:48px 0}
.o9-empty .tf-button{width:auto;min-width:160px}

/* ── icon set (assets/icons/sprite.svg) ─────────────────────────────────────
   Replaces the emoji/sticker glyphs. Symbols carry their own lime gradient, so
   only sizing belongs here. */
.o9-ic-lg{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;background:rgba(221,242,71,.10);border:1px solid rgba(221,242,71,.22);margin-bottom:16px}
.o9-ic-lg svg{width:26px;height:26px}
.o9-ic-md{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;background:rgba(221,242,71,.10);margin:0 auto 12px}
.o9-ic-md svg{width:24px;height:24px}
.o9-ic-sm{width:16px;height:16px;vertical-align:-3px;margin-right:7px;flex:none}
.o9-status{display:flex;align-items:center;justify-content:center;gap:0}

/* ── "From our page" (pinned social posts) ──────────────────────────────────
   #social-section ships with display:none; site.js reveals it only when
   /api/social/pinned returns at least one post. */
.o9-social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.o9-social-grid>a{display:block;border-radius:16px;overflow:hidden;background:#1d1d1d;
  border:1px solid #2e2e2e;transition:.2s;text-decoration:none}
.o9-social-grid>a:hover{border-color:#ddf247}
.o9-social-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:.3s}
.o9-social-grid>a:hover img{transform:scale(1.04)}
.o9-social-grid .cap{padding:12px 14px}
.o9-social-grid .meta{font-size:11px;color:#666;margin-bottom:4px}
.o9-social-grid .txt{font-size:13px;color:#bbb;line-height:1.5;margin:0}