/* css/rp-settings.css — Tab Cài Đặt (Right Panel) bố cục mới [05/10/2026 — Chặng 2 làm lại Cài Đặt]
   Đi cặp với js/rp-settings.js. Tiền tố .rps- (đã grep toàn dự án, không trùng — R48 ③).
   Màu nhấn = var(--primary-red) của base.css ⇒ tab tự đổi theo "Màu chủ đề" đang chọn.
   ⚠️ Khung cuộn là #rp-tab-settings (.ytt-rp-section, padding 16px) — hàng chip dính dùng top:0 + lề âm 16px.
   ⚠️ Mọi khối con của cột KHÔNG được co (R24): cột là block thường + gap bằng margin của .rps > * + * */

.rps {
  --rps-acc: var(--primary-red, #d84a3a);
  --rps-on-acc: #fff;
  --rps-bg: #0f0d12;
  --rps-surf: rgba(255, 255, 255, 0.035);
  --rps-surf2: rgba(255, 255, 255, 0.06);
  --rps-line: rgba(255, 255, 255, 0.09);
  --rps-ink: #f1ece6;
  --rps-muted: #a49c95;
  --rps-ok: #4ade80;
  --rps-loi: #f87171;
  --rps-sw-off: rgba(255, 255, 255, 0.18);
  color: var(--rps-ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Chừa đáy cho Tiểu Bư (nổi góc dưới, đo 05/10: đè đúng nút "Đăng xuất" ở 360px lẫn máy tính) */
  padding-bottom: 76px;
  container-type: inline-size;
  container-name: rps;
}
.rps > * { flex-shrink: 0; }
html[data-theme="light"] .rps {
  --rps-bg: #faf7f3;
  --rps-surf: #ffffff;
  --rps-surf2: #f4efe8;
  --rps-line: #e6ded3;
  --rps-ink: #1f1b18;
  --rps-muted: #6a625b;
  --rps-ok: #15803d;
  --rps-loi: #b91c1c;
  --rps-sw-off: #d6cec3;
}
/* Kim Long sáng: vàng trên nền trắng không đủ tương phản cho chữ trắng trên nút ⇒ chữ tối */
body[data-theme="gold"] .rps { --rps-on-acc: #1d1400; }

:where(.rps) button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rps :focus-visible { outline: 2px solid var(--rps-acc); outline-offset: 2px; }

/* ── Hồ sơ ── */
.rps-profile {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rps-acc) 22%, transparent), var(--rps-surf) 70%);
  border: 1px solid var(--rps-line);
}
.rps-ava {
  width: 50px; height: 50px; border-radius: 50%; flex: none; object-fit: cover;
  box-shadow: 0 0 0 2px var(--rps-bg), 0 0 0 3.5px color-mix(in srgb, var(--rps-acc) 70%, transparent);
}
.rps-pinfo { min-width: 0; flex: 1; }
.rps-pname { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rps-ten { font: 600 1.02rem/1.3 var(--ytt-hz-font, serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rps-pen { border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--rps-muted); font-size: 0.75rem; flex: none; }
.rps-pen:hover { color: var(--rps-acc); }
.rps-ten-input {
  flex: 1; min-width: 0; font-family: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--rps-ink);
  background: var(--rps-surf2); border: 1px solid var(--rps-acc); border-radius: 8px; padding: 3px 8px; outline: none;
}
.rps-mail { font-size: 0.76rem; color: var(--rps-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rps-gchip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 8px; border-radius: 99px;
  font-size: 0.68rem; color: var(--rps-muted); background: var(--rps-surf2); border: 1px solid var(--rps-line);
}
.rps-gchip b { color: #4285f4; font-weight: 800; }
.rps-msg { font-size: 0.74rem; min-height: 0; line-height: 1.35; color: var(--rps-muted); }
.rps-msg:empty { display: none; }
.rps-msg.rps-msg--ok { color: var(--rps-ok); margin-top: 4px; }
.rps-msg.rps-msg--loi { color: var(--rps-loi); margin-top: 4px; }
.rps-pwd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rps-pwd .rps-msg { grid-column: 1 / -1; }
/* [05/10 Chặng 3] Form đổi mật khẩu trong tab (thay hộp cũ) */
.rps-mk-form { grid-column: 1 / -1; display: grid; gap: 8px; }
.rps-mk-form[hidden] { display: none; }
.rps-input {
  width: 100%; box-sizing: border-box; min-width: 0; font-family: inherit; font-size: 0.86rem; color: var(--rps-ink);
  background: var(--rps-surf2); border: 1px solid var(--rps-line); border-radius: 10px; padding: 9px 11px; outline: none;
}
.rps-input:focus { border-color: var(--rps-acc); }
.rps-input::placeholder { color: var(--rps-muted); }

/* ── Hàng chip dính đầu ── */
.rps-chips {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -16px; padding: 8px 16px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--rps-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rps-chips::-webkit-scrollbar { display: none; }
/* 4 chip chia đều bề ngang, KHÔNG biểu tượng (đo 05/10: tự co thì "Khác" bị cắt; có biểu tượng thì bảng 383px ở máy tính 1366 cắt "Âm th…") */
.rps-chip {
  flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 4px; border-radius: 99px; text-align: center;
  border: 1px solid var(--rps-line); background: var(--rps-surf); color: var(--rps-muted);
  font-size: 0.76rem; font-weight: 600; transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.rps-chip.on { background: var(--rps-acc); border-color: var(--rps-acc); color: var(--rps-on-acc); }

/* ── Ô xem trước ── */
.rps-preview {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center;
  padding: 14px 14px 12px; border-radius: 16px; background: var(--rps-surf); border: 1px solid var(--rps-line);
}
.rps-pv-lbl { grid-column: 1 / -1; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rps-muted); font-weight: 700; }
.rps-pv-hz { font: 400 2.5rem/1.2 var(--ytt-hz-font, serif); }
.rps-pv-py { font-size: 0.92rem; font-weight: 600; color: var(--rps-acc); }
.rps-pv-vi { font-size: 0.86rem; color: var(--rps-muted); }
.rps-pv-hv { font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700; color: var(--rps-ink); }
.rps-pv-hv[hidden] { display: none; }
.rps-play {
  grid-column: 2; grid-row: 2 / span 3;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--rps-acc); color: var(--rps-on-acc); display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px var(--rps-acc); transition: transform 0.15s;
}
.rps-play i { margin-left: 3px; }
.rps-play:active { transform: scale(0.93); }
.rps-play.dang-phat { animation: rps-nhip 1s ease-in-out infinite; }
@keyframes rps-nhip { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--rps-acc) 22%, transparent); } }
.rps-pv-cau {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rps-line);
  font: 400 1.05rem/1.55 var(--ytt-hz-font, serif);
}

