/* UTIL-020 Chuyển mã tiếng Việt — bổ sung cho bộ UI utilities.css. Kế thừa font Arial của trang; không ghi đè font icon. */
.vec-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:start}
.vec-col{min-width:0}
.vec-grid textarea{min-height:240px}
.vec-middle{display:flex;flex-direction:column;gap:10px;width:160px;padding-top:30px}
.vec-middle .sou-button{width:100%;min-height:46px}
.vec-same{margin:0;color:var(--sou-warn);font-size:14px;font-weight:700}
.vec-col .sou-status{margin-top:0}
.vec-detect{margin:-4px 0 14px;padding:12px 14px;border:1px solid var(--sou-line);border-radius:12px;background:var(--sou-soft)}
.vec-detect.is-low{border-color:#f0d39a;background:var(--sou-warn-bg)}
.vec-detect p{margin:0;color:var(--sou-ink);font-size:15px}
.vec-detect .sou-button{margin-top:10px;min-height:44px;padding:8px 14px;font-size:15px;white-space:normal;text-align:left}
.sou-drop.vec-drop{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 10px;min-height:0;margin:0 0 14px;padding:12px 14px;text-align:left}
.sou-drop.vec-drop .fa{font-size:22px}
.sou-drop.vec-drop small{flex-basis:100%;margin:0;color:var(--sou-muted);font-size:14px}
.sou-drop.vec-drop:focus-visible{outline:2px solid #3869ed;outline-offset:2px}
.vec-warnings{margin-top:16px;padding:16px;border:1px solid #f0d39a;border-radius:14px;background:var(--sou-warn-bg)}
.vec-warnings h2{margin:0 0 8px;font-size:17px}
.vec-warnings ul{margin:0 0 12px;padding-left:20px}
.vec-warnings li{margin:4px 0;color:var(--sou-text);overflow-wrap:anywhere}
.vec-char{font-size:18px;white-space:nowrap}
.vec-toolbar .sou-button{min-height:44px}
.vec-table th:nth-child(-n+2),.vec-table td.num{width:1%;text-align:right;white-space:nowrap}
/* Màn hình hẹp: mỗi vị trí là một thẻ (bảng giữ vai trò ARIA trong HTML/JS). */
@media(max-width:600px){
 .vec-warnings{padding:14px 12px}
 .vec-table,.vec-table tbody{display:block}
 .vec-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .vec-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:10px 12px;border-top:1px solid #edf1f9}
 .vec-table tr:first-child{border-top:0}
 .vec-table td{display:block;padding:0;border:0;text-align:left;white-space:normal}
 .vec-table td.num{width:auto;text-align:left}
 .vec-table td::before{content:attr(data-label) ": ";font-size:14px;font-weight:700;color:var(--sou-ink)}
 .vec-table td.vec-kind{grid-column:1/-1}
}
@media(max-width:960px){
 .vec-grid{grid-template-columns:minmax(0,1fr);gap:4px}
 .vec-middle{flex-direction:row;flex-wrap:wrap;width:auto;padding:0 0 14px}
 .vec-middle .sou-button{width:auto;flex:1 1 150px}
 .vec-same{flex-basis:100%}
 .vec-grid textarea{min-height:180px}
}