:root{
  --tubi-brand:#4f726c; --tubi-mode:#96705B; --tubi-inactive-bg:#F3F1EA; --tubi-inactive-border:#E1DAC8; --tubi-inactive-text:#000000; --tubi-trad-active:red;
}
.tubi-wrapper{max-width:900px;margin:0 auto}
.tubi-box{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.tubi-top{display:flex;justify-content:flex-end;margin-bottom:6px; flex-wrap: wrap;}
.tubi-trad{display:flex;align-items:center;gap:10px; flex-wrap: wrap;}
.tubi-trad-btn{background:transparent;border:none;padding:0;font:inherit;color:var(--tubi-inactive-text);cursor:pointer;font-weight:bold; height:auto;}
.tubi-trad-btn.active{background:transparent;color:var(--tubi-trad-active);}
.tubi-trad-sep{color:#cbd5e1}

.tubi-qa-ui .tubi-text{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:8px;font-size:14px; margin-bottom: 8px;}

/* Khu vực cho chế độ Xét Mình */
.tubi-confession-ui { padding: 10px 0; margin-bottom: 10px; }
.tubi-confession-intro { color: #64748b; font-size: 14px; margin-bottom: 16px; }
.tubi-confession-header { font-size: 13px; color: #64748b; text-transform: uppercase; }
.tubi-confession-step-title { font-size: 1.5em; font-weight: bold; margin: 4px 0 10px 0; }
.tubi-confession-actions { display: flex; gap: 10px; margin-top: 16px; }

.tubi-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.tubi-btn{height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--tubi-inactive-border);background:var(--tubi-inactive-bg);color:var(--tubi-inactive-text);cursor:pointer; transition: background-color 0.2s, color 0.2s; font-weight:bold; display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.tubi-btn:hover:not(:disabled){opacity:0.85;}
.tubi-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.tubi-btn svg{width:16px;height:16px;fill:currentColor;}

.tubi-btn.tubi-btn-mode{ flex-shrink: 0; }
.tubi-btn.tubi-btn-mode.active{background:var(--tubi-mode);color:var(--tubi-inactive-text);border-color:var(--tubi-mode);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.tubi-btn.tubi-btn-mode.active:hover:not(:disabled){opacity:1;}
.tubi-btn.tubi-btn-util.active{background:var(--tubi-brand);color:white;border-color:var(--tubi-brand);box-shadow:inset 0 2px 4px rgba(0,0,0,.2); opacity:1;}
.tubi-btn.tubi-btn-util.active:hover:not(:disabled){opacity:1;}
.tubi-btn.recording, .tubi-btn.recording:hover{background:var(--tubi-brand);color:white;border-color:var(--tubi-brand); opacity:1;}

.tubi-caption{margin-top:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px;color:#0f172a;font-size:18px;line-height:1.5;min-height:calc(3 * 1.5em);max-height:calc(3 * 1.5em);overflow-y:auto}
.tubi-answer{margin-top:6px;color:#0f172a;font-size:19px;min-height:48px;white-space:pre-wrap;line-height:1.5;}

.tubi-foot{display:flex;justify-content:space-between;gap:10px;margin-top:16px;align-items:center; flex-wrap: wrap;}
.tubi-foot .tubi-btn {height:50px;}
.tubi-foot-left, .tubi-foot-center, .tubi-foot-right{display:flex;gap:8px; align-items: center;}
.hide { display: none !important; }

@media (max-width: 600px){
  .tubi-foot { flex-direction: column; align-items: stretch; }
  .tubi-foot-left, .tubi-foot-center, .tubi-foot-right { justify-content: center; }
  .tubi-foot-center { margin: 10px 0; }
  .tubi-foot .tubi-btn { flex-grow: 1; justify-content: center; }
  .tubi-foot-left .tubi-btn, .tubi-foot-center .tubi-btn { min-width: calc(50% - 5px); }
  .tubi-foot-right .tubi-btn { min-width: calc(50% - 5px); }
}