/* TTK blog */
.bl-sec{background:var(--paper)}
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.bl-cats a{padding:8px 16px;border-radius:999px;border:1.5px solid var(--rule);background:var(--card);text-decoration:none;font-weight:600;font-size:15px}
.bl-cats a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bl-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--rule);text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s}
.bl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(11,31,77,.5)}
.bl-img{display:block;aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.bl-img img{width:100%;height:100%;object-fit:cover}
.bl-noimg{display:grid;place-items:center;background:linear-gradient(135deg,var(--ink),var(--ink2));color:var(--pulse);font-family:var(--f-head);font-size:18px}
.bl-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.bl-meta{font-size:13.5px;color:var(--muted)}
.bl-card h2{font-size:20px;line-height:1.45}
.bl-ex{color:var(--muted);font-size:15.5px;line-height:1.65}
.bl-card .door-go{color:var(--blue);margin-top:auto;padding-top:4px}
@media (max-width:980px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bl-grid{grid-template-columns:1fr}}

.bl-draft{background:#ffb22e;color:#1b1100;text-align:center;padding:8px 16px;font-weight:600;margin:0}
.bl-art .gx h1{max-width:30em}
.bl-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;padding-block:40px 64px;align-items:start}
.bl-main{min-width:0;max-width:760px}
.bl-cover{margin:0 0 28px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9}
.bl-cover img{width:100%;height:100%;object-fit:cover}
.bl-toc{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:16px 20px;margin-bottom:28px}
.bl-toc ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.bl-toc a{color:var(--blue);text-decoration:none}.bl-toc a:hover{text-decoration:underline}
.bl-content{font-size:18px;line-height:1.85}
.bl-content p{margin:0 0 18px}
.bl-content h2{font-size:clamp(23px,2.6vw,28px);margin:38px 0 14px;scroll-margin-top:84px}
.bl-content h3{font-size:21px;margin:28px 0 10px}
.bl-content ul,.bl-content ol{margin:0 0 20px;padding-left:24px;display:grid;gap:6px}
.bl-content a{color:var(--blue);font-weight:600}
.bl-content strong{font-weight:700}
.bl-content blockquote{margin:0 0 20px;padding:14px 18px;border-left:4px solid var(--orange);background:color-mix(in srgb,var(--orange) 8%,var(--card));border-radius:0 var(--r-sm) var(--r-sm) 0}
.bl-content figure{margin:8px 0 24px}
.bl-content img{border-radius:var(--r-md);width:100%;height:auto}
.bl-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0!important}
.bl-content .bl-cta a{color:#fff}
.bl-end{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:36px;padding:22px 24px;border-radius:var(--r-lg);background:var(--ink2);color:var(--on-ink)}
.bl-end div{display:grid;gap:2px;flex:1;min-width:220px}.bl-end b{font:var(--w-head) 20px var(--f-head)}.bl-end span{color:var(--on-ink-mut);font-size:15px}
.bl-side{position:sticky;top:90px;display:grid;gap:14px}
.bl-rel{display:grid;gap:10px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:18px}
.bl-rel a{color:var(--text);text-decoration:none;font-weight:600;line-height:1.5;font-size:15.5px}.bl-rel a:hover{color:var(--blue)}
.bl-rel .bl-all{color:var(--blue);font-size:14.5px}
@media (max-width:900px){.bl-wrap{grid-template-columns:1fr;gap:28px}.bl-side{position:static}.bl-content{font-size:17px}}

/* บทความล่าสุด (หน้าแรก / หน้าโซลูชัน) */
.bl-latest{background:var(--paper)}
.bl-latest .sec-top{margin-bottom:24px}
.bl-latest .sec-top a{color:var(--blue);font-weight:600}
.bl-tbl{overflow-x:auto;margin:0 0 22px;border:1px solid var(--rule);border-radius:var(--r-md)}
.bl-tbl table{border-collapse:collapse;width:100%;font-size:16px}
.bl-tbl th,.bl-tbl td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule)}
.bl-tbl th{background:var(--soft)}
.bl-tbl tr:last-child td{border-bottom:0}