/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-pri: #DA1F26;
    --color-pri-h: #D6000B;
    --color-pri-soft: #FEF3F2;
    --color-pri-bd: #FDA29B;
    --color-err: #B42318;
    --color-err-bg: #FEF3F2;
    --color-err-bd: #FDA29B;
    --color-warn: #B54708;
    --color-warn-bg: #FFFAEB;
    --color-warn-bd: #FEDF89;
    --color-ok: #067647;
    --color-ok-bg: #ECFDF3;
    --color-ok-bd: #ABEFC6;
    --color-info: #175CD3;
    --color-info-bg: #EFF8FF;
    --color-info-bd: #B2DDFF;
    --color-tx: #181D27;
    --color-tx2: #414651;
    --color-tx3: #717680;
    --color-tx4: #A4A7AE;
    --color-bd: #E9EAEB;
    --color-bd2: #D5D7DA;
    --color-bg: #FAFAFA;
    --color-bg2: #F5F5F5;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .right-\[-3px\] {
    right: -3px;
  }
  .bottom-\[-3px\] {
    bottom: -3px;
  }
  .z-\[\%s\] {
    z-index: %s;
  }
  .order-\[\%s\] {
    order: %s;
  }
  .col-\[\%s\] {
    grid-column: %s;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: 0px;
  }
  .mx-0 {
    margin-inline: 0px;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: 0px;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-\[1px\] {
    margin-top: 1px;
  }
  .mt-\[2px\] {
    margin-top: 2px;
  }
  .mt-\[4px\] {
    margin-top: 4px;
  }
  .mt-\[5px\] {
    margin-top: 5px;
  }
  .mt-\[8px\] {
    margin-top: 8px;
  }
  .mt-\[10px\] {
    margin-top: 10px;
  }
  .mt-\[14px\] {
    margin-top: 14px;
  }
  .mt-\[16px\] {
    margin-top: 16px;
  }
  .mt-\[20px\] {
    margin-top: 20px;
  }
  .mb-0 {
    margin-bottom: 0px;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-\[6px\] {
    margin-bottom: 6px;
  }
  .mb-\[8px\] {
    margin-bottom: 8px;
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .box-border {
    box-sizing: border-box;
  }
  .box-content {
    box-sizing: content-box;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-\[15px\] {
    height: 15px;
  }
  .h-\[22px\] {
    height: 22px;
  }
  .h-\[26px\] {
    height: 26px;
  }
  .h-\[38px\] {
    height: 38px;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .w-\[15px\] {
    width: 15px;
  }
  .w-\[22px\] {
    width: 22px;
  }
  .w-\[26px\] {
    width: 26px;
  }
  .w-\[38px\] {
    width: 38px;
  }
  .w-\[92px\] {
    width: 92px;
  }
  .max-w-\[760px\] {
    max-width: 760px;
  }
  .max-w-\[1000px\] {
    max-width: 1000px;
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-2 {
    min-width: calc(var(--spacing) * 2);
  }
  .min-w-\[220px\] {
    min-width: 220px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-\[\%s\] {
    flex: %s;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .border-separate {
    border-collapse: separate;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-help {
    cursor: help;
  }
  .cursor-move {
    cursor: move;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .\[grid-template-columns\:repeat\(auto-fit\,minmax\(190px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  }
  .\[grid-template-columns\:repeat\(auto-fit\,minmax\(230px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  }
  .grid-cols-\[\%s\] {
    grid-template-columns: %s;
  }
  .grid-cols-\[1fr_1fr\] {
    grid-template-columns: 1fr 1fr;
  }
  .grid-cols-\[repeat\(auto-fit\,minmax\(232px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(232px,1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-\[5px\] {
    gap: 5px;
  }
  .gap-\[7px\] {
    gap: 7px;
  }
  .gap-\[8px\] {
    gap: 8px;
  }
  .gap-\[10px\] {
    gap: 10px;
  }
  .gap-\[12px\] {
    gap: 12px;
  }
  .gap-\[16px\] {
    gap: 16px;
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-x-visible {
    overflow-x: visible;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .overflow-y-visible {
    overflow-y: visible;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[6px\] {
    border-radius: 6px;
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[99px\] {
    border-radius: 99px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-\[1px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b-\[1px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[\#E9EAEB\] {
    border-color: #E9EAEB;
  }
  .border-bd {
    border-color: var(--color-bd);
  }
  .border-bd2 {
    border-color: var(--color-bd2);
  }
  .border-err {
    border-color: var(--color-err);
  }
  .border-err-bd {
    border-color: var(--color-err-bd);
  }
  .border-info-bd {
    border-color: var(--color-info-bd);
  }
  .border-ok {
    border-color: var(--color-ok);
  }
  .border-ok-bd {
    border-color: var(--color-ok-bd);
  }
  .border-pri {
    border-color: var(--color-pri);
  }
  .border-pri-h {
    border-color: var(--color-pri-h);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-warn-bd {
    border-color: var(--color-warn-bd);
  }
  .border-t-bd {
    border-top-color: var(--color-bd);
  }
  .border-t-bd2 {
    border-top-color: var(--color-bd2);
  }
  .border-b-bd {
    border-bottom-color: var(--color-bd);
  }
  .bg-bd {
    background-color: var(--color-bd);
  }
  .bg-bd2 {
    background-color: var(--color-bd2);
  }
  .bg-bg {
    background-color: var(--color-bg);
  }
  .bg-bg2 {
    background-color: var(--color-bg2);
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-err {
    background-color: var(--color-err);
  }
  .bg-err-bg {
    background-color: var(--color-err-bg);
  }
  .bg-info-bg {
    background-color: var(--color-info-bg);
  }
  .bg-ok {
    background-color: var(--color-ok);
  }
  .bg-ok-bg {
    background-color: var(--color-ok-bg);
  }
  .bg-pri {
    background-color: var(--color-pri);
  }
  .bg-pri-h {
    background-color: var(--color-pri-h);
  }
  .bg-warn-bg {
    background-color: var(--color-warn-bg);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-fill {
    object-fit: fill;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-\[7px\] {
    padding: 7px;
  }
  .p-\[18px\] {
    padding: 18px;
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-\[14px\] {
    padding-inline: 14px;
  }
  .px-\[16px\] {
    padding-inline: 16px;
  }
  .px-\[26px\] {
    padding-inline: 26px;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-\[11px\] {
    padding-block: 11px;
  }
  .py-\[12px\] {
    padding-block: 12px;
  }
  .py-\[13px\] {
    padding-block: 13px;
  }
  .py-\[60px\] {
    padding-block: 60px;
  }
  .pt-\[2px\] {
    padding-top: 2px;
  }
  .pt-\[14px\] {
    padding-top: 14px;
  }
  .pt-\[16px\] {
    padding-top: 16px;
  }
  .pb-\[16px\] {
    padding-bottom: 16px;
  }
  .text-center {
    text-align: center;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-middle {
    vertical-align: middle;
  }
  .font-\[\%s\] {
    font-family: %s;
  }
  .font-\[inherit\] {
    font-family: inherit;
  }
  .font-\[ui-monospace\,SFMono-Regular\,Menlo\,monospace\] {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .text-\[12px\]\/\[18px\] {
    font-size: 12px;
    line-height: 18px;
  }
  .text-\[13px\]\/5 {
    font-size: 13px;
    line-height: calc(var(--spacing) * 5);
  }
  .text-\[13px\]\/\[19px\] {
    font-size: 13px;
    line-height: 19px;
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-sm\/5 {
    font-size: var(--text-sm);
    line-height: calc(var(--spacing) * 5);
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-xs\/5 {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 5);
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12\.5px\] {
    font-size: 12.5px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13\.5px\] {
    font-size: 13.5px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .leading-\[\%s\] {
    --tw-leading: %s;
    line-height: %s;
  }
  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[\.03em\] {
    --tw-tracking: .03em;
    letter-spacing: .03em;
  }
  .text-clip {
    text-overflow: clip;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#717680\] {
    color: #717680;
  }
  .text-err {
    color: var(--color-err);
  }
  .text-info {
    color: var(--color-info);
  }
  .text-ok {
    color: var(--color-ok);
  }
  .text-tx {
    color: var(--color-tx);
  }
  .text-tx2 {
    color: var(--color-tx2);
  }
  .text-tx3 {
    color: var(--color-tx3);
  }
  .text-tx4 {
    color: var(--color-tx4);
  }
  .text-warn {
    color: var(--color-warn);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-\[\%s\] {
    opacity: %s;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[\%s\] {
    --tw-shadow: %s;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_0_2px_\#fff\] {
    --tw-shadow: 0 0 0 2px var(--tw-shadow-color, #fff);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_1px_2px_rgba\(10\,13\,18\,\.05\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(10,13,18,.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,border-color\,color\,box-shadow\] {
    transition-property: background-color,border-color,color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .ease-\[ease\] {
    --tw-ease: ease;
    transition-timing-function: ease;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }
  .before\:bg-err::before {
    content: var(--tw-content);
    background-color: var(--color-err);
  }
  .before\:bg-info::before {
    content: var(--tw-content);
    background-color: var(--color-info);
  }
  .before\:bg-ok::before {
    content: var(--tw-content);
    background-color: var(--color-ok);
  }
  .before\:bg-tx4::before {
    content: var(--tw-content);
    background-color: var(--color-tx4);
  }
  .before\:bg-warn::before {
    content: var(--tw-content);
    background-color: var(--color-warn);
  }
  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .first\:pt-0:first-child {
    padding-top: 0px;
  }
  @media (hover: hover) {
    .hover\:border-\[\#B80009\]:hover {
      border-color: #B80009;
    }
    .hover\:border-err:hover {
      border-color: var(--color-err);
    }
    .hover\:border-pri-bd:hover {
      border-color: var(--color-pri-bd);
    }
    .hover\:bg-\[\#B80009\]:hover {
      background-color: #B80009;
    }
    .hover\:bg-bg:hover {
      background-color: var(--color-bg);
    }
    .hover\:bg-err-bg:hover {
      background-color: var(--color-err-bg);
    }
    .hover\:bg-pri-soft:hover {
      background-color: var(--color-pri-soft);
    }
    .hover\:text-pri-h:hover {
      color: var(--color-pri-h);
    }
    .hover\:text-tx:hover {
      color: var(--color-tx);
    }
  }
  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }
  .focus-visible\:outline-offset-\[3px\]:focus-visible {
    outline-offset: 3px;
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:opacity-45:disabled {
    opacity: 45%;
  }
  .disabled\:shadow-none:disabled {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_\.fh\]\:mt-1 .fh {
    margin-top: var(--spacing);
  }
  .\[\&_\.fh\]\:block .fh {
    display: block;
  }
  .\[\&_\.fh\]\:text-xs\/5 .fh {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 5);
  }
  .\[\&_\.fh\]\:text-tx3 .fh {
    color: var(--color-tx3);
  }
  .\[\&_\.fi\]\:w-full .fi {
    width: 100%;
  }
  .\[\&_\.fi\]\:rounded-lg .fi {
    border-radius: var(--radius-lg);
  }
  .\[\&_\.fi\]\:border .fi {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .\[\&_\.fi\]\:border-bd2 .fi {
    border-color: var(--color-bd2);
  }
  .\[\&_\.fi\]\:bg-white .fi {
    background-color: var(--color-white);
  }
  .\[\&_\.fi\]\:px-3 .fi {
    padding-inline: calc(var(--spacing) * 3);
  }
  .\[\&_\.fi\]\:py-2 .fi {
    padding-block: calc(var(--spacing) * 2);
  }
  .\[\&_\.fi\]\:pl-\[38px\] .fi {
    padding-left: 38px;
  }
  .\[\&_\.fi\]\:text-\[13px\]\/5 .fi {
    font-size: 13px;
    line-height: calc(var(--spacing) * 5);
  }
  .\[\&_\.fi\]\:text-tx .fi {
    color: var(--color-tx);
  }
  .\[\&_\.fi\:focus\]\:border-pri-bd .fi:focus {
    border-color: var(--color-pri-bd);
  }
  .\[\&_\.fi\:focus\]\:shadow-\[0_0_0_3px_var\(--color-pri-soft\)\] .fi:focus {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-pri-soft));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_\.fi\:focus\]\:outline-none .fi:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .\[\&_\.fi\[readonly\]\]\:bg-bg .fi[readonly] {
    background-color: var(--color-bg);
  }
  .\[\&_\.fi\[readonly\]\]\:text-tx2 .fi[readonly] {
    color: var(--color-tx2);
  }
  .\[\&_\.fl\]\:mb-1\.5 .fl {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .\[\&_\.fl\]\:block .fl {
    display: block;
  }
  .\[\&_\.fl\]\:text-xs\/5 .fl {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 5);
  }
  .\[\&_\.fl\]\:font-semibold .fl {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .\[\&_\.fl\]\:text-tx2 .fl {
    color: var(--color-tx2);
  }
  .\[\&_\.sub\]\:mt-\[3px\] .sub {
    margin-top: 3px;
  }
  .\[\&_\.sub\]\:mb-0 .sub {
    margin-bottom: 0px;
  }
  .\[\&_\.sub\]\:text-\[13px\] .sub {
    font-size: 13px;
  }
  .\[\&_\.sub\]\:text-tx3 .sub {
    color: var(--color-tx3);
  }
  .\[\&_\.txt\]\:min-w-0 .txt {
    min-width: 0px;
  }
  .\[\&_\.txt\]\:flex-1 .txt {
    flex: 1;
  }
  .\[\&_b\]\:font-semibold b {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .\[\&_dd\]\:m-0 dd {
    margin: 0px;
  }
  .\[\&_dd\]\:text-\[13px\]\/5 dd {
    font-size: 13px;
    line-height: calc(var(--spacing) * 5);
  }
  .\[\&_dd\]\:break-words dd {
    overflow-wrap: break-word;
  }
  .\[\&_dd\]\:text-tx dd {
    color: var(--color-tx);
  }
  .\[\&_dt\]\:mb-\[3px\] dt {
    margin-bottom: 3px;
  }
  .\[\&_dt\]\:text-xs\/5 dt {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 5);
  }
  .\[\&_dt\]\:font-semibold dt {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .\[\&_dt\]\:text-tx3 dt {
    color: var(--color-tx3);
  }
  .\[\&_h2\]\:m-0 h2 {
    margin: 0px;
  }
  .\[\&_h2\]\:text-sm h2 {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .\[\&_h2\]\:font-semibold h2 {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .\[\&_svg\]\:mt-px svg {
    margin-top: 1px;
  }
  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }
  .\[\&\>div\]\:min-w-0 > div {
    min-width: 0px;
  }
  .\[\&\>div\]\:border-b > div {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .\[\&\>div\]\:border-b-0\! > div {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 0px !important;
  }
  .\[\&\>div\]\:border-bd > div {
    border-color: var(--color-bd);
  }
  .\[\&\>div\]\:py-2 > div {
    padding-block: calc(var(--spacing) * 2);
  }
  .\[\&\>div\]\:pt-1\.5\! > div {
    padding-top: calc(var(--spacing) * 1.5) !important;
  }
  .\[\&\>h3\]\:m-0 > h3 {
    margin: 0px;
  }
  .\[\&\>h3\]\:mb-4 > h3 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .\[\&\>h3\]\:text-sm\/5 > h3 {
    font-size: var(--text-sm);
    line-height: calc(var(--spacing) * 5);
  }
  .\[\&\>h3\]\:font-semibold > h3 {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .\[\&\>h3\]\:text-tx > h3 {
    color: var(--color-tx);
  }
  .\[\&\>header\]\:flex > header {
    display: flex;
  }
  .\[\&\>header\]\:items-center > header {
    align-items: center;
  }
  .\[\&\>header\]\:justify-between > header {
    justify-content: space-between;
  }
  .\[\&\>header\]\:gap-3 > header {
    gap: calc(var(--spacing) * 3);
  }
  .\[\&\>header\]\:border-b > header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .\[\&\>header\]\:border-bd > header {
    border-color: var(--color-bd);
  }
  .\[\&\>header\]\:p-4 > header {
    padding: calc(var(--spacing) * 4);
  }
  @media (pointer:coarse) {
    .\[\@media\(pointer\:coarse\)\]\:min-h-\[44px\] {
      min-height: 44px;
    }
    .\[\@media\(pointer\:coarse\)\]\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
    .\[\@media\(pointer\:coarse\)\]\:py-\[11px\] {
      padding-block: 11px;
    }
  }
}
@layer base {
  [hidden] {
    display: none !important;
  }
}
@layer components {
  .card2 {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    padding: 17px 19px;
    margin-bottom: 11px;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .card2:hover {
    border-color: #FDA29B;
  }
  .card2 .ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FEF3F2;
    border: 1px solid #FDA29B;
    color: #DA1F26;
    font-weight: 700;
    font-size: 13px;
  }
  .card2 .t1 {
    display: block;
    font-size: 15px;
    font-weight: 600;
  }
  .card2 .t2 {
    display: block;
    font-size: 13px;
    color: #717680;
    margin-top: 3px;
  }
  .qt-hang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #E9EAEB;
  }
  .qt-hang:last-of-type {
    border-bottom: 0;
  }
  .qt-o {
    position: relative;
    flex: none;
    width: 132px;
  }
  .qt-o .fi {
    width: 100%;
    padding-right: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .qt-dv {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #717680;
    pointer-events: none;
  }
  .qt-vdh {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 13px;
    color: #414651;
  }
  .qt-vdh b {
    font-variant-numeric: tabular-nums;
    color: #181D27;
  }
  .qt-vdh.tong {
    border-bottom: 1px solid #D5D7DA;
    margin-bottom: 4px;
    padding-bottom: 8px;
    font-weight: 600;
  }
  .nk-loc {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 11px;
    background: #fff;
  }
  .nk-loc .fi {
    flex: 1;
    min-width: 190px;
  }
  .hd-md {
    max-width: 680px;
  }
  .hd-muc {
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .hd-hd {
    padding: 9px 14px;
    border-bottom: 1px solid #E9EAEB;
    background: #FAFAFA;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
  }
  .hd-muc .dl {
    padding: 12px 14px !important;
    margin: 0 !important;
  }
  .tao-dvbb {
    position: relative;
  }
  .tao-dvbb .fi {
    padding-right: 34px;
  }
  .tao-dv {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #717680;
    pointer-events: none;
  }
  .tao-lcinfo-ten {
    grid-column: 1 / -1;
  }
  .tao-lcinfo-them {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E9EAEB;
  }
  .tao-lcxoa {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 3px;
    margin: -3px;
    color: #717680;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .tao-lcxoa:hover {
    background: #F5F5F5;
    color: #B42318;
  }
  .tao-ben {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 9px;
    background: #FAFAFA;
    margin-bottom: 8px;
  }
  .tao-xem {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px dashed #D5D7DA;
    border-radius: 10px;
    background: #FAFAFA;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .tao-xem svg {
    color: #717680;
    flex: none;
  }
  .tao-xem>div {
    flex: 1;
    min-width: 180px;
  }
  .tao-xem b {
    display: block;
    font-size: 13.5px;
    color: #181D27;
  }
  .tao-xem span {
    display: block;
    font-size: 12.5px;
    color: #717680;
    margin-top: 2px;
  }
  .tao-chu {
    margin: 4px 0 12px;
    font-size: 13px;
    color: #414651;
  }
  .tao-chu b {
    color: #181D27;
    font-weight: 600;
  }
  .tao-han {
    margin: 2px 0 0;
    font-size: 13px;
    color: #414651;
  }
  .tao-han b {
    color: #181D27;
    font-weight: 600;
  }
  .fld .fi[readonly] {
    background: #FAFAFA;
    color: #414651;
  }
  .tt-ban {
    --a4: 1018px;
    font-size: 13.5px;
    line-height: 22px;
    color: #181D27;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 44px 48px;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 3px;
    box-shadow: 0 2px 10px -2px rgba(10,13,18,.10);
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--a4) - 1px), #D5D7DA calc(var(--a4) - 1px) var(--a4));
    min-height: var(--a4);
  }
  .md.tt-md {
    max-width: 880px;
  }
  @media (max-width:900px) {
    .tt-ban {
      max-width: 100%;
      padding: 26px 22px;
      background-image: none;
    }
  }
  .tt-ban .qh {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  .tt-ban .qh2 {
    text-align: center;
    font-weight: 600;
    margin-top: 2px;
  }
  .tt-ban .o0 {
    text-align: center;
    color: #717680;
    margin: 6px 0 14px;
  }
  .tt-ban h3 {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px;
    text-transform: uppercase;
  }
  .tt-ban .db {
    font-weight: 700;
    text-transform: uppercase;
    margin: 16px 0 6px;
  }
  .tt-ban .dk {
    font-weight: 700;
    margin: 18px 0 6px;
  }
  .tt-ban .it {
    font-style: italic;
    color: #414651;
  }
  .tt-ban dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0 0 6px;
  }
  .tt-ban dt {
    color: #414651;
  }
  .tt-ban dd {
    margin: 0;
    font-weight: 600;
  }
  .tt-ban .kys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 26px;
    text-align: center;
  }
  .tt-ban .kys b {
    display: block;
    text-transform: uppercase;
    font-size: 12.5px;
  }
  .tt-ban .kys span {
    display: block;
    color: #717680;
    font-size: 12px;
    margin-top: 2px;
  }
  .tt-ban .cho {
    color: #A4A7AE;
    font-style: italic;
    font-weight: 400;
  }
  @media (max-width:640px) {
    .tt-ban .kys {
      grid-template-columns: 1fr;
    }
  }
  .ks-luoi {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    gap: 2px 20px;
    align-items: start;
  }
  .ks-luoi > .ks-o {
    grid-column: span 4;
  }
  .ks-luoi > .ks-o.ks-rong {
    grid-column: 1/-1;
  }
  .ks-form {
    container-type: inline-size;
  }
  @container (max-width:860px) {
    .ks-luoi > .ks-o {
      grid-column: span 6;
    }
  }
  @container (max-width:560px) {
    .ks-luoi > .ks-o {
      grid-column: 1/-1;
    }
  }
  .ks-nhom {
    border: 0;
    margin: 0 0 6px;
    padding: 0;
    min-width: 0;
  }
  .ks-nhom + .ks-nhom {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #E9EAEB;
  }
  .ks-nhomt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #414651;
  }
  .ks-nhomt svg {
    flex: none;
    color: #717680;
  }
  .ks-nhomd {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #A4A7AE;
  }
  .ks-nguon {
    margin: -6px 0 12px;
    font-size: 12px;
    color: #717680;
    line-height: 17px;
  }
  .ks-nguon.canh {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 12px;
    padding: 8px 11px;
    border: 1px solid #FEDF89;
    border-radius: 9px;
    background: #FFFAEB;
    color: #B54708;
  }
  .ks-nguon.canh svg {
    flex: none;
    margin-top: 1px;
  }
  .ks-buoc {
    position: sticky;
    top: var(--hd-cao,74px);
    z-index: 5;
    margin: -4px -16px 4px;
    padding: 10px 16px 6px;
    background: #fff;
    border-bottom: 1px solid transparent;
  }
  .ks-buoc.dinh {
    border-bottom-color: #E9EAEB;
    box-shadow: 0 6px 12px -10px rgba(10,13,18,.28);
  }
  @media (max-width:920px) {
    .ks-buoc {
      position: static;
      margin-inline: 0;
    }
  }
  .ks-sao {
    color: #B42318;
    font-weight: 700;
  }
  .hd {
    display: grid;
    gap: 8px;
  }
  .hd-o {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 10px 13px;
    background: #fff;
    flex-wrap: wrap;
  }
  .hd-ic {
    flex: none;
    display: inline-flex;
    color: #717680;
  }
  .hd-t {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
    min-width: 0;
    flex: 1;
  }
  .hd-go {
    margin-left: auto;
  }
  .kpis.kpi-dac {
    grid-template-columns: repeat(auto-fit,minmax(168px,1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .kpi-dac .kpi {
    padding: 12px 13px;
    border-radius: 11px;
  }
  .kpi-dac .kpi .k {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .kpi-dac .kpi .v {
    font-size: 20px;
    letter-spacing: -.01em;
  }
  .kpi-dac .kpi .v.dai {
    font-size: 18px;
  }
  .kpi-dac .kpi .v.raidai {
    font-size: 16px;
  }
  .kpi-dac .kpi .why {
    font-size: 11.5px;
    line-height: 16px;
    margin-top: 5px;
  }
  .kpi-dac .kic {
    width: 26px;
    height: 26px;
  }
  .kpi-dac .kic svg {
    width: 15px;
    height: 15px;
  }
  .dvd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ct-tabbox2 {
    display: block;
  }
  .ct-tabs2 {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 14px;
    border-bottom: 1px solid #E9EAEB;
  }
  .ct-tab2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    padding: 8px 12px 10px;
    margin-bottom: -1px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #717680;
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .ct-tab2:hover {
    color: #181D27;
  }
  .ct-tab2.on {
    color: #D6000B;
    border-bottom-color: #DA1F26;
  }
  .tr {
    display: grid;
    gap: 8px;
  }
  .tr-o {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 10px 13px;
    background: #fff;
    flex-wrap: wrap;
  }
  .tr-p {
    flex: none;
  }
  .tr-tt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }
  .tr-v {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .tr-s {
    font-size: 11.5px;
    line-height: 16px;
    color: #717680;
  }
  .vg {
    display: grid;
    gap: 2px;
  }
  .vg-o {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #E9EAEB;
  }
  .vg-o:last-child {
    border-bottom: 0;
  }
  .vg-nam {
    flex: none;
    width: 52px;
    font-size: 13px;
    font-weight: 700;
    color: #717680;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
  }
  .vg-tt {
    min-width: 0;
    flex: 1;
  }
  .vg-d {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #181D27;
    margin-bottom: 3px;
    flex-wrap: wrap;
  }
  .vg-s {
    font-size: 12.5px;
    line-height: 18px;
    color: #717680;
  }
  .vg-s b {
    color: #181D27;
    font-weight: 600;
  }
  .vg-lt {
    font-size: 11px;
    font-weight: 600;
    color: #A4A7AE;
    background: #FAFAFA;
    border-radius: 99px;
    padding: 1px 7px;
    margin-left: 4px;
  }
  .bl2 {
    display: grid;
    grid-template-columns: 290px minmax(0,1fr) 300px;
    gap: 14px;
    align-items: start;
  }
  .bl-p {
    min-width: 0;
  }
  .bl-p > .ct-tabbox > .ct-tabs {
    margin-top: 0 !important;
  }
  .bl2 .ct-tabs,.bl2 .ct-tabs2 {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    max-width: 100%;
  }
  .bl2 .ct-tab,.bl2 .ct-tab2 {
    flex: none;
    white-space: nowrap;
  }
  .bl2 .ct-tabs::-webkit-scrollbar,.bl2 .ct-tabs2::-webkit-scrollbar {
    height: 5px;
  }
  .bl2 .ct-tabs::-webkit-scrollbar-thumb, .bl2 .ct-tabs2::-webkit-scrollbar-thumb {
    background: #D5D7DA;
    border-radius: 99px;
  }
  @media (max-width:1360px) {
    .bl2 {
      grid-template-columns: 290px minmax(0,1fr);
    }
    .br {
      grid-column: 1/-1;
    }
  }
  .bl {
    display: block;
    min-width: 0;
  }
  @media (max-width:1100px) {
    .bl2 {
      grid-template-columns: 1fr;
    }
  }
  /* ─── Chi tiết BĐS dựng từ lõi (assets/bat-dong-san/chi-tiet.js): 2 cột, bình luận thành tab
     Thảo luận. Modifier .ct2 để không đụng trang SA cũ còn dùng .bl2 3 cột. ─── */
  .bl2.ct2 {
    grid-template-columns: 300px minmax(0,1fr) 300px;
  }
  @media (max-width:1360px) {
    .bl2.ct2 {
      grid-template-columns: 300px minmax(0,1fr);
    }
  }
  .bl2.ct2 .bl-p > .ct-tabbox > .ct-tabs {
    position: sticky;
    top: calc(var(--hd-cao, 64px) + 8px);
    z-index: 20;
    display: flex;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 0 0 8px #FAFAFA;
  }
  .bl2.ct2 .ct-panel {
    scroll-margin-top: calc(var(--hd-cao, 64px) + 72px);
  }
  .bl2.ct2 .bl-p > .ct-tabbox > .ct-tabs {
    flex-wrap: wrap !important;
    overflow: visible;
    margin-bottom: 16px;
  }
  .bl2.ct2 thead th,
  .bl2.ct2 tbody td {
    padding: 10px 12px;
  }
  .bl2.ct2 tbody td {
    min-width: 72px;
  }
  .bl2.ct2 thead th {
    white-space: normal;
  }
  .ct-thaoluan {
    width: 100%;
  }
  .ct-den {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #DA1F26;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #FDA29B;
    text-underline-offset: 3px;
  }
  .ct-den:hover {
    color: #B80009;
    text-decoration-color: currentColor;
  }
  /* Card "Thông tin nhanh" chi tiết BĐS (chi-tiet-tong-quan.js): danh sách trạng thái, dòng không áp dụng. */
  .tq-dl {
    margin-top: 12px;
  }
  .tq-dl > div:last-child {
    border-bottom: 0;
  }
  .tq-mo dd {
    color: var(--color-tx3);
  }
  .kx-sao {
    margin-left: 2px;
    color: #DA1F26;
  }
  .kx-hang.thieu .kx-trong {
    color: var(--color-warn);
    font-weight: 600;
  }
  @media (max-width:1100px) {
    .bl2.ct2 {
      grid-template-columns: 1fr;
    }
  }
  .bl2.ct2 .kx-dau .pill {
    margin-left: 4px;
  }
  /* Mở rộng tất cả / Thu hẹp tất cả: text link thuần — không nền, viền, bóng, outline. */
  .kx-link {
    background: none;
    border: 0;
    box-shadow: none;
    outline: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #DA1F26;
    cursor: pointer;
  }
  .kx-link:hover,
  .kx-link:focus-visible {
    text-decoration: underline;
  }
  .kx-phai {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Tab Tin đăng: KPI trên, biểu đồ rộng-thấp + nhãn ngày trục X. */
  .bl2.ct2 .hq-ds {
    margin: 0 0 14px;
    padding: 0 0 4px;
    border-top: 0;
    border-bottom: 1px solid #E9EAEB;
  }
  .bl2.ct2 .hq-bd svg {
    aspect-ratio: 640/110;
  }
  .hq-tong {
    margin-bottom: 6px;
    font-size: 12px;
    color: #717680;
  }
  .hq-tong b {
    color: #181D27;
    font-weight: 700;
  }
  /* Tab Dẫn khách: card rỗng chỉ một dòng mô tả. */
  .bl2.ct2 .tw a.m {
    color: #DA1F26;
    text-decoration: underline;
    text-decoration-color: #FDA29B;
    text-underline-offset: 3px;
  }
  .bl2.ct2 .tw a.m:hover {
    color: #B80009;
    text-decoration-color: currentColor;
  }
  .dk-rong {
    margin: 0;
    font-size: 13px;
    color: #717680;
  }
  .bl2.ct2 [id^="dk-"] {
    scroll-margin-top: calc(var(--hd-cao, 64px) + 72px);
  }
  /* Ảnh đang tải: nền shimmer (ảnh tải xong tự che nền). Tắt chuyển động khi người dùng yêu cầu. */
  .bl2.ct2 .bl-anh:not(.bl-trong),
  .bl2.ct2 .td-bia,
  .bl2.ct2 .td-luoianh img,
  .bl2.ct2 .tl-anh img {
    background: linear-gradient(90deg,#F5F5F5 25%,#EBEBEB 37%,#F5F5F5 63%);
    background-size: 400% 100%;
    animation: ct-sang 1.4s ease infinite;
  }
  @keyframes ct-sang {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bl2.ct2 .bl-anh:not(.bl-trong),
    .bl2.ct2 .td-bia,
    .bl2.ct2 .td-luoianh img,
    .bl2.ct2 .tl-anh img {
      animation: none;
    }
  }
  [data-xemanh] img[data-mo="ct-lb"] {
    cursor: zoom-in;
  }
  .bl2.ct2 .bl-anh .bl-i:not(.on) {
    pointer-events: none;
  }
  .ct-tdong {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }
  .ct-tdong .t1 {
    margin: 0 !important;
  }
  [data-xemanh] img[role="button"]:focus-visible {
    outline: 2px solid #DA1F26;
    outline-offset: 2px;
  }
  /* Lightbox: dùng lớp nền .mdbg của trang, hộp tối toàn khung. */
  .mdbg.lb .lb-md {
    position: relative;
    width: min(1100px, 94vw);
    max-width: none;
    padding: 0;
    background: #0C111D;
    border-radius: 14px;
    overflow: hidden;
  }
  .lb-i {
    display: block;
    width: 100%;
    height: min(78vh, 720px);
    object-fit: contain;
  }
  .lb-x,
  .lb-n {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(12,17,29,.62);
    color: #fff;
    cursor: pointer;
  }
  .lb-x:hover,
  .lb-n:hover {
    background: rgba(12,17,29,.85);
  }
  .lb-x {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .lb-n {
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }
  .lb-t {
    left: 12px;
    transform: scaleX(-1);
  }
  .lb-s {
    right: 12px;
  }
  .lb-n[hidden] {
    display: none;
  }
  .lb-dem {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .bl-td {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 5px;
  }
  .bl-ma {
    margin-bottom: 6px;
  }
  .bl-s {
    font-size: 12px;
    line-height: 17px;
    color: #717680;
  }
  .nl-o + .nl-o {
    border-top: 1px solid #E9EAEB;
    margin-top: 14px;
    padding-top: 14px;
  }
  .tda {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(104px,1fr));
    gap: 9px;
  }
  .tda-o {
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid #E9EAEB;
  }
  .tda-o.bia {
    border-color: #FDA29B;
    box-shadow: 0 0 0 2px #FEF3F2;
  }
  .tda-o img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
  }
  .tda-x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    border: 0;
    background: rgba(16,20,28,.62);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .tda-x:hover {
    background: #B42318;
  }
  .tda-b {
    position: absolute;
    left: 5px;
    bottom: 5px;
    border: 0;
    border-radius: 7px;
    padding: 3px 8px;
    background: rgba(255,255,255,.93);
    color: #181D27;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }
  .tda-b:hover {
    background: #fff;
    color: #D6000B;
  }
  .tda-bia {
    position: absolute;
    left: 5px;
    bottom: 5px;
    border-radius: 7px;
    padding: 3px 8px;
    background: #DA1F26;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }
  .tda-chan {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 4px;
  }
  .tda-chan .ct-hint {
    margin: 0;
    flex: 1;
  }
  @keyframes ai-chay {
    to {
      background-position: 200% 50%;
    }
  }
  .btn.ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .btn.ghost:hover:not(:disabled) {
    background: var(--bg, #FAFAFA);
    color: var(--tx, #181D27);
  }

  .btn.gh[data-tinai] {
    position: relative;
    border-color: transparent !important;
    background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#DA1F26,#7C5CFF,#12B76A,#DA1F26) border-box !important;
    background-size: auto,200% 100% !important;
    animation: ai-chay 3.2s linear infinite;
  }
  .btn.gh[data-tinai]:hover {
    background: linear-gradient(#FAFAFA,#FAFAFA) padding-box, linear-gradient(90deg,#DA1F26,#7C5CFF,#12B76A,#DA1F26) border-box !important;
    background-size: auto,200% 100% !important;
  }
  .btn.gh[data-tinai] svg {
    color: #DA1F26 !important;
  }
  @media (prefers-reduced-motion:reduce) {
    .btn.gh[data-tinai] {
      animation: none;
    }
  }
  .ct-cham {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: #DA1F26;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    flex: none;
  }
  .ts {
    border: 1px solid #FEDF89;
    background: #FFFAEB;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .ts-d {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #B54708;
    margin-bottom: 10px;
  }
  .ts-d svg {
    flex: none;
  }
  .ts-g {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #A4A7AE;
  }
  .ts-o {
    padding: 8px 0;
    border-top: 1px solid #FEDF89;
  }
  .ts-n {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #717680;
    margin-bottom: 3px;
  }
  .ts-cu {
    display: block;
    font-size: 12.5px;
    line-height: 18px;
    color: #A4A7AE;
    text-decoration: line-through;
  }
  .ts-moi {
    display: block;
    font-size: 13px;
    line-height: 19px;
    color: #181D27;
    font-weight: 600;
    margin-top: 2px;
  }
  .ts-moi::before {
    content: "→ ";
    color: #B54708;
    font-weight: 700;
  }
  .hq2 {
    display: block;
  }
  .hq-bd {
    min-width: 0;
  }
  .hq-bd svg {
    width: 100%;
    height: auto;
    aspect-ratio: 320/110;
    display: block;
    overflow: visible;
  }
  .hq-tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: #A4A7AE;
    margin-top: 7px;
  }
  .hq-tr b {
    font-size: 12px;
    color: #414651;
    font-weight: 700;
  }
  .hq-seg {
    flex: none;
    padding: 3px;
  }
  .hq-seg button {
    padding: 5px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .hq-ds {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(148px,1fr));
    gap: 0 20px;
    margin-top: 16px;
    border-top: 1px solid #E9EAEB;
    padding-top: 4px;
  }
  .hq-i {
    padding: 10px 0;
  }
  .hq-in {
    display: block;
    font-size: 11.5px;
    color: #717680;
  }
  .hq-iv {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #181D27;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }
  .hq-ip {
    display: block;
    font-size: 11px;
    color: #A4A7AE;
    margin-top: 1px;
  }
  .nl-ds {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
  }
  .nl-ds .ct-av {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
    border: 2px solid #fff;
  }
  .nl-ds .ct-av + .ct-av {
    margin-left: -13px;
  }
  .nl-dst {
    font-size: 12.5px;
    line-height: 17px;
    color: #414651;
    flex: 1;
    min-width: 0;
  }
  .nl-ds .btn {
    flex: none;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
  }
  .nl-o .ct-kh {
    margin-bottom: 6px;
  }
  .br {
    min-width: 0;
  }
  .bn {
    display: grid;
    gap: 13px;
    margin-bottom: 14px;
  }
  .bn-o {
    display: flex;
    gap: 9px;
    align-items: flex-start;
  }
  .bn-av {
    flex: none;
    width: 27px;
    height: 27px;
    border-radius: 99px;
    background: #FEF3F2;
    color: #DA1F26;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bn-tt {
    min-width: 0;
    flex: 1;
  }
  .bn-d {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #181D27;
  }
  .bn-v {
    font-size: 11px;
    font-weight: 700;
    color: #A4A7AE;
    text-transform: uppercase;
  }
  .bn-g {
    font-size: 11px;
    color: #A4A7AE;
    margin-left: auto;
  }
  .bn-n {
    font-size: 13px;
    line-height: 19px;
    color: #414651;
    margin-top: 2px;
  }
  .bn-nhap {
    border-top: 1px solid #E9EAEB;
    padding-top: 12px;
  }
  .bn-nhap textarea {
    width: 100% !important;
    display: block;
    resize: vertical;
    box-sizing: border-box;
  }
  /* Ô nhập Thảo luận BĐS: outline input + nút gửi icon cùng hàng (chi-tiet.js). */
  .bn-nhap.hang {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }
  .bn-nhap.hang textarea {
    flex: 1;
    min-width: 0;
    width: auto !important;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    color: #181D27;
    outline: none;
    resize: vertical;
  }
  .bn-nhap.hang textarea:focus {
    border-color: #DA1F26;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .bn-gui {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DA1F26;
    border-radius: 8px;
    background: #DA1F26;
    color: #fff;
    cursor: pointer;
  }
  .bn-gui:hover:not(:disabled) {
    background: #B80009;
    border-color: #B80009;
  }
  .bn-gui:disabled {
    background: #F5F5F5;
    border-color: #E9EAEB;
    color: #A4A7AE;
    cursor: not-allowed;
  }
  .bn-chan {
    display: flex;
    justify-content: flex-end;
    margin-top: 9px;
  }
  .bn-chan .btn {
    flex: none;
  }
  .bl-anh {
    position: relative;
    border-radius: 11px;
    overflow: hidden;
    background: #FAFAFA;
    height: clamp(168px,22vh,220px);
    margin-bottom: 13px;
  }
  .bl-i {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .18s ease;
  }
  .bl-i.on {
    opacity: 1;
  }
  .bl-mt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    border: 1px solid #E9EAEB;
    background: rgba(255,255,255,.93);
    color: #181D27;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(10,13,18,.16);
    padding: 0;
  }
  .bl-mt:hover {
    background: #fff;
  }
  .bl-ml {
    left: 9px;
  }
  .bl-ml svg {
    transform: rotate(180deg);
  }
  .bl-mr {
    right: 9px;
  }
  .bl-dem {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(16,20,28,.62);
    border-radius: 99px;
    padding: 2px 9px;
  }
  .bl-trong {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #A4A7AE;
    font-size: 12px;
    font-weight: 600;
    background: #FAFAFA;
  }
  .hs {
    display: grid;
    gap: 14px;
  }
  .hs-o {
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  .hs-d {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: #FAFAFA;
    border-bottom: 1px solid #E9EAEB;
  }
  .hs-d svg {
    flex: none;
    color: #717680;
  }
  .hs-t {
    font-size: 13px;
    font-weight: 700;
    color: #181D27;
    line-height: 1.35;
  }
  .hs-s {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: #717680;
    margin-top: 1px;
  }
  .hs-v {
    margin-left: auto;
  }
  .hs-nut {
    flex: none;
  }
  .hs-b {
    padding: 13px;
  }
  .tl {
    display: grid;
    gap: 12px;
  }
  .tl-o {
    border: 1px solid #E9EAEB;
    border-radius: 11px;
    padding: 11px 13px;
    background: #fff;
  }
  .tl-d {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #181D27;
  }
  .tl-d svg {
    flex: none;
    color: #717680;
  }
  .tl-n {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #067647;
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
    border-radius: 99px;
    padding: 1px 8px;
    white-space: nowrap;
  }
  .tl-n.trong {
    color: #A4A7AE;
    background: #FAFAFA;
    border-color: #D5D7DA;
  }
  .tl-anh {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(84px,1fr));
    gap: 7px;
    margin-top: 9px;
  }
  .tl-anh img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #E9EAEB;
    display: block;
  }
  .td-luoianh {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(104px,1fr));
    gap: 8px;
    margin: -4px 0 14px;
  }
  .td-luoianh img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid #E9EAEB;
    display: block;
  }
  .td-bia {
    position: relative;
    margin: 0 0 12px;
    border-radius: 12px;
    overflow: hidden;
    height: clamp(170px,24vh,240px);
    background: #FAFAFA;
  }
  .td-bia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Tab Tin đăng (chi tiết BĐS): bìa trái, 6 ảnh con lưới 3×2 bên phải, hai cột cao bằng nhau. */
  .td-anh {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 14px;
  }
  .td-anh .td-bia {
    margin: 0;
    height: auto;
    aspect-ratio: 3/2;
  }
  .td-anh .td-luoianh {
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,minmax(0,1fr));
    margin: 0;
    contain: size;
  }
  .td-anh .td-luoianh img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
  }
  @media (max-width: 640px) {
    .td-anh { grid-template-columns: 1fr; }
    .td-anh .td-luoianh { contain: none; grid-template-rows: none; }
    .td-anh .td-luoianh img { aspect-ratio: 1; }
  }
  .gt {
    display: grid;
    gap: 8px;
    margin: 14px 0;
  }
  .gt-o {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #D5D7DA;
    border-radius: 11px;
    padding: 11px 14px;
    cursor: pointer;
    background: #fff;
  }
  .gt-o:hover {
    border-color: #FDA29B;
    background: #FEF3F2;
  }
  .gt-o:has(input:checked) {
    border-color: #DA1F26;
    background: #FEF3F2;
  }
  .gt-o input {
    accent-color: #DA1F26;
    flex: none;
    margin: 0;
  }
  .gt-tt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }
  .gt-h {
    font-size: 13.5px;
    font-weight: 700;
    color: #181D27;
  }
  .gt-mo {
    font-size: 12px;
    color: #717680;
    line-height: 16px;
  }
  .gt-ng {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
    background: #FAFAFA;
    border-radius: 99px;
    padding: 2px 10px;
  }
  .gt-gia {
    flex: none;
    font-size: 13.5px;
    font-weight: 700;
    color: #181D27;
    font-variant-numeric: tabular-nums;
    min-width: 96px;
    text-align: right;
  }
  .kb {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E9EAEB;
  }
  .kb-o {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    border: 1px solid #D5D7DA;
    background: #fff;
    border-radius: 11px;
    padding: 10px 14px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #414651;
    cursor: pointer;
    text-align: left;
  }
  .kb-o:hover {
    border-color: #FDA29B;
    color: #181D27;
  }
  .kb-o.on {
    border-color: #DA1F26;
    background: #FEF3F2;
    color: #D6000B;
  }
  .kb-so {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #F5F5F5;
    color: #717680;
  }
  .kb-o.on .kb-so {
    background: #DA1F26;
    color: #fff;
  }
  .kb-n {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 1px 8px;
    white-space: nowrap;
    background: #FAFAFA;
    color: #A4A7AE;
  }
  .kb-n.con {
    background: #FFFAEB;
    color: #B54708;
  }
  .kb-n.xong {
    background: #ECFDF3;
    color: #067647;
  }
  .kb-n:empty {
    display: none;
  }
  .kb-tieu {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }
  .kt {
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }
  .kt-nhom {
    border: 1px solid #FEDF89;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFAEB;
  }
  .kt-dau {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #B54708;
    border-bottom: 1px solid #FEDF89;
  }
  .kt-n {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #B54708;
    background: #fff;
    border: 1px solid #FEDF89;
    border-radius: 99px;
    padding: 0 7px;
  }
  .kt-muc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 12px;
    background: #fff;
  }
  .kt-o {
    border: 1px solid #D5D7DA;
    background: #fff;
    border-radius: 99px;
    padding: 4px 11px;
    font: inherit;
    font-size: 12px;
    color: #414651;
    cursor: pointer;
    text-align: left;
  }
  .kt-o:hover {
    border-color: #FDA29B;
    color: #D6000B;
    background: #FEF3F2;
  }
  .kx {
    display: block;
  }
  .kx-nhom {
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .kx-dau {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    cursor: pointer;
    background: #FAFAFA;
    font-size: 12.5px;
    font-weight: 700;
    color: #181D27;
    list-style: none;
  }
  .kx-dau::-webkit-details-marker {
    display: none;
  }
  .kx-dau svg {
    flex: none;
    color: #717680;
  }
  .kx-dau svg:last-child {
    margin-left: auto;
    transition: transform .15s;
  }
  .kx-nhom[open] .kx-dau svg:last-child {
    transform: rotate(180deg);
  }
  .kx-dem {
    font-size: 11px;
    font-weight: 600;
    color: #A4A7AE;
  }
  .kx-than {
    padding: 14px;
    display: grid;
    gap: 15px 24px;
    max-width: 1000px;
    grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
  }
  .kx-hang {
    display: block;
    min-width: 0;
  }
  .kx-nhan {
    display: block;
    font-size: 11.5px;
    line-height: 16px;
    color: #717680;
    margin-bottom: 2px;
  }
  .kx-gt {
    display: block;
    font-size: 13.5px;
    line-height: 19px;
    color: #181D27;
    font-weight: 600;
    word-break: break-word;
  }
  .kx-trong {
    color: #A4A7AE;
    font-weight: 500;
  }
  .kx-hang.cao {
    grid-column: 1/-1;
    padding: 12px 0;
    border-top: 1px solid #E9EAEB;
    border-bottom: 1px solid #E9EAEB;
  }
  .kx-hang.cao + .kx-hang.cao {
    border-top: 0;
  }
  .kx-than > .kx-hang.cao:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
  }
  .kx-than > .kx-hang.cao:first-child {
    border-top: 0;
    padding-top: 2px;
  }
  .kx-hang.cao .kx-nhan {
    margin-bottom: 7px;
  }
  .dln {
    min-width: 0;
  }
  .dln .dl {
    display: block !important;
  }
  .dln .dl > div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 18px !important;
    padding: 9px 0 !important;
  }
  .dln .dl > div:last-child {
    border-bottom: 0 !important;
  }
  .dln .dl dt {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    flex: none;
  }
  .dln .dl dd {
    margin-left: auto !important;
    text-align: right;
    min-width: 0 !important;
  }
  .dln .dl dd .s {
    display: block !important;
    text-align: right;
  }
  /* Tab Tin đăng ở chi tiết BĐS (.dln ép dl thành hàng ngang) → trả về label trên – value dưới như chi tiết tin. */
  .dln .tin-ban .dl { display: grid !important; }
  .dln .tin-ban .dl > div { display: block !important; padding: 8px 0 !important; }
  .dln .tin-ban .dl > div:last-child { border-bottom: 1px solid #E9EAEB !important; }
  .dln .tin-ban .dl dt { margin: 0 0 3px !important; }
  .dln .tin-ban .dl dd { margin-left: 0 !important; text-align: left; }
  .kx-ngang .kx-dau {
    background: none;
    font-weight: 500;
  }
  .kx-ngang .kx-dau svg {
    color: #414651;
  }
  .kx-ngang .kx-nhom[open] .kx-dau {
    background: #FEF3F2;
    font-weight: 700;
  }
  .kx-ngang .kx-nhom[open] .kx-dau svg {
    color: #D6000B;
  }
  .kx-ngang .kx-than {
    display: block;
    padding: 0 14px;
  }
  .kx-ngang .kx-hang {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    padding: 9px 0;
    border-bottom: 1px solid #E9EAEB;
  }
  .kx-ngang .kx-hang:last-child {
    border-bottom: 0;
  }
  .kx-ngang .kx-nhan {
    display: inline;
    margin: 0;
    font-size: 12.5px;
    line-height: 18px;
    flex: none;
  }
  .kx-ngang .kx-gt {
    display: inline-block;
    margin-left: auto;
    text-align: right;
    min-width: 0;
    font-size: 13px;
  }
  .kx-anh {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(96px,1fr));
    gap: 8px;
  }
  .kx-anh img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #E9EAEB;
    display: block;
  }
  .ks-nhom.fill {
    border: 1px solid #E9EAEB;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .ks-nhom.fill + .ks-nhom.fill {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid #E9EAEB;
  }
  .ks-nhom.fill > .ks-nhomt {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 11px 16px;
    background: #FAFAFA;
    border-bottom: 1px solid #E9EAEB;
  }
  .ks-nhom.fill > .ks-nguon {
    clear: both;
    margin: 0;
    padding: 11px 16px 0;
  }
  .ks-nhom.fill > .ks-nguon.canh {
    margin: 0 16px 2px;
    padding: 8px 11px;
  }
  .ks-nhom.fill .upa.co {
    border-color: #E9EAEB;
    background: #FAFAFA;
  }
  .ks-nhom.fill .upa .upa-n,.ks-nhom.fill .upa .upa-c {
    display: none;
  }
  .ks-nhom.fill > .ks-luoi {
    clear: both;
    background: none;
    border: 0;
    padding: 12px 16px 4px;
  }
  .ks-fill .fl {
    color: #717680 !important;
    font-weight: 600 !important;
    margin-bottom: 2px;
  }
  .ks-sv {
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 600;
    color: #181D27;
    min-height: 20px;
    word-break: break-word;
  }
  .ks-suan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    border: 1px solid #D5D7DA;
    background: #fff;
    color: #414651;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
  }
  .ks-suan:hover {
    border-color: #FDA29B;
    color: #D6000B;
    background: #FEF3F2;
  }
  .ks-suan svg {
    flex: none;
  }
  .ks-suan.xong {
    border-color: #FDA29B;
    color: #D6000B;
    background: #FEF3F2;
  }
  .ks-suan.xong:disabled {
    border-color: #D5D7DA;
    color: #A4A7AE;
    background: #FAFAFA;
    cursor: default;
  }
  .ks-suan[hidden] {
    display: none;
  }
  .td-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(116px,1fr));
    gap: 10px;
  }
  .td-o {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #D5D7DA;
    background: #FAFAFA;
  }
  .td-o[hidden] {
    display: none;
  }
  .td-o img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .td-doi,.td-xoa {
    position: absolute;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(10,13,18,.62);
    opacity: 0;
    transition: opacity .12s;
  }
  .td-o:hover .td-doi,.td-o:hover .td-xoa, .td-o:focus-within .td-doi,.td-o:focus-within .td-xoa {
    opacity: 1;
  }
  @media (pointer:coarse) {
    .td-doi,.td-xoa {
      opacity: 1;
    }
  }
  .td-doi {
    left: 6px;
    top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 99px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
  }
  .td-doi:hover {
    background: #DA1F26;
  }
  .td-xoa {
    right: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .td-xoa:hover {
    background: #B42318;
  }
  .td-bianut {
    position: absolute;
    right: 6px;
    bottom: 6px;
    border: 0;
    border-radius: 99px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(10,13,18,.62);
    color: #fff;
  }
  .td-bianut:hover {
    background: #DA1F26;
  }
  .td-o.bia .td-bianut {
    display: none;
  }
  .td-o.bia {
    border-color: #DA1F26;
  }
  .td-o.bia::after {
    content: "Ảnh bìa";
    position: absolute;
    left: 6px;
    bottom: 6px;
    background: #DA1F26;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
  }
  .td-them {
    aspect-ratio: 4/3;
    border: 1px dashed #D5D7DA;
    border-radius: 10px;
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: #414651;
    font: inherit;
  }
  .td-them:hover {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #D6000B;
  }
  .td-them[hidden] {
    display: none;
  }
  .td-themc {
    font-size: 19px;
    line-height: 1;
  }
  .td-themn {
    font-size: 11px;
    font-weight: 600;
  }
  .td-bianhan {
    position: absolute;
    left: 6px;
    bottom: 6px;
    background: rgba(10,13,18,.62);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
  }
  .td-luoi.td-xem {
    margin-bottom: 16px;
    grid-template-columns: repeat(auto-fill,minmax(92px,1fr));
  }
  .td-luoi.td-xem .td-o {
    border-color: #E9EAEB;
    border-width: 1px;
    cursor: default;
  }
  .td-luoi.td-xem .td-o.bia {
    grid-column: span 2;
    grid-row: span 2;
    border-color: #FDA29B;
  }
  .td-ai {
    padding: 5px 12px !important;
    font-size: 12.5px !important;
  }
  .td-ai svg {
    color: #D6000B;
  }
  .ks-dem {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #717680;
    background: #FAFAFA;
    border-radius: 99px;
    padding: 1px 7px;
  }
  .ct-tab.on .ks-dem {
    background: #F5F5F5;
  }
  .ct-cham {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DA1F26;
  }
  .ks-dem.du {
    color: #067647;
    background: #ECFDF3;
  }
  .ks-dem.du:has(svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    vertical-align: -4px;
  }
  .ks-cks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ks-ck {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 99px;
    font-size: 13px;
    color: #414651;
    cursor: pointer;
    background: #fff;
    min-height: 36px;
  }
  .ks-ck:hover {
    background: #FAFAFA;
  }
  .ks-ck:has(input:checked) {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #D6000B;
    font-weight: 600;
  }
  .ks-o[data-ksanh] {
    grid-column: 1/-1;
  }
  .ks-o[data-ksanh] .upas {
    grid-template-columns: repeat(auto-fill,minmax(96px,1fr));
  }
  .ks-the {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 10px;
  }
  .ks-thei {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 26px;
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 13.5px;
    color: #181D27;
    text-align: center;
    overflow: hidden;
  }
  .ks-thei:hover {
    background: #FAFAFA;
  }
  .ks-thei input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .ks-thei:has(input:checked) {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #D6000B;
    font-weight: 600;
  }
  .ks-thei:has(input:disabled) {
    cursor: default;
    opacity: .75;
  }
  .ks-thei:focus-within {
    outline: 2px solid #FDA29B;
    outline-offset: 2px;
  }
  .ks-thek {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 2px 0 0;
    color: #fff;
    background: linear-gradient(45deg,transparent 50%,#D6000B 50%);
  }
  .ks-thei:has(input:checked) .ks-thek {
    display: flex;
  }
  .ks-con {
    grid-column: var(--ks-cot,1/-1);
    margin-top: -2px;
    padding: 12px;
    border: 1px dashed #D5D7DA;
    border-radius: 10px;
  }
  .ks-con .ks-o {
    margin-bottom: 0;
  }
  .ks-con .ks-o + .ks-o {
    margin-top: 14px;
  }
  .ks-con[hidden] {
    display: none;
  }
  .ks-ng {
    padding: 12px 0;
    border-top: 1px solid #E9EAEB;
  }
  .ct-scard .ks-ng:first-of-type {
    border-top: 0;
    padding-top: 0;
  }
  .ks-ng:first-child {
    border-top: 0;
    padding-top: 2px;
  }
  .ks-ngd {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
  }
  .ks-ngd svg {
    flex: none;
    color: #717680;
  }
  .ks-ngt {
    font-size: 13.5px;
    font-weight: 600;
    color: #181D27;
  }
  .ks-ngv {
    font-size: 11px;
    font-weight: 600;
    color: #717680;
    background: #F5F5F5;
    border-radius: 99px;
    padding: 1px 8px;
  }
  .ks-ngs {
    font-size: 12px;
    color: #717680;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .ks-ngp {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .ks-them {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #D5D7DA;
  }
  .ks-bo {
    margin-left: auto;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #717680;
    border-radius: 7px;
  }
  .ks-bo:hover {
    background: #FEF3F2;
    color: #B42318;
  }
  .ks-bo[hidden] {
    display: none;
  }
  .ks-chitiet {
    margin-top: 12px;
  }
  .ks-chitiet summary {
    cursor: pointer;
    font-size: 13px;
    color: #717680;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
  }
  .ks-chitiet summary::-webkit-details-marker {
    display: none;
  }
  .ks-chitiet summary::before {
    content: "▸";
    font-size: 11px;
    color: #A4A7AE;
  }
  .ks-chitiet[open] summary::before {
    content: "▾";
  }
  .ks-chitiet summary:hover {
    color: #181D27;
  }
  .ks-o .fh {
    max-width: 62ch;
  }
  .ks-thieumuc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #A4A7AE;
  }
  .ks-thieumuc svg {
    flex: none;
  }
  .ks-canh {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 4px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #FFFAEB;
    color: #B54708;
    font-size: 13px;
    line-height: 19px;
  }
  .ks-canh svg {
    flex: none;
    margin-top: 2px;
  }
  .ks-o.trong .fi {
    border-color: #FEDF89 !important;
  }
  .ks-o.trong .fh {
    color: #B54708 !important;
  }
  .ks-o.trong > .ks-cks {
    border: 1px solid #FEDF89;
    border-radius: 10px;
    padding: 8px;
    margin: -1px;
  }
  .tipw {
    position: relative;
    display: inline-flex;
  }
  .tipb {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 70;
    width: max-content;
    max-width: 280px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #181D27;
    color: #fff;
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease,visibility .12s ease;
    pointer-events: none;
    box-shadow: 0 10px 20px -5px rgba(10,13,18,.28);
  }
  .tipb.on {
    opacity: 1;
    visibility: visible;
  }
  .tipb:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: var(--mui,50%);
    margin-left: -5px;
    border: 5px solid transparent;
    border-bottom-color: #181D27;
  }
  .tipb.tren:before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: #181D27;
  }
  .tipb b {
    display: block;
    font-weight: 600;
  }
  .tipb .tipai {
    display: block;
    color: #CECFD2;
    margin-top: 2px;
  }
  .tipb .tipmo {
    display: block;
    color: #CECFD2;
    margin-top: 5px;
  }
  @media (hover:none) {
    .tipb {
      display: none;
    }
  }
  .ht-md {
    max-width: 760px;
  }
  .ht-sec {
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    margin-top: 14px;
    overflow: hidden;
  }
  .ht-tk {
    margin: 2px 0 8px;
    padding: 12px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    background: #FAFAFA;
  }
  .ht-tk[hidden] {
    display: none;
  }
  .ht-tk .tao-hs {
    background: #fff;
    margin: 0;
  }
  .ht-tkh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
  }
  .ht-tkh>span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  .ht-tkh svg {
    flex: none;
  }
  .ht-tkdoi {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #E9EAEB;
    border-radius: 7px;
    background: #fff;
    color: #717680;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ht-tkdoi:hover {
    background: #F5F5F5;
    color: #414651;
  }
  .ht-nutsua {
    margin: 2px 0 12px;
  }
  .ht-chon {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .ht-chon>.fld {
    flex: 1;
    min-width: 240px;
    margin-bottom: 0 !important;
  }
  .ht-chon>.btn {
    flex: none;
    margin-bottom: 2px;
  }
  @media (max-width:640px) {
    .ht-chon>.btn {
      width: 100%;
    }
  }
  .ht-sub {
    margin: 16px 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
  }
  .ht-hd {
    padding: 10px 16px;
    border-bottom: 1px solid #E9EAEB;
    background: #FAFAFA;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .ht-bd {
    padding: 16px 16px 6px;
  }
  .ht-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .ht-grid[hidden] {
    display: none;
  }
  .ht-grid>.ht-rong {
    grid-column: 1 / -1;
  }
  .ht-bd>.ht-rong {
    margin-bottom: 12px;
  }
  @media (max-width:640px) {
    .ht-grid {
      grid-template-columns: 1fr;
    }
  }
  .ht-nut {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 2px;
  }
  .ht-tim {
    display: none;
    margin: -4px 0 12px;
    font-size: 12.5px;
    color: #B54708;
  }
  .ht-tim.show {
    display: block;
  }
  .huy-dem {
    font-variant-numeric: tabular-nums;
  }
  .huy-dem.gan {
    color: #B54708;
  }
  .huy-dem.het {
    color: #B42318;
    font-weight: 600;
  }
  .huy-bao {
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    margin-top: 14px;
    overflow: hidden;
  }
  .huy-baohd {
    padding: 9px 14px;
    border-bottom: 1px solid #E9EAEB;
    background: #FAFAFA;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
  }
  .huy-baods {
    margin: 0;
    padding: 10px 14px 10px 30px;
    font-size: 13px;
    color: #414651;
  }
  .huy-baods li {
    margin: 2px 0;
  }
  .huy-baoft {
    padding: 0 14px 12px;
    font-size: 12.5px;
    color: #717680;
  }
  .ky-thanh {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 11px;
    background: #fff;
  }
  .ky-nhan {
    font-size: 12px;
    font-weight: 600;
    color: #717680;
    flex: none;
  }
  .ky-ds {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ky-nut {
    padding: 7px 13px;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #414651;
    cursor: pointer;
  }
  .ky-nut:hover {
    background: #FAFAFA;
  }
  .ky-nut.on {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #D6000B;
    font-weight: 600;
  }
  .bc-trong[hidden] {
    display: none;
  }
  .bd {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 6px 2px 0;
  }
  .bd-cot {
    flex: 0 0 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .bd-doi {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    width: 100%;
    justify-content: center;
  }
  .bd-c {
    width: 26px;
    border-radius: 5px 5px 0 0;
    display: block;
  }
  .bd-c.vao {
    background: #ABEFC6;
    border: 1px solid #067647;
  }
  .bd-c.ra {
    background: #FEDF89;
    border: 1px solid #B54708;
  }
  .bd-nhan {
    font-size: 12px;
    font-weight: 600;
    color: #414651;
    font-variant-numeric: tabular-nums;
  }
  .bd-so {
    font-size: 11px;
    color: #067647;
    font-variant-numeric: tabular-nums;
  }
  .bd-so.ra {
    color: #B54708;
  }
  .dt-ke {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed #D5D7DA;
  }
  .dt-kel {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #717680;
    margin-bottom: 9px;
  }
  .dt-keo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 0;
  }
  .dt-keo+.dt-keo {
    border-top: 1px solid #E9EAEB;
  }
  .dt-keo b {
    font-size: 13px;
    font-weight: 600;
    color: #414651;
  }
  .dt-keo span {
    font-size: 12px;
    line-height: 18px;
    color: #717680;
  }
  .ds-loi {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed #D5D7DA;
  }
  .ds-loil {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #717680;
    margin-bottom: 8px;
  }
  .ds-loi .err2 {
    margin: 0 0 6px;
  }
  .ds-loi .err2:last-child {
    margin-bottom: 0;
  }
  .hh-bc {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .hh-bc li {
    font-size: 13.5px;
    line-height: 20px;
    color: #414651;
  }
  .ky-form {
    max-width: 820px;
  }
  .ky-o {
    border: 1px solid #D5D7DA;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    background: #fff;
  }
  .ky-o:last-child {
    margin-bottom: 0;
  }
  .ky-o.xong {
    background: #FAFAFA;
    border-color: #E9EAEB;
  }
  .ky-oh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .ky-oh b {
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
  }
  .ky-ovai {
    display: block;
    font-size: 12px;
    color: #717680;
    margin-top: 2px;
  }
  .ky-oxong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #067647;
  }
  .ky-onut {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
  .ky-loi {
    margin: 14px 0;
  }
  .ky-gui {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .ky-phien {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    background: #FAFAFA;
  }
  .ky-dh {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #414651;
    flex: none;
  }
  .ky-dh svg {
    color: #717680;
  }
  .ky-dh b {
    font-size: 15px;
    font-weight: 600;
    color: #181D27;
    font-variant-numeric: tabular-nums;
  }
  .ky-dhp {
    flex: 1;
    min-width: 220px;
    font-size: 12.5px;
    color: #717680;
    line-height: 17px;
  }
  .ky-phien.het {
    border-color: #FEDF89;
    background: #FFFAEB;
  }
  .ky-phien.het .ky-dh b {
    color: #B54708;
  }
  .ky-phien.het .ky-dhp {
    color: #B54708;
  }
  .ky-o.khoa {
    opacity: .5;
  }
  .ky-o.khoa .sig,.ky-o.khoa .ky-onut {
    pointer-events: none;
  }
  .sua-form {
    max-width: 900px;
  }
  .sua-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .sua-grid>.sua-rong {
    grid-column: 1 / -1;
  }
  @media (max-width:720px) {
    .sua-grid {
      grid-template-columns: 1fr;
    }
  }
  .sua-nut {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .sua-gui {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .fi[readonly] {
    background: #FAFAFA;
    color: #414651;
  }
  .yc-xong {
    text-align: center;
    padding: 40px 20px;
  }
  .yc-xong .ic {
    width: 56px;
    height: 56px;
    border-radius: 99px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
    color: #067647;
  }
  .yc-xong h2 {
    font-size: 20px;
    margin: 0 0 6px;
  }
  .yc-xong p {
    color: #414651;
    margin: 0 auto 20px;
    max-width: 460px;
    font-size: 14px;
    line-height: 21px;
  }
  .yc-xong .ma {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: #F5F5F5 !important;
    border: 1px solid #E9EAEB !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
  }
  .yc-load {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #414651;
    font-size: 14px;
  }
  .yc-load .sp {
    width: 22px;
    height: 22px;
    border: 2.5px solid #D5D7DA;
    border-top-color: #DA1F26;
    border-radius: 99px;
    animation: yc-quay .7s linear infinite;
  }
  @keyframes yc-quay {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion:reduce) {
    .yc-load .sp {
      animation-duration: 2s;
    }
  }
  .yc-bo {
    background: none;
    border: 0;
    color: #D6000B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .yc-bo:hover {
    background: #FEF3F2;
  }
  .yc-dcmo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #E9EAEB;
    color: #414651;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .yc-dcmo:hover {
    background: #FAFAFA;
    color: #181D27;
  }
  .yc-tt {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 2px 16px;
  }
  .yc-tt dt {
    font-size: 12px;
    font-weight: 600;
    color: #717680;
    padding: 8px 0;
  }
  .yc-tt dd {
    margin: 0;
    font-size: 13px;
    padding: 8px 0;
  }
  .kh-card {
    position: relative;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 6px 14px;
    margin-top: 10px;
    background: #FAFAFA;
  }
  .kh-card .yc-tt {
    grid-template-columns: 110px 1fr;
  }
  .kh-card .yc-tt dt,.kh-card .yc-tt dd {
    padding: 6px 0;
  }
  .kh-sua {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #D5D7DA;
    background: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #414651;
  }
  .kh-sua:hover {
    border-color: #FDA29B;
    color: #D6000B;
    background: #FEF3F2;
  }
  .kh-form {
    margin-top: 10px;
  }
  .kh-form textarea.fi {
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 56px;
  }
  .fld-nhom {
    flex: 1 1 260px;
    min-width: 240px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 14px 14px 4px;
    background: #fff;
  }
  .bc-row3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0 16px;
  }
  @media (max-width:760px) {
    .bc-row3 {
      grid-template-columns: 1fr;
    }
  }
  .bc-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  @media (max-width:640px) {
    .bc-row2 {
      grid-template-columns: 1fr;
    }
  }
  .bc-lb {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
    margin: 0 0 8px;
  }
  .bc-ma {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12px;
    color: #414651;
  }
  .bc-card {
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 6px 14px;
    background: #FAFAFA;
    margin-top: 4px;
  }
  .bc-tt {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 2px 16px;
  }
  .bc-tt dt {
    font-size: 12px;
    font-weight: 600;
    color: #717680;
    padding: 6px 0;
  }
  .bc-tt dd {
    margin: 0;
    font-size: 13px;
    padding: 6px 0;
  }
  .dz {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
  }
  .dz-tile {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    border: 1px solid #E9EAEB;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A4A7AE;
  }
  .dz-x {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    border: 1px solid #D5D7DA;
    background: #fff;
    color: #717680;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(10,13,18,.08);
  }
  .dz-x:hover {
    color: #D6000B;
    border-color: #FDA29B;
  }
  .dz-add {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    border: 1.5px dashed #D5D7DA;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #D6000B;
    font-size: 12px;
    font-weight: 600;
  }
  .dz-add:hover {
    border-color: #FDA29B;
    background: #FEF3F2;
  }
  .yc-xong {
    text-align: center;
    padding: 40px 20px;
  }
  .yc-xong .ic {
    width: 56px;
    height: 56px;
    border-radius: 99px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ECFDF3;
    border: 1px solid #ABEFC6;
    color: #067647;
  }
  .yc-xong h2 {
    font-size: 20px;
    margin: 0 0 6px;
  }
  .yc-xong p {
    color: #414651;
    margin: 0 auto 20px;
    max-width: 460px;
    font-size: 14px;
    line-height: 21px;
  }
  .yc-xong .ma {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: #F5F5F5 !important;
    border: 1px solid #E9EAEB !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
  }
  .yc-load {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #414651;
    font-size: 14px;
  }
  .yc-load .sp {
    width: 22px;
    height: 22px;
    border: 2.5px solid #D5D7DA;
    border-top-color: #DA1F26;
    border-radius: 99px;
    animation: bc-quay .7s linear infinite;
  }
  @keyframes bc-quay {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion:reduce) {
    .yc-load .sp {
      animation-duration: 2s;
    }
  }
  * {
    box-sizing: border-box;
  }
  html,body {
    margin: 0;
    padding: 0;
  }
  :root {
    --dai-tren: 74px;
  }
  html {
    color-scheme: light;
    background: #FAFAFA;
    min-height: 100%;
  }
  body {
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background: #FAFAFA;
    color: #181D27;
    font-size: 13px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
  }
  button,input,select,textarea {
    font-family: inherit;
  }
  a {
    color: inherit;
  }
  /* Chuyển trang không nháy sidebar: View Transitions xuyên trang (Chromium 126+; trình duyệt khác bỏ qua, vẫn chạy bình thường).
     Sidebar được chụp ảnh giữ nguyên trong lúc trang mới tải; chỉ phần nội dung đổi nhanh. */
  @view-transition { navigation: auto; }
  .side { view-transition-name: side; }
  ::view-transition-group(side),
  ::view-transition-old(side),
  ::view-transition-new(side) { animation: none; }
  ::view-transition-group(root) { animation-duration: .12s; }
  .app {
    display: grid;
    grid-template-columns: 264px 1fr;
    min-height: 100vh;
  }
  .side {
    background: #fff;
    border-right: 1px solid #E9EAEB;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .brand-icon { display: none }
  .side-thu-nut {
    position: absolute;
    top: calc(var(--dai-tren) / 2 - 12px);
    right: -12px;
    z-index: 5;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E9EAEB;
    border-radius: 50%;
    background: #fff;
    color: #717680;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10,13,18,.08);
  }
  .side-thu-nut:hover { background: #F5F5F5; color: #181D27 }
  .side-thu-nut:focus-visible { outline: 2px solid #DA1F26; outline-offset: 1px }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--dai-tren);
    padding: 0 20px;
    border-bottom: 1px solid #E9EAEB;
    flex: none;
  }
  .brand .brand-logo {
    height: 28px;
    width: auto;
    max-width: 100%;
    display: block;
  }
  .brand .dot {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #DA1F26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
  }
  .brand .nm {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
  }
  .brand .host {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 11px;
    color: #717680;
  }
  .menu {
    padding: 12px 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .menu .grp {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: #717680;
    padding: 12px 8px 6px;
    text-transform: uppercase;
  }
  .menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #414651;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1px;
  }
  .menu a:hover {
    background: #F5F5F5;
    color: #181D27;
  }
  .menu a.on {
    background: #FEF3F2;
    color: #181D27;
    font-weight: 600;
  }
  .menu a .lbl {
    flex: 1;
    min-width: 0;
  }
  .menu a .mic {
    flex: none;
    color: #A4A7AE;
    display: flex;
  }
  .menu a:hover .mic {
    color: #414651;
  }
  .menu a.on .mic {
    color: #DA1F26;
  }
  .menu a[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
  }
  .menu a[aria-disabled="true"]:hover {
    background: transparent;
    color: #414651;
  }
  .menu a[aria-disabled="true"]:hover .mic {
    color: #A4A7AE;
  }
  .krow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .kic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
  }
  .kic.mute {
    background: #F5F5F5;
    border-color: #D5D7DA;
    color: #414651;
  }
  .kic.ok {
    background: #ECFDF3;
    border-color: #ABEFC6;
    color: #067647;
  }
  .kic.warn {
    background: #FFFAEB;
    border-color: #FEDF89;
    color: #B54708;
  }
  .kic.err {
    background: #FEF3F2;
    border-color: #FDA29B;
    color: #B42318;
  }
  .kic.info {
    background: #EFF8FF;
    border-color: #B2DDFF;
    color: #175CD3;
  }
  .menu a .bdg {
    font-size: 12px;
    font-weight: 600;
    color: #414651;
    background: #F5F5F5;
    border-radius: 9999px;
    padding: 1px 8px;
    flex: none;
  }
  .menu a.on .bdg {
    background: #DA1F26;
    color: #fff;
  }
  .swap {
    padding: 12px;
    border-top: 1px solid #E9EAEB;
    flex: none;
    position: relative;
  }
  .swap-lbl {
    margin-bottom: 8px;
    padding-left: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #717680;
  }
  .swap-nut {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px;
    border-radius: 9px;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: #181D27;
    transition: background .15s, border-color .15s;
  }
  .swap-nut .tt { flex: 1; min-width: 0 }
  .swap-ch { color: #717680; display: inline-flex }
  .swap-nut:hover, .swap-nut[aria-expanded="true"] { border-color: #FDA29B; background: #FEF3F2 }
  .swap-nut:active { background: #FEE4E2 }
  .swap-nut:focus-visible, .swap-m a:focus-visible { outline: 2px solid #DA1F26; outline-offset: -2px }
  .swap-m {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 78px;
    z-index: 60;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    box-shadow: 0 12px 24px -4px rgba(10,13,18,.12);
    padding: 6px;
  }
  .swap-m[hidden] { display: none }
  .swap-m a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 7px;
    text-decoration: none;
    transition: background .15s;
  }
  .swap-m a:hover { background: #F5F5F5 }
  .swap-m a:active { background: #E9EAEB }
  .swap-m a.on { background: #FEF3F2; color: #DA1F26; cursor: default }
  .swap-m a.on .t1 { color: #DA1F26 }
  .swap a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px;
    border-radius: 9px;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    text-decoration: none;
    margin-bottom: 8px;
  }
  .swap a:hover {
    border-color: #FDA29B;
    background: #FEF3F2;
  }
  .swap .t1 {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .swap .t2 {
    display: block;
    font-size: 12px;
    color: #414651;
    margin-top: 1px;
  }
  .main {
    min-width: 0;
  }
  .top {
    background: #fff;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .top.co-td {
    padding-bottom: 20px;
    border-bottom: 1px solid #E9EAEB;
  }
  .top.co-td .hdrbar {
    margin-bottom: 20px;
  }
  .crumb {
    font-size: 13px;
    color: #181D27;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .body>.crumb {
    margin-bottom: 16px;
  }
  .crumb a {
    color: #717680;
    text-decoration: none;
    font-weight: 500;
  }
  .crumb a:hover {
    color: #181D27;
    text-decoration: underline;
  }
  .crumb-sep {
    color: #A4A7AE;
  }
  .crumb-back {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid #D5D7DA;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #717680;
    background: #fff;
  }
  .crumb-back:hover {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #D6000B;
    text-decoration: none;
  }
  .src {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12px;
    color: #A4A7AE;
    background: #F5F5F5;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 8px;
  }
  .hrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  h1 {
    font-size: 24px;
    line-height: 31px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
  }
  .lede {
    color: #414651;
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 20px;
    max-width: 760px;
  }
  .tabwrap {
    overflow-x: auto;
    margin-bottom: 20px;
  }
  .tabs {
    display: inline-flex;
    gap: 2px;
    background: #F5F5F5;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 4px;
  }
  .tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #414651;
    text-decoration: none;
    white-space: nowrap;
  }
  .tabs a:hover {
    color: #181D27;
  }
  .tabs a.on {
    background: #fff;
    color: #181D27;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(10,13,18,.06),0 1px 3px rgba(10,13,18,.04);
  }
  .tabs a .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #414651;
    font-variant-numeric: tabular-nums;
  }
  .tabs a.on .n {
    background: #FEF3F2;
    color: #D6000B;
  }
  .body {
    padding: 24px 32px 60px;
  }
  .tbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
  }
  .tbar .sr {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
    min-width: 200px;
  }
  .tabs a.rong {
    opacity: .5;
  }
  .tabs a.rong .n {
    opacity: .7;
  }
  .tbar .sr svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #A4A7AE;
  }
  .tbar .sr input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #181D27;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .tbar .sr input:focus {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .tbar .sr .xo {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    cursor: pointer;
    color: #717680;
    padding: 4px;
    line-height: 0;
    border-radius: 5px;
  }
  .tbar .sr .xo:hover {
    background: #F5F5F5;
    color: #414651;
  }
  .tbar select,.tbar .sel-nut {
    padding: 8px 32px 8px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #414651;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
  }
  /* Nút dropdown tự vẽ đã có <svg> chevron riêng — bỏ ảnh nền chevron của select gốc,
     không thì hiện 2 chevron. */
  .tbar .sel-nut {
    background-image: none;
    padding-right: 12px;
  }
  .tbar select:focus,.tbar .sel-nut:focus-visible {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .tbar select.act,.tbar .sel-nut.act {
    border-color: #DA1F26;
    color: #D6000B;
    background-color: #FEF3F2;
  }
  .tbar .dr {
    position: relative;
    display: inline-flex;
  }
  .tbar .dr-nut {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: #414651;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .tbar .dr-nut svg {
    color: #717680;
    flex: none;
  }
  .tbar .dr-nut:focus-visible {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .tbar .dr-nut.act,.tbar .dr-nut.act svg {
    color: #D6000B;
  }
  .tbar .dr-nut.act {
    border-color: #DA1F26;
    background-color: #FEF3F2;
  }
  .tbar .dr-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 212px;
    padding: 12px;
    display: grid;
    gap: 10px;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    box-shadow: 0 12px 16px -4px rgba(10,13,18,.08),0 4px 6px -2px rgba(10,13,18,.03);
  }
  .tbar .dr-pop[hidden] {
    display: none;
  }
  .tbar .dr-o {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
  }
  .tbar .dr-o input {
    padding: 7px 10px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #181D27;
    background: #fff;
  }
  .tbar .dr-o input:focus {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .tbar .dr-ft {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
  }
  .tbar .dr-ft button {
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
  }
  .tbar .dr-xoa {
    border: 0;
    background: none;
    color: #D6000B;
  }
  .tbar .dr-xoa:hover {
    text-decoration: underline;
  }
  .tbar .dr-xong {
    border: 1px solid #DA1F26;
    background: #DA1F26;
    color: #fff;
  }
  .tbar .xoaloc {
    border: 0;
    background: none;
    color: #D6000B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
  }
  .tbar .xoaloc:hover {
    text-decoration: underline;
  }
  .tbar .xoaloc[hidden] {
    display: none;
  }
  .hdrbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--dai-tren);
    margin: 0 -32px;
    padding: 0 32px;
    border-bottom: 1px solid #E9EAEB;
  }
  .hdrbar .sr {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
  }
  .hdrbar .sr svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #A4A7AE;
  }
  .hdrbar .sr input {
    width: 100%;
    padding: 9px 46px 9px 34px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-size: 13px;
    background: #FAFAFA;
    color: #181D27;
  }
  .hdrbar .sr input::placeholder {
    color: #A4A7AE;
  }
  .hdrbar .sr kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #717680;
    background: #fff;
    border: 1px solid #D5D7DA;
    border-radius: 5px;
    padding: 2px 6px;
  }
  .hdrbar .sp {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hicon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 0;
    background: none;
    color: #717680;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
  }
  .hicon .bdg {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #DA1F26;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }
  /* Popover thông báo (topbar DN) — assets/doanh-nghiep/popover-thong-bao.js */
  .tbp { position: fixed; z-index: 70; background: #fff; border: 1px solid #E9EAEB; border-radius: 12px; box-shadow: 0 12px 24px -4px rgba(10,13,18,.12); display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 80px)); overflow: hidden }
  .tbp[hidden] { display: none }
  .tbp-h { display: flex; align-items: center; gap: 4px; padding: 14px 16px; border-bottom: 1px solid #E9EAEB }
  .tbp-h h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; color: #181D27 }
  .tbp-i, .tbp-all { border: 0; background: none; color: #DA1F26; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 500; padding: 6px 8px; border-radius: 8px }
  .tbp-i:hover, .tbp-all:hover:not(:disabled) { background: #FEF3F2 }
  .tbp-all:disabled { color: #A4A7AE; cursor: default }
  .tbp-l { overflow-y: auto; flex: 1 }
  .tbp-it { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid #F5F5F5; background: #fff; text-align: left; cursor: pointer; font: inherit; color: #181D27 }
  .tbp-it:hover { background: #FAFAFA }
  .tbp-it.moi { background: #FEF3F2 }
  .tbp-it.moi:hover { background: #FEE4E2 }
  .tbp-ic { flex: none; width: 36px; height: 36px; border-radius: 9999px; background: #F5F5F5; color: #717680; display: inline-flex; align-items: center; justify-content: center }
  .tbp-it.moi .tbp-ic { background: #FEE4E2; color: #DA1F26 }
  .tbp-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
  .tbp-t { font-size: 14px; font-weight: 600 }
  .tbp-s { font-size: 13px; color: #535862; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
  .tbp-m { font-size: 12px; color: #717680 }
  .tbp-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 9999px; background: #DA1F26 }
  .tbp-r { padding: 32px 16px; text-align: center; color: #717680; font-size: 14px }
  .tbp-f { display: block; padding: 12px; text-align: center; border-top: 1px solid #E9EAEB; color: #DA1F26; font-size: 14px; font-weight: 500; text-decoration: none }
  .tbp-f:hover { background: #FAFAFA }
  .hicon[aria-haspopup]:not(:disabled) { cursor: pointer; transition: background .15s, color .15s }
  .hicon[aria-haspopup]:not(:disabled):hover, .hicon[aria-expanded="true"] { background: #F5F5F5; color: #414651 }
  .hicon[aria-haspopup]:not(:disabled):active { background: #E9EAEB }
  .tbp-i, .tbp-all, .tbp-it, .tbp-f { transition: background .15s, color .15s }
  .tbp-i:active:not(:disabled), .tbp-all:active:not(:disabled) { background: #FEE4E2 }
  .tbp-it:active { background: #F5F5F5 }
  .tbp-it.moi:active { background: #FDA29B }
  .tbp-f:active { background: #F5F5F5 }
  .tbp-i:focus-visible, .tbp-all:focus-visible, .tbp-it:focus-visible, .tbp-f:focus-visible, .hicon[aria-haspopup]:focus-visible { outline: 2px solid #DA1F26; outline-offset: -2px }
  .hpf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: 9999px;
    text-decoration: none;
    color: inherit;
    margin-left: 4px;
  }
  a.hpf:hover {
    background: #F5F5F5;
  }
  .hpf-av {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #FEF3F2;
    color: #D6000B;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .hpf-onl {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #067647;
    border: 2px solid #fff;
  }
  .hpf-tt {
    display: none;
    line-height: 16px;
  }
  .hpf-nm {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .hpf-vai {
    display: block;
    font-size: 12px;
    color: #717680;
    margin-top: 1px;
  }
  .hpf svg:last-child {
    color: #A4A7AE;
    flex: none;
  }
  button.hpf {
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  button.hpf:hover {
    background: #F5F5F5;
  }
  .hpf-box {
    position: relative;
  }
  .hpf-m {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 220px;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    box-shadow: 0 12px 24px -4px rgba(10,13,18,.12);
    padding: 6px;
  }
  .hpf-m[hidden] {
    display: none;
  }
  .hpf-m a,
  .hpf-ds button {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    background: none;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    color: #181D27;
  }
  .hpf-m a svg {
    color: #717680;
    flex: none;
  }
  .hpf-m a:hover,
  .hpf-ds button:hover {
    background: #FAFAFA;
  }
  .hpf-m a.dx,
  .hpf-m a.dx svg {
    color: #D92D20;
  }
  .hpf-ds {
    min-width: 290px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #E9EAEB;
  }
  .hpf-g {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #717680;
    letter-spacing: .04em;
  }
  .hpf-ds button {
    justify-content: space-between;
  }
  .hpf-ds button[aria-checked=true] {
    font-weight: 600;
    background: #FEF3F2;
  }
  .hpf-ds small {
    color: #717680;
    font-size: 11px;
    white-space: nowrap;
  }
  @media (min-width:900px) {
    .hpf-tt {
      display: block;
    }
  }
  .mdbg {
    position: fixed;
    inset: 0;
    background: rgba(10,13,18,.55);
    display: none;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .mdbg.on {
    display: flex;
  }
  /* ─── Ngăn kéo lọc (drawer) ───
     Biến thể của .mdbg: cùng lớp nền, cùng bẫy focus/Esc trong app.js, chỉ đổi cách
     đặt hộp — dán mép phải, nổi cách viền 8px. Dùng chung cho web/{admin,la,sa}. */
  .mdbg.ngan {
    align-items: stretch;
    justify-content: flex-end;
    padding: 8px;
  }
  .mdbg.ngan .md {
    max-width: 420px;
    height: 100%;
    max-height: none;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 8px -4px rgba(10,13,18,.04), 0 20px 24px -4px rgba(10,13,18,.1);
    animation: ngan-vao .22s cubic-bezier(.32,.72,0,1);
  }
  @keyframes ngan-vao {
    from { transform: translateX(16px); opacity: 0 }
  }
  /* .md.co-cuon ghim header/footer bằng sticky. Ở đây thân bài tự cuộn nên sticky vừa
     thừa vừa lệch — trả chúng về static và kẻ viền thẳng. */
  .mdbg.ngan .md header {
    position: static;
    border-bottom: 1px solid #E9EAEB;
  }
  .mdbg.ngan .md .mb {
    flex: 1;
    overflow: auto;
    padding: 16px 20px;
  }
  .mdbg.ngan .md footer {
    position: static;
    border-top: 1px solid #E9EAEB;
    flex-direction: row;
    align-items: center;
    padding: 16px 20px;
  }
  /* Hai nút chia đôi chiều ngang, nút chính nằm phải — theo thứ tự trong markup. */
  .mdbg.ngan .md footer .btn {
    flex: 1;
    width: auto;
    justify-content: center;
  }
  @media (max-width:640px) {
    .mdbg.ngan {
      padding: 0;
    }
    .mdbg.ngan .md {
      max-width: none;
      border-radius: 0;
    }
  }
  /* Lựa chọn dạng thẻ: nhãn + mô tả bên trái, ô chọn dạt phải. */
  .lcth {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .lcth + .lcth {
    margin-top: 8px;
  }
  .lcth:hover {
    background: #FAFAFA;
  }
  .lcth:has(:checked) {
    border-color: #DA1F26;
    background: #FEF3F2;
  }
  .lcth:focus-within {
    border-color: #DA1F26;
    box-shadow: 0 0 0 3px var(--color-pri-soft);
  }
  .lcth input {
    order: 2;
    margin: 2px 0 0 auto;
    accent-color: #DA1F26;
    flex: none;
  }
  .lcth .t {
    display: block;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    color: #181D27;
  }
  .lcth .s {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    margin-top: 2px;
  }
  .md.md-rong {
    max-width: 680px;
  }
  .md {
    background: #fff;
    border-radius: 14px;
    max-width: 520px;
    width: 100%;
    max-height: 86vh;
    overflow: auto;
    box-shadow: 0 20px 24px -4px rgba(10,13,18,.1);
  }
  .md header {
    padding: 20px 20px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }
  .md.co-cuon header {
    border-bottom: 1px solid #E9EAEB;
  }
  .md.co-cuon footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-top: 1px solid #E9EAEB;
  }
  /* Mọi hộp thoại có thân .mb: chỉ thân bài cuộn, header/footer đứng yên.
     .co-cuon (bật khi .mb tràn) chỉ còn kẻ viền header/footer. */
  .md:has(> .mb) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .md:has(> .mb) > header,
  .md:has(> .mb) > footer {
    flex: none;
    position: static;
  }
  .md:has(> .mb) > .mb {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  .md header .kic {
    margin-top: 2px;
  }
  .md h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
  }
  /* Hộp thoại không có phụ đề: icon + tiêu đề căn giữa dọc */
  .md header:has(.sub:empty) {
    align-items: center;
  }
  .md header:has(.sub:empty) .kic {
    margin-top: 0;
  }
  .md header:has(.sub:empty) h2 {
    margin: 0;
  }
  .md .sub:empty {
    display: none;
  }
  .md .sub {
    font-size: 13px;
    line-height: 20px;
    color: #717680;
    margin: 0;
  }
  .md .mb {
    padding: 16px 20px 4px;
    font-size: 13px;
    line-height: 20px;
    color: #414651;
  }
  .md .mb b {
    font-weight: 600;
    color: #181D27;
  }
  .md footer {
    padding: 8px 20px 20px;
    display: flex;
    gap: 8px;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  /* Nút chính luôn nằm phải, nút phụ bên trái — bất kể thứ tự trong markup. */
  .md footer .btn.pri {
    order: 1;
  }
  .md .x {
    margin-left: auto;
    border: 0;
    background: none;
    cursor: pointer;
    color: #717680;
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
    flex: none;
  }
  .md .x:hover {
    background: #F5F5F5;
    color: #414651;
  }
  tbody td:last-child {
    white-space: nowrap;
    width: 1%;
  }
  tbody tr[data-di],tbody tr[data-di-mo] {
    cursor: pointer;
  }
  tbody tr[data-di]:hover,tbody tr[data-di-mo]:hover {
    background: #FEF3F2;
  }
  td .mo {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
  }
  td .mo:hover {
    text-decoration: underline;
    text-decoration-color: #D5D7DA;
    text-underline-offset: 3px;
  }
  td .mo.mo-do:hover {
    color: #DA1F26;
  }
  .moc {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .moc li {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
  }
  .moc li:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: #E9EAEB;
  }
  .moc li:last-child {
    padding-bottom: 0;
  }
  .moc li:last-child:before {
    display: none;
  }
  .moc .n {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #D5D7DA;
    background: #fff;
    color: #717680;
    position: relative;
    z-index: 1;
  }
  .moc li.xong .n {
    background: #ECFDF3;
    border-color: #ABEFC6;
    color: #067647;
  }
  .moc li.xong:before {
    background: #ABEFC6;
  }
  .moc li.nay .n {
    background: #DA1F26;
    border-color: #DA1F26;
    color: #fff;
    box-shadow: 0 0 0 4px #FEF3F2;
  }
  .moc .ct {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
  }
  .moc .mh {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
  }
  .moc .mh .t1 {
    margin-bottom: 0;
  }
  .moc .mh .pill {
    flex: none;
  }
  .moc .t1 {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .moc li.cho .t1 {
    color: #414651;
    font-weight: 500;
  }
  .moc .mtg {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    margin-bottom: 5px;
  }
  .moc .mtg b {
    font-weight: 600;
    color: #414651;
    font-variant-numeric: tabular-nums;
  }
  .moc .t2 {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #717680;
  }
  .moc .ai {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #717680;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 3px;
  }
  .dl dd .s {
    display: block;
    font-size: 12px;
    line-height: 17px;
    color: #717680;
    margin-top: 2px;
  }
  .dl dd .s[hidden] {
    display: none;
  }
  .stien {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .stien li {
    display: grid;
    grid-template-columns: minmax(140px,200px) 1fr;
    gap: 6px 20px;
    padding: 14px 0;
    border-top: 1px solid #E9EAEB;
    align-items: start;
  }
  .stien li:first-child {
    border-top: 0;
    padding-top: 2px;
  }
  .stien li.tong {
    border-top: 1px solid #D5D7DA;
    margin-top: 2px;
  }
  .stkl {
    font-size: 12px;
    font-weight: 600;
    color: #717680;
    padding-top: 3px;
  }
  .stk {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stso {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: #181D27;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
  }
  .stme {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #717680;
  }
  .stme b {
    font-weight: 600;
    color: #414651;
    font-variant-numeric: tabular-nums;
  }
  .stso.chu {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
  }
  .stgc {
    font-size: 12px;
    line-height: 18px;
    color: #717680;
  }
  .stgc b {
    font-weight: 600;
    color: #414651;
  }
  .stgc .tk {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-weight: 600;
    color: #414651;
    letter-spacing: .02em;
  }
  @media (max-width:640px) {
    .stien li {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .stkl {
      padding-top: 0;
    }
  }
  .upas {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    margin-bottom: 10px;
  }
  @media (max-width:640px) {
    .upas {
      grid-template-columns: repeat(3,1fr);
    }
  }
  .upa {
    aspect-ratio: 4/3;
    border: 1px dashed #D5D7DA;
    border-radius: 10px;
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0;
    font: inherit;
    transition: border-color .15s,background .15s;
  }
  .upa:hover {
    border-color: #FDA29B;
    background: #FEF3F2;
  }
  .upa .upa-c {
    font-size: 19px;
    line-height: 1;
    color: #414651;
  }
  .upa .upa-n {
    font-size: 11px;
    color: #414651;
  }
  .upaw {
    position: relative;
    min-width: 0;
    display: block;
  }
  .upaw.upa-an {
    display: none;
  }
  .upaw > .upa {
    width: 100%;
  }
  .upa-xoa {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    background: rgba(10,13,18,.62);
    color: #fff;
    padding: 0;
  }
  .upa-xoa:hover {
    background: #B42318;
  }
  .upaw:has(.upa.co) .upa-xoa {
    display: flex;
  }
  .upa.co {
    border-style: solid;
    border-color: #FDA29B;
    background: #FEF3F2;
  }
  .upa.co .upa-c {
    color: #D6000B;
  }
  .upa img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
  .upa.co img {
    display: block;
  }
  .upa.co.coanh {
    background: #F5F5F5;
  }
  .upa.co.coanh .upa-c {
    display: none;
  }
  .upa.co.coanh .upa-n {
    position: relative;
    z-index: 1;
    background: rgba(10,13,18,.62);
    color: #fff;
    border-radius: 99px;
    padding: 1px 7px;
    font-weight: 600;
  }
  .upa.coanh:not(.co) .upa-c {
    opacity: .55;
  }
  .upa .upa-t {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 5px;
    font-size: 10px;
    line-height: 13px;
    color: #414651;
    background: #fff;
    border-top: 1px solid #FDA29B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tao-hs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 12px 20px;
    padding: 14px 16px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    background: #FAFAFA;
    margin: 4px 0 12px;
  }
  .tao-hs[hidden] {
    display: none;
  }
  .tao-hssua {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #717680;
  }
  .tao-hssua:hover {
    background: #F5F5F5;
    color: #414651;
  }
  .tao-hs .hs-l {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #717680;
    margin-bottom: 3px;
  }
  .tao-hs .hs-v {
    display: block;
    font-size: 13.5px;
    color: #181D27;
    overflow-wrap: break-word;
  }
  .side .dong {
    display: none;
  }
  .mphu {
    display: none;
  }
  :focus-visible {
    outline: 2px solid #D6000B;
    outline-offset: 2px;
    border-radius: 5px;
  }
  .tabs a:focus-visible,.menu a:focus-visible {
    outline-offset: 3px;
  }
  .opt:focus-within,.chk:focus-within {
    border-color: #DA1F26;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  tbody tr:focus-within {
    background: #FEF3F2;
  }
  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #fff;
    color: #181D27;
    padding: 12px 16px;
    border: 2px solid #D6000B;
    border-radius: 0 0 9px 0;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  .skip:focus {
    left: 0;
  }
  .menu a,.tabs a,.opt,.chk,.swap a,.tbar select,.tbar .sel-nut,.tbar .sr input, .md .x,.tbar .sr .xo {
    transition: background-color .15s ease,border-color .15s ease, color .15s ease,box-shadow .15s ease;
  }
  @media (pointer:coarse) {
    .tabs a,.ct-tab {
      min-height: 40px;
    }
    .menu a {
      min-height: 44px;
    }
    .md .x,.tbar .sr .xo {
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    td .mo {
      display: inline-block;
      line-height: 32px;
    }
    .moc .n {
      min-height: 32px;
    }
    .tbar select,.tbar .sel-nut {
      min-height: 44px;
    }
    .tbar .xoaloc {
      min-height: 44px;
      padding-left: 12px;
      padding-right: 12px;
    }
    .wzsteps .st {
      min-height: 44px;
    }
  }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
  .tw {
    position: relative;
  }
  .tw.tran:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
    border-radius: 0 12px 12px 0;
  }
  .btn.off {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
  }
  .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(215px,1fr));
    gap: 12px;
    margin-bottom: 20px;
  }
  .kpi {
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    padding: 16px 16px;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .kpi .k {
    font-size: 13px;
    font-weight: 600;
    color: #414651;
    margin-bottom: 8px;
  }
  .kpi .v {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1;
  }
  .kpi .v.dai {
    font-size: 23px;
    letter-spacing: -.01em;
  }
  .kpi .v.raidai {
    font-size: 19px;
    letter-spacing: 0;
  }
  .kpi .v {
    font-variant-numeric: tabular-nums;
  }
  .kpi .u {
    font-size: 13px;
    color: #717680;
    margin-left: 6px;
    font-weight: 500;
  }
  .kpi .why {
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    margin-top: 8px;
  }
  .tao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .tao-grid>.tao-rong {
    grid-column: 1 / -1;
  }
  .tao-grid[hidden] {
    display: none;
  }
  @media (max-width:720px) {
    .tao-grid {
      grid-template-columns: 1fr;
    }
  }
  .tao-qr {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px dashed #D5D7DA;
    border-radius: 10px;
    background: #FAFAFA;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .tao-qr svg {
    color: #717680;
    flex: none;
  }
  .tao-qr>div {
    flex: 1;
    min-width: 180px;
  }
  .tao-qr b {
    display: block;
    font-size: 13.5px;
    color: #181D27;
  }
  .tao-qr span {
    display: block;
    font-size: 12.5px;
    color: #717680;
    margin-top: 2px;
  }
  .cham:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex: none;
  }
  .tw {
    overflow-x: auto;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
  }
  thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #414651;
    text-transform: uppercase;
    padding: 12px 16px;
    background: #FAFAFA;
    border-bottom: 1px solid #E9EAEB;
    white-space: nowrap;
  }
  tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #E9EAEB;
    vertical-align: top;
    min-width: 132px;
    max-width: 340px;
    overflow: hidden;
    overflow-wrap: break-word;
  }
  tbody tr:last-child td {
    border-bottom: 0;
  }
  table[aria-label="giao dich"] tbody td:last-child {
    white-space: normal;
    width: auto;
  }
  .tw-ghim thead th:first-child, .tw-ghim tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 #E9EAEB;
  }
  .tw-ghim thead th:first-child {
    background: #FAFAFA;
    z-index: 3;
  }
  .tw-ghim tbody td:first-child {
    background: #fff;
  }
  .tw-ghim tbody tr:hover td:first-child {
    background: #FCFCFC;
  }
  tbody tr:hover {
    background: #FCFCFC;
  }
  td .m {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12px;
    font-weight: 600;
  }
  .malk {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-weight: 600;
    color: inherit !important;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
  }
  a.malk:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #D6000B !important;
  }
  a.malk:focus-visible {
    outline: 2px solid #DA1F26;
    outline-offset: 2px;
  }
  .malk.phu {
    display: block;
    font-size: 12px;
    color: #717680 !important;
    margin-top: 2px;
  }
  a.malk.phu:hover {
    color: #D6000B !important;
  }
  td .s {
    display: block;
    font-size: 12px;
    color: #717680;
    margin-top: 2px;
  }
  td .s[hidden] {
    display: none;
  }
  .kbb {
    position: relative;
    display: inline-flex;
  }
  .kbb-nut {
    width: 32px;
    height: 32px;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #414651;
    padding: 0;
  }
  .kbb-nut:hover {
    background: #FAFAFA;
    border-color: #D5D7DA;
  }
  .kbb-nut.xoa:hover:not(:disabled) {
    background: #FEF3F2;
    border-color: #FDA29B;
    color: #D92D20;
  }
  .kbb-nut:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #fff;
    border-color: #E9EAEB;
  }
  .kbb-nut[aria-expanded="true"] {
    background: #FEF3F2;
    border-color: #FDA29B;
    color: #D6000B;
  }
  .kbb-pop {
    position: fixed;
    z-index: 70;
    min-width: 210px;
    padding: 6px;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16,24,40,.14);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .kbb-pop[hidden] {
    display: none;
  }
  .kbb-i {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: none;
    border-radius: 7px;
    font: inherit;
    font-size: 13px;
    line-height: 18px;
    color: #181D27;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  .kbb-i:hover {
    background: #FAFAFA;
  }
  .kbb-i.xau {
    color: #B42318;
  }
  .kbb-i.xau:hover {
    background: #FEF3F2;
  }
  [data-phienma] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #DA1F26;
    margin-top: 4px;
  }
  [data-phienma][hidden] {
    display: none;
  }
  .acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  td .acts .btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .acts.full {
    flex-direction: column;
  }
  .acts.full .btn {
    width: 100% !important;
    justify-content: center;
  }
  .acts.full.nguyhiem {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E9EAEB;
  }
  @media (pointer:coarse) {
    td .acts .btn {
      padding: 10px 14px !important;
    }
    .acts {
      gap: 10px;
    }
  }
  .pg-b {
    appearance: none;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #D5D7DA;
    background: #fff;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #414651;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pg-b:hover:not(:disabled) {
    background: #FAFAFA;
    color: #181D27;
  }
  .pg-b.on {
    background: #D6000B;
    border-color: #D6000B;
    color: #fff;
  }
  .pg-b:disabled {
    opacity: .4;
    cursor: not-allowed;
  }
  .pg-gap {
    padding: 0 2px;
    color: #A4A7AE;
  }
  .ct-hint {
    font-size: 12px;
    color: #717680;
    line-height: 17px;
    margin: 7px 0 0;
  }
  .hhd {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
  }
  .hhd+.hhd {
    border-top: 1px solid #E9EAEB;
  }
  .hhd-s {
    flex: none;
    min-width: 64px;
    font-size: 12px;
    font-weight: 600;
    color: #717680;
  }
  .hhd-m {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .hhd-m b {
    font-size: 13px;
    font-weight: 600;
    color: #414651;
  }
  .hhd-m span {
    font-size: 12px;
    line-height: 17px;
    color: #717680;
  }
  .hhd-m .ma {
    color: #717680 !important;
  }
  .hhd-t {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #181D27;
  }
  .hhd-t.mo {
    color: #717680;
    font-weight: 600;
  }
  @media (max-width:560px) {
    .hhd {
      flex-wrap: wrap;
      gap: 4px 10px;
    }
    .hhd-m {
      flex: 1 1 100%;
      order: 3;
    }
    .hhd-t {
      margin-left: auto;
    }
  }
  .tdo {
    margin: 2px 0 0;
  }
  .tdo-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    flex-wrap: wrap;
  }
  .tdo-l {
    font-size: 12px;
    font-weight: 600;
    color: #717680;
  }
  .tdo-n {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #181D27;
  }
  .tdo-n i {
    font-style: normal;
    font-weight: 600;
    color: #717680;
  }
  .tdo-b {
    height: 7px;
    border-radius: 99px;
    background: #E9EAEB;
    overflow: hidden;
  }
  .tdo-b i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: #DA1F26;
    transition: width .3s ease;
  }
  .tdo.du .tdo-b i {
    background: #067647;
  }
  .tdo-f {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
    font-size: 12px;
    line-height: 17px;
    color: #717680;
    flex-wrap: wrap;
  }
  .tdo-f b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .tdo-f b.con {
    color: #B54708;
  }
  .tdo-f b.du {
    color: #067647;
  }
  .bar6 {
    display: flex;
    gap: 2px;
  }
  .bar6 i {
    width: 14px;
    height: 4px;
    border-radius: 3px;
    background: #E9EAEB;
    display: block;
  }
  .bar6 i.f {
    background: #DA1F26;
  }
  .empty {
    padding: 40px 20px;
    text-align: center;
    color: #717680;
  }
  .empty .e1 {
    font-size: 14px;
    font-weight: 600;
    color: #414651;
    margin-bottom: 4px;
  }
  .empty .e2 {
    font-size: 13px;
  }
  .empty .e-nut {
    margin-top: 16px;
  }
  .gap {
    border: 1px dashed #D5D7DA;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background: #FCFCFC;
  }
  .gap .tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #B54708;
    background: #FFFAEB;
    border: 1px solid #FEDF89;
    border-radius: 5px;
    padding: 2px 8px;
    margin-bottom: 8px;
  }
  .gap .g1 {
    font-size: 14px;
    font-weight: 600;
    color: #414651;
  }
  .gap .g2 {
    font-size: 13px;
    color: #717680;
    margin-top: 6px;
    line-height: 20px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .mtoggle {
    display: none;
  }
  /* Sidebar thu gọn (sidebar-thu-gon.js): chỉ icon mục menu + logo icon. Chỉ desktop; ≤900px sidebar vốn là ngăn kéo. */
  @media (min-width:901px) {
    .app { transition: grid-template-columns .18s ease }
    .side { overflow: visible; z-index: 35 }
    html.side-thu .app { grid-template-columns: 72px 1fr }
    html.side-thu .brand { padding: 0; justify-content: center }
    html.side-thu .brand .brand-logo,
    html.side-thu .brand .dong { display: none }
    html.side-thu .brand .brand-icon { display: block; height: 32px; width: auto }
    html.side-thu .menu { padding: 12px 10px; overflow-x: hidden }
    html.side-thu .menu .grp { height: 1px; margin: 10px 8px; padding: 0; background: #E9EAEB; font-size: 0; overflow: hidden }
    html.side-thu .menu a { justify-content: center; padding: 10px 0; gap: 0; position: relative }
    html.side-thu .menu a .lbl { display: none }
    html.side-thu .menu a .bdg { position: absolute; top: 2px; right: 4px; padding: 0 5px; font-size: 10px; line-height: 16px }
    html.side-thu .swap { padding: 12px 10px }
    html.side-thu .swap-lbl,
    html.side-thu .swap-nut .tt,
    html.side-thu .swap-ch { display: none }
    html.side-thu .swap-nut { justify-content: center; padding: 12px 0 }
    html.side-thu .swap-m { left: 64px; right: auto; bottom: 12px; width: 240px }
  }
  @media (max-width:900px) {
    .side-thu-nut { display: none }
    .app {
      grid-template-columns: 1fr;
    }
    .side {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 270px;
      z-index: 40;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform .2s ease;
      box-shadow: 0 10px 30px rgba(10,13,18,.18);
    }
    .side.mo {
      transform: translateX(0);
    }
    .mphu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 39;
      border: 0;
      padding: 0;
      cursor: pointer;
      background: rgba(10,13,18,.5);
    }
    body.menu-mo .mphu {
      display: block;
    }
    .side .dong {
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      color: #717680;
      text-decoration: none;
      flex: none;
      margin-left: auto;
    }
    .side .dong:hover {
      background: #F5F5F5;
      color: #181D27;
    }
    .mtoggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      background: #fff;
      border: 1px solid #D5D7DA;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #414651;
      text-decoration: none;
      margin-bottom: 12px;
    }
    .top {
      padding: 16px;
    }
    .body {
      padding: 16px;
    }
    h1 {
      font-size: 20px;
      line-height: 29px;
    }
    .kpis {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .hdrbar {
      height: auto;
      padding-bottom: 14px;
      margin-bottom: 14px;
    }
    .hdrbar .sr kbd {
      display: none;
    }
  }
  @media (max-width:560px) {
    .kpis {
      grid-template-columns: 1fr;
    }
  }
  .cthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 16px;
  }
  .cthead .t1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 4px;
  }
  .cthead .t2 {
    font-size: 13px;
    color: #414651;
    margin: 0;
  }
  .cthead .ma {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace !important;
    font-size: 12px !important;
    color: #717680 !important;
    background: #F5F5F5 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    margin-right: 8px !important;
  }
  /* ─── Tiêu đề + thanh hành động trang chi tiết BĐS (assets/bat-dong-san/chi-tiet-hanh-dong.js) ─── */
  .cthead.bds {
    align-items: flex-start;
  }
  .cthead.bds .ct-tt {
    min-width: 0;
    flex: 1 1 420px;
  }
  .cthead.bds .t1 {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-wrap: anywhere;
  }
  .hrow .hsub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: 14px;
    color: #535862;
  }
  .ct-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .ct-meta-pill { gap: 8px 12px; }
  .ct-chep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #717680;
    cursor: pointer;
  }
  .ct-chep:hover {
    background: #F5F5F5;
    color: #181D27;
  }
  .ct-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .ct-hdnut {
    width: 38px;
    height: 38px;
  }
  /* Hộp thoại hành động BĐS: dòng "Sẽ thông báo: …" (prototype chưa có hệ thông báo, chốt 02/10). */
  .ct-tb {
    margin: 10px 0 14px;
    font-size: 13px;
    line-height: 18px;
    color: #535862;
  }
  /* Lý do nút chính LA đang mờ — 1 dòng bên trái nút, dài thì cắt (title không cần: id nối aria-describedby). */
  .ct-chinhly {
    max-width: 300px;
    font-size: 12px;
    line-height: 16px;
    color: #717680;
    text-align: right;
  }
  /* Box cảnh báo bên trái nút Duyệt đang mờ (Admin, BĐS chờ LA hoàn thiện hồ sơ). */
  .ct-chinhwarn .note {
    box-sizing: border-box;
    height: 38px;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }
  .ct-chinhwarn .note svg {
    margin-top: 0 !important;
  }
  .ct-chinhwarn .note .txt {
    white-space: nowrap;
  }
  @media (max-width:900px) {
    .ct-chinhwarn .note {
      height: auto;
      min-height: 38px;
    }
    .ct-chinhwarn .note .txt {
      white-space: normal;
    }
  }
  .ct-hdpop {
    min-width: 260px;
    max-width: 320px;
  }
  .ct-hdi {
    white-space: normal;
  }
  .ct-hdn,
  .ct-hdl {
    display: block;
  }
  .ct-hdl {
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: #717680;
  }
  .kbb-i.ct-hdi[aria-disabled="true"] {
    cursor: not-allowed;
  }
  .kbb-i.ct-hdi[aria-disabled="true"] .ct-hdn {
    color: #A4A7AE;
  }
  .kbb-i.ct-hdi.xau[aria-disabled="true"] .ct-hdn {
    color: #F4A9A3;
  }
  .kbb-i.ct-hdi[aria-disabled="true"]:hover {
    background: #FAFAFA;
  }
  .kbb-i.ct-hdi:focus-visible {
    outline: 2px solid #DA1F26;
    outline-offset: -2px;
  }
  .ct-hdke {
    height: 1px;
    margin: 4px 2px;
    background: #E9EAEB;
  }
  @media (max-width:900px) {
    .ct-hd {
      width: 100%;
    }
  }
  .ctsec {
    display: none;
  }
  .ctsec.on {
    display: block;
  }
  /* Trạng thái rỗng của trang chi tiết lịch hẹn sau khi người dùng từ chối tham gia
     (dùng cho cả la/ và sa/lich-hen-chi-tiet.html). */
  .ct-rong {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 420px;
    padding: 48px 20px;
  }
  .ct-rong-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #F5F5F5;
    color: #A4A7AE;
    margin-bottom: 16px;
  }
  .ct-rong-t1 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #181D27;
  }
  .ct-rong-t2 {
    margin: 4px 0 0;
    font-size: 13px;
    color: #717680;
  }
  .ct-tabs {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
    background: #F5F5F5;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 4px;
  }
  .ct-tab {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #414651;
    white-space: nowrap;
  }
  .ct-tab:hover {
    color: #181D27;
  }
  .ct-tab.on {
    background: #fff;
    color: #181D27;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(10,13,18,.06),0 1px 3px rgba(10,13,18,.04);
  }
  .ct-panel[hidden] {
    display: none;
  }
  .ct-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 328px;
    gap: 20px;
    align-items: start;
  }
  .ct-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .ct-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--hd-cao, 74px) + 12px);
  }
  .ct-side:has(>.ct-scroll) {
    max-height: calc(100vh - var(--hd-cao, 74px) - 24px);
  }
  .ct-side:has(>.ct-scroll)>.ct-scard:not(.ct-scroll) {
    flex: none;
  }
  .ct-scard.ct-scroll {
    flex: 1 1 auto;
    min-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ct-scard.ct-scroll>h3 {
    position: sticky;
    top: -18px;
    z-index: 1;
    background: #fff;
    margin: -18px -18px 12px;
    padding: 18px 18px 10px;
  }
  @media (max-width:920px) {
    .ct-grid {
      grid-template-columns: 1fr;
    }
    .ct-side {
      position: static;
    }
    .ct-side:has(>.ct-scroll) {
      max-height: none;
    }
    .ct-scard.ct-scroll {
      overflow: visible;
    }
    .ct-scard.ct-scroll>h3 {
      position: static;
      margin: 0 0 16px;
      padding: 0;
    }
  }
  .ct-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .ct-2col>div:last-child {
    border-left: 1px solid #E9EAEB;
    padding-left: 24px;
  }
  @media (max-width:640px) {
    .ct-2col {
      grid-template-columns: 1fr;
      gap: 18px 0;
    }
    .ct-2col>div:last-child {
      border-left: 0;
      padding-left: 0;
      border-top: 1px solid #E9EAEB;
      padding-top: 16px;
    }
  }
  .ct-benn {
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
    margin-bottom: 10px;
    word-break: break-word;
  }
  .ct-benr {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 4px 0;
    border-top: 1px solid #E9EAEB;
  }
  .ct-benr span {
    color: #717680;
    flex: none;
  }
  .ct-benr b {
    font-weight: 600;
    color: #181D27;
    text-align: right;
    word-break: break-word;
  }
  .ct-doc {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E9EAEB;
  }
  .ct-doc:first-child {
    padding-top: 0;
  }
  .ct-doc:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .ct-doct {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
  }
  .ct-doct b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
  }
  .ct-doct span {
    display: block;
    font-size: 12px;
    color: #717680;
    margin-top: 3px;
    line-height: 16px;
  }
  .ct-doct .lk-dk {
    display: block;
    margin-top: 6px;
  }
  .ct-doca {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-top: 2px;
  }
  @media (max-width:520px) {
    .ct-doc {
      flex-wrap: wrap;
    }
    .ct-doca {
      margin-left: 50px;
      padding-top: 8px;
    }
  }
  .ct-srow {
    margin-bottom: 16px;
  }
  .ct-srow:last-child {
    margin-bottom: 0;
  }
  .ct-lb {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
  }
  .ct-lb span {
    color: #717680;
  }
  .ct-lb b {
    font-weight: 600;
    color: #181D27;
    text-align: right;
  }
  .ct-lb b.ok {
    color: #067647;
  }
  .ct-lb.doc {
    display: block;
  }
  .ct-lb.doc b {
    display: block;
    text-align: left;
    font-weight: 400;
    line-height: 19px;
    margin-top: 4px;
  }
  .ct-prog {
    height: 6px;
    border-radius: 99px;
    background: #F5F5F5;
    overflow: hidden;
    margin: 9px 0 0;
  }
  .ct-prog>i {
    display: block;
    height: 100%;
    background: #DA1F26;
    border-radius: 99px;
  }
  .ct-prog.done>i {
    background: #067647;
  }
  .ct-kh {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .ct-av {
    width: 42px;
    height: 42px;
    border-radius: 99px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: #FEF3F2;
    color: #D6000B;
  }
  .ct-lh {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex: none;
  }
  .ct-lh a {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #fff;
    color: #414651;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .ct-lh a:hover {
    border-color: #FDA29B;
    color: #D6000B;
    background: #FEF3F2;
  }
  .ct-rel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #E9EAEB;
    text-decoration: none;
  }
  .ct-rel:first-of-type {
    border-top: 0;
    padding-top: 2px;
  }
  .ct-relic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    color: #717680;
  }
  .ct-reltt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .ct-relm {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .ct-rels {
    font-size: 12px;
    color: #717680;
    margin-top: 2px;
  }
  .ct-relgo {
    color: #A4A7AE;
    flex: none;
    display: flex;
  }
  .ct-relic {
    position: relative;
  }
  .ct-relic.co {
    background: #ECFDF3;
    color: #067647;
  }
  .ct-rel:hover .ct-relm {
    color: #D6000B;
  }
  .ct-rel:hover .ct-relic {
    background: #FEF3F2;
    color: #D6000B;
  }
  .ct-rel:hover .ct-relgo {
    color: #D6000B;
  }
  .ct-bd {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid #E9EAEB;
  }
  .ct-bd:first-child {
    border-top: 0;
    padding-top: 4px;
  }
  .ct-bd:last-child {
    padding-bottom: 4px;
  }
  .ct-bdmt {
    font-size: 12px;
    color: #717680;
    margin-top: 6px;
  }
  .ct-bdmt .m {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .ct-bdrp {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: none;
  }
  .ct-bdrp .btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  @media (max-width:660px) {
    .ct-bd {
      flex-wrap: wrap;
    }
    .ct-bdrp {
      width: 100%;
      padding-left: 40px;
      align-items: flex-start;
    }
  }
  /* Một bất động sản có thể có nhiều báo cáo dẫn khách (mỗi khách mua trong phiếu
     một báo cáo) — gộp vào accordion thay cho nút "Mở báo cáo" đơn lẻ. */
  .ct-bdacc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
    cursor: pointer;
  }
  .ct-bdacc:hover {
    color: #D6000B;
  }
  .ct-bdacc:disabled,
  .ct-bdacc:disabled:hover {
    color: #717680;
    cursor: not-allowed;
  }
  .ct-bdacc svg {
    transition: transform .15s ease;
  }
  .ct-bdacc[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  .ct-bdrps {
    padding: 2px 0 14px 40px;
  }
  .ct-bdrpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
  }
  .ct-bdrpi + .ct-bdrpi {
    border-top: 1px solid #F5F5F5;
  }
  .ct-bdrpic {
    width: 34px;
    height: 34px;
    border-radius: 99px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFF8FF;
    color: #175CD3;
  }
  .ct-bdrptt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .ct-bdrpm {
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
  }
  .ct-bdrpk {
    font-size: 13px;
    color: #717680;
    margin-top: 2px;
  }
  .ct-bdrpi:hover .ct-bdrpm {
    color: #D6000B;
  }
  .ct-bdrpi:hover .ct-relgo {
    color: #D6000B;
  }
  .ct-sigcv {
    padding: 24px 16px;
    text-align: center;
    background-image: linear-gradient(#FAFAFA 1px,transparent 1px);
    background-size: 100% 30px;
  }
  .ct-sigcv svg {
    width: 66%;
    max-width: 280px;
    height: auto;
    color: #181D27;
  }
  /* Danh sách chữ ký điện tử — mỗi bên ký một thẻ riêng, CV dẫn khách đứng cuối */
  .ct-sigs {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .ct-siglb {
    font-size: 13px;
    color: #717680;
    margin-bottom: 8px;
  }
  .ct-sigbx {
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    padding: 16px;
  }
  .ct-sigk {
    text-align: center;
    padding: 8px 0 12px;
    background-image: linear-gradient(#EFF1F3 1px,transparent 1px);
    background-size: 100% 30px;
  }
  .ct-sigk svg {
    width: 70%;
    max-width: 230px;
    height: auto;
    margin: 0 auto;
    color: #181D27;
  }
  .ct-sigdy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #717680;
    margin-top: 14px;
  }
  .ct-sigdy svg {
    flex: none;
    color: #A4A7AE;
  }
  .ct-signt {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
    margin-top: 10px;
  }
  .ct-tl {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ct-tl>li {
    position: relative;
    padding: 0 0 24px 32px;
  }
  .ct-tl>li:last-child {
    padding-bottom: 0;
  }
  .ct-tl>li::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: -2px;
    width: 2px;
    background: #D5D7DA;
  }
  .ct-tl>li:last-child::before {
    display: none;
  }
  .ct-dot {
    position: absolute;
    left: 2px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 99px;
    background: #fff;
    border: 3px solid #067647;
    box-sizing: border-box;
  }
  .ct-dot.pri {
    border-color: #DA1F26;
  }
  .ct-dot.qua {
    border-color: #067647;
    background: #067647;
  }
  .ct-dot.day {
    border-color: #DA1F26;
    box-shadow: 0 0 0 4px #FEF3F2;
  }
  .ct-dot.chua {
    border-color: #E9EAEB;
    border-width: 2px;
  }
  .ct-tl>li.chua .ct-tltt {
    color: #A4A7AE !important;
    font-weight: 500 !important;
  }
  .ct-tl>li.chua .ct-tlds {
    color: #A4A7AE !important;
  }
  .ct-tl>li.day .ct-tltt {
    color: #DA1F26 !important;
  }
  .ct-tl>li.qua::before {
    background: #ABEFC6;
  }
  .ct-here {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #DA1F26;
    background: #FEF3F2;
    border-radius: 9999px;
    padding: 1px 8px;
    margin-left: 8px;
    vertical-align: 2px;
  }
  .ct-can {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid #FEDF89;
    background: #FFFAEB;
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
    color: #B54708;
  }
  .ct-can.du {
    border-color: #ABEFC6;
    background: #ECFDF3;
    color: #067647;
  }
  .dld {
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
  }
  .dld>div {
    display: grid;
    grid-template-columns: minmax(130px,30%) 1fr;
    gap: 16px;
    padding: 11px 14px;
    border-top: 1px solid #E9EAEB;
    align-items: baseline;
  }
  .dld>div:first-child {
    border-top: 0;
  }
  .dld dt {
    margin: 0;
    font-size: 13px;
    color: #414651;
  }
  .dld dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
    overflow-wrap: anywhere;
  }
  .dld dd .s {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #717680;
    margin-top: 2px;
  }
  @media (max-width:560px) {
    .dld>div {
      grid-template-columns: 1fr;
      gap: 2px;
    }
  }
  .optsr {
    position: relative;
    display: block;
    margin-bottom: 10px;
  }
  .optsr svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #A4A7AE;
  }
  .optsr input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #181D27;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .optsr input:focus {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .tienw {
    position: relative;
  }
  .tienw input {
    width: 100%;
    padding: 14px 44px 14px 14px;
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: #181D27;
    background: #fff;
  }
  .tienw input:focus {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .tienw .dv {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 600;
    color: #717680;
    pointer-events: none;
  }
  .tien-nhanh {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 9px;
  }
  .tien-nhanh button {
    appearance: none;
    border: 1px solid #D5D7DA;
    background: #fff;
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #414651;
    cursor: pointer;
    font-family: inherit;
  }
  .tien-nhanh button:hover {
    background: #FAFAFA;
    border-color: #D5D7DA;
    color: #181D27;
  }
  .tien-sau {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #FAFAFA;
    font-size: 13px;
    line-height: 19px;
    color: #414651;
  }
  .tien-sau b {
    font-variant-numeric: tabular-nums;
  }
  .tien-sau.du {
    background: #ECFDF3;
    color: #067647;
  }
  .tien-sau.qua {
    background: #FEF3F2;
    color: #B42318;
  }
  .seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #F5F5F5;
    border-radius: 10px;
  }
  .seg button {
    flex: 1;
    appearance: none;
    border: 0;
    background: none;
    border-radius: 7px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #717680;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  .seg button:hover {
    color: #414651;
  }
  .seg button.on {
    background: #fff;
    color: #181D27;
    box-shadow: 0 1px 2px rgba(10,13,18,.06);
  }
  .cbn {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 11px 0;
    border-top: 1px solid #D5D7DA;
  }
  .cbn:first-of-type {
    border-top: 0;
  }
  .cbn .ai {
    flex: 0 0 210px;
    min-width: 0;
  }
  .cbn .ai b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .cbn .ai span {
    display: block;
    font-size: 12px;
    line-height: 17px;
    color: #717680;
    margin-top: 1px;
  }
  .cbn .ds {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1px;
  }
  .tk {
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    background: #fff;
    margin-top: 16px;
  }
  .tk>summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #414651;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .tk>summary::-webkit-details-marker {
    display: none;
  }
  .tk>summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid #A4A7AE;
    border-bottom: 2px solid #A4A7AE;
    transform: rotate(-45deg);
    transition: transform .15s;
    flex: none;
    margin-left: 2px;
  }
  .tk[open]>summary::before {
    transform: rotate(45deg);
  }
  .tk>summary:hover {
    background: #FAFAFA;
    border-radius: 12px;
  }
  .tk>summary .n {
    margin-left: auto;
    font-weight: 400;
    font-size: 12px;
    color: #A4A7AE;
  }
  .tk-nh {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #A4A7AE;
    margin: 14px 0 8px;
  }
  .tk-nh:first-child {
    margin-top: 12px;
  }
  .tk-hang {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
  }
  .canhw {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .ct-nhan .canhw {
    display: contents;
  }
  .canhw .pill {
    white-space: nowrap !important;
  }
  .cng-o {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #181D27;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .cng-o:hover {
    border-color: #E9EAEB;
  }
  .cng-o[aria-expanded="true"] {
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .cng-o svg {
    flex: none;
    color: #A4A7AE;
    margin-left: auto;
  }
  .cng-o[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  .cng-t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cng-t.rong {
    color: #717680;
  }
  .cng-t .v {
    color: #717680;
  }
  .cng-p {
    margin-top: 6px;
  }
  .cng-p[hidden] {
    display: none;
  }
  .cng-ds {
    max-height: 212px;
    overflow: auto;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 5px;
  }
  .cng-i {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 11px;
    border: 0;
    border-radius: 7px;
    background: none;
    cursor: pointer;
  }
  .cng-i:hover {
    background: #FAFAFA;
  }
  .cng-i.on {
    background: #FEF3F2;
  }
  .cng-i[hidden] {
    display: none;
  }
  .cng-i b {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .cng-i .nv {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12px;
    color: #717680;
    letter-spacing: -.01em;
  }
  .cng-i .v {
    font-size: 12px;
    color: #717680;
    margin-left: auto;
    padding-left: 10px;
  }
  .cng-t .nv {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12px;
    color: #717680;
  }
  .cng-ds .opt-rong {
    grid-column: auto;
  }
  .pick-the {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #FDA29B;
    border-radius: 10px;
    background: #FEF3F2;
  }
  .pick-the[hidden] {
    display: none;
  }
  .pick-tt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pick-tt b {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .pick-tt span {
    font-size: 12px;
    line-height: 17px;
    color: #717680;
  }
  .pick-doi {
    flex: none;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .pick-mo[hidden] {
    display: none;
  }
  .pick-ds {
    max-height: 236px;
    overflow: auto;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 5px;
  }
  .pick-i {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: 0;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
  }
  .pick-i:hover {
    background: #FAFAFA;
  }
  .pick-i.on {
    background: #FEF3F2;
  }
  .pick-i[hidden] {
    display: none;
  }
  /* Bộ chọn bất động sản: mỗi dòng kèm badge trạng thái; BĐS Đã bán / Tạm dừng bán hiển thị
     nhưng không chọn được (BR-33 — xem docs/lich-hen.md). */
  .pick-i .pick-bdg {
    align-self: flex-start;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    border: 1px solid;
    border-radius: 99px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
  }
  .pick-i .pick-bdg.ok {
    color: var(--color-ok);
    background: var(--color-ok-bg);
    border-color: var(--color-ok-bd);
  }
  .pick-i .pick-bdg.info {
    color: var(--color-info);
    background: var(--color-info-bg);
    border-color: var(--color-info-bd);
  }
  .pick-i .pick-bdg.mute {
    color: #717680;
    background: #FAFAFA;
    border-color: #D5D7DA;
  }
  .pick-i:disabled {
    cursor: not-allowed;
    opacity: .55;
  }
  .pick-i:disabled:hover {
    background: none;
  }
  .pick-i b {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .pick-i span {
    font-size: 12px;
    line-height: 17px;
    color: #717680;
  }
  .pick-ds .opt-rong {
    grid-column: auto;
  }
  .opt-rong {
    grid-column: 1/-1;
    padding: 14px 2px;
    font-size: 13px;
    color: #717680;
  }
  .opt-rong[hidden] {
    display: none;
  }
  @media (max-width:760px) {
    .optgrid {
      grid-template-columns: 1fr;
    }
  }
  .opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 16px;
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .opt[hidden] {
    display: none;
  }
  .opt:hover {
    border-color: #FDA29B;
  }
  .opt.on {
    border-color: #DA1F26;
    background: #FEF3F2;
  }
  .opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .opt .rd {
    width: 18px;
    height: 18px;
    border: 1.5px solid #D5D7DA;
    border-radius: 99px;
    flex: none;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  .opt.on .rd {
    border-color: #DA1F26;
  }
  .opt.on .rd:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #DA1F26;
  }
  .opt .o1 {
    display: block;
    font-size: 14px;
    font-weight: 600;
  }
  .opt .o2 {
    display: block;
    font-size: 13px;
    color: #717680;
    margin-top: 3px;
  }
  .chk {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 16px;
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
  }
  .chk.dis {
    opacity: .5;
    cursor: not-allowed;
    background: #FCFCFC;
  }
  .chk.on {
    border-color: #DA1F26;
    background: #FEF3F2;
  }
  .chk input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .chk .bx {
    width: 18px;
    height: 18px;
    border: 1.5px solid #D5D7DA;
    border-radius: 5px;
    flex: none;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #fff;
  }
  .chk.on .bx {
    background: #DA1F26;
    border-color: #DA1F26;
  }
  .chk .bx svg {
    opacity: 0;
  }
  .chk.on .bx svg {
    opacity: 1;
  }
  .sig {
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .sig .sh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #E9EAEB;
    background: #FCFCFC;
    font-size: 12px;
    color: #414651;
  }
  .sig .pad {
    position: relative;
  }
  .sig canvas {
    display: block;
    width: 100%;
    height: 200px;
    touch-action: none;
    cursor: crosshair;
  }
  .sig .ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    color: #717680;
    font-size: 13px;
  }
  .sig .base {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 48px;
    border-bottom: 1.5px dashed #E4E4E7;
  }
  .sig .sf {
    padding: 8px 12px;
    border-top: 1px solid #E9EAEB;
    background: #FCFCFC;
    font-size: 12px;
    color: #414651;
  }
  .sig .khoaph {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    color: #717680;
    font-size: 13px;
    background: #FAFAFA;
  }
  .sig.khoa canvas {
    pointer-events: none;
  }
  .sig.khoa .ph {
    display: none;
  }
  .sig.khoa .khoaph {
    display: flex;
  }
  /* biến thể thẻ ký: chỉ khung vẽ, không header/footer */
  .sig.sig-the {
    border-color: #E9EAEB;
    border-radius: 12px;
  }
  .sig-the canvas {
    height: 160px;
  }
  .sig-the .base {
    display: none;
  }
  .req {
    font-weight: 700;
    margin-left: 2px;
    color: #D6000B !important;
  }
  .lk-dk {
    color: #D6000B;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .srch {
    position: relative;
    display: block;
  }
  .srch svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #717680;
    pointer-events: none;
    z-index: 1;
  }
  .ds .stt {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: #F5F5F5;
    border: 1px solid #E9EAEB;
    color: #414651;
    margin-top: 2px;
  }
  .subsec {
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
  }
  .subsec-hd {
    padding: 11px 16px;
    border-bottom: 1px solid #E9EAEB;
    background: #FAFAFA;
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .subsec-bd {
    padding: 16px;
  }
  .kqhd {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #717680;
    text-transform: uppercase;
    margin: 14px 0 2px;
  }
  .subsec-bd .ds:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .cbb-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13.5px;
    color: #181D27;
    text-align: left;
  }
  .cbb-btn:hover {
    border-color: #D5D7DA;
    background: #FAFAFA;
  }
  .cbb-btn:focus-visible {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px #FEF3F2;
  }
  .cbb-btn svg {
    flex: none;
    color: #717680;
  }
  .cbb-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    box-shadow: 0 12px 24px -6px rgba(10,13,18,.12);
    padding: 8px;
    max-height: 300px;
    overflow: auto;
  }
  .cbb-item {
    width: 100%;
    display: block;
    text-align: left;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 7px;
    position: relative;
  }
  .cbb-item:hover {
    background: #FAFAFA;
  }
  .cbb-item.on {
    background: #FEF3F2;
  }
  .cbb-item .ci-t {
    display: block;
    font-size: 13.5px;
    color: #181D27;
  }
  .cbb-item .ci-t b {
    font-weight: 600;
  }
  .cbb-item .ci-d {
    display: block;
    font-size: 12px;
    color: #717680;
    margin-top: 2px;
  }
  .cbb-item .ci-g {
    display: block;
    font-size: 12px;
    color: #A4A7AE;
    margin-top: 2px;
  }
  .cbb-item .ci-ok {
    position: absolute;
    right: 10px;
    top: 9px;
    color: #D6000B;
  }
  .cbb-moi {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    margin-top: 6px;
    padding: 9px;
    border: 1px dashed #D5D7DA;
    border-radius: 7px;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #D6000B;
  }
  .cbb-moi:hover {
    background: #FEF3F2;
    border-color: #FDA29B;
  }
  /* biến thể nền xám: chữ màu thân bài, hover mới chuyển đỏ */
  .cbb-moi.xam {
    background: #FAFAFA;
    color: #414651;
  }
  .cbb-moi.xam:hover {
    color: #D6000B;
  }
  .fld .sel-nut {
    padding-right: 12px !important;
  }
  .fld select.fi {
    appearance: none;
    cursor: pointer;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  .btn.act {
    border-color: #FDA29B;
    background: #FEF3F2;
    color: #D6000B;
  }
  .btn .lcdem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 99px;
    background: #DA1F26;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .fi[aria-invalid="true"] {
    border-color: #B42318;
    background: #FFFBFA;
  }
  .fi[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px #FEE4E2;
  }
  .err2 {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #B42318;
    font-size: 13px;
    font-weight: 500;
  }
  .err2.show {
    display: flex;
  }
  .toastwrap {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(92vw,520px);
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid #D5D7DA;
    background: #fff;
    box-shadow: 0 12px 28px -8px rgba(10,13,18,.24);
    font-size: 13.5px;
    color: #181D27;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s,transform .18s;
  }
  .toast.on {
    opacity: 1;
    transform: none;
  }
  .toast svg {
    flex: none;
  }
  .toast.ok {
    border-color: #ABEFC6;
    background: #ECFDF3;
    color: #067647;
  }
  .toast.err {
    border-color: #FECDCA;
    background: #FEF3F2;
    color: #B42318;
  }
  @media (prefers-reduced-motion:reduce) {
    .toast {
      transition: none;
    }
  }
  .btn.dangcho {
    position: relative;
    color: transparent !important;
  }
  .btn.dangcho:after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 99px;
    color: #fff;
    animation: xoay .7s linear infinite;
  }
  .btn.gh.dangcho:after {
    color: #414651;
  }
  @keyframes xoay {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion:reduce) {
    .btn.dangcho:after {
      animation-duration: 2.4s;
    }
  }
  .sel {
    position: relative;
    display: block;
    min-width: 0;
  }
  .sel > select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .sel-nut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    appearance: none;
  }
  .sel-nut > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sel-nut > svg {
    flex: none;
    color: #717680;
    transition: transform .15s ease;
  }
  .sel[data-mo] .sel-nut > svg {
    transform: rotate(180deg);
  }
  .sel-nut[data-rong] {
    color: #717680;
  }
  .sel-pop {
    position: fixed;
    z-index: 80;
    background: #fff;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(10,13,18,.22);
    padding: 6px;
    max-height: 290px;
    overflow: auto;
  }
  .sel-pop[hidden] {
    display: none;
  }
  .sel-i {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    color: #181D27;
    padding: 8px 10px;
    border-radius: 7px;
    min-height: 36px;
  }
  .sel-i:hover,.sel-i.nhay {
    background: #FAFAFA;
  }
  .sel-i[aria-selected="true"] {
    background: #FEF3F2;
    color: #D6000B;
    font-weight: 600;
  }
  .sel-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #fff;
    font: 700 9px/1 Inter,system-ui,sans-serif;
    font-style: normal;
    letter-spacing: -.2px;
  }
  .sel-nut .sel-av {
    margin-right: 8px;
    vertical-align: middle;
  }
  .sel-i > svg {
    flex: none;
    margin-left: auto;
    color: #D6000B;
    visibility: hidden;
  }
  .sel-i[aria-selected="true"] > svg {
    visibility: visible;
  }
  .wzsteps {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
  }
  .wzsteps .st {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
  }
  .wzsteps .st .bar {
    display: block;
    height: 3px;
    border-radius: 99px;
    background: #D5D7DA;
    margin-bottom: 8px;
  }
  .wzsteps .st.done .bar {
    background: #D6000B;
  }
  .wzsteps .st.now .bar {
    background: #DA1F26;
  }
  .wzsteps .st .lb {
    font-size: 13px;
    font-weight: 500;
    color: #717680;
    display: block;
  }
  .wzsteps .st.done .lb {
    color: #717680;
  }
  .wzsteps .st.now .lb {
    color: #181D27;
    font-weight: 600;
  }
  .wzpane {
    display: none;
  }
  .wzpane:focus-visible {
    outline-offset: 4px;
    border-radius: 12px;
  }
  .chidoc {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .wzpane.on {
    display: block;
  }
  .wzthieu {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #B54708;
    max-width: 340px;
    text-align: right;
  }
  .wzthieu.show {
    display: inline-flex;
  }
  @media (max-width:700px) {
    .wzthieu {
      text-align: left;
      max-width: none;
      width: 100%;
    }
  }
  .card .goi {
    font-size: 13px;
    font-weight: 600;
    color: #B54708;
    white-space: nowrap;
  }
  .ds {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid #E9EAEB;
    padding: 12px 4px;
    cursor: pointer;
    border-radius: 8px;
  }
  .ds:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .ds.ds-the {
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #fff;
  }
  .ds.ds-the:last-child {
    border-bottom: 1px solid #E9EAEB;
    padding-bottom: 12px;
    margin-bottom: 0;
  }
  .ds input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .ds .rd {
    width: 18px;
    height: 18px;
    border: 1.5px solid #D5D7DA;
    border-radius: 99px;
    flex: none;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  .ds.on .rd {
    border-color: #DA1F26;
  }
  .ds.on .rd:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #DA1F26;
  }
  .ds .ct {
    flex: 1;
    min-width: 0;
    display: block;
  }
  .ds .l1 {
    display: block;
    font-size: 13px;
    color: #717680;
    margin-bottom: 3px;
  }
  .ds .l1 b {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-weight: 600;
    color: #414651;
  }
  .ds .l2 {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
    margin-bottom: 3px;
  }
  .ds .l3 {
    display: block;
    font-size: 13px;
    color: #717680;
  }
  .ds .rt {
    text-align: right;
    flex: none;
    display: block;
  }
  .ds .rt .ma {
    display: inline-block !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace !important;
    font-size: 11px !important;
    color: #414651 !important;
    background: #F5F5F5 !important;
    border: 1px solid #E9EAEB !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
  }
  .ds .rt .gia {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #181D27;
    margin-top: 6px;
  }
  .ds:hover {
    background: #FAFAFA;
  }
  @media (max-width:700px) {
    .wzsteps {
      grid-template-columns: 1fr !important;
      gap: 6px;
    }
  }
  /* ─── Modal "Đặt lịch hẹn" (la/lich-hen) ───
     Khối soạn gọn kiểu app lịch: tiêu đề trần, hàng có icon, không viền ô —
     khớp bản mobile/la/lich-hen.html (.dlh-*) để 2 nền tảng nhìn như một. */
  .md.md-lhd {
    max-width: 640px;
  }
  .md-lhd header {
    padding: 18px 24px;
    align-items: center;
    border-bottom: 1px solid #E9EAEB;
  }
  .md-lhd header h2 {
    font-size: 18px;
    margin: 0;
  }
  .md-lhd .mb {
    padding: 18px 24px 22px;
  }
  .md-lhd footer {
    padding: 16px 24px;
    border-top: 1px solid #E9EAEB;
    flex-direction: row;
    justify-content: flex-end;
  }
  .lhd-title {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    padding: 2px 0 10px;
    font-family: inherit;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #181D27;
  }
  .lhd-title::placeholder {
    color: #A4A7AE;
    font-weight: 400;
  }
  .lhd-title:focus {
    outline: none;
    border-bottom-color: #DA1F26;
  }
  .lhd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
  }
  .lhd-tag {
    border: 1px solid #E9EAEB;
    border-radius: 9999px;
    background: #fff;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: #414651;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .lhd-tag:hover {
    background: #FAFAFA;
  }
  .lhd-tag.is-on {
    border-color: #DA1F26;
    color: #DA1F26;
    font-weight: 600;
  }
  .lhd-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
  }
  .lhd-row[hidden] {
    display: none;
  }
  .lhd-ico {
    flex: none;
    line-height: 0;
    padding-top: 7px;
    color: #A4A7AE;
  }
  .lhd-row-body {
    flex: 1;
    min-width: 0;
  }
  .lhd-pop {
    /* bung thẳng dưới dòng tóm tắt, đẩy nội dung xuống — không nổi đè lên hàng khác */
    display: grid;
    grid-template-columns: auto minmax(200px,1fr);
    gap: 18px;
    align-items: start;
    margin: 6px 0 2px;
    max-width: 620px;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    padding: 16px;
  }
  .lhd-pop[hidden] {
    display: none;
  }
  /* ─── Lịch (dựng lại Calendar của shadcn/ui bằng DOM thuần) ─── */
  .lhd-cal {
    width: 252px;
    max-width: 100%;
  }
  .lhd-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  .lhd-cal-tit {
    font-size: 13px;
    font-weight: 600;
    color: #181D27;
  }
  .lhd-cal-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    background: #fff;
    color: #414651;
    cursor: pointer;
    padding: 0;
  }
  .lhd-cal-btn:hover {
    background: #F5F5F5;
  }
  .lhd-cal-wd,
  .lhd-cal-ds {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 2px;
  }
  .lhd-cal-wd span {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: #717680;
    padding-bottom: 4px;
  }
  .lhd-cal-ng {
    aspect-ratio: 1;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    color: #181D27;
    cursor: pointer;
  }
  .lhd-cal-ng:hover:not(:disabled):not(.is-on) {
    background: #F5F5F5;
  }
  .lhd-cal-ng:focus-visible {
    outline: 2px solid #DA1F26;
    outline-offset: 1px;
  }
  .lhd-cal-ng:disabled {
    color: #D5D7DA;
    cursor: not-allowed;
  }
  .lhd-cal-ng.is-trong {
    cursor: default;
  }
  .lhd-cal-ng.is-nay {
    background: #F5F5F5;
    font-weight: 600;
  }
  .lhd-cal-ng.is-on,
  .lhd-cal-ng.is-on.is-nay {
    background: #DA1F26;
    color: #fff;
    font-weight: 600;
  }
  /* ─── Cột giờ + hành động ─── */
  .lhd-tg-ben {
    min-width: 0;
  }
  .lhd-fld {
    display: block;
    margin-bottom: 12px;
  }
  .lhd-fld span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #414651;
    margin-bottom: 5px;
  }
  .lhd-pop-i {
    width: 100%;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    color: #181D27;
  }
  .lhd-pop-i:focus {
    outline: none;
    border-color: #DA1F26;
    box-shadow: 0 0 0 3px rgba(218,31,38,.12);
  }
  .lhd-pop-err {
    border: 1px solid var(--color-warn-bd);
    border-radius: 8px;
    background: var(--color-warn-bg);
    padding: 8px 10px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-warn);
  }
  .lhd-pop-err[hidden] {
    display: none;
  }
  .lhd-pop-act {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .lhd-pop-act .btn {
    padding: 7px 14px;
    font-size: 13px;
  }
  @media (max-width:640px) {
    .lhd-pop {
      grid-template-columns: 1fr;
      gap: 14px;
    }
  }
  .lhd-pholder {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    padding: 7px 0;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: #A4A7AE;
    cursor: pointer;
  }
  .lhd-pholder:hover {
    color: #717680;
  }
  .lhd-tg-wrap .lhd-pholder {
    color: #181D27;
  }
  .lhd-pholder .is-placeholder {
    color: #A4A7AE;
  }
  .lhd-pholder[hidden] {
    display: none;
  }
  .lhd-textarea {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    padding: 7px 0;
    resize: vertical;
    min-height: 34px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: #181D27;
  }
  .lhd-textarea::placeholder {
    color: #A4A7AE;
  }
  .lhd-textarea:focus {
    outline: none;
  }
  .lhd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
  }
  .lhd-hint {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #717680;
    margin-top: 8px;
  }
  .lhd-hint[hidden] {
    display: none;
  }
  .lhd-alert {
    border: 1px solid var(--color-warn-bd);
    border-radius: 10px;
    background: var(--color-warn-bg);
    padding: 12px 14px 12px 42px;
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-warn);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23DC6803' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px 13px;
  }
  .lhd-alert.is-err {
    border-color: var(--color-err-bd);
    background-color: var(--color-err-bg);
    color: var(--color-err);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D92D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
  }
  .lhd-alert[hidden] {
    display: none;
  }
  .md-lhd .pick-ds {
    max-height: 260px;
  }
  /* Thẻ BĐS đã chọn: nền/viền trung tính. Bản dùng chung của .pick-the tô đỏ nhạt,
     đặt cạnh cảnh báo trùng lịch trong modal này trông như một lỗi thứ hai. */
  .md-lhd .pick-the {
    background: #FAFAFA;
    border-color: #E9EAEB;
  }
  .md-lhd .pick-i.on {
    background: #F5F5F5;
  }
  @media (max-width:760px) {
    .md-lhd header,
    .md-lhd .mb,
    .md-lhd footer {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}
@layer components {
  /* ─── Công tắc gạt tròn (.tgl) — component dùng chung cho lựa chọn bật/tắt
     đơn (vd. TLS), khác .seg (2 nút cạnh nhau) ở chỗ chỉ có 1 điều khiển. ─── */
  .tgl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #414651;
    -webkit-user-select: none;
    user-select: none;
  }
  .tgl input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
  }
  .tgl-track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #D5D7DA;
    transition: background-color .15s ease;
  }
  .tgl-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10,13,18,.15);
    transition: transform .15s ease;
  }
  .tgl input:checked + .tgl-track {
    background: #DA1F26;
  }
  .tgl input:checked + .tgl-track::after {
    transform: translateX(18px);
  }
  .tgl input:focus-visible + .tgl-track {
    outline: 2px solid #DA1F26;
    outline-offset: 2px;
  }
  .tgl-lbl {
    line-height: 17px;
  }

  /* ─── Cấu hình email (Admin) — layout 2 cột (kết nối/người gửi trái, xem
     trước + chỉnh template phải) + thanh kiểm tra sticky. Dùng chung app.css
     theo kiến trúc web/. ─── */
  .eml-pwwrap {
    position: relative;
  }
  .eml-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #717680;
    cursor: pointer;
  }
  .eml-eye:hover {
    background: #F5F5F5;
    color: #414651;
  }

  .eml-2col {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
    gap: 20px;
    align-items: start;
  }
  .eml-colL, .eml-colR {
    min-width: 0;
  }
  .eml-colL h2, .eml-colR h2 {
    font-size: 17px;
  }
  .eml-colR {
    position: sticky;
    top: calc(var(--hd-cao, 74px) + 12px);
    max-height: calc(100vh - var(--hd-cao, 74px) - 24px);
    overflow-y: auto;
  }
  .eml-tpl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .eml-tpl-topbar .ct-tabs {
    margin: 0;
  }
  .eml-modesw {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    overflow: hidden;
  }
  .eml-modebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: 0;
    background: #fff;
    color: #A4A7AE;
    cursor: pointer;
  }
  .eml-modebtn + .eml-modebtn {
    border-left: 1px solid #D5D7DA;
  }
  .eml-modebtn:hover {
    background: #FAFAFA;
    color: #414651;
  }
  .eml-modebtn.on {
    background: #F5F5F5;
    color: #181D27;
  }

  .eml-inbox {
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 16px;
  }
  .eml-inbox-hd {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #FAFAFA;
    border-bottom: 1px solid #E9EAEB;
  }
  .eml-inbox-row {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 18px;
  }
  .eml-inbox-row .k {
    flex: 0 0 50px;
    color: #717680;
    font-weight: 600;
  }
  .eml-inbox-row .v {
    min-width: 0;
    color: #181D27;
    overflow-wrap: anywhere;
  }
  .eml-inbox-row.subject .v {
    font-weight: 700;
  }
  .eml-inbox .eml-preview {
    border: 0;
    border-radius: 0;
    display: block;
  }
  .eml-preview {
    width: 100%;
    height: 380px;
    border: 1px solid #E9EAEB;
    border-radius: 10px;
    background: #fff;
  }
  .eml-inbox--mobile {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
  }

  .eml-htmlcode {
    display: block;
    width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    background: #FAFAFA;
    color: #181D27;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12.5px;
    line-height: 19px;
    resize: vertical;
    tab-size: 2;
  }
  .eml-htmlcode:focus {
    outline: none;
    border-color: #FDA29B;
    box-shadow: 0 0 0 3px var(--color-pri-soft);
    background: #fff;
  }

  .eml-sendrow {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .eml-sendrow input.fi {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    font-size: 13px;
  }

  @media (max-width: 1100px) {
    .eml-2col {
      grid-template-columns: 1fr;
    }
    .eml-colR {
      position: static;
      max-height: none;
      overflow-y: visible;
    }
  }

}

/* ══ Hộp thoại nhúng nguyên một trang qua iframe — xem assets/popup.js ══════
   Để trong @layer utilities: vỏ trang và wizard dùng utility class (mt-, pt-,
   border-t-), mà utilities thắng components bất kể độ đặc hiệu — rules ở
   components sẽ bị nuốt. */
@layer utilities {
  /* ── khung hộp thoại (trang chủ) ── */
  .mdbg.pop {
    padding: 24px;
  }
  .md-pop {
    max-width: 960px;
    width: 100%;
    height: min(88vh, 900px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .md-pop > header {
    padding: 14px 20px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #E9EAEB;
    flex: none;
  }
  .md-pop.co-phu > header {
    position: relative;
  }
  .md-pop.co-phu > header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10,13,18,.55);
  }
  .md-pop > header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }
  .md-pop .pop-x {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #fff;
    color: #717680;
    cursor: pointer;
  }
  .md-pop .pop-x:hover {
    background: #FAFAFA;
    color: #181D27;
  }
  .md-pop iframe {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
    background: #FAFAFA;
  }
  /* Hỏi trước khi bỏ form đang soạn dở (popup.js, trang trong khung báo qua __popBan). */
  .md-pop {
    position: relative;
  }
  .pop-xn {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10,13,18,.55);
  }
  .pop-xn[hidden] {
    display: none;
  }
  .pop-xn-h {
    width: min(400px,100%);
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(10,13,18,.18);
  }
  .pop-xn-h h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #181D27;
  }
  .pop-xn-h p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 20px;
    color: #535862;
  }
  .pop-xn-f {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .pop-xn-f button {
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid #D5D7DA;
    border-radius: 8px;
    background: #fff;
    color: #414651;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .pop-xn-f button:hover {
    background: #FAFAFA;
  }
  .pop-xn-f button.nguy {
    border-color: #D92D20;
    background: #D92D20;
    color: #fff;
  }
  .pop-xn-f button.nguy:hover {
    background: #B42318;
  }
  .pop-xn-f button:focus-visible {
    outline: 2px solid #DA1F26;
    outline-offset: 2px;
  }
  @media (max-width: 720px) {
    .mdbg.pop {
      padding: 0;
    }
    .md-pop {
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
    }
  }

  /* ── trang đang nằm trong hộp thoại: bỏ vỏ ứng dụng ── */
  html.nhung,
  html.nhung body {
    background: #FAFAFA;
    height: 100%;
    overflow: hidden;
  }
  html.nhung .skip,
  html.nhung .side,
  html.nhung .top,
  html.nhung .mphu {
    display: none !important;
  }
  html.nhung .app {
    display: block;
    height: 100%;
    min-height: 0;
  }
  /* .main là cột cuộn duy nhất: có thế thì sticky của wizard mới bám được. */
  html.nhung .main {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
  }
  html.nhung .body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0;
  }

  /* ── wizard trong hộp thoại: thanh bước dính trên, thanh nút dính dưới ── */
  html.nhung .wz {
    max-width: none;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  html.nhung .wzsteps {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #FAFAFA;
    margin: 0 0 16px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #E9EAEB;
  }
  html.nhung .wz > .sub {
    margin: -8px 0 16px !important;
    padding: 0 20px;
  }
  html.nhung .wzpane {
    padding: 0 20px;
  }
  html.nhung .wzpane.on {
    flex: 1 1 auto;
  }
  html.nhung .wzfoot {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: auto 0 0;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #E9EAEB;
  }

  /* Lưới 2 lựa chọn: rule thu về 1 cột nằm ở components nên bị chính utility
     grid-cols-[1fr_1fr] trên thẻ đè mất — dựng lại đúng ý đó ở đây. */
  @media (max-width: 760px) {
    .optgrid {
      grid-template-columns: 1fr;
    }
  }

  /* Hẹp (hộp thoại chiếm trọn màn hình): thanh bước 4 cột — grid-template-columns
     nằm ở style= nên phải !important — rút còn đúng bước đang đứng, kèm nhãn
     "Bước n/4" vốn chỉ dành cho trình đọc màn hình. */
  @media (max-width: 720px) {
    html.nhung .wzsteps {
      grid-template-columns: 1fr !important;
      padding: 12px 16px 10px;
      margin-bottom: 12px;
    }
    html.nhung .wzsteps .st {
      display: none;
    }
    html.nhung .wzsteps .st.now {
      display: block;
    }
    html.nhung .wzsteps .st.now .chidoc {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      clip-path: none;
    }
    html.nhung .wz > .sub,
    html.nhung .wzpane {
      padding: 0 16px;
    }
    html.nhung .wzfoot {
      padding: 12px 16px;
    }
  }
  /* Điện thoại: hai nút chia đôi bề ngang, bỏ câu gợi ý cho đỡ chật. */
  @media (max-width: 520px) {
    html.nhung .wzfoot {
      gap: 10px !important;
    }
    html.nhung .wzfoot .wzhint {
      display: none;
    }
    html.nhung .wzfoot .wznut {
      width: 100%;
    }
    html.nhung .wzfoot .wznut .btn {
      flex: 1 1 0;
      justify-content: center;
    }
  }
}
/* ─── Lịch tháng (assets/lich-thang.js) ───
   Chế độ xem thứ hai của trang danh sách lịch hẹn: nút gạt .vtog cùng hàng .tabs, lưới .lt
   dựng từ chính các dòng của bảng. Dùng chung cho web/{admin,la,sa}/lich-hen.html. */
@layer components {
  /* Nút gạt nằm cùng hàng với .tabs, dạt phải; cùng khung nền/viền/padding với .tabs. */
  .tabwrap:has(.vtog) {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vtog {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    background: var(--color-bg2);
    border: 1px solid var(--color-bd);
    border-radius: 10px;
  }
  .vtog button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--color-tx3);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
  }
  .vtog button:hover { color: var(--color-tx) }
  .vtog button[aria-pressed="true"] {
    background: #fff;
    color: var(--color-tx);
    box-shadow: 0 1px 2px rgba(10,13,18,.08);
  }
  .lt { position: relative }
  /* Chế độ Lịch: ẩn bảng và phân trang (script lọc vẫn bật lại [data-pgwrap] mỗi lần lọc). */
  html.xem-lich .tw[data-loc], html.xem-lich [data-pgwrap] { display: none !important }
  .lt[hidden] { display: none }
  .lt-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .lt-nav[hidden] { display: none }
  .lt-nav h2 {
    min-width: 132px;
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-tx);
  }
  .lt-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-bd2);
    border-radius: 8px;
    background: #fff;
    color: var(--color-tx2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10,13,18,.05);
  }
  .lt-nav button:hover { background: var(--color-bg); color: var(--color-tx) }
  .lt-nav button.ic { padding: 0 }
  .lt-luoi {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--color-bd);
    border-radius: 12px;
    background: #fff;
  }
  .lt-th {
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-tx3);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-bd);
  }
  .lt-th:first-child { border-top-left-radius: 12px }
  .lt-th:nth-child(7) { border-top-right-radius: 12px }
  .lt-o {
    min-height: 116px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    border-right: 1px solid var(--color-bd);
    border-bottom: 1px solid var(--color-bd);
  }
  .lt-o:nth-child(7n) { border-right: 0 }
  .lt-o:nth-last-child(-n+7) { border-bottom: 0 }
  .lt-o:nth-last-child(7) { border-bottom-left-radius: 12px }
  .lt-o:last-child { border-bottom-right-radius: 12px }
  .lt-o.ngoai { background: var(--color-bg) }
  .lt-o.ngoai .lt-so { color: var(--color-tx4) }
  .lt-so {
    align-self: flex-start;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-tx2);
  }
  .lt-o.homnay .lt-so { background: var(--color-pri); color: #fff }
  .lt-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
  }
  .lt-chip b { font-weight: 600; flex: none }
  .lt-chip span { overflow: hidden; text-overflow: ellipsis }
  .lt-chip:hover { filter: brightness(.97); text-decoration: none }
  .lt-chip:focus-visible { outline: 2px solid var(--color-pri); outline-offset: 1px }
  .lt-chip.sap  { background: var(--color-info-bg); border-color: var(--color-info-bd); border-left-color: var(--color-info); color: var(--color-info) }
  .lt-chip.dang { background: var(--color-info-bg); border-color: var(--color-info-bd); border-left-color: var(--color-info); color: var(--color-info) }
  .lt-chip.xong { background: var(--color-ok-bg); border-color: var(--color-ok-bd); border-left-color: var(--color-ok); color: var(--color-ok) }
  .lt-chip.huy  { background: var(--color-bg2); border-color: var(--color-bd2); border-left-color: var(--color-tx4); color: var(--color-tx2) }
  .lt-chip.huy span { text-decoration: line-through }
  .lt-them {
    align-self: flex-start;
    padding: 1px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-tx2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .lt-them:hover { background: var(--color-bg2); color: var(--color-tx) }
  .lt-rong {
    margin-top: 12px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--color-tx3);
    border: 1px dashed var(--color-bd2);
    border-radius: 10px;
  }
  .lt-rong[hidden] { display: none }
  .lt-cu {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-tx3);
  }
  .lt-cu span { display: inline-flex; align-items: center; gap: 6px }
  .lt-cu i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border-left: 3px solid;
  }
  .lt-cu i.sap  { background: var(--color-info-bg); border-color: var(--color-info) }
  .lt-cu i.dang { background: var(--color-info-bg); border-color: var(--color-info) }
  .lt-cu i.xong { background: var(--color-ok-bg); border-color: var(--color-ok) }
  .lt-cu i.huy  { background: var(--color-bg2); border-color: var(--color-tx4) }
  .lt-pop {
    position: absolute;
    z-index: 30;
    width: 280px;
    max-height: 360px;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--color-bd);
    border-radius: 10px;
    box-shadow: 0 12px 16px -4px rgba(10,13,18,.08), 0 4px 6px -2px rgba(10,13,18,.03);
  }
  .lt-pop[hidden] { display: none }
  .lt-pop header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-tx);
  }
  .lt-pop header button {
    border: 0;
    background: none;
    padding: 2px;
    border-radius: 6px;
    color: var(--color-tx3);
    cursor: pointer;
    display: inline-flex;
  }
  .lt-pop header button:hover { background: var(--color-bg2); color: var(--color-tx) }
  .lt-pop .lt-chip { padding: 5px 8px }
  @media (max-width: 900px) {
    .lt-o { min-height: 84px; padding: 4px }
    .lt-luoi .lt-chip span { display: none }
    .lt-luoi .lt-chip { padding: 1px 4px; font-size: 11px }
  }

  /* Nhóm checkbox trong drawer Bộ lọc (bat-dong-san/bo-loc.js). */
  .lc-fs { border: 0; padding: 0; min-width: 0 }
  .lc-fs legend { padding: 0 }
  .lc-ds { display: flex; flex-direction: column }
  .lc-ds.lc-luoi { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px }
  .lc-chk { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; line-height: 18px; color: var(--color-tx); cursor: pointer }
  .lc-chk input { accent-color: #DA1F26; width: 16px; height: 16px; flex: none; margin: 0 }
  .lc-hang { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px }
  .lc-hang > * { min-width: 0 }
  /* Biến thể Disabled của dropdown (.sel-nut) + nhãn trường: nền, viền, chữ, label, mũi tên đều dùng màu disabled. */
  .fld .sel-nut:disabled { background: #F5F5F5; border-color: #E9EAEB; color: #A4A7AE; cursor: not-allowed }
  .fld .sel-nut:disabled > svg { color: #D5D7DA }
  .fld .fi:disabled { background-color: #F5F5F5; border-color: #E9EAEB; color: #A4A7AE; cursor: not-allowed; -webkit-text-fill-color: #A4A7AE }
  .fld .fi:disabled::placeholder { color: #A4A7AE }
  .fld select.fi:disabled { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D5D7DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") }
  .fld:has(.sel-nut:disabled, .fi:disabled) > .fl { color: #A4A7AE }
  @media (max-width: 480px) { .lc-ds.lc-luoi, .lc-hang { grid-template-columns: 1fr } }
  /* Thanh trượt Diện tích 2 đầu: 2 input range chồng nhau, chỉ thumb nhận chuột. */
  #loc-bds .fl { font-size: 13px }   /* nhãn trường drawer Bộ lọc BĐS */
  .lc-dt { margin-top: 18px; padding: 0 9px }
  .lc-dt-ray { position: relative; height: 18px }
  .lc-dt-ray::before, .lc-dt-day { content: ''; position: absolute; top: 7px; height: 4px; border-radius: 2px }
  .lc-dt-ray::before { left: 0; right: 0; background: var(--color-bd) }
  .lc-dt-day { background: #DA1F26 }
  .lc-dt-ray input { position: absolute; inset: 0 -9px; width: calc(100% + 18px); margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none }
  .lc-dt-ray input::-webkit-slider-runnable-track { background: none; height: 18px }
  .lc-dt-ray input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #DA1F26; cursor: pointer; box-sizing: border-box }
  .lc-dt-ray input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #DA1F26; cursor: pointer; box-sizing: border-box }
  .lc-dt-ray input::-moz-range-track { background: none }
  .lc-dt-ray input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-pri-soft) }
  .lc-dt-nhan { display: flex; justify-content: space-between; margin: 8px -9px 0; font-size: 13px; line-height: 20px; color: #DA1F26 }
}

  /* ─── Khối form dùng chung (chuyển từ admin/moi-gioi-chi-tiet.html (trước là nguoi-dung-chi-tiet)): lưới 2 cột trong hộp thoại, đường kẻ, chọn phường/xã,
     và chọn khu vực nhiều tỉnh của doanh nghiệp (assets/doanh-nghiep/ui-khu-vuc.js) ─── */
  .nd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  @media (max-width: 640px) {
    .nd-grid { grid-template-columns: 1fr; }
  }
  .nd-div {
    border-top: 1px solid #E9EAEB;
    margin: 4px 0 16px;
  }
  .kv-phuong,
  .kv-tinh {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .kv-tinh {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
  .kv-phuong .chk,
  .kv-tinh .chk {
    padding: 8px 12px;
    gap: 8px;
    font-size: 13px;
  }
  .kv-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 12px;
  }
  .kv-c {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    align-items: stretch;
  }
  .kv-c .sel,
  .kv-c select {
    width: 100%;
  }
  .kv-row.co-xoa {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: center;
  }
  .kv-w {
    width: 100%;
  }
  .kv-w .sel-nut:disabled {
    cursor: not-allowed;
    background-color: #F5F5F5;
    border-color: #E9EAEB;
    color: #A4A7AE;
  }
  .kv-w .sel-nut:disabled > svg {
    color: #D5D7DA;
  }
  .kv-pop .kv-all {
    color: #D6000B;
    font-weight: 600;
    border-bottom: 1px solid #E9EAEB;
    border-radius: 0;
    margin-bottom: 4px;
  }
  .kv-pop .chk {
    border: 0;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    align-items: center;
  }
  .kv-pop .chk.on {
    background: none;
  }
  @media (max-width: 640px) {
    .kv-row,
    .kv-row.co-xoa { grid-template-columns: 1fr; }
  }
  /* Chọn vai trò: không viền, các ô chia đều chiều ngang */
  .kv-vai {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
  }
  .kv-vai .chk,
  .kv-vai .chk.on {
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    align-items: center;
  }
  /* Thêm chuyên viên hàng loạt: mỗi dòng 1 khối có tiêu đề + nút Xoá/Dùng khu vực dòng trên */
  .hl-dong {
    padding: 16px 0;
    border-bottom: 1px solid #E9EAEB;
  }
  .hl-dong:last-of-type {
    border-bottom: 0;
  }
  .hl-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }
  .hl-hd b {
    font-size: 14px;
    color: #181D27;
  }
  .hl-hd .acts {
    display: flex;
    gap: 8px;
  }
  /* Hộp thoại bàn giao: bảng BĐS × người thay cuộn trong hộp thoại */
  .bg-bang {
    max-height: 260px;
    overflow: auto;
    margin-bottom: 12px;
  }

/* Trường thông tin xếp 2 cột, nhãn trên – giá trị dưới (card Bất động sản ở chi tiết tin). Ngoài @layer như .dl3. */
.dl2 .dl {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 16px;
}
.dl2 .dl > div {
  display: block;
  padding: 9px 0;
}
.dl2 .dl dd {
  margin-left: 0;
  text-align: left;
}

/* Trường thông tin xếp đúng 3 cột (hồ sơ DN ở Admin); hẹp thì về 1 cột.
   Ngoài @layer: lớp utilities (grid-template-columns của .dl) thắng mọi rule trong @layer components. */
.dl3 .dl {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
@media (max-width:760px) {
  .dl3 .dl {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Form hồ sơ DN (Admin chỉnh sửa) — khớp bước 1–2 form đăng ký: tiêu đề nhóm + 2 ô tải ĐKKD. */
.hs-nhom { margin: 4px 0 12px; font-size: 14px; font-weight: 600; color: #181D27; }
.tao-grid > .hs-nhom:first-child { margin-top: 0; }
.hs-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.hs-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 16px; border: 1.5px dashed #D5D7DA; border-radius: 10px; background: #fff; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.hs-slot:hover, .hs-slot.keo { border-color: #DA1F26; background: #FEF3F2; }
.hs-slot.co { border-style: solid; background: #FAFAFA; }
.hs-slot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; }
.hs-slot .bt { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #E9EAEB; border-radius: 8px; color: #535862; background: #fff; box-shadow: 0 1px 2px rgba(10,13,18,.05); }
.hs-slot .t1 { font-weight: 600; font-size: 13px; }
.hs-slot .t2 { font-size: 12px; color: #717680; }
.hs-slot .ten { font-size: 12px; font-weight: 500; color: #181D27; word-break: break-all; }
.hs-up[aria-invalid] .hs-slot { border-color: #D92D20; }
@media (max-width: 520px) { .hs-up { grid-template-columns: 1fr; } }

/* ─── Tin đăng v2.0 (assets/tin-dang/) — chi tiết tin 2 cột, 2 bản nội dung cạnh nhau ─── */
.tin-2ban { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .tin-2ban { grid-template-columns: 1fr; } }
.tin-ban { min-width: 0; }
.tin-2ban .tin-ban > div > header { min-height: 59px; box-sizing: border-box; align-items: center; }
.tin-anh { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 14px; }
.tin-anh .td-bia { height: auto; aspect-ratio: 3/2; margin: 0; }
.tin-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; contain: size; }
.tin-o { position: relative; min-width: 0; min-height: 0; border-radius: 8px; overflow: hidden; }
.tin-o img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 1px solid #E9EAEB; border-radius: 8px; display: block; box-sizing: border-box; }
.tin-an { display: none; }
.tin-them { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,13,18,.55); color: #fff; font-size: 18px; font-weight: 700; border-radius: 8px; pointer-events: none; }
.tin-khac { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #DA1F26; font-size: 0; margin-left: 5px; vertical-align: middle; }
.tin-ban .dl { grid-template-columns: 1fr; }