/* =========================================
   GIAO DIỆN TEXT TO SPEECH (SOFT NEO-BRUTALISM)
========================================= */
.tts-soft-wrapper {
    max-width: 850px; margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #111111; background: #faf9f6;
    padding: 25px; border: 3px solid #111111; border-radius: 16px;
    box-shadow: 5px 5px 0px #111111; box-sizing: border-box;
}
.tts-soft-wrapper * { box-sizing: border-box; }

.tts-soft-header {
    background: #ffffff; padding: 20px; border: 3px solid #111111; 
    border-radius: 12px; text-align: center; margin-bottom: 25px; 
    box-shadow: 5px 5px 0px #111111;
}
.tts-soft-header h2 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase;}
.tts-soft-header p { margin: 0; font-weight: 600; font-size: 1rem; color: #444444;}

.tts-input-section { position: relative; margin-bottom: 25px; }
.box-title { display: block; font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; text-transform: uppercase;}

.neo-textarea {
    width: 100%; height: 200px; padding: 20px; font-family: inherit; font-size: 1.1rem; line-height: 1.5; color: #111111;
    background: #ffffff; border: 3px solid #111111; border-radius: 12px;
    box-shadow: inset 4px 4px 0px rgba(0,0,0,0.05); resize: vertical; outline: none; transition: all 0.2s;
}
.neo-textarea:focus { border-color: #000000; box-shadow: inset 0px 0px 0px, 5px 5px 0px #111111; transform: translate(-2px, -2px);}

.btn-small-float {
    position: absolute; top: 40px; right: 15px; background: #ffd6a5; border: 2px solid #111111; border-radius: 8px;
    padding: 6px 12px; font-weight: 800; font-size: 0.8rem; cursor: pointer; box-shadow: 2px 2px 0px #111111; transition: all 0.15s;
}
.btn-small-float:active { transform: translate(2px, 2px); box-shadow: 0 0 0; }

.tts-action-bar { display: flex; gap: 15px; margin-bottom: 20px;}
.tts-btn {
    padding: 16px; font-family: inherit; font-size: 1.1rem; font-weight: 900; text-transform: uppercase;
    border: 3px solid #111111; border-radius: 12px; cursor: pointer;
    box-shadow: 5px 5px 0px #111111; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; color: #111111;
}
.tts-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #111111; }
.tts-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); box-shadow: none; transform: none;}
.btn-play { flex: 2; background: #b5e48c; }
.btn-stop { flex: 1; background: #ffadad; }

/* CSS THANH LOADING TIẾN TRÌNH */
.neo-progress-container { margin-bottom: 20px; }
.progress-labels { display: flex; justify-content: space-between; font-weight: 800; font-size: 0.95rem; margin-bottom: 8px; }
.progress-track { width: 100%; height: 24px; background: #eeeeee; border: 3px solid #111111; border-radius: 8px; overflow: hidden; box-shadow: inset 2px 2px 0px rgba(0,0,0,0.1);}
.progress-fill { width: 0%; height: 100%; background: #8fb8ed; border-right: 3px solid #111111; transition: width 0.1s linear;}

.tts-status-bar {
    background: #111111; color: #ffffff; padding: 15px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 15px; font-weight: 700; font-size: 1.1rem; border: 3px solid #111111;
}
.status-highlight { color: #b5e48c; }
.sound-wave { display: flex; gap: 4px; align-items: center; height: 20px; opacity: 0.3; transition: 0.3s;}
.sound-wave.playing { opacity: 1; }
.sound-wave span { display: block; width: 6px; height: 100%; background: #b5e48c; border-radius: 3px; animation: bounce 1s infinite ease-in-out; transform-origin: bottom;}
.sound-wave span:nth-child(1) { animation-delay: 0.0s; }
.sound-wave span:nth-child(2) { animation-delay: 0.2s; }
.sound-wave span:nth-child(3) { animation-delay: 0.4s; }
.sound-wave span:nth-child(4) { animation-delay: 0.2s; }
.sound-wave span:nth-child(5) { animation-delay: 0.0s; }
@keyframes bounce { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.sound-wave:not(.playing) span { animation: none; transform: scaleY(0.2); }

@media (max-width: 700px) { .tts-action-bar { flex-direction: column; } }