:root {
      --bg: #f7f7f8;
      --card: #fafafa;
      --text: #111827;
      --muted: #6b7280;
      --primary: #F079AB;
      /* brand gợi ý */
      --ring: #e5e7eb;
      --radius: 4px;
      --gap: 16px;
  }


  .wrap {
      max-width: 980px;
      margin: 40px auto;
      padding: 0 16px;
  }

  .card {
      background: var(--card);
      border: 1px solid var(--ring);
      border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
      padding: clamp(18px, 3.5vw, 28px);
  }

  h1 {
      margin: 0 0 10px;
      font-size: clamp(22px, 3.6vw, 28px)
  }

  .sub {
      color: var(--muted);
      margin: 0 0 22px
  }

  form {
      display: grid;
      gap: var(--gap)
  }

  .grid {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 1fr;
  }

  @media(min-width:860px) {
      .grid {
          grid-template-columns: 1fr 1fr
      }
  }

  .field {
      display: flex;
      flex-direction: column;
      gap: 8px
  }

  .full {
      grid-column: 1/-1
  }

  label {
      font-weight: 600;
      font-size: 14px
  }

  .req::after {
      content: " *";
      color: var(--primary)
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
      width: 100%;
      border: 1px solid var(--ring);
      border-radius: 12px;
      padding: 12px 14px;
      background: #fff;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
  }

  textarea {
      min-height: 130px;
      resize: vertical
  }

  input:focus,
  select:focus,
  textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
  }

  .hint {
      font-size: 13px;
      color: var(--muted)
  }

  /* Checkbox group */
  .checks {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
  }

  @media(min-width:600px) {
      .checks {
          grid-template-columns: 1fr 1fr
      }
  }

  .check {
      border: 1px solid var(--ring);
      border-radius: 12px;
      padding: 10px 12px;
      background: #fff;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      transition: border-color .25s, background .25s;
      cursor: pointer;
  }

  /* Khi checkbox được chọn → đổi màu viền hoặc nền */
  .check:has(input:checked) {
      border-color: var(--primary);
      background: color-mix(in srgb, var(--primary) 12%, white);
  }

  .check input {
      margin-top: 3px;
      flex: 0 0 auto
  }

  /* Section titles */
  .legend {
      font-weight: 700;
      margin-top: 6px;
      display: flex;
      align-items: center;
  }

  /* Footer */
  .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      border-top: 1px dashed var(--ring);
      padding-top: 16px;
      margin-top: 8px;
  }

  .btn {
      appearance: none;
      border: 0;
      border-radius: 12px;
      padding: 12px 18px;
      cursor: pointer;
      font-weight: 700;
  }

  .btn-primary {
      background: var(--primary);
      color: #fff
  }

  .btn-ghost {
      background: transparent;
      color: var(--text)
  }

  /* Small helper */
  .inline {
      display: flex;
      gap: 10px
  }

  .inline>* {
      flex: 1
  }

  .badge {
      display: inline-block;
      font-size: 12px;
      color: var(--muted);
      background: #fafafa;
      border: 1px solid var(--ring);
      padding: 2px 8px;
      border-radius: 999px;
      margin-left: 6px;
  }


  /* Collapse (details/summary) */
  .collapse {
      border: 1px solid var(--ring);
      border-radius: 12px;
      background: #fff;
      padding: 0;
  }

  .collapse-summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      font-weight: 700;
      user-select: none;
      font-size: 14px;
  }

  .collapse-summary::-webkit-details-marker {
      display: none
  }

  .collapse .chev {
      margin-left: auto;
      width: 16px;
      height: 16px;
      opacity: .7;
      transition: transform .2s ease;
  }

  /* nội dung bên trong */
  .collapse[open] .checks {
      padding: 12px 14px 16px
  }

  /* xoay mũi tên khi mở */
  .collapse[open] .chev {
      transform: rotate(180deg)
  }

  /* viền khi focus bằng bàn phím */
  .collapse:focus-within {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
      border-color: var(--primary);
  }

  .service-wrapper {
      display: flex;
      flex-direction: column;
      gap: 15px;
  }

  .text-error {
      color: red;
      font-size: 13px;
      margin-left: 2px;
  }