/* CSS riêng của app: chỉ bố cục. Màu, font lấy từ lớp .saly-* và biến var(--…). */
[hidden] { display: none !important; }

.dau-trang h1 { margin: 0 0 var(--space-1); }
.dau-trang p { margin: 0 0 var(--space-3); }
.an-di { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tai-khoan { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }

.thanh-tab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.saly-btn { min-height: 48px; }

.tab:not([aria-current="page"]),
.nut-phu {
  background: var(--brand-surface-alt);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
}

.trang { display: grid; gap: var(--space-3); }
.trang > * { margin: 0; }

.bo-loc { display: grid; gap: var(--space-2); margin-top: var(--space-2); }

.danh-sach { display: grid; gap: var(--space-3); }

.the-don-vi {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.the-don-vi > span { display: block; }
.the-ten { font-weight: 700; font-size: 1.1em; }
.nhan-dan { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Form */
fieldset { min-width: 0; }
fieldset.saly-card { display: grid; gap: var(--space-2); }
fieldset.nhom { border: 0; padding: 0; margin: 0; }
fieldset.nhom legend { padding: 0; margin-bottom: var(--space-1); }
.nhom-lua-chon { display: grid; gap: var(--space-1); }
.lua-chon {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  cursor: pointer;
}
.lua-chon input { width: 22px; height: 22px; flex: none; }
.saly-input { font-size: max(16px, 1rem); min-height: 48px; }
textarea.saly-input { min-height: 96px; }

.ds-goi { display: grid; gap: var(--space-3); }
.goi-hoc {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
}
.goi-hoc-luoi { display: grid; gap: var(--space-2); }
.tieu-chi { display: grid; gap: var(--space-2); }

.hang-nut { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hang-nut .saly-btn { flex: 1 1 140px; }

/* Chi tiết */
.chi-tiet { display: grid; gap: var(--space-3); }
.chi-tiet h2, .chi-tiet h3 { margin: 0; }
.dong-tt { display: grid; gap: var(--space-1); margin: 0; }
.dong-tt dt { font-weight: 700; }
.dong-tt dd { margin: 0 0 var(--space-2); white-space: pre-line; }
.van-ban { white-space: pre-line; margin: 0; }
.ds-the { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.the-goi { padding: var(--space-2); border: 1px solid var(--brand-border); border-radius: 8px; }
.the-goi p { margin: 0; }
.link-ngoai { overflow-wrap: anywhere; }

/* Báo cáo */
.so-lieu { display: grid; gap: var(--space-2); }
.so-lieu .saly-result { display: grid; gap: var(--space-1); }
.bieu-do { display: block; width: 100%; height: auto; }

@media (min-width: 600px) {
  .bo-loc, .nhom-lua-chon, .goi-hoc-luoi, .tieu-chi, .so-lieu { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .danh-sach { grid-template-columns: repeat(2, 1fr); }
  .thanh-tab { max-width: 36rem; }
}
@media (min-width: 1024px) {
  .bo-loc, .goi-hoc-luoi, .so-lieu { grid-template-columns: repeat(3, 1fr); }
  .hang-nut .saly-btn { flex: 0 0 auto; min-width: 180px; }
}
@media (min-width: 1280px) {
  .danh-sach { grid-template-columns: repeat(3, 1fr); }
}