/* ══════════════════════════════════════════════════════════════════════════════
   BẢNG MÀU DÙNG CHUNG CHO PHÒNG TƯ VẤN VÀ CỔNG CƠ SỞ.

   Trước file này, một sản phẩm có ba bộ mặt: trang quản trị sáng xanh dương, phòng
   tư vấn sáng xanh mòng két, cổng cơ sở TỐI navy không đổi được. Nhân viên trạm y tế
   ngồi phòng sáng cầm tablet mà nhận màn tối cứng — đó không phải chế độ tối, đó là
   một sản phẩm khác.

   NGUỒN GỐC GIÁ TRỊ: chép từ `frontend/telehealth-web/src/styles.css` (bảng token của
   trang quản trị, đã có đủ hai theme). Sửa màu thì sửa ở ĐÓ trước rồi chép sang đây —
   web-consult là ba trang tĩnh do nginx phục vụ, không có bước build để nhập chung tệp,
   và thêm một bước build cho ~100 dòng CSS ít đổi thì đắt hơn cái nó giải quyết.

   CÁCH DÙNG: nạp trước khối <style> của trang. Phần dưới cùng ánh xạ tên biến CŨ của
   web-consult (--txt, --line, --accent…) sang token mới, nên hàng trăm chỗ dùng sẵn có
   không phải sửa. Biến CSS thay thế lúc tính giá trị, nên một dòng alias trong :root tự
   đi theo theme đang bật — không cần viết lại alias cho chế độ tối.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --bg-page: #F3F7FD;
  /* Chuyển sắc CHỈ dùng cho nền trang: một dải rất nhạt từ trên xuống, gắn cố định nên
     không trôi theo cuộn. Mặt thẻ vẫn trắng phẳng. */
  --grad-page: linear-gradient(180deg, #EDF3FD 0%, #F6F9FD 42%, #FCFDFF 100%);
  --bg-surface: #FFFFFF;
  --bg-surface-secondary: #F6F9FE;
  --bg-surface-tertiary: #EDF3FB;
  --bg-hover: #EDF3FB;
  --bg-active: #E6EFFE;
  --bg-overlay: rgba(15, 23, 42, 0.45);

  --text-primary: #14202E;
  --text-secondary: #4A5B70;
  --text-tertiary: #74869C;
  --text-disabled: #9DABBD;
  --text-inverse: #FFFFFF;

  --border-subtle: #E4EBF6;
  --border-default: #D3DEEE;
  --border-strong: #B2C1D6;
  --border-focus: #6E9BF0;

  --color-primary: #3D74D6;
  --color-primary-hover: #2E5FBB;
  --color-primary-soft: #E9F0FE;
  --color-primary-border: #C4D8F9;
  --color-primary-text: #2C5FB8;

  --color-success: #0E7256;
  /* Viền người đang nói — xanh lá tươi như Discord (#23A559) / Meet (#34A853), sáng hơn
     một bậc để nổi trên khung video vốn tối. Không dùng --color-success: màu đó dành cho
     nhãn trạng thái trên nền trắng, đặt lên video thì chìm. */
  --rk-speak: #22C55E;
  /* Viền ô video nhỏ (camera của mình, người hỗ trợ, ô phụ): trắng mờ để tách khỏi
     khung chính mà không tranh chỗ với viền xanh báo đang nói: mảnh và rất mờ, đủ để
     thấy mép ô trên nền video tối, không đọc thành một đường kẻ. Khai một chỗ để ba
     trang giống hệt nhau — trước đây mỗi trang một giá trị (.28 / .30 / 1px xám). */
  --pip-border: 1px solid rgba(255, 255, 255, .15);
  --color-success-hover: #0B5F48;
  --color-success-soft: #E6F7F0;
  --color-success-border: #B7E7D5;
  --color-success-text: #0E7256;

  --color-warning: #92551A;
  --color-warning-soft: #FFF3E3;
  --color-warning-border: #F7D9B0;
  --color-warning-text: #92551A;

  --color-danger: #C0334B;
  --color-danger-hover: #A62A40;
  --color-danger-soft: #FFECEF;
  --color-danger-border: #F7C2CC;
  --color-danger-text: #C0334B;

  /* ── Bốn tông pastel, mỗi tông MỘT nghĩa cố định ────────────────────────────
     xanh = đang làm/chính · bạc hà = xong/bình thường · đào = đang chờ/ưu tiên ·
     hồng = bất thường/nguy kịch. Dùng pastel cho việc khác là tiêu mất vốn cảnh báo:
     lúc có chuyện thật thì mắt đã quen bỏ qua vùng màu. */
  --grad-primary: linear-gradient(135deg, #3A6FD0 0%, #5A5ED0 100%);
  --grad-primary-hover: linear-gradient(135deg, #305FBA 0%, #4B4FBC 100%);
  --grad-sky: linear-gradient(135deg, #E9F0FE 0%, #E3EBFE 100%);
  --grad-mint: linear-gradient(135deg, #E6F7F0 0%, #DCF2EB 100%);
  --grad-peach: linear-gradient(135deg, #FFF3E3 0%, #FFE9D8 100%);
  --grad-rose: linear-gradient(135deg, #FFECEF 0%, #FFE1E7 100%);

  --color-on-solid: #FFFFFF;

  --input-bg: #FFFFFF;
  --input-border: #8895A6;
  --input-placeholder: #6B7684;
  --input-disabled-bg: #F1F5F9;

  --shadow-sm: 0 1px 2px rgba(20,32,46,.05);
  --shadow-lg: 0 18px 40px rgba(20,32,46,.13);
  /* Bóng của MẶT THẺ: hai lớp — một lớp sát mép cho cạnh rõ, một lớp toả rộng rất
     nhạt cho cảm giác nổi. Một lớp dày là bóng của phần mềm cũ, hai lớp nhạt là
     bóng của giao diện bây giờ. */
  --shadow-card: 0 1px 2px rgba(23,55,94,.05), 0 10px 26px rgba(23,55,94,.07);
  --shadow-card-line: rgba(31,72,116,.09);
  /* Bóng của nút chính mang MÀU của chính nút, không phải màu đen — bóng đen dưới
     nút xanh trông như nút bị bẩn. */
  --shadow-btn: 0 2px 5px rgba(58,95,186,.26), 0 8px 18px rgba(58,95,186,.16);
  --shadow-btn-hover: 0 3px 8px rgba(58,95,186,.30), 0 12px 26px rgba(58,95,186,.20);

  /* Inter nạp từ Google Fonts trong <head> của từng trang. Bộ dự phòng vẫn là chữ
     có dấu tiếng Việt đầy đủ, phòng khi máy không ra được internet. */
  --font-sans: Inter, "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* Chế độ tối — bảng riêng, KHÔNG đảo màu bảng sáng (chép từ trang quản trị §3). */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #121820;
  --grad-page: linear-gradient(180deg, #171F29 0%, #121820 55%, #0F141B 100%);
  --bg-surface: #1A222C;
  --bg-surface-secondary: #202A35;
  --bg-surface-tertiary: #26313E;
  --bg-hover: #232E3A;
  --bg-active: #1E3350;
  --bg-overlay: rgba(0,0,0,.70);

  --text-primary: #E8EEF6;
  --text-secondary: #AEBDCD;
  --text-tertiary: #8496A8;
  --text-disabled: #67788A;
  --text-inverse: #121417;

  --border-subtle: #29343F;
  --border-default: #37444F;
  --border-strong: #4A5A69;
  --border-focus: #7FB0F5;

  --color-primary: #4E86E8;
  --color-primary-hover: #3E72D0;
  --color-primary-soft: #1C2A42;
  --color-primary-border: #33507E;
  --color-primary-text: #8FB6FF;

  --color-success: #12805F;
  --rk-speak: #2EE06A;   /* nền tối: nhích sáng thêm cho tách khỏi hình */
  --color-success-hover: #0E6B50;
  --color-success-soft: #142A24;
  --color-success-border: #24503F;
  --color-success-text: #6BD9B0;

  --color-warning: #97621C;
  --color-warning-soft: #2E2415;
  --color-warning-border: #55401F;
  --color-warning-text: #F0B96A;

  --color-danger: #C24358;
  --color-danger-hover: #A9364A;
  --color-danger-soft: #2E1A20;
  --color-danger-border: #5A2F3A;
  --color-danger-text: #FF8B9E;

  /* Pastel trên nền tối phải ĐẬM lại, không dùng lại mã của bản sáng — pastel sáng
     trên nền tối vừa chói vừa nuốt mất chữ. */
  --grad-primary: linear-gradient(135deg, #3F72D6 0%, #6062D4 100%);
  --grad-primary-hover: linear-gradient(135deg, #3665C2 0%, #5254C0 100%);
  --grad-sky: linear-gradient(135deg, #1C2A42 0%, #1E2743 100%);
  --grad-mint: linear-gradient(135deg, #142A24 0%, #132A29 100%);
  --grad-peach: linear-gradient(135deg, #2E2415 0%, #2E2118 100%);
  --grad-rose: linear-gradient(135deg, #2E1A20 0%, #2E1A24 100%);

  --color-on-solid: #FFFFFF;

  --input-bg: #2A2D31;
  --input-border: #767C85;
  --input-placeholder: #8B9199;
  --input-disabled-bg: #26282C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.32);
  --shadow-lg: 0 20px 45px rgba(0,0,0,.52);
  --shadow-card: 0 1px 2px rgba(0,0,0,.34), 0 12px 30px rgba(0,0,0,.34);
  --shadow-card-line: #2C3843;
  --shadow-btn: 0 2px 6px rgba(0,0,0,.42), 0 10px 22px rgba(30,55,110,.30);
  --shadow-btn-hover: 0 3px 9px rgba(0,0,0,.48), 0 14px 30px rgba(30,55,110,.36);
}

/* Nền trang mang chuyển sắc; mọi mặt thẻ bên trong vẫn phẳng. Đặt ở đây một lần
   để ba trang không ai tự vẽ nền riêng. */
body, .clin-body { background-color: var(--bg-page); background-image: var(--grad-page);
                   background-attachment: fixed; }
/* Nút chính là chỗ DUY NHẤT trong luồng làm việc có chuyển sắc đậm: nó là hành động
   chính của màn, và chỉ có một nút như vậy mỗi màn. */
.btn.primary { background: var(--grad-primary); border-color: transparent; color: #fff;
               box-shadow: var(--shadow-btn); transition: box-shadow .15s ease, transform .15s ease; }
.btn.primary:hover:not(:disabled) { background: var(--grad-primary-hover);
               box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }
.btn.primary:active:not(:disabled) { transform: none; box-shadow: var(--shadow-btn); }
.btn.primary:disabled { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn.primary { transition: none; }
  .btn.primary:hover:not(:disabled) { transform: none; }
}
/* Chip trạng thái: pastel theo đúng nghĩa cũ của từng lớp. */
.chip.ok { background: var(--grad-mint); }
.chip.warn { background: var(--grad-peach); }
.chip.crit { background: var(--grad-rose); }
.chip.on, .chip.accent { background: var(--grad-sky); }

/* ── Alias: tên cũ của PHÒNG TƯ VẤN (kham-bs, kham-bn) ────────────────────────
   Cột video giữ nguyên nền tối ở cả hai theme và KHÔNG dùng các biến này: nền tối
   quanh khung hình là cách mọi phần mềm gọi video làm, vì mắt đọc hình rõ hơn. */
:root {
  --bg: var(--bg-page);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-surface-secondary);
  --surface-3: var(--bg-surface-tertiary);
  --line: var(--border-subtle);
  --line-2: var(--border-default);

  --txt: var(--text-primary);
  --txt-2: var(--text-secondary);
  --txt-3: var(--text-tertiary);

  --accent: var(--color-primary);
  --accent-d: var(--color-primary-hover);
  --accent-soft: var(--color-primary-soft);
  --accent-line: var(--color-primary-border);

  /* --ok/--warn/--crit gần như luôn là MÀU CHỮ trên nền soft hoặc nền trang,
     nên ánh xạ sang token -text (đã chỉnh cho đọc được ở cả hai theme). */
  --ok: var(--color-success-text);
  --ok-soft: var(--color-success-soft);
  --ok-line: var(--color-success-border);
  --warn: var(--color-warning-text);
  --warn-soft: var(--color-warning-soft);
  --warn-line: var(--color-warning-border);
  --crit: var(--color-danger-text);
  --crit-soft: var(--color-danger-soft);
  --crit-line: var(--color-danger-border);

  --shadow: var(--shadow-sm);
}

/* ── Alias: tên cũ, còn dùng ở phòng hội chẩn nhiều bên (index.html · app.js) ──── */
:root {
  --panel: var(--bg-surface);
  --panel2: var(--bg-surface-secondary);
  --line2: var(--border-subtle);
  --dim: var(--text-secondary);
  --dim2: var(--text-tertiary);
  --blue: var(--color-primary);
  --blue-h: var(--color-primary-hover);
  --green: var(--color-success-text);
  --red: var(--color-danger-text);
  --amber: var(--color-warning-text);
}

/* ── Vá vài chỗ alias không khớp nghĩa ──────────────────────────────────────
   Ba quy tắc gốc viết màu thẳng vào, chỉ đúng trên nền sáng. */
.chip.accent { color: var(--color-primary-text); }
.btn.danger:hover:not(:disabled) { background: var(--color-danger-border); }
.pill.ok { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success-text); }

/* ── Chỉ số đường truyền, nổi trên khung video (dùng chung phòng tư vấn) ──────
   Nằm ĐÈ lên video nên giữ nền tối ở cả hai theme, cùng lý do với cột video: nền
   sáng đè lên hình sẽ chói và che mất khuôn mặt người bệnh. */
.netq {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(15, 23, 42, .72); backdrop-filter: blur(3px);
  color: #E6E8EB; font-size: 11.5px; line-height: 1; font-variant-numeric: tabular-nums;
  pointer-events: none; user-select: none;
}
.netq[hidden] { display: none; }
/* Luật chung: thuộc tính hidden phải THẮNG mọi display của lớp (.btn/.dbtn là inline-flex → thiếu luật này
   thì el.hidden = true không giấu được nút "Kết thúc", "Chia sẻ"…). */
[hidden] { display: none !important; }
.netq-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.netq-bars i { width: 3px; border-radius: 1px; background: currentColor; opacity: .28; }
.netq-bars i:nth-child(1) { height: 5px; }
.netq-bars i:nth-child(2) { height: 8px; }
.netq-bars i:nth-child(3) { height: 12px; }

/* Số cột sáng lên = mức còn tốt tới đâu. Màu đi kèm để không phải đếm cột. */
.netq.good  { color: #59CC85; }
.netq.fair  { color: #E4AE4F; }
.netq.poor,
.netq.lost  { color: #F0736C; }
.netq.good .netq-bars i { opacity: 1; }
.netq.fair .netq-bars i:nth-child(-n+2) { opacity: 1; }
.netq.poor .netq-bars i:nth-child(1) { opacity: 1; }
.netq.lost .netq-bars i { opacity: .28; }
.netq.unknown { color: #B4B9C0; }

/* ── Cột sóng trên từng ô video, nằm cạnh tên người trong ô ───────────────────
   Đặt trong .tag chứ không phải góc ô: góc phải trên đã có chỉ số chung của cả
   khung, góc trái trên là nút đổi cách xem. Nằm cạnh tên cũng đúng nghĩa hơn —
   "mạng của người này", không phải "mạng của khung hình này". Không có số ms vì
   RTT chỉ đo được ở nhánh mình phát (xem room-kit.js). */
.tq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.tq i { width: 2.5px; border-radius: 1px; background: currentColor; opacity: .3; }
.tq i:nth-child(1) { height: 4px; }
.tq i:nth-child(2) { height: 7px; }
.tq i:nth-child(3) { height: 10px; }
.tq.good { color: #59CC85; }
.tq.fair { color: #E4AE4F; }
.tq.poor { color: #F0736C; }
.tq.lost { color: #F0736C; }
.tq.good i { opacity: 1; }
.tq.fair i:nth-child(-n+2) { opacity: 1; }
.tq.poor i:nth-child(1) { opacity: 1; }
.tq.lost i { opacity: .3; }   /* mất kết nối: tắt cả ba, giống badge chung */
/* Chưa đo được thì KHÔNG bày ba vạch mờ: vạch mờ trông y hệt "mạng kém", nói sai
   còn tệ hơn không nói. Hiện lên khi đã có mức thật. */
.tq.unknown { display: none; }

/* Mất kết nối thì nhấp nháy — đây là lúc bác sĩ cần biết ngay, không phải lúc đọc kỹ. */
.netq.lost { animation: netq-nhay 1.1s ease-in-out infinite; }
@keyframes netq-nhay { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .netq.lost { animation: none; } }

/* ── Nút đổi theme (dùng chung ba trang) ────────────────────────────────────── */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.theme-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.theme-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-moon { display: block; }
[data-theme="dark"] .theme-btn .i-sun { display: none; }

/* ── Ai đang nói ──────────────────────────────────────────────────────────────
   Viền ỔN ĐỊNH: chỉ nói "đang nói hay không", không co giãn/nhấp nháy theo âm lượng —
   nhìn viền rung theo từng âm tiết rất mệt mắt, nhất là khi nhiều người trong phòng.
   Hiện/ẩn bằng độ mờ để có chuyển tiếp mềm: vào 120 ms, ra 180 ms. Vòng ôm đúng vùng
   hình video (room-kit đặt kích thước .speak-ring theo hình thật khi object-fit: contain). */
.speak-ring { position: absolute; z-index: 1; pointer-events: none; box-sizing: border-box;
  border: 2px solid var(--rk-speak, #22C55E); border-radius: inherit;
  opacity: 0; transition: opacity 180ms ease-out; }
/* Vòng sáng nằm DƯỚI mọi thứ có chữ trong ô: khi hình bị thu nhỏ (object-fit: contain) viền
   chạy giữa ô và cắt ngang nhãn tên; ô nhỏ (z-index 3) cũng phải ở trên viền của ô chính.
   Trước đây viền z-index 3 — ngang ô nhỏ, đè nhãn. */
.tile > .tag, .tile > .novideo, .tile > .nocam-strip { z-index: 2; }
.tile.speaking > .speak-ring { opacity: 1; transition: opacity 120ms ease-out; }
@media (prefers-reduced-motion: reduce) { .speak-ring, .tile.speaking > .speak-ring { transition: none; } }

/* ══ THANH ĐIỀU KHIỂN PHÒNG TƯ VẤN (dùng chung bàn bác sĩ và phòng người bệnh) ══════
   Trước đây mỗi trang tự vẽ một kiểu: bên người bệnh nút 48px nền sáng viền xám, bên
   bác sĩ nút 44px trong suốt trên nền tối — cùng một chức năng mà hai bên nhìn khác
   hẳn nhau. Gom về một chỗ, giữ nguyên tên lớp cũ (.dbtn / .vbtn) nên HTML và JS không
   phải sửa. Mỗi trang vẫn có tập nút riêng theo vai (bác sĩ có ghi hình/ghi âm, người
   bệnh có trao đổi/rời phòng).

   Thanh nằm ngay dưới khung video nên để nền tối như Meet/Zoom: mắt không phải nhảy
   giữa vùng tối và vùng sáng, và biểu tượng luôn đủ tương phản ở cả hai giao diện. */
.dock, .video-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #111827; border-top: 1px solid #1f2937;
}
/* Nút chỉ có biểu tượng, vuông 46px — đủ to cho ngón tay (chuẩn cảm ứng tối thiểu 44px)
   mà vẫn xếp đủ sáu, bảy nút trên một hàng ở điện thoại. */
.dbtn, .vbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 46px; min-width: 46px; height: 46px; padding: 0;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: #cbd5e1; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.dbtn:focus-visible, .vbtn:focus-visible { outline: 2px solid var(--border-focus, #6E9BF0); outline-offset: 2px; }
.dbtn:disabled, .vbtn:disabled { opacity: .35; cursor: not-allowed; }
/* Đang bật (mic/camera đang mở) */
.dbtn.on, .vbtn.on { background: #1e293b; border-color: #334155; color: #fff; }
/* Biểu tượng đổi theo trạng thái: đang bật thì mic/camera thường, đã tắt thì bản có
   gạch chéo — chỉ đổi màu thôi thì người dùng vẫn phải nhớ "đỏ nghĩa là gì". */
.dbtn .ico-off, .vbtn .ico-off { display: none; }
.dbtn.off .ico-on, .vbtn.off .ico-on { display: none; }
.dbtn.off .ico-off, .vbtn.off .ico-off { display: block; }
/* Đã tắt tiếng / tắt camera — đỏ nhạt, khác hẳn trạng thái bật để liếc là biết */
.dbtn.off, .vbtn.off { background: #3f1d24; border-color: #7f1d1d; color: #fecaca; }
/* Đang ghi hình / ghi âm */
.dbtn.danger-on, .vbtn.danger-on { background: #7f1d1d; border-color: #b91c1c; color: #fff; }
/* Rời phòng */
.dbtn.leave, .vbtn.leave { color: #fca5a5; }
.dbtn.leave:hover, .vbtn.leave:hover { background: #7f1d1d; color: #fff; }

/* ── Rê chuột: mỗi trạng thái đậm lên một bậc CỦA CHÍNH NÓ ─────────────────────
   Quy tắc hover phải nằm sau các lớp trạng thái, nếu không sẽ bị chúng ghi đè (cùng
   độ ưu tiên, cái sau thắng) và nút coi như không phản hồi. Quan trọng hơn: nút đang
   TẮT mà rê chuột vào lại chuyển sang nền xám thì trông y như đã bật lại — người dùng
   tưởng mic đã mở trong khi vẫn đang tắt tiếng. */
.dbtn:hover:not(:disabled), .vbtn:hover:not(:disabled) { background: #1e293b; color: #f1f5f9; }
.dbtn.on:hover:not(:disabled), .vbtn.on:hover:not(:disabled) { background: #2b3b52; border-color: #47576f; color: #fff; }
.dbtn.off:hover:not(:disabled), .vbtn.off:hover:not(:disabled) { background: #5c2630; border-color: #b91c1c; color: #fff; }
.dbtn.danger-on:hover:not(:disabled), .vbtn.danger-on:hover:not(:disabled) { background: #991b1b; border-color: #dc2626; color: #fff; }
/* Chỗ chữ chỉ dùng cho ĐỒNG HỒ lúc ghi âm; rỗng thì biến mất để nút vẫn vuông */
.dbtn .lbl, .vbtn .lbl { font: 600 10px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.dbtn .lbl:empty, .vbtn .lbl:empty { display: none; }
.dbtn:has(.lbl:not(:empty)), .vbtn:has(.lbl:not(:empty)) { width: auto; min-width: 54px; padding: 0 8px; }
/* Mũi tên chọn thiết bị đứng cạnh nút mic/camera */
.dsplit { position: relative; display: flex; align-items: stretch; gap: 2px; }
.dcaret { width: 18px; border: 0; padding: 0; background: transparent; color: #94a3b8; cursor: pointer; border-radius: 8px; }
.dcaret:hover { background: #1e293b; color: #e2e8f0; }
.dcaret:focus-visible { outline: 2px solid var(--border-focus, #6E9BF0); outline-offset: 2px; }