/* CO-CHU-0311 */
/* Tra từ Lớp học AI (P3). Màu chủ đạo xanh lá #0B6CF3 trên nền sáng (YEU-CAU.md 16.11).
   Chữ trắng trên nền nút dùng #0957C3 (tương phản 5,4:1, đạt WCAG AA), #0B6CF3 cho viền và điểm nhấn. */
.rqx-tt { --tt-g: var(--g, #2D5BD7); --tt-gd: var(--g-d, #1E3A8A); --tt-ink: var(--ink2, #1F2937); --tt-soft: var(--g-bg, #E8EFFF); --tt-line: var(--g-line, #CBD5E1);
  position: fixed; inset: 0; z-index: 400; display: none; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tt-ink); }
.rqx-tt.on { display: block; }
.rqx-tt-bg { position: absolute; inset: 0; background: rgba(28, 49, 40, .28); }
.rqx-tt-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border: 2px solid var(--tt-g);
  border-radius: 16px; box-shadow: 0 14px 40px rgba(28, 49, 40, .22); overflow: hidden; }
.rqx-tt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--tt-soft); border-bottom: 1px solid var(--tt-line); font-size: 18px; }
.rqx-tt-x { border: 0; background: transparent; font-size: 19px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--tt-ink); }
.rqx-tt-x:hover { background: #fff; }
.rqx-tt-form { display: flex; gap: 8px; padding: 12px 14px 6px; }
.rqx-tt-in { flex: 1; min-width: 0; font-size: 18px; padding: 10px 12px; border: 1.5px solid var(--tt-line); border-radius: 10px; outline: none; color: var(--tt-ink); background: #fff; }
.rqx-tt-in:focus { border-color: var(--tt-g); box-shadow: 0 0 0 3px rgba(11, 108, 243, .18); }
.rqx-tt-go { border: 0; border-radius: 10px; padding: 0 18px; font-size: 17px; font-weight: 700; color: #fff; background: var(--tt-gd); cursor: pointer; }
.rqx-tt-go:hover { background: #166519; }
.rqx-tt-body { overflow: auto; padding: 8px 14px 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-content: start; }
.rqx-tt-body > :not(.rqx-tt-main):not(.rqx-tt-write) { grid-column: 1 / -1; }
.rqx-tt-hint, .rqx-tt-note { margin: 4px 0; font-size: 15.5px; line-height: 1.5; color: #3d5548; }
.rqx-tt-err { color: #286AC6; font-size: 15.5px; }
.rqx-tt-main { min-width: 0; }
.rqx-tt-word { display: flex; align-items: center; gap: 10px; }
.rqx-tt-hz { font-size: 44px; line-height: 1.15; font-family: "KaiTi", "STKaiti", "Noto Serif SC", "Microsoft YaHei", serif; color: var(--tt-ink); word-break: break-all; }
.rqx-tt-say { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--tt-g); background: #fff; font-size: 21px; cursor: pointer; }
.rqx-tt-say:hover { background: var(--tt-soft); }
.rqx-tt-py { font-size: 21px; color: var(--tt-gd); font-weight: 600; margin-top: 2px; }
.rqx-tt-vi { font-size: 18px; line-height: 1.5; margin-top: 4px; }
.rqx-tt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rqx-tt-tag { font-size: 13.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; color: #fff; background: var(--tt-gd); }
.rqx-tt-tag.l { color: var(--tt-gd); background: var(--tt-soft); border: 1px solid var(--tt-line); }
.rqx-tt-tag.w { color: #6b5300; background: #FFF6D6; border: 1px solid #F1DE97; }
.rqx-tt-write { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rqx-tt-chs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rqx-tt-chs button { min-width: 34px; height: 32px; border-radius: 8px; border: 1.5px solid var(--tt-line); background: #fff; font-size: 18px; cursor: pointer; color: var(--tt-ink); }
.rqx-tt-chs button.on { border-color: var(--tt-g); background: var(--tt-soft); }
.rqx-tt-hw { width: 132px; height: 132px; border: 1.5px solid var(--tt-g); border-radius: 10px; background:
  linear-gradient(var(--tt-line), var(--tt-line)) center / 100% 1px no-repeat, linear-gradient(var(--tt-line), var(--tt-line)) center / 1px 100% no-repeat, #fff; }
.rqx-tt-hwbtn { display: flex; gap: 6px; }
.rqx-tt-hwbtn button { font-size: 14.5px; padding: 6px 10px; border-radius: 99px; border: 1.5px solid var(--tt-g); background: #fff; color: var(--tt-gd); font-weight: 700; cursor: pointer; }
.rqx-tt-hwbtn button:hover { background: var(--tt-soft); }
.rqx-tt-hwst { font-size: 13.5px; color: #5a6f63; max-width: 160px; text-align: center; min-height: 15px; }
.rqx-tt-sub { font-size: 14.5px; font-weight: 700; color: var(--tt-gd); margin-top: 4px; border-top: 1px solid var(--tt-line); padding-top: 8px; }
.rqx-tt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rqx-tt-list button { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: baseline; text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: #F8FBF8; cursor: pointer; color: var(--tt-ink); font-size: 15.5px; }
.rqx-tt-list button:hover { border-color: var(--tt-g); background: #fff; }
.rqx-tt-list .h { font-size: 19px; }
.rqx-tt-list .p { color: var(--tt-gd); font-weight: 600; }
.rqx-tt-list .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqx-tt-list .c { font-size: 12.5px; color: #5a6f63; }
.rqx-tt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; color: #5a6f63; padding-top: 6px; }
.rqx-tt-links a { color: var(--tt-gd); font-weight: 700; text-decoration: none; border: 1.5px solid var(--tt-g); padding: 5px 12px; border-radius: 99px; }
.rqx-tt-links a:hover { background: var(--tt-soft); }
.rqx-tt-float { position: fixed; z-index: 390; border: 0; border-radius: 99px; padding: 7px 12px; font-size: 14.5px; font-weight: 700; color: #fff; background: #0957C3; box-shadow: 0 4px 12px rgba(28, 49, 40, .25); cursor: pointer; }
@media (max-width: 560px) {
  .rqx-tt-box { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; border-width: 2px 0 0; }
  .rqx-tt-body { grid-template-columns: 1fr; }
  .rqx-tt-write { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .rqx-tt-chs { width: 100%; }
  .rqx-tt-hz { font-size: 38px; }
  .rqx-tt-list button { grid-template-columns: auto 1fr auto; }
  .rqx-tt-list .c { display: none; }
}