/* GPT 29.10.2026 · Assigned range/select UI · DOM NBT-Chat 0d1ebd5.
   Load after existing app/trang styles and before giao-dien.js. */
.cd-co-chu { padding: 14px 16px; }
.cd-chu-nhan { display: block; margin: 0 0 4px; color: var(--chu); font-size: 1rem; font-weight: 750; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.cd-thanh-hang { display: grid; grid-template-columns: 1.25em minmax(0, 1fr) 1.75em; align-items: center; gap: 12px; }
.cd-chu-be, .cd-chu-lon { color: var(--chu-nhat); text-align: center; line-height: 1; user-select: none; }
.cd-chu-be { font-size: .85rem; }
.cd-chu-lon { font-size: 1.5rem; font-weight: 750; }
.cd-thanh-chu {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 48px;
  margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent;
  color: var(--chinh-2, #0875ac); accent-color: var(--chinh-2, #0875ac); cursor: pointer; direction: ltr;
}
.cd-thanh-chu::-webkit-slider-runnable-track { height: 6px; border: 1px solid var(--vien); border-radius: 999px; background: var(--mat-2, var(--nen)); }
.cd-thanh-chu::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px;
  border: 3px solid var(--mat); border-radius: 50%; background: var(--chinh-2, #0875ac);
  box-shadow: 0 0 0 1px var(--chinh-2, #0875ac), 0 2px 5px #001c3026;
}
.cd-thanh-chu::-moz-range-track { height: 4px; border: 1px solid var(--vien); border-radius: 999px; background: var(--mat-2, var(--nen)); }
.cd-thanh-chu::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--chinh-2, #0875ac); }
.cd-thanh-chu::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--mat); border-radius: 50%; background: var(--chinh-2, #0875ac); box-shadow: 0 0 0 1px var(--chinh-2, #0875ac); }
.cd-thanh-chu:focus-visible, .chon-nn-ds:focus-visible { outline: 3px solid var(--lien-ket, var(--chinh-2, #0875ac)); outline-offset: 3px; }
.cd-thanh-chu:disabled, .chon-nn-ds:disabled { opacity: .55; cursor: default; }

/* Native selects retain keyboard, screen-reader and system picker behavior. */
.chon-nn-ds, #hop .chon-nn-ds {
  box-sizing: border-box; display: block; width: 100%; max-width: 32rem; min-width: 0; min-height: 48px;
  padding: 10px 14px; border: 1px solid var(--vien); border-radius: 14px;
  background-color: var(--mat); color: var(--chu); font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.5;
  -webkit-appearance: menulist; appearance: auto; cursor: pointer; color-scheme: light;
}
.chon-nn-ds option { background: var(--mat); color: var(--chu); font: inherit; }
.ngon-ngu.co-chon { width: min(100%, 13rem); min-width: 0; max-width: 100%; }
.ngon-ngu.co-chon > a { display: none; }
.ngon-ngu.co-chon .chon-nn-ds { width: 100%; }
@media (prefers-color-scheme: dark) { .chon-nn-ds, #hop .chon-nn-ds { color-scheme: dark; } }
.man-xanh .chon-nn-ds { border-color: #bfdbea; background: #fff; color: #12354d; color-scheme: light; }
.man-xanh .chon-nn-ds option { background: #fff; color: #12354d; }
.man-xanh .chon-nn-ds:focus-visible { outline-color: #fff; }
/* First language screen: separate the picker, Continue button and explanatory note (PR #118). */
.man-xanh-giua > .chon-nn-ds + .nut { margin-top: 16px; }
.man-xanh-giua > .chon-nn-ds + .nut + .loi-chao { margin-top: 12px; }
@media (max-width: 480px) { .ngon-ngu.co-chon { flex-basis: 100%; width: 100%; margin-left: 0; } }
@media (forced-colors: active) {
  .cd-thanh-chu { accent-color: Highlight; }
  .cd-thanh-chu::-webkit-slider-runnable-track { background: Canvas; border-color: CanvasText; }
  .cd-thanh-chu::-webkit-slider-thumb { background: Highlight; border-color: Canvas; box-shadow: 0 0 0 1px Highlight; }
  .cd-thanh-chu::-moz-range-track { background: Canvas; border-color: CanvasText; }
  .cd-thanh-chu::-moz-range-progress { background: Highlight; }
  .cd-thanh-chu::-moz-range-thumb { background: Highlight; border-color: Canvas; }
  .cd-thanh-chu:focus-visible, .chon-nn-ds:focus-visible { outline-color: Highlight; }
}