/* THEO DÕI ÂM THANH (21/10/2026) — prefix tda- · đi kèm js/theoDoiAmThanh.js */
#page-theo-doi-am-thanh{
  --tda-nen:#fff;--tda-nen2:#f8fafc;--tda-vien:#e2e8f0;--tda-chu:#0f172a;--tda-chu-phu:#64748b;--tda-luoi:#eef2f7;
  --tda-xanh:#10b981;--tda-xam:#cbd5e1;--tda-vang:#f59e0b;--tda-cam:#f97316;--tda-do:#ef4444;--tda-do-nhat:rgba(239,68,68,.13);--tda-tim:#6366f1;
}
[data-theme="dark"] #page-theo-doi-am-thanh{
  --tda-nen:#0f172a;--tda-nen2:#111c33;--tda-vien:#1e293b;--tda-chu:#e2e8f0;--tda-chu-phu:#94a3b8;--tda-luoi:#1a2438;
  --tda-xam:#334155;--tda-do-nhat:rgba(239,68,68,.2);
}
.tda{display:flex;flex-direction:column;gap:16px;color:var(--tda-chu);font-size:.85rem}
.tda-seg{display:inline-flex;padding:3px;border-radius:10px;background:rgba(255,255,255,.18);gap:2px}
.tda-seg button{border:0;background:transparent;color:inherit;font:600 .78rem/1 inherit;padding:7px 11px;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease}
.tda-seg button:hover{background:rgba(255,255,255,.16)}
.tda-seg button.on{background:#fff;color:#4f46e5}
.tda-seg button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.tda-nut-cd{display:inline-flex;align-items:center;gap:6px;text-decoration:none}

/* KPI */
.tda-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tda-k{display:flex;align-items:center;gap:12px;background:var(--tda-nen);border:1px solid var(--tda-vien);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tda-k-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1rem;flex:none}
.tda-k b{display:block;font-size:1.45rem;font-weight:800;line-height:1.1}
.tda-k small{display:block;color:var(--tda-chu-phu);font-weight:600;font-size:.74rem}
.tda-k em{display:block;font-style:normal;color:var(--tda-chu-phu);font-size:.7rem;margin-top:2px}
.tda-k.xanh .tda-k-ic{background:rgba(16,185,129,.12);color:#059669}
.tda-k.do .tda-k-ic{background:rgba(239,68,68,.12);color:#dc2626}
.tda-k.vang .tda-k-ic{background:rgba(245,158,11,.14);color:#d97706}
.tda-k.tim .tda-k-ic{background:rgba(99,102,241,.12);color:#4f46e5}
.tda-bao{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:12px;padding:10px 14px;font-weight:600}
[data-theme="dark"] .tda-bao{background:#2a1215;border-color:#7f1d1d;color:#fca5a5}

/* lưới thẻ phòng */
.tda-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.tda-o{background:var(--tda-nen);border:1px solid var(--tda-vien);border-left:4px solid var(--tda-xanh);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:border-color .2s ease,box-shadow .2s ease}
.tda-o.im{border-left-color:var(--tda-vang)}
.tda-o.sap{border-left-color:var(--tda-cam);box-shadow:0 0 0 1px rgba(249,115,22,.2),0 4px 14px rgba(249,115,22,.1)}
.tda-o.chan{border-left-color:var(--tda-do);box-shadow:0 0 0 1px rgba(239,68,68,.3),0 6px 18px rgba(239,68,68,.14)}
.tda-o-ten{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tda-o-ten b{font-size:1.05rem;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tda-tt{flex:none;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:999px;background:rgba(16,185,129,.12);color:#059669}
.tda-o.im .tda-tt{background:rgba(245,158,11,.14);color:#b45309}
.tda-o.sap .tda-tt{background:rgba(249,115,22,.14);color:#c2410c}
.tda-o.chan .tda-tt{background:var(--tda-do);color:#fff;animation:tda-nhip 1.2s ease-in-out infinite}
@keyframes tda-nhip{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.tda-o.chan .tda-tt{animation:none}}
.tda-o-phu{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;color:var(--tda-chu-phu);font-size:.78rem}
.tda-o-phu i{font-style:normal}
.tda-o-phu .fas{opacity:.7;margin-right:2px}

.tda-o-giua{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:center}
.tda-dem b{display:block;font-size:2.3rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--tda-xanh)}
.tda-o.im .tda-dem b{color:var(--tda-vang)} .tda-o.sap .tda-dem b{color:var(--tda-cam)} .tda-o.chan .tda-dem b{color:var(--tda-do)}
.tda-dem small{display:block;color:var(--tda-chu-phu);font-size:.72rem;margin:4px 0 8px}
.tda-vach{height:7px;border-radius:99px;background:var(--tda-luoi);overflow:hidden}
.tda-vach i{display:block;height:100%;width:0;border-radius:inherit;background:var(--tda-xanh);transition:width .25s linear,background .2s}
.tda-o.im .tda-vach i{background:var(--tda-vang)} .tda-o.sap .tda-vach i{background:var(--tda-cam)} .tda-o.chan .tda-vach i{background:var(--tda-do)}
.tda-muc-dau{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;color:var(--tda-chu-phu);font-weight:600;margin-bottom:6px}
.tda-muc-dau b{color:var(--tda-chu);font-size:.85rem;font-variant-numeric:tabular-nums}
.tda-muc-thanh{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--tda-luoi),var(--tda-luoi));overflow:visible}
.tda-muc-thanh i{position:absolute;inset:0 auto 0 0;width:0;border-radius:7px;background:linear-gradient(90deg,#94a3b8,#64748b);transition:width .2s ease-out}
.tda-muc-thanh i.noi{background:linear-gradient(90deg,#34d399,#10b981 70%,#f59e0b)}
.tda-muc-thanh u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--tda-vang);border-radius:2px}
.tda-muc-tl{display:flex;justify-content:space-between;font-size:.62rem;color:var(--tda-chu-phu);margin-top:3px}

.tda-bd canvas{display:block;width:100%;height:120px;border-radius:10px;background:var(--tda-nen2)}
.tda-bd-cu{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:.68rem;color:var(--tda-chu-phu)}
.tda-bd-cu span{display:inline-flex;align-items:center;gap:5px}
.tda-bd-cu i{width:10px;height:10px;border-radius:3px;display:inline-block}
.tda-bd-cu i.noi{background:var(--tda-xanh)} .tda-bd-cu i.im{background:var(--tda-xam)} .tda-bd-cu i.chan{background:var(--tda-do-nhat);border:1px solid rgba(239,68,68,.5)}
.tda-bd-cu .j-bd-phai{margin-left:auto}

.tda-mic{background:var(--tda-nen2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.tda-mic-dau{font-size:.68rem;font-weight:700;color:var(--tda-chu-phu);text-transform:uppercase;letter-spacing:.03em}
.tda-mic-h{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 62px;gap:8px;align-items:center;font-size:.75rem}
.tda-mic-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tda-mic-t{height:6px;border-radius:3px;background:var(--tda-luoi);overflow:hidden}
.tda-mic-t i{display:block;height:100%;background:#94a3b8;border-radius:inherit;transition:width .2s}
.tda-mic-h.to .tda-mic-n{font-weight:700} .tda-mic-h.to .tda-mic-t i{background:var(--tda-xanh)}
.tda-mic-h b{text-align:right;font-variant-numeric:tabular-nums;color:var(--tda-chu-phu);font-weight:600}

.tda-o-chan{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-size:.72rem;color:var(--tda-chu-phu);border-top:1px dashed var(--tda-vien);padding-top:10px}
.tda-o-chan .fas{margin-right:4px}
.tda-cu{font-style:normal;color:#d97706;font-weight:600;margin-left:4px}
.tda-link{border:0;background:none;padding:0;color:var(--tda-tim);font:600 .72rem inherit;cursor:pointer}
.tda-link:hover{text-decoration:underline}
.tda-link:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(99,102,241,.2);border-radius:4px}
.tda-mo{color:var(--tda-chu-phu);font-size:.72rem}

.tda-trong{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:40px 20px;background:var(--tda-nen);border:1px dashed var(--tda-vien);border-radius:16px;color:var(--tda-chu-phu)}
.tda-trong>.fas{font-size:2rem;color:#cbd5e1}
.tda-trong b{color:var(--tda-chu);font-size:.95rem}
.tda-trong span{max-width:560px}
.tda-trong.nho{padding:22px;flex-direction:row;justify-content:center;border-style:solid}
.tda-trong.nho>.fas{font-size:1.1rem;color:var(--tda-xanh)}

/* nhật ký */
.tda-the{background:var(--tda-nen);border:1px solid var(--tda-vien);border-radius:16px;padding:16px}
.tda-nk-dau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tda-nk-dau h3{margin:0;font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.tda-nk-dau h3 .fas{color:var(--tda-tim)}
.tda-nk-loc{display:flex;gap:8px;flex-wrap:wrap}
.tda-nk-loc select,.tda-nk-loc input{border:1.5px solid var(--tda-vien);border-radius:10px;padding:7px 10px;background:var(--tda-nen);color:var(--tda-chu);font:500 .8rem inherit;min-height:36px}
.tda-nk-loc input{min-width:140px}
.tda-nk-loc select:focus,.tda-nk-loc input:focus{outline:0;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.tda-nk-tk{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tda-nk-tk:empty{display:none}
.tda-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--tda-vien);background:var(--tda-nen2);color:var(--tda-chu);border-radius:12px;padding:8px 12px;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,transform .15s}
.tda-chip:hover{border-color:#a5b4fc;transform:translateY(-1px)}
.tda-chip.on{border-color:var(--tda-tim);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.tda-chip b{font-size:.82rem} .tda-chip span{font-size:.7rem;color:var(--tda-chu-phu)}
.tda-bang{width:100%;border-collapse:collapse;font-size:.8rem}
.tda-bang th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tda-chu-phu);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--tda-vien)}
.tda-bang td{padding:9px 10px;border-bottom:1px solid var(--tda-vien);font-variant-numeric:tabular-nums}
.tda-bang tr:last-child td{border-bottom:0}
.tda-bang small{color:var(--tda-chu-phu)}
.tda-dai.lau{color:var(--tda-do)}
.tda-nhan{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px}
.tda-nhan.xanh{background:rgba(16,185,129,.12);color:#059669}
.tda-nhan.do{background:rgba(239,68,68,.12);color:#dc2626}
.tda-nhan.xam{background:var(--tda-luoi);color:var(--tda-chu-phu)}
/* (21/10, 4.0.6) mic TẮT TIẾNG / âm lượng về 0 trong OBS — cam */
.tda-nhan.cam{background:rgba(249,115,22,.14);color:#c2410c}
.tda-nhan .fas{margin-right:3px}
.tda-tat{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 9px;border-radius:999px;background:#fff7ed;color:#c2410c;border:1px solid #fdba74;white-space:nowrap}
.tda-tat[hidden]{display:none}
.tda-tat+.tda-tt{margin-left:0}
.tda-mic-h.dong .tda-mic-n{color:#c2410c;font-weight:700}
.tda-mic-h.dong .tda-mic-t i{background:repeating-linear-gradient(45deg,#fb923c 0 4px,#fdba74 4px 8px)}
.tda-mic-h.dong b{color:#c2410c;font-weight:800;font-size:.7rem;white-space:nowrap}
.tda-mic-h.dong-phu .tda-mic-n{color:var(--tda-chu-phu)}
.tda-mic-h.dong-phu .tda-mic-n .fas{opacity:.6}
.tda-mic-h.dong-phu b{color:var(--tda-chu-phu);font-weight:600;font-size:.68rem;white-space:nowrap}
[data-theme="dark"] .tda-tat{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.45);color:#fdba74}
[data-theme="dark"] .tda-mic-h.dong .tda-mic-n,[data-theme="dark"] .tda-mic-h.dong b,[data-theme="dark"] .tda-nhan.cam{color:#fdba74}


/* (21/10 b) KHUNG THẺ CỐ ĐỊNH — user: "card phòng cứ nhảy nhảy". Mọi dòng chữ đổi theo nhịp 250ms/1s đều 1 dòng (cắt …),
   khối mic giữ chiều cao 3 nguồn (nhiều hơn thì cuộn), chân thẻ 2 dòng cố định ⇒ chiều cao thẻ không đổi theo số đo. */
.tda-o-phu{flex-wrap:nowrap;overflow:hidden}
.tda-o-phu>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tda-o-phu>span.j-host{flex:0 1 auto;max-width:45%}
.tda-dem small,.tda-muc-dau span,.tda-muc-dau b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tda-muc-dau{gap:8px} .tda-muc-dau span{flex:none}
.tda-mic{height:102px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.tda-mic-h{flex:none;height:18px}
.tda-mic .tda-mo{font-size:.72rem}
.tda-o-chan{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:18px 18px;gap:4px;align-items:center}
.tda-o-chan>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tda-o-chan .tda-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tda-tt{white-space:nowrap}
.tda-dem-n{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--tda-chu-phu);margin-bottom:4px}

@media (max-width:1023px){
  .tda-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tda-luoi{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}
@media (max-width:767px){
  .tda-luoi{grid-template-columns:minmax(0,1fr)}
  .tda-o{padding:12px 14px}
  .tda-o-giua{grid-template-columns:minmax(0,1fr);gap:12px}
  .tda-dem b{font-size:2rem}
  .tda-bang thead{display:none}
  .tda-bang,.tda-bang tbody,.tda-bang tr,.tda-bang td{display:block;width:100%}
  .tda-bang tr{border:1px solid var(--tda-vien);border-radius:12px;padding:6px 10px;margin-bottom:8px}
  .tda-bang td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:10px}
  .tda-bang td::before{content:attr(data-nhan);color:var(--tda-chu-phu);font-size:.72rem;font-weight:600}
}
@media (max-width:480px){
  .tda-kpi{gap:8px}
  .tda-k{padding:10px 12px;gap:8px}
  .tda-k-ic{width:32px;height:32px;border-radius:10px;font-size:.85rem}
  .tda-k b{font-size:1.2rem}
  .tda-nut-cd span{display:none}
  .tda-seg button{padding:7px 9px}
  .tda-nk-loc{width:100%} .tda-nk-loc select,.tda-nk-loc input{flex:1;min-width:0}
}