:root {
         --red: #eb0a28;
         --ink: #101d30;
         --muted: #647084;
         --line: #e5e9ee;
         --soft: #f4f6f8
      }

      * {
         box-sizing: border-box
      }

      html {
         scroll-behavior: smooth;
         scroll-padding-top: 85px
      }

      body {
         margin: 0;
         color: var(--ink);
         font: 16px/1.5 Arial, Helvetica, sans-serif;
         background: #fff
      }

      button,
      input,
      select,
      textarea {
         font: inherit
      }

      a {
         color: inherit;
         text-decoration: none
      }

      button,
      a,
      input,
      select,
      textarea {
         -webkit-tap-highlight-color: transparent
      }

      button {
         cursor: pointer
      }

      img {
         max-width: 100%;
         display: block
      }

      svg {
         width: 27px;
         height: 27px;
         flex-shrink: 0
      }

      h1,
      h2,
      h3,
      p {
         margin: 0
      }

      h1 {
         font-size: clamp(28px, 3vw, 40px);
         line-height: 1.2;
         letter-spacing: -1.2px
      }

      h2 {
         font-size: 27px;
         line-height: 1.3;
         letter-spacing: -.7px
      }

      h3 {
         font-size: 21px;
         line-height: 1.3
      }

      .wrap {
         width: min(1120px, 92%);
         margin: auto
      }

      .muted {
         color: var(--muted)
      }

      .eyebrow {
         font-size: 12px;
         font-weight: 700;
         letter-spacing: 1.5px;
         color: var(--muted);
         margin-bottom: 10px
      }

      .btn {
         min-height: 45px;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         gap: 10px;
         padding: 10px 24px;
         border: 1px solid var(--red);
         border-radius: 4px;
         background: var(--red);
         color: white;
         font-weight: 600;
         font-size: 15px;
         text-align: center
      }

      .btn:hover {
         background: #ce0923;
         border-color: #ce0923
      }

      .btn.outline {
         background: white;
         color: var(--red)
      }

      .btn.outline:hover {
         background: #fff4f5
      }

      .btn.light {
         background: white;
         border-color: #cad3df;
         color: var(--ink)
      }

      .full {
         width: 100%
      }

      :focus-visible {
         outline: 3px solid #2172cc;
         outline-offset: 3px
      }

      .brand {
         display: flex;
         align-items: center;
         gap: 12px
      }

      .brand img {
         width: 48px
      }

      .brand strong {
         color: var(--red);
         font-size: 22px;
         letter-spacing: .4px;
         line-height: 1.1;
         display: block
      }

      .brand small {
         font-size: 10px;
         letter-spacing: 1.6px;
         display: block;
         margin-top: 3px
      }

      header {
         height: 68px;
         background: #fffffffa;
         border-bottom: 1px solid var(--line);
         position: sticky;
         top: 0;
         z-index: 5
      }

      header .wrap {
         display: flex;
         height: 100%;
         align-items: center;
         justify-content: space-between
      }

      nav {
         display: flex;
         gap: 45px;
         font-size: 14px
      }

      nav a:hover {
         color: var(--red)
      }

      header .btn {
         min-height: 39px;
         font-weight: 400
      }

      .hero {
         position: relative;
         overflow: hidden;
         background: #f1f1ed
      }

      .hero-art {
         position: absolute;
         right: 0;
         top: 0;
         height: 100%;
         width: 64%;
         object-fit: cover;
         object-position: center
      }

      .hero:after {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(90deg, #f7f5f0 0%, #f7f5f0 30%, #f7f5f0dd 38%, transparent 54%);
         pointer-events: none
      }

      .hero .wrap {
         position: relative;
         z-index: 1;
         min-height: 485px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding-top: 48px;
         padding-bottom: 28px
      }

      .hero-copy {
         max-width: 520px
      }

      .hero-copy>p {
         margin: 12px 0 22px;
         color: #536176
      }

      .hero.hero-team {
         background: #f7f5f0
      }

      .hero-team .wrap {
         min-height: 0;
         display: block;
         padding-top: 48px;
         padding-bottom: 34px
      }

      .hero-team .hero-art {
         position: static;
         width: 100%;
         height: auto;
         aspect-ratio: 1.56;
         object-fit: cover;
         object-position: center;
         display: block;
         margin: 25px 0 17px
      }

      .hero-team:after {
         display: none
      }

      .hero-address {
         font-size: 13px;
         color: #536176;
         margin: 0 0 18px;
         max-width: 430px
      }

      .hero-team .actions {
         display: grid;
         grid-template-columns: 1fr 1fr
      }

      .hero-team .actions .btn {
         padding: 10px 8px
      }

      @media(max-width:760px), (min-width:481px) {
         .hero-team .wrap {
            padding-top: 42px;
            padding-bottom: 27px
         }

         .hero-team .hero-copy>p {
            margin-bottom: 20px
         }

         .hero-team .hero-art {
            margin-top: 22px;
            margin-bottom: 16px;
            aspect-ratio: 1.42
         }

         .hero-team .actions {
            gap: 10px
         }

         .hero-team .actions .btn {
            font-size: 14px
         }
      }

      .actions {
         display: flex;
         gap: 12px;
         flex-wrap: wrap
      }

      .perks {
         display: flex;
         gap: 30px;
         margin-top: 60px
      }

      .perk {
         max-width: 155px
      }

      .perk svg {
         margin-bottom: 5px
      }

      .perk strong {
         display: block;
         font-size: 13px
      }

      .perk small {
         color: var(--muted);
         font-size: 11px
      }

      section.block {
         padding: 30px 0;
         border-bottom: 1px solid var(--line)
      }

      .intro {
         margin-bottom: 20px
      }

      .intro>p:last-child {
         color: #566173;
         margin-top: 4px
      }

      .cars {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 14px
      }

      .car {
         border: 1px solid var(--line);
         border-radius: 6px;
         overflow: hidden;
         background: white
      }

      .car>img {
         width: 100%;
         aspect-ratio: 1.53;
         object-fit: cover
      }

      .car-body {
         padding: 13px 17px 16px
      }

      .car .make {
         font-size: 11px;
         font-weight: 600;
         color: #536176;
         letter-spacing: .6px
      }

      .tag {
         display: inline-block;
         background: #f0f2f5;
         border-radius: 30px;
         padding: 3px 15px;
         font-size: 13px;
         color: #536176;
         margin: 6px 0
      }

      .car p {
         font-size: 13px;
         color: #6b7686;
         margin-bottom: 12px
      }

      .car .btn {
         min-height: 42px
      }

      .two-col {
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 28px;
         align-items: end
      }

      .picture {
         width: 100%;
         border-radius: 5px;
         object-fit: cover;
         aspect-ratio: 1.93
      }

      .panel {
         border: 1px solid var(--line);
         border-radius: 5px;
         padding: 23px
      }

      .cost-row {
         display: flex;
         gap: 22px;
         align-items: center;
         padding: 13px 0;
         border-bottom: 1px solid var(--line)
      }

      .cost-row:first-child {
         padding-top: 0
      }

      .cost-row:nth-child(3) {
         border: 0;
         padding-bottom: 25px
      }

      .icon-box {
         width: 64px;
         height: 56px;
         display: grid;
         place-items: center;
         background: var(--soft);
         border-radius: 7px;
         flex-shrink: 0
      }

      .cost-row strong {
         display: block;
         font-size: 15px
      }

      .cost-row small {
         display: block;
         color: #738093;
         font-size: 13px;
         margin-top: 3px
      }

      .contact-grid {
         grid-template-columns: 1fr 1.07fr;
         align-items: stretch
      }

      .contact-grid .picture {
         aspect-ratio: 1.73;
         object-position: top
      }

      .contact-actions {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px;
         margin-top: 12px
      }

      .contact-actions .btn {
         padding: 8px;
         font-size: 14px
      }

      .zalo-mark {
         background: #0088ff;
         color: white;
         border-radius: 50%;
         display: inline-grid;
         place-items: center;
         width: 26px;
         height: 26px;
         font-size: 9px;
         font-weight: bold
      }

      .form-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 13px 16px
      }

      .field {
         display: flex;
         flex-direction: column;
         gap: 5px;
         min-width: 0
      }

      .field label {
         font-size: 13px;
         color: #364254
      }

      .required {
         color: var(--red)
      }

      input,
      select,
      textarea {
         width: 100%;
         border: 1px solid #d9e0e9;
         border-radius: 4px;
         background: #fff;
         color: var(--ink);
         font-size: 13px;
         padding: 11px 12px;
         min-height: 40px
      }

      input::placeholder,
      textarea::placeholder {
         color: #98a0ad
      }

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

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

      .consent {
         display: flex;
         gap: 9px;
         align-items: flex-start;
         font-size: 12px;
         color: #6d7888;
         margin: 14px 0
      }

      input[type=checkbox] {
         width: 17px;
         height: 17px;
         min-height: 0;
         margin: 1px 0;
         accent-color: var(--red);
         flex-shrink: 0
      }

      .privacy {
         text-align: center;
         color: #788396;
         font-size: 12px;
         margin-top: 13px
      }

      .status {
         font-size: 13px;
         margin-top: 12px;
         color: #b20a23
      }

      .status:empty {
         display: none
      }

      footer .wrap {
         display: flex;
         justify-content: space-between;
         align-items: center;
         min-height: 120px;
         padding-right: 75px
      }

      footer p {
         font-size: 12px;
         color: #7b8594
      }

      .floating {
         position: fixed;
         right: 22px;
         bottom: 22px;
         background: #0088ff;
         border: 4px solid #dcf0ff;
         border-radius: 50%;
         width: 64px;
         height: 64px;
         z-index: 6;
         display: grid;
         place-items: center
      }

      .floating span {
         background: white;
         color: #0088ff;
         border-radius: 50%;
         width: 39px;
         height: 39px;
         display: grid;
         place-items: center;
         font-size: 12px;
         font-weight: bold
      }

      .skip {
         position: fixed;
         top: -60px;
         left: 12px;
         z-index: 10;
         background: white;
         padding: 10px
      }

      .skip:focus {
         top: 10px
      }

      @media(min-width:1100px) and (max-width:480px) {
         section.block {
            padding: 36px 0
         }

         .car-body {
            padding: 17px 19px 18px
         }

         .hero-copy {
            max-width: 540px
         }
      }

      @media(max-width:760px), (min-width:481px) {
         header {
            height: 64px
         }

         nav {
            gap: 18px;
            font-size: 12px
         }

         .brand strong {
            font-size: 18px
         }

         .brand img {
            width: 38px
         }

         header .btn {
            padding: 8px 12px;
            font-size: 12px
         }

         .hero .wrap {
            min-height: 500px;
            justify-content: flex-start;
            padding-top: 30px
         }

         .hero-art {
            width: 100%;
            height: 295px;
            top: auto;
            bottom: 0;
            object-position: center 61%
         }

         .hero:after {
            background: linear-gradient(180deg, #f7f5f0 0%, #f7f5f0 37%, transparent 65%)
         }

         .hero-copy {
            max-width: 100%
         }

         .hero-copy>p {
            font-size: 14px;
            max-width: 290px
         }

         .hero h1 {
            font-size: 30px
         }

         .perks {
            display: none
         }

         .cars {
            grid-template-columns: repeat(2, 1fr)
         }

         .two-col {
            grid-template-columns: 1fr;
            gap: 20px
         }

         .car-body {
            padding: 12px
         }

         .car h3 {
            font-size: 18px
         }

         h2 {
            font-size: 24px
         }

         .panel {
            padding: 20px
         }

         .contact-grid .picture {
            aspect-ratio: 1.73
         }

         footer .wrap {
            align-items: flex-start;
            gap: 20px;
            padding-top: 25px;
            padding-bottom: 25px
         }

         footer p {
            max-width: 130px
         }

         .floating {
            width: 58px;
            height: 58px;
            right: 14px;
            bottom: 14px
         }
      }

      @media(max-width:480px), (min-width:481px) {
         nav {
            display: none
         }

         .wrap {
            width: 92%
         }

         .cars {
            gap: 10px
         }

         .car-body {
            padding: 10px
         }

         .car .btn {
            font-size: 12px;
            padding: 8px 5px;
            min-height: 40px
         }

         .car p {
            font-size: 12px
         }

         .tag {
            font-size: 11px
         }

         .form-grid {
            grid-template-columns: 1fr
         }

         .hero .btn {
            font-size: 13px;
            padding: 10px 15px
         }

         .hero-art {
            height: 260px
         }

         .hero .wrap {
            min-height: 490px
         }

         .hero-copy>p {
            max-width: 100%
         }

         .car h3 {
            font-size: 17px
         }

         footer p {
            display: none
         }
      }

      @media(prefers-reduced-motion:reduce) {
         html {
            scroll-behavior: auto
         }
      }