/* Thuận Thiên — trang Thay đổi thông tin doanh nghiệp (GPKD): chỉ phần riêng của trang (hero + phiếu chọn thủ tục).
   Nạp sau global.css, components.css, service.css. Khối dùng lại nằm trong service.css (rule 58). */

.tt-change-hero .tt-svc-hero__grid { align-items:center }

.tt-change-slip {
  position:relative;
  width:100%;
  max-width:30rem;
  padding:var(--tt-space-5) var(--tt-space-5) var(--tt-space-4);
  border-radius:var(--tt-r-l);
  border:1px solid var(--tt-line);
  background:var(--tt-white);
  box-shadow:var(--tt-shadow-l);
}

.tt-change-slip__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--tt-space-3);
  padding-bottom:var(--tt-space-4);
  border-bottom:1px solid var(--tt-line);
}

.tt-change-slip__head .tt-kicker { font-size:var(--tt-fs-caption) }

.tt-change-slip__field { margin-top:var(--tt-space-4) }

.tt-change-slip__field .tt-label { margin-bottom:var(--tt-space-2) }

.tt-change-slip__quick {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--tt-space-2);
  margin-top:var(--tt-space-3);
}

.tt-change-slip__quick .tt-chip {
  min-height:2.25rem;
  font-size:var(--tt-fs-caption);
  padding:0 .6rem;
  justify-content:center;
  white-space:nowrap;
}

.tt-change-slip__out {
  margin-top:var(--tt-space-4);
  padding:var(--tt-space-4);
  border-radius:var(--tt-r-m);
  background:color-mix(in srgb,var(--tt-th-wash) 55%,var(--tt-white));
  border:1px solid color-mix(in srgb,var(--tt-th) 16%,transparent);
}

.tt-change-slip__amount {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--tt-space-3);
  flex-wrap:wrap;
}

.tt-change-slip__amount small {
  font:600 var(--tt-fs-caption)/1.2 var(--tt-font-body);
  letter-spacing:var(--tt-ls-caption);
  text-transform:uppercase;
  color:var(--tt-th-ink);
}

.tt-change-slip__amount strong {
  font:700 var(--tt-fs-h2-s)/1 var(--tt-font-head);
  letter-spacing:var(--tt-ls-h2-s);
  color:var(--tt-ink);
}

.tt-change-slip__facts { display:grid;gap:var(--tt-space-2);margin-top:var(--tt-space-3) }

.tt-change-slip__facts div {
  display:grid;
  grid-template-columns:6.25rem minmax(0,1fr);
  gap:var(--tt-space-3);
  padding-top:var(--tt-space-2);
  border-top:1px solid color-mix(in srgb,var(--tt-th) 14%,transparent);
}

.tt-change-slip__facts dt {
  font:600 var(--tt-fs-caption)/1.5 var(--tt-font-body);
  color:var(--tt-th-ink);
}

.tt-change-slip__facts dd {
  margin:0;
  font-size:var(--tt-fs-small);
  line-height:1.55;
  color:var(--tt-text);
}

.tt-change-slip__foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--tt-space-3);
  flex-wrap:wrap;
  margin-top:var(--tt-space-4);
}

.tt-change-slip__note {
  margin-top:var(--tt-space-3);
  font-size:var(--tt-fs-caption);
  line-height:var(--tt-lh-caption);
  color:var(--tt-muted);
}

.tt-change-slip__swap { animation:tt-change-swap var(--tt-dur-move) var(--tt-ease) }

@keyframes tt-change-swap { from { opacity:.15; transform:translateY(.3rem) } to { opacity:1; transform:none } }

@media (max-width:1024px){
.tt-change-slip { max-width:34rem;margin-inline:auto }
}

@media (max-width:767px){
.tt-change-slip { padding:var(--tt-space-4);border-radius:var(--tt-r-m) }
.tt-change-slip__head { flex-direction:column;align-items:flex-start;gap:var(--tt-space-2) }
.tt-change-slip__amount strong { font-size:var(--tt-fs-h3-l) }
.tt-change-slip__facts div { grid-template-columns:1fr;gap:var(--tt-space-1) }
.tt-change-slip__foot .tt-btn { width:100%;justify-content:center }
}

@media (prefers-reduced-motion:reduce){
.tt-change-slip__swap { animation:none }
}