/* ═══════════════════════════════════════════════════════════════════════════
   tools-theme.css — Theme v3 ของหน้า DEKTHAI Tools (หมวด/ชุด/หน้า tool 994 ตัว) · 2026-10-05
   ภาษาเดียวกับหน้าแรก (home.css v4/v5): nav แคปซูลดำ · hero ย่อพื้นดำ + dot lattice · footer ดำแบบ YD · แถบล่างมือถือดำ
   โหลดหลัง tools.css / tools-kit.css / tools-glow.css (tools.php) จึงทับด้วย cascade ได้ — แตะเฉพาะ "กรอบ" ไม่แตะกล่อง tk-* ข้างใน
   ⚠️ ไม่ใช้ขีดไฮไลต์ lime (ผู้ใช้ไม่เอา) · lime = จุด/ตัวอักษรบนพื้นดำ/ปุ่ม CTA เท่านั้น · สีหมวด (--cat) ใช้เป็น glow จางๆ ในพื้นดำ
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--nav-h:76px;--dk-0:#0E0E10;--dk-1:#141417;--dk-line:rgba(255,255,255,.1);--ease:cubic-bezier(.22,1,.36,1)}
@media (max-width:860px){:root{--nav-h:68px}}
::selection{background:var(--accent);color:var(--ink)}
.hl::before,.hl::after{display:none!important}

/* ── NAV: แคปซูลดำลอย ── */
nav.t-nav{background:transparent;border-bottom:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 0 0;pointer-events:none}
nav.t-nav.is-scrolled{box-shadow:none}
nav.t-nav .t-nav-inner{pointer-events:auto;max-width:1180px;height:58px;padding:0 8px 0 10px;gap:14px;border-radius:100px;background:rgba(14,14,16,.9);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--dk-line);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 14px 40px -16px rgba(10,10,11,.6)}
nav.t-nav .t-logo{color:#fff}
nav.t-nav .t-logo-mark{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--ink)}
nav.t-nav .t-logo-mark::after{background:var(--accent);border-color:var(--dk-0);box-shadow:0 0 0 3px rgba(212,255,62,.22),0 0 10px rgba(212,255,62,.7)}
nav.t-nav .t-logo-text{color:#fff}
nav.t-nav .t-logo-text b,.t-footer .t-logo-text b{background:none;color:var(--accent);text-shadow:0 0 24px rgba(212,255,62,.35)}
nav.t-nav .t-logo-text small{color:rgba(255,255,255,.62)}
nav.t-nav .t-search input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;height:40px}
nav.t-nav .t-search input::placeholder{color:rgba(255,255,255,.55)}
nav.t-nav .t-search input:focus{background:rgba(255,255,255,.12);border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,255,62,.25)}
nav.t-nav .t-search > i{color:rgba(255,255,255,.7)}
nav.t-nav .t-search .t-kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
nav.t-nav .t-nav-links a{color:rgba(255,255,255,.85);border-radius:100px}
nav.t-nav .t-nav-links a:hover{background:rgba(255,255,255,.1);color:#fff}
nav.t-nav .t-nav-links a.t-nav-cta{background:var(--accent);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px rgba(212,255,62,.4),0 10px 30px -8px rgba(212,255,62,.5)}
nav.t-nav .t-nav-links a.t-nav-cta:hover{background:var(--accent);transform:translateY(-1px)}
nav.t-nav .t-icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;border-radius:50%}
nav.t-nav .t-icon-btn:hover{background:rgba(255,255,255,.18)}
@media (max-width:860px){nav.t-nav .t-nav-inner{padding:0 8px 0 10px;margin:0 12px}}

/* ── breadcrumb ── */
.t-crumb a{color:var(--ink);font-weight:500}
.t-crumb a:hover{text-decoration-color:var(--accent-dark);text-underline-offset:3px}

