/* giong-ari.css — kiểu dáng nút "Nghe Ari" và khung "Lời Ari" (đi cùng giong-ari.js, VL-14).
   Chỉ trang nào có giọng mới nạp tệp này, nên trang chưa có giọng giữ nguyên từng byte.
   Khuôn nút như nút "Nghe Ari" của hoạt cảnh thuần trùm: viên thuốc phụ, tai nghe, "Nghe Ari" ↔ "Dừng nghe",
   .dang-bat khi đang phát. Cao ≥ 44 px để ngón tay bấm trúng. Màu lấy từ biến sẵn có của trang (tools.css). */

.giong{margin:12px 0 0}
.giong[hidden]{display:none}
/* Nút đầu trang đứng CÙNG HÀNG với nút "Giới thiệu & lưu ý" (khỏi đẩy công cụ xuống trên điện thoại). */
.giong-dau{float:left;margin:12px 8px 0 0}
.giong-dau + .gthich > .gthich-noi{clear:left}
.giong-dau + .gthich ~ *{clear:left}

.giong-nut{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;
  padding:6px 12px 6px 9px;border-radius:999px;border:1px solid var(--line,rgba(245,139,175,.16));
  background:rgba(245,139,175,.05);color:var(--text-secondary,#B9A9A2);
  font-family:var(--f-label,inherit);font-size:.82rem;font-weight:500;line-height:1.3;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .3s ease,border-color .3s ease,background .3s ease}
.giong-nut:focus-visible{outline:2px solid var(--accent,#F58BAF);outline-offset:3px}
@media (hover:hover){
  .giong-nut:hover{color:var(--text-primary,#F5EDE8);border-color:rgba(245,139,175,.42)}
}
.giong-nut.dang-bat{color:var(--text-primary,#F5EDE8);border-color:var(--accent,#F58BAF);background:rgba(245,139,175,.16)}
.giong-ic{flex:none;width:18px;height:18px;fill:var(--accent,#F58BAF)}
.giong-gio{font-variant-numeric:tabular-nums;font-size:.76rem;opacity:.78}
/* Nhãn đổi "Nghe Ari" ↔ "Dừng nghe": giữ sẵn bề ngang của nhãn dài hơn (chữ ẩn cùng ô), để lúc bấm nút không
   phình ra đẩy nút "Giới thiệu & lưu ý" xuống dòng dưới. */
.giong-chu{display:inline-grid}
.giong-chu::after{content:attr(data-dung);grid-area:1/1;visibility:hidden;height:0;overflow:hidden}
/* Điện thoại hẹp: bỏ thời lượng trên nút (vẫn có trong khung chữ và trong tên nút cho máy đọc màn hình), để nút
   Nghe Ari và nút "Giới thiệu & lưu ý" đứng chung một hàng. */
@media (max-width:399.98px){.giong-gio{display:none}}
.giong-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Nút nhỏ trong thân công cụ: cùng khuôn, chữ nhỏ hơn một chút, vẫn cao 44 px. */
.giong-trong{margin:10px 0 0}
.giong-nho .giong-nut{padding:5px 12px 5px 9px;font-size:.78rem;gap:6px}
.giong-nho .giong-ic{width:16px;height:16px}

/* Khung "Lời Ari": mở khi bấm, chữ đầy đủ (người không nghe được / chỗ đông người vẫn đọc được). */
.giong-khung{clear:both;margin-top:10px;padding:12px 14px 6px;border-radius:14px;max-width:64ch;
  background:var(--panel,#211917);border:1px solid var(--line,rgba(245,139,175,.16));
  color:var(--text-secondary,#B9A9A2);font-size:.88rem;line-height:1.6;text-align:left}
.giong-khung[hidden]{display:none}
.giong-dong{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.giong-thanh{flex:1;height:3px;border-radius:3px;background:rgba(245,139,175,.14);overflow:hidden}
.giong-khung-gio{font-variant-numeric:tabular-nums;font-size:.74rem;opacity:.85;white-space:nowrap}
.giong-thanh i{display:block;height:100%;width:0;background:var(--accent,#F58BAF);transition:width .25s linear}
.giong-doan{margin:0 0 4px;font-size:.76rem;color:var(--accent,#F58BAF)}
.giong-loi{margin:0;color:var(--text-primary,#F5EDE8)}
.giong-bao{margin:8px 0 0;color:var(--text-primary,#F5EDE8)}
.giong-chan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;margin-top:4px}
.giong-ghi{font-size:.74rem;opacity:.85}
.giong-an,.giong-batloa{min-height:44px;margin:0;padding:0 4px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.8rem;color:var(--accent,#F58BAF);text-decoration:underline;text-underline-offset:3px}
.giong-batloa{padding:0 14px;border:1px solid var(--accent,#F58BAF);border-radius:999px;text-decoration:none;
  font-weight:600;display:inline-flex;align-items:center;margin-top:6px}
.giong-an:focus-visible,.giong-batloa:focus-visible{outline:2px solid var(--accent,#F58BAF);outline-offset:2px}

/* Dinh dưỡng AI (thân app NutriVision nền sáng, lớp bọc .nv): đổi sang màu của app. */
.nv .giong-nut{background:#f8f5f0;border-color:var(--nv-line,#e6dccf);color:var(--nv-ink,#2b211d);font-family:inherit}
.nv .giong-nut.dang-bat{background:#f3e6e0;border-color:var(--nv-brand,#7d493e)}
.nv .giong-ic{fill:var(--nv-brand,#7d493e)}
.nv .giong-khung{background:#fff;border-color:var(--nv-line,#e6dccf);color:var(--nv-muted,#6d625c)}
.nv .giong-loi,.nv .giong-bao{color:var(--nv-ink,#2b211d)}
.nv .giong-thanh{background:#eee7df}
.nv .giong-thanh i{background:var(--nv-brand,#7d493e)}
.nv .giong-doan,.nv .giong-an,.nv .giong-batloa{color:var(--nv-brand,#7d493e)}
.nv .giong-batloa{border-color:var(--nv-brand,#7d493e)}

@media (prefers-reduced-motion:reduce){
  .giong-nut,.giong-thanh i{transition:none}
}