/* ── Nhóm ── */
.rps-sec {
  display: flex; flex-direction: column; gap: 11px;
  padding: 14px; border-radius: 16px; background: var(--rps-surf); border: 1px solid var(--rps-line);
  scroll-margin-top: 52px;
}
.rps-sec > * { flex-shrink: 0; }
.rps-sec h3 { margin: 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rps-acc); font-weight: 700; }
.rps-row-lbl { font-size: 0.82rem; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rps-row-lbl em { font-style: normal; font-weight: 500; font-size: 0.72rem; color: var(--rps-muted); }
.rps-div { height: 1px; background: var(--rps-line); }
.rps-note { font-size: 0.74rem; color: var(--rps-muted); line-height: 1.4; margin-top: -4px; }

/* Giọng đọc */
.rps-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rps-voice {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 4px 8px;
  border-radius: 13px; border: 1.5px solid var(--rps-line); background: var(--rps-surf2); transition: border-color 0.2s, background 0.2s;
}
.rps-voice b { font: 600 0.92rem/1.15 var(--ytt-hz-font, serif); }
.rps-voice > span:last-child { font-size: 0.66rem; color: var(--rps-muted); }
.rps-voice.on { border-color: var(--rps-acc); background: color-mix(in srgb, var(--rps-acc) 14%, var(--rps-surf2)); }
.rps-voice.on::after { content: '✓'; position: absolute; top: 5px; right: 8px; font-size: 0.7rem; font-weight: 800; color: var(--rps-acc); }
.rps-face { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: block; background: var(--rps-surf); }
.rps-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ảnh động nền đen (Robot): khung tối ĐẶC để .ytt-gif-strip giấu nền đen bằng screen-blend (base.css) */
.rps-face--strip { background: #0d0d1a; }
html[data-theme="light"] .rps-face--strip .ytt-gif-strip { mix-blend-mode: screen; filter: none; }

/* Nút phân đoạn có ô trượt */
.rps-seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 3px; border-radius: 11px; background: var(--rps-surf2); border: 1px solid var(--rps-line);
}
.rps-seg button {
  position: relative; z-index: 1; border: 0; background: none; padding: 8px 4px; border-radius: 8px;
  color: var(--rps-muted); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color 0.2s;
}
.rps-seg button.on { color: var(--rps-on-acc); }
.rps-knob {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 8px;
  background: var(--rps-acc); box-shadow: 0 4px 12px -5px var(--rps-acc);
}
.rps-knob.san { transition: transform 0.28s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.28s; }

/* Công tắc */
.rps-tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rps-tg-t { min-width: 0; }
.rps-tg-t b { display: block; font-size: 0.86rem; font-weight: 600; }
.rps-tg-t span { font-size: 0.72rem; color: var(--rps-muted); }
.rps-sw {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; border: 0;
  background: var(--rps-sw-off); transition: background 0.25s;
}
.rps-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.25s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.rps-sw[aria-checked="true"] { background: var(--rps-acc); }
.rps-sw[aria-checked="true"]::after { transform: translateX(18px); }

/* Thẻ phông */
.rps-fonts { display: grid; gap: 7px; }
.rps-fonts--han { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rps-fonts--vi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rps-ft {
  display: grid; justify-items: center; gap: 1px; padding: 9px 2px 7px; min-width: 0;
  border-radius: 11px; border: 1.5px solid var(--rps-line); background: var(--rps-surf2);
  transition: border-color 0.2s, background 0.2s;
}
.rps-ft.on { border-color: var(--rps-acc); background: color-mix(in srgb, var(--rps-acc) 14%, var(--rps-surf2)); }
.rps-g { font-size: 1.35rem; line-height: 1.25; }
.rps-g--vi { font-size: 1.1rem; font-weight: 700; }
/* Tên ô được xuống dòng (5 ô phông Việt ở 360px chỉ ~55px/ô — "Nhẹ nhàng" bị cắt "…", đo 05/10) */
.rps-ft-ten { font-size: 0.68rem; font-weight: 600; line-height: 1.15; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.rps-ft-mo { font-size: 0.6rem; color: var(--rps-muted); white-space: nowrap; }

/* Màu chủ đề — thẻ minh hoạ luôn nền tối (mẫu màu), chữ trắng */
.rps-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.rps-world {
  position: relative; height: 78px; padding: 0; overflow: hidden; isolation: isolate; text-align: left;
  border-radius: 12px; border: 1.5px solid var(--rps-line); color: #fff; transition: transform 0.15s;
}
.rps-world:active { transform: scale(0.96); }
.rps-wbg { position: absolute; inset: 0; z-index: -1; }
.rps-wch { position: absolute; right: 2px; bottom: -8px; font: 400 46px/1 var(--ytt-hz-font, serif); opacity: 0.32; }
.rps-wten { position: absolute; left: 8px; bottom: 6px; font-size: 0.74rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.rps-wdot { position: absolute; left: 8px; top: 8px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.rps-world.on { border-color: var(--rps-acc); box-shadow: 0 0 0 2px var(--rps-acc); }
.rps-world.on .rps-wdot::after { content: '✓'; display: grid; place-items: center; height: 100%; font-size: 8px; font-weight: 900; color: #000; }
.rps-wdesc { font-size: 0.74rem; color: var(--rps-muted); margin-top: -3px; }

/* Hàng bấm + nút */
.rps-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; background: none; padding: 2px 0; text-align: left;
}
.rps-link > span > b { display: block; font-size: 0.86rem; font-weight: 600; }
.rps-link > span > span { font-size: 0.72rem; color: var(--rps-muted); }
.rps-link i { color: var(--rps-muted); font-size: 0.75rem; }
.rps-pwa[hidden] { display: none; }
.rps-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rps-btn {
  border: 1px solid var(--rps-line); background: var(--rps-surf2); border-radius: 11px;
  padding: 9px 8px; font-size: 0.8rem; font-weight: 600; line-height: 1.25;
}
.rps-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rps-btn i { margin-right: 4px; font-size: 0.75rem; }
.rps-btn--pri { width: 100%; background: var(--rps-acc); border-color: var(--rps-acc); color: var(--rps-on-acc); }
.rps-btn--danger { color: var(--rps-loi); }

/* [05/10 Chặng 5] Xoá tài khoản — khối thu gọn cuối mục Khác (js/xoa-tai-khoan.js) */
.rps-xoa-wrap { margin-top: 4px; }
.rps-xoa-wrap:empty { display: none; }
.rps-xoa-mo > span > b { color: var(--rps-loi); }
.rps-xoa-mo[aria-expanded="true"] i { transform: rotate(180deg); }
.rps-xoa {
  display: grid; gap: 10px; margin-top: 8px; padding: 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--rps-loi) 45%, transparent);
  background: color-mix(in srgb, var(--rps-loi) 7%, transparent);
}
.rps-xoa[hidden] { display: none; }
.rps-xoa-dau { margin: 0; font-size: 0.8rem; line-height: 1.45; }
.rps-xoa-mat { display: grid; gap: 4px; font-size: 0.78rem; }
.rps-xoa-mat i { width: 16px; text-align: center; color: var(--rps-loi); }
.rps-xoa .rps-note { margin-top: 0; }
.rps-xoa-tich { display: flex; gap: 8px; align-items: flex-start; font-size: 0.78rem; line-height: 1.4; cursor: pointer; }
.rps-xoa-tich input { margin-top: 2px; flex-shrink: 0; accent-color: var(--rps-loi); }
.rps-xoa-nut { width: 100%; color: var(--rps-loi); border-color: color-mix(in srgb, var(--rps-loi) 55%, transparent); }

/* Báo đã lưu — dính đáy khung cuộn */
.rps-saved {
  position: sticky; bottom: 4px; z-index: 4; align-self: center;
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px;
  font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--rps-ink) 92%, transparent); color: var(--rps-bg);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.rps-saved i { color: var(--rps-ok); }
html[data-theme="light"] .rps-saved i { color: #86efac; }
.rps-saved.show { opacity: 1; transform: none; }

/* Đổi màu chủ đề "loang tròn từ chỗ bấm" (View Transitions — chỉ áp trong lượt đổi do tab này khởi động) */
html.rps-loang::view-transition-old(root) { animation: none; }
html.rps-loang::view-transition-new(root) { animation: rps-loang 0.6s cubic-bezier(0.6, 0, 0.3, 1); }
@keyframes rps-loang {
  from { clip-path: circle(0 at var(--rps-lx, 50%) var(--rps-ly, 50%)); }
  to   { clip-path: circle(150vmax at var(--rps-lx, 50%) var(--rps-ly, 50%)); }
}

/* [ĐẶT CUỐI FILE — cùng độ ưu tiên với luật gốc, đứng trước là bị luật gốc đè] Bảng hẹp (máy tính 1024px ⇒ bảng 320px, chữ trong mục chỉ còn ~260px — đo 05/10): bỏ biểu tượng chip, chữ nhỏ một nấc,
   nút phân đoạn được xuống 2 dòng thay vì cắt "…" (ô trượt cao theo nút vì neo top/bottom) */
@container rps (max-width: 340px) {
  .rps-chips { gap: 4px; }
  .rps-chip { font-size: 0.7rem; padding: 6px 2px; }
  .rps-seg button { font-size: 0.74rem; padding: 7px 2px; white-space: normal; line-height: 1.15; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .rps *, .rps-knob.san { transition: none !important; animation: none !important; }
}