/* Trang Công cụ AI (/ai-tools) - mobile-first, tokens --hdk-*, không CSS Grid */
:root{--ai-gap:12px;--ai-radius:10px;--ai-radius-sm:6px}
.hdk-ai-wrap{max-width:100%;margin:0 auto;padding:var(--ai-gap) 0 24px;display:flex;flex-direction:column;gap:var(--ai-gap)}
.hdk-ai-header{display:flex;align-items:center;gap:12px;background:var(--white-color);border:1px solid var(--border-color);border-radius:var(--ai-radius);padding:14px 16px}
.hdk-ai-header-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border-radius:var(--ai-radius-sm);background:rgba(84,207,214,.12);color:var(--hdk-primary,#54cfd6);font-size:20px}
.hdk-ai-header-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.hdk-ai-title{font-size:1rem;font-weight:700;margin:0;line-height:1.3;color:var(--hdk-text-primary,#0f1419)}
.hdk-ai-meta{font-size:12px;color:var(--hdk-text-muted,#8899a6)}
.hdk-ai-card{background:var(--white-color);border:1px solid var(--border-color);border-radius:var(--ai-radius);padding:16px}
.hdk-ai-content{font-size:14px;line-height:1.7;color:var(--hdk-text-secondary,#536471)}
.hdk-ai-content p{margin:0}
/* Tool card */
.hdk-ai-tool{height:100%;display:flex;flex-direction:column;gap:10px;background:var(--white-color);border:1px solid var(--border-color);border-radius:var(--ai-radius);padding:16px;transition:border-color .15s}
.hdk-ai-tool:hover{border-color:var(--hdk-primary,#54cfd6)}
.hdk-ai-tool-head{display:flex;align-items:center;gap:12px}
.hdk-ai-tool-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;border-radius:var(--ai-radius-sm);background:rgba(84,207,214,.12);color:var(--hdk-primary,#54cfd6);font-size:24px}
.hdk-ai-tool-head-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.hdk-ai-tool-title{font-size:.95rem;font-weight:700;margin:0;color:var(--hdk-text-primary,#0f1419)}
.hdk-ai-badge{display:inline-flex;align-items:center;width:fit-content;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.hdk-ai-badge-ready{background:rgba(16,185,129,.12);color:#059669}
.hdk-ai-tool-des{font-size:13px;line-height:1.6;margin:0;color:var(--hdk-text-secondary,#536471);flex:1}
.hdk-ai-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--ai-radius-sm);background:var(--hdk-primary,#54cfd6);color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:opacity .15s;width:fit-content}
.hdk-ai-btn:hover{opacity:.9;color:#fff}
.hdk-ai-btn iconify-icon{font-size:14px}
/* Ghi chú */
.hdk-ai-note{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6;color:var(--hdk-text-secondary,#536471)}
.hdk-ai-note>iconify-icon{font-size:18px;color:var(--hdk-primary,#54cfd6);flex-shrink:0;margin-top:1px}
.hdk-ai-note a{color:var(--hdk-primary,#54cfd6);text-decoration:none}
.hdk-ai-note a:hover{text-decoration:underline}
@media (max-width:576px){
    .hdk-ai-card,.hdk-ai-tool{padding:14px}
    .hdk-ai-header{padding:12px}
    .hdk-ai-btn{width:100%}
}
/* Dark mode */
html.dark .hdk-ai-header,html.dark .hdk-ai-card,html.dark .hdk-ai-tool{background:#17181c;border-color:#2a2b2f}
html.dark .hdk-ai-title,html.dark .hdk-ai-tool-title{color:#e5e7eb}
html.dark .hdk-ai-content,html.dark .hdk-ai-tool-des,html.dark .hdk-ai-meta,html.dark .hdk-ai-note{color:rgba(255,255,255,.7)}
html.dark .hdk-ai-header-icon,html.dark .hdk-ai-tool-icon{background:rgba(84,207,214,.15)}
html.dark .hdk-ai-badge-ready{background:rgba(16,185,129,.2);color:#34d399}