/* ── HERO ย่อ (หมวด/ชุด/หน้า tool) — พื้นดำ + dot lattice + glow สีหมวดจางๆ ── */
.t-tool-hero{background:radial-gradient(460px 240px at 100% 0%,color-mix(in srgb,var(--cat) 30%,transparent),transparent 70%),radial-gradient(520px 200px at 0% 0%,rgba(212,255,62,.10),transparent 70%),var(--dk-0);border:1px solid var(--dk-line);border-radius:26px;color:#fff;box-shadow:0 30px 60px -34px rgba(10,10,11,.55)}
.t-tool-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:20px 20px;-webkit-mask-image:linear-gradient(100deg,#000 10%,transparent 80%);mask-image:linear-gradient(100deg,#000 10%,transparent 80%)}
.t-tool-hero::after{background:radial-gradient(circle,color-mix(in srgb,var(--cat) 26%,transparent) 0%,transparent 70%)}
.t-tool-hero .t-tool-ghost{color:rgba(255,255,255,.05)}
.t-tool-hero h1{color:#fff;letter-spacing:-.03em}
.t-tool-hero p{color:rgba(255,255,255,.8);font-weight:300;font-size:15px}
.t-tool-icon{background:rgba(255,255,255,.08);color:var(--accent);border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 28px -6px rgba(212,255,62,.4)}
.t-cat-chip{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.t-cat-chip:hover{background:rgba(255,255,255,.16)}
.t-cat-chip i{color:var(--accent)}
.t-tool-hero a{color:var(--accent)}
@media (max-width:640px){.t-tool-hero{border-radius:20px}}

/* ── การ์ด/หัวข้อส่วน ── */
.t-section-head h2{letter-spacing:-.03em}
.t-tcard,.t-cat-tile,.t-feature{border-radius:18px}
.t-filter{background:rgba(255,255,255,.9)}

/* ── FOOTER: พื้นดำแบบ YD ── */
footer.t-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--dk-0);color:#fff;border-top:0;border-radius:32px 32px 0 0;margin-top:56px;padding-top:64px}
footer.t-footer::before{content:"";position:absolute;left:50%;top:-160px;width:760px;height:320px;transform:translateX(-50%);z-index:-1;background:radial-gradient(closest-side,rgba(212,255,62,.16),transparent);pointer-events:none}
footer.t-footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.t-footer .t-logo{color:#fff}
.t-footer .t-logo-text{color:#fff}
.t-footer .t-logo-text small{color:rgba(255,255,255,.62)}
.t-footer .t-logo-mark{background:var(--accent);color:var(--ink);border-radius:50%}
.t-footer .t-logo-mark::after{border-color:var(--dk-0)}
.t-footer-brand p{color:rgba(255,255,255,.72)}
.t-footer-social a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;border-radius:50%}
.t-footer-social a:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.t-footer-social a:hover i{color:var(--ink)!important}
.t-footer-col h4{color:rgba(255,255,255,.7);letter-spacing:.06em}
.t-footer-col h4 i{background:rgba(212,255,62,.14);color:var(--accent);border:1px solid rgba(212,255,62,.3);border-radius:8px}
.t-footer-col a{color:rgba(255,255,255,.82)}
.t-footer-col a i{color:rgba(255,255,255,.5)}
.t-footer-col a:hover{color:#fff}
.t-footer-col a:hover i{color:var(--accent)}
.t-footer-bottom{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.1)}
.t-footer-badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85);border-radius:100px;padding:5px 12px}
.t-footer-badge i{color:var(--accent)}
.t-footer-badge--link:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.t-footer-badge--link:hover i{color:var(--ink)}
.t-install-foot{position:relative;z-index:1}

/* ── แถบล่างมือถือ: แคปซูลดำลอย ── */
@media (max-width:860px){
  .t-tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:8px 6px;border-radius:26px;background:rgba(14,14,16,.92);border:1px solid var(--dk-line);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 18px 40px -16px rgba(10,10,11,.7)}
  .t-tab{color:rgba(255,255,255,.62)}
  .t-tab.is-on,.t-tab.is-on i{color:var(--accent)}
  .t-tab-menu{color:#fff}
  .t-tab-fab{background:var(--accent);color:var(--ink);border:4px solid var(--dk-0);border-radius:50%;box-shadow:0 0 0 1px rgba(212,255,62,.5),0 12px 28px -8px rgba(212,255,62,.6)}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .t-tile{border-radius:18px}
  .t-tile.is-on{background:var(--dk-0);border-color:var(--dk-0)}
  .t-sheet{border-radius:28px 28px 0 0}
}
@media (prefers-reduced-motion:reduce){nav.t-nav .t-nav-links a.t-nav-cta:hover{transform:none}}

/* โลโก้แบรนด์จริง (แทนตัวอักษร D) ในแถบ nav / footer / เมนูมือถือของ Tools */
.t-logo-mark.has-img,nav.t-nav .t-logo-mark.has-img,.t-footer .t-logo-mark.has-img{width:auto;height:38px;padding:0 12px;border-radius:100px;background:var(--ink);border:1px solid rgba(255,255,255,.12)}
.t-logo-mark.has-img::after{display:none}
.t-logo-mark.has-img img{display:block;height:22px;width:auto;max-width:92px;object-fit:contain}
.t-logo-mark.has-img img.is-tint{filter:brightness(0) saturate(100%) invert(81%) sepia(80%) saturate(402%) hue-rotate(16deg) brightness(101%) contrast(102%)}