/* Bộ tool chuyển định dạng ảnh trên trình duyệt (11/11/2026) — phần riêng trên UI kit v1 */
.at-opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.at-q{align-items:center}
.at-qf input[type=range]{width:100%;accent-color:var(--t-main);min-height:32px}
.at-qf b{color:var(--t-ink)}
.at-drop-sm{padding:14px!important;min-height:0!important}
.at-drop-sm .ic,.at-drop-sm small{display:none}
.at-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.at-bar b{flex:1 1 auto}
.at-bar-btn{display:flex;gap:8px}
.at-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:min(60vh,560px);overflow:auto}
.at-it{display:flex;align-items:center;gap:12px;border:1px solid var(--t-line);border-radius:12px;padding:8px 10px;background:#fff}
.at-it.ok{border-color:#bfe6cf}
.at-it.bad{border-color:#f3c2c2;background:#fff7f7}
.at-th{flex:0 0 56px;width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--t-main-ll,#eef4ff);display:flex;align-items:center;justify-content:center}
.at-th img{width:100%;height:100%;object-fit:cover;display:block}
.at-th i{font-style:normal;font-size:12px;font-weight:700;color:var(--t-main)}
.at-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.at-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.at-meta small{font-size:13px;color:var(--t-mute)}
.at-it.bad small{color:var(--t-bad)}
.at-btns{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.at-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--t-mute);cursor:pointer;width:36px;height:36px;border-radius:8px}
.at-x:hover{background:var(--t-main-l);color:var(--t-ink)}
.at-act{margin-top:14px}
.at-st{min-height:1.4em;margin:6px 0 0;font-size:15px;color:var(--t-mute)}
.at-st.ok{color:var(--t-ok);font-weight:600}
.at-st.bad{color:var(--t-bad);font-weight:600}
.at-rel h2{margin-bottom:12px}
.at-relg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.at-relg a{display:flex;flex-direction:column;gap:2px;border:1px solid var(--t-line);border-radius:14px;padding:14px 16px;background:#fff;text-decoration:none;color:var(--t-ink)}
.at-relg a:hover{border-color:var(--t-main)}
.at-relg span{font-size:13px;color:var(--t-mute)}
@media (max-width:480px){.at-it{gap:8px;padding:8px}.at-th{flex-basis:44px;width:44px;height:44px}}