/* Thanh chọn miền dùng chung (Nam, Trung, Bắc; có thể kèm Tất cả hoặc Sai cú pháp).
   Màn nào cũng gắn .region-tabs cho khung và .region-tab cho từng nút; class riêng của màn chỉ giữ bố cục (vị trí, độ rộng).
   Chiều cao nút theo token của brand.css; ui-dimensions.css không còn quy tắc riêng cho các nút này. */
#app .region-tabs {
  display: flex;
  gap: 2.7px;
  min-width: 0;
  /* Khung hẹp hơn tổng chữ các nút (máy tính bảng, thanh công cụ nhiều ô) thì cuộn ngang trong khung, không đẩy tràn hàng */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 0;
  padding: 2.7px;
  border: 1px solid #dce6f1;
  border-radius: 8.1px;
  background: #f3f7fc;
}
#app .region-tabs > .region-tab {
  position: relative;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5.4px;
  min-width: max-content;
  min-height: var(--tts-control-compact);
  height: auto;
  margin: 0;
  padding: 0 12.6px;
  border: 0;
  border-radius: 5.4px;
  background: transparent;
  box-shadow: none;
  color: #526580;
  font-size: var(--tts-font-control);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
#app .region-tabs > .region-tab:hover:not(:disabled) { color: var(--tts-xanh); background: #e4edf8; }
#app .region-tabs > .region-tab:focus-visible { outline: 2px solid var(--tts-xanh); outline-offset: -2px; }
#app .region-tabs > .region-tab:is(.is-active, .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
  color: #fff;
  background: var(--tts-xanh);
  box-shadow: 0 1px 3px rgba(20, 109, 177, .18);
}
#app .region-tabs > .region-tab:disabled { cursor: default; opacity: .6; }
#app .region-tab > i { font-size: 11px; opacity: .75; }
/* Tên miền: máy tính ghi đủ, màn hẹp ghi tắt MN / MT / MB (RegionLabel.js); tên đầy đủ vẫn còn cho trình đọc màn hình */
#app .region-tab-short { display: none; }

/* Số đếm trong nút: xám xanh, nút đang chọn thì nền trắng; .is-alert (số tin lỗi) màu đỏ. */
#app .region-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19.8px;
  height: 19.8px;
  padding: 0 5.4px;
  border-radius: 999px;
  background: #dce7f5;
  color: var(--tts-navy);
  font-size: var(--tts-font-caption);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
#app .region-tab-count.is-alert { background: var(--tts-do); color: #fff; }
#app .region-tab:is(.is-active, .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) .region-tab-count { background: #fff; color: var(--tts-xanh); }

@media (pointer: coarse) {
  #app .region-tabs > .region-tab { min-height: var(--tts-control-touch); }
}
@media (prefers-reduced-motion: reduce) {
  #app .region-tabs > .region-tab { transition: none; }
}
/* Điện thoại: thanh chiếm cả hàng, các nút chia đều và được co chữ. */
@media (max-width: 767px) {
  #app .region-tabs { width: 100%; }
  /* Bốn nút (Tất cả + 3 miền) không đủ chỗ một dòng: chữ xuống dòng trong nút, không đè sang nút bên cạnh */
  #app .region-tabs > .region-tab { min-width: 0; padding: 4.5px; white-space: normal; text-align: center; line-height: var(--tts-line-heading); letter-spacing: 0; }
  #app .region-tab > i { display: none; }
  #app .region-tab-short { display: inline; }
  #app .region-tab-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}