/* vehicle detail bottom drawer */
      body.drawer-open {
         overflow: hidden
      }

      .model-drawer-backdrop {
         position: fixed;
         inset: 0;
         z-index: 50;
         background: rgba(16, 29, 48, .46);
         opacity: 0;
         visibility: hidden;
         transition: opacity .2s ease, visibility .2s ease
      }

      .model-drawer {
         position: fixed;
         left: 50%;
         bottom: 0;
         z-index: 51;
         width: min(760px, 100%);
         max-height: min(88vh, 900px);
         display: flex;
         flex-direction: column;
         background: #fff;
         border-radius: 18px 18px 0 0;
         box-shadow: 0 -16px 50px rgba(16, 29, 48, .18);
         transform: translate(-50%, 105%);
         transition: transform .28s ease;
         overflow: hidden
      }

      .model-drawer-backdrop.is-open {
         opacity: 1;
         visibility: visible
      }

      .model-drawer.is-open {
         transform: translate(-50%, 0)
      }

      .model-drawer-head {
         position: relative;
         flex: 0 0 auto;
         display: flex;
         align-items: center;
         justify-content: space-between;
         min-height: 56px;
         padding: 12px 16px;
         border-bottom: 1px solid var(--line);
         background: #fff
      }

      .model-drawer-head::before {
         content: '';
         position: absolute;
         top: 7px;
         left: 50%;
         width: 38px;
         height: 4px;
         border-radius: 4px;
         background: #d7dce3;
         transform: translateX(-50%)
      }

      .model-drawer-title {
         padding-top: 5px;
         font-size: 16px;
         font-weight: 700
      }

      .model-drawer-close {
         width: 36px;
         height: 36px;
         display: grid;
         place-items: center;
         border: 0;
         border-radius: 50%;
         background: #f3f5f7;
         color: var(--ink);
         font-size: 25px;
         line-height: 1
      }

      .model-drawer-scroll {
         overflow-y: auto;
         overscroll-behavior: contain;
         -webkit-overflow-scrolling: touch
      }

      .model-drawer .model-details {
         margin: 0;
         padding: 18px 22px 28px
      }

      .model-drawer .model-heading {
         display: block
      }

      .model-drawer .model-heading h3 {
         font-size: 30px
      }

      .model-drawer .model-hero-image {
         height: min(34vh, 300px)
      }

      @media(max-width:760px), (min-width:481px) {
         .model-drawer {
            max-height: 92dvh;
            border-radius: 16px 16px 0 0
         }

         .model-drawer .model-details {
            padding: 14px 16px 26px
         }

         .model-drawer .model-heading h3 {
            font-size: 28px
         }

         .model-drawer .model-hero-image {
            height: min(33dvh, 270px)
         }
      }

      @media(prefers-reduced-motion:reduce) {
         .model-drawer,
         .model-drawer-backdrop {
            transition: none
         }
      }

   
      /* smooth quote flow */
      .quote-flow-status {
         position: fixed;
         left: 50%;
         bottom: 22px;
         z-index: 60;
         display: flex;
         align-items: center;
         gap: 10px;
         max-width: calc(100% - 32px);
         padding: 12px 16px;
         border-radius: 8px;
         background: var(--ink);
         color: #fff;
         font-size: 14px;
         font-weight: 600;
         opacity: 0;
         pointer-events: none;
         transform: translate(-50%, 12px);
         transition: opacity .18s ease, transform .18s ease
      }

      .quote-flow-status.is-visible {
         opacity: 1;
         transform: translate(-50%, 0)
      }

      .quote-flow-spinner {
         width: 17px;
         height: 17px;
         flex: 0 0 auto;
         border: 2px solid #ffffff55;
         border-top-color: #fff;
         border-radius: 50%;
         animation: quote-spin .7s linear infinite
      }

      .quote-flow-status.is-ready .quote-flow-spinner {
         animation: none;
         border: 0
      }

      .quote-flow-status.is-ready .quote-flow-spinner::before {
         content: '✓';
         display: block;
         font-size: 17px;
         line-height: 17px
      }

      #consultation.form-ready {
         outline: 3px solid #eb0a2825;
         outline-offset: 5px;
         transition: outline-color .45s ease
      }

      #consultation.is-submitting button[type=submit] {
         cursor: wait;
         opacity: .86
      }

      @keyframes quote-spin {
         to { transform: rotate(360deg) }
      }

      @media(prefers-reduced-motion:reduce) {
         .quote-flow-status,
         #consultation.form-ready {
            transition: none
         }

         .quote-flow-spinner {
            animation-duration: 1.2s
         }
      }

   
      /* compact comparison drawer C */
      .model-drawer {
         max-height: min(68dvh, 620px)
      }

      .model-drawer .model-details {
         padding: 8px 16px 18px
      }

      .model-drawer .model-heading,
      .model-drawer .model-hero-image,
      .model-drawer .model-specs,
      .model-drawer .model-benefits {
         display: none
      }

      .model-version-table-head,
      .model-drawer .model-trim {
         display: grid;
         grid-template-columns: 24px minmax(58px, .65fr) minmax(92px, 1.25fr) auto;
         gap: 9px;
         align-items: center
      }

      .model-version-table-head {
         padding: 10px 8px;
         background: #f3f5f7;
         color: #566173;
         font-size: 11px;
         line-height: 1.25
      }

      .model-version-table-head span:last-child {
         text-align: right
      }

      .model-drawer .model-trim {
         min-height: 70px;
         padding: 11px 8px;
         transition: background-color .16s ease
      }

      .model-drawer .model-trim:hover {
         padding-left: 8px
      }

      .model-drawer .model-trim::before {
         content: '';
         width: 18px;
         height: 18px;
         border: 1.5px solid #758195;
         border-radius: 50%;
         box-shadow: inset 0 0 0 4px #fff
      }

      .model-drawer .model-trim.is-selected {
         background: #fff3f5
      }

      .model-drawer .model-trim.is-selected::before {
         border-color: var(--red);
         background: var(--red)
      }

      .model-drawer .model-trim>span {
         display: contents
      }

      .model-drawer .model-trim strong {
         grid-column: 2;
         color: var(--ink);
         font-size: 15px
      }

      .model-drawer .model-trim small {
         grid-column: 3;
         margin: 0;
         font-size: 12px;
         line-height: 1.35
      }

      .model-drawer .model-trim b {
         grid-column: 4;
         color: var(--red);
         font-size: 17px;
         text-align: right
      }

      .model-drawer .model-trim i {
         display: none
      }

      .model-select-hint {
         margin: 9px 2px 0;
         color: var(--muted);
         font-size: 12px;
         text-align: center
      }

      .model-drawer .model-detail>.btn {
         min-height: 48px;
         margin-top: 12px;
         box-shadow: none;
         transition: background-color .16s ease, box-shadow .16s ease
      }

      .model-drawer .model-detail>.btn:disabled {
         border-color: #d9dee5;
         background: #d9dee5;
         color: #7b8593;
         cursor: default
      }

      .model-drawer .model-detail>.btn.is-next-action {
         box-shadow: 0 0 0 4px #eb0a2818
      }

      .model-drawer.is-preparing .model-drawer-scroll {
         pointer-events: none;
         opacity: .72
      }

      .quote-flow-status {
         width: min(420px, calc(100% - 32px));
         display: grid;
         grid-template-columns: 20px minmax(0, 1fr);
         padding: 13px 15px
      }

      .quote-flow-copy {
         min-width: 0
      }

      .quote-flow-text,
      .quote-flow-step {
         display: block
      }

      .quote-flow-step {
         margin-top: 2px;
         color: #cbd2dc;
         font-size: 11px;
         font-weight: 400
      }

      .quote-flow-progress {
         grid-column: 1 / -1;
         height: 3px;
         margin-top: 9px;
         overflow: hidden;
         border-radius: 3px;
         background: #ffffff2e
      }

      .quote-flow-progress span {
         display: block;
         width: 0;
         height: 100%;
         background: #fff;
         transition: width .32s ease
      }

      .field.field-confirmed,
      .field.field-next-action {
         position: relative;
         padding: 8px;
         margin: -8px;
         border-radius: 7px
      }

      .field.field-confirmed {
         background: #f4f7f5;
         box-shadow: inset 0 0 0 1px #b8cbbf
      }

      .field.field-confirmed label::after {
         content: '  ✓ Đã chọn';
         color: #39704a;
         font-size: 11px;
         font-weight: 700
      }

      .field.field-next-action {
         background: #fff4f5;
         box-shadow: 0 0 0 3px #eb0a2824
      }

      .next-step-hint {
         color: var(--red);
         font-size: 11px;
         font-weight: 600
      }

      @media(max-width:480px), (min-width:481px) {
         .model-drawer {
            max-height: 70dvh
         }

         .model-version-table-head,
         .model-drawer .model-trim {
            grid-template-columns: 22px 58px minmax(78px, 1fr) 82px;
            gap: 6px
         }

         .model-drawer .model-trim b {
            font-size: 15px
         }
      }

   
      /* prevent iOS focus zoom */
      @media(max-width:760px), (min-width:481px) {
         input,
         select,
         textarea {
            font-size: 16px
         }
      }