.ktdb-utility { --tool-accent:#eb2f96; }
.ktdb-utility--chu-viet-tay { --tool-accent:#ff7f50; }
.ktdb-utility__hero { text-align:center; margin-bottom:48px; }
.ktdb-utility--bang-mau-ff .ktdb-utility__hero { text-align:left; margin-bottom:20px; }
.ktdb-utility__card { border:4px solid var(--tool-accent); border-radius:22px; padding:24px; background:#fff; text-align:left; }
.ktdb-utility__badge { display:table; margin:-48px 0 24px; border-radius:12px; background:var(--tool-accent); color:#fff; padding:8px 24px; font-size:1.25rem; }
.ktdb-utility__card textarea { min-height:140px; border:2px solid #0d6efd; border-radius:12px; padding:16px; font-size:1.2rem; }
.ktdb-utility__output-row { margin:24px 0; }
.ktdb-utility__output { min-height:90px; border:1px solid #dcdcdc; border-radius:12px; padding:20px; background:#fafafa; font-size:1.35rem; overflow-wrap:anywhere; white-space:pre-wrap; margin:12px 0; }
.ktdb-utility--chu-nguoc [data-output-copy] { background:#28a745; border-color:#28a745; padding:12px 32px; }
.ktdb-utility--chu-viet-tay .ktdb-utility__output-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.ktdb-utility--chu-viet-tay .ktdb-utility__output-row h3 { flex:0 0 200px; font-size:1rem; }
.ktdb-utility--chu-viet-tay .ktdb-utility__output { flex:1; min-width:0; }
.ktdb-color-row { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:12px; border:1px solid #ccc; padding:12px; margin:8px 0; background:white; }
.ktdb-color-options,.ktdb-color-inputs,.ktdb-color-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.ktdb-color-inputs { flex-wrap:nowrap; }.ktdb-color-inputs [data-text] { min-width:0; }.ktdb-color-inputs [data-color] { width:60px; height:38px; flex-shrink:0; border:1px solid #ddd; }
.ktdb-color-output { margin-top:20px; }.ktdb-color-output .ktdb-utility__output { background:#222; color:white; }
.ktdb-color-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }.ktdb-color-grid button { min-height:42px; padding:8px; border:1px solid #ddd; font-size:14px; cursor:pointer; }
.ktdb-color-examples { display:grid; gap:8px; }.ktdb-color-examples button { text-align:left; padding:12px; background:white; border:1px solid #ddd; overflow-wrap:anywhere; }
.ktdb-color-hex { border:0; background:transparent; color:#155ca1; text-decoration:underline; cursor:pointer; }
.ktdb-utility button:focus-visible { outline:3px solid #db2777; outline-offset:3px; }
@media(max-width:767px) { .ktdb-color-row { grid-template-columns:1fr; }.ktdb-color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.ktdb-utility__card { padding:16px; }.ktdb-utility__badge { font-size:1rem; margin-top:-36px; }.ktdb-utility--chu-viet-tay .ktdb-utility__output-row h3 { flex:1 1 100%; }.ktdb-utility--chu-viet-tay .ktdb-utility__output-row button { width:100%; } }