.featured-section {
         background: #f7f5f0
      }

      .featured-car {
         display: grid;
         grid-template-columns: 1fr 1fr;
         border: 1px solid var(--line);
         border-radius: 6px;
         overflow: hidden;
         background: #fff
      }

      .featured-car>img {
         width: 100%;
         height: 100%;
         min-height: 360px;
         object-fit: cover
      }

      .featured-content {
         padding: 28px
      }

      .featured-content h3 {
         font-size: 28px;
         margin: 4px 0 8px
      }

      .featured-copy {
         font-size: 14px;
         color: var(--muted);
         margin-bottom: 18px
      }

      .variant-list {
         border-top: 1px solid var(--line);
         margin-bottom: 18px
      }

      .variant-list div {
         display: flex;
         justify-content: space-between;
         gap: 16px;
         padding: 11px 0;
         border-bottom: 1px solid var(--line);
         font-size: 14px
      }

      .variant-list strong,
      .price-range,
      .trim-chip strong {
         color: var(--red)
      }

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

      .car {
         border-radius: 6px
      }

      .car-body {
         padding: 16px
      }

      .car-top {
         display: flex;
         justify-content: space-between;
         gap: 14px;
         align-items: flex-start
      }

      .car-top h3 {
         margin-top: 2px
      }

      .arrow {
         font-size: 28px;
         line-height: 1;
         color: var(--muted)
      }

      .price-range {
         font-size: 18px;
         font-weight: 700;
         margin: 14px 0 12px
      }

      .trim-chips {
         display: flex;
         gap: 7px;
         flex-wrap: wrap
      }

      .trim-chip {
         border: 1px solid #d9e0e9;
         background: #fff;
         border-radius: 4px;
         padding: 7px 8px;
         display: flex;
         flex-direction: column;
         gap: 2px;
         text-align: left;
         font-size: 11px;
         color: #566173
      }

      .trim-chip strong {
         font-size: 11px
      }

      .trim-chip:hover {
         border-color: var(--red)
      }

      @media(max-width:760px), (min-width:481px) {
         .featured-car {
            grid-template-columns: 1fr
         }

         .featured-car>img {
            min-height: 0;
            aspect-ratio: 1.65
         }

         .featured-content {
            padding: 20px
         }

         .featured-content h3 {
            font-size: 25px
         }

         .cars {
            grid-template-columns: 1fr;
            gap: 12px
         }

         .car {
            display: grid;
            grid-template-columns: 40% 1fr
         }

         .car>img {
            height: 100%;
            min-height: 165px;
            object-fit: cover
         }

         .car-body {
            padding: 14px
         }

         .price-range {
            font-size: 16px;
            margin: 10px 0
         }

         .trim-chips {
            gap: 5px
         }

         .trim-chip {
            padding: 5px 6px;
            font-size: 10px
         }

         .trim-chip strong {
            font-size: 10px
         }
      }

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

      .car {
         display: grid;
         grid-template-columns: 39% 1fr;
         min-height: 190px
      }

      .car>img {
         height: 100%;
         min-height: 190px;
         object-fit: cover
      }

      .car-body {
         padding: 18px 16px
      }

      .car-top h3 {
         font-size: 22px
      }

      .price-range {
         color: var(--red);
         font-size: 18px;
         margin: 7px 0 14px
      }

      .trim-chips {
         gap: 7px
      }

      .trim-chip {
         min-width: 0;
         border-color: #d9e0e9;
         color: #4d5a6d;
         font-size: 12px;
         padding: 8px 10px
      }

      .trim-chip strong {
         display: none
      }

      .featured-carousel {
         position: relative
      }

      .featured-slide {
         display: none;
         position: relative;
         min-height: 455px;
         overflow: hidden;
         border: 1px solid var(--line);
         border-radius: 6px;
         background: #fff;
         padding: 26px 24px 64px
      }

      .featured-slide.is-active {
         display: block
      }

      .featured-slide .featured-content {
         position: relative;
         z-index: 1;
         width: 63%;
         padding: 0
      }

      .featured-slide h3 {
         font-size: 29px;
         margin: 4px 0 7px
      }

      .featured-copy {
         font-size: 14px;
         line-height: 1.45;
         margin-bottom: 11px
      }

      .featured-price {
         color: var(--red);
         font-size: 18px;
         font-weight: 700;
         margin-bottom: 14px
      }

      .featured-slide>img {
         position: absolute;
         right: -8%;
         bottom: 62px;
         width: 55%;
         height: auto;
         aspect-ratio: 1.45;
         object-fit: contain;
         object-position: center;
         mix-blend-mode: multiply
      }

      .featured-slide .variant-list {
         position: absolute;
         left: 24px;
         right: 24px;
         bottom: 70px;
         margin: 0;
         background: #fff;
         z-index: 2
      }

      .featured-slide .btn {
         position: absolute;
         left: 24px;
         right: 24px;
         bottom: 17px;
         width: calc(100% - 48px);
         z-index: 3
      }

      .featured-controls {
         display: flex;
         justify-content: center;
         gap: 9px;
         margin-top: 13px
      }

      .featured-controls button {
         width: 8px;
         height: 8px;
         border: 0;
         border-radius: 50%;
         padding: 0;
         background: #c9ced5
      }

      .featured-controls button.is-active {
         background: var(--red)
      }

      @media(max-width:760px), (min-width:481px) {
         .cars {
            grid-template-columns: 1fr
         }

         .car {
            grid-template-columns: 40% 1fr;
            min-height: 0
         }

         .car>img {
            min-height: 0;
            aspect-ratio: 0.74
         }

         .car-body {
            padding: 16px 14px
         }

         .car-top h3 {
            font-size: 20px
         }

         .price-range {
            font-size: 17px
         }

         .trim-chip {
            font-size: 12px;
            padding: 8px 9px
         }

         .featured-slide {
            min-height: 485px;
            padding: 22px 20px 60px
         }

         .featured-slide .featured-content {
            width: 64%
         }

         .featured-slide h3 {
            font-size: 27px
         }

         .featured-slide>img {
            right: -14%;
            bottom: 135px;
            width: 60%;
            aspect-ratio: 1.2
         }

         .featured-slide .variant-list {
            left: 20px;
            right: 20px;
            bottom: 68px
         }

         .featured-slide .btn {
            left: 20px;
            right: 20px;
            bottom: 15px;
            width: calc(100% - 40px)
         }
      }

      .cars-accordion {
         display: grid;
         grid-template-columns: 1fr;
         gap: 12px
      }

      .car-accordion {
         display: block;
         overflow: hidden;
         border: 1px solid var(--line);
         border-radius: 6px;
         background: #fff
      }

      .car-summary {
         width: 100%;
         padding: 0;
         border: 0;
         background: #fff;
         display: grid;
         grid-template-columns: 34% 1fr auto;
         align-items: stretch;
         text-align: left
      }

      .car-summary>img {
         width: 100%;
         height: 142px;
         object-fit: cover
      }

      .car-summary-content {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         gap: 3px;
         padding: 14px 12px
      }

      .car-summary-content strong {
         font-size: 20px;
         color: var(--ink)
      }

      .from-price {
         font-size: 13px;
         color: var(--muted);
         margin-top: 3px
      }

      .from-price b {
         color: var(--red);
         font-size: 16px
      }

      .variant-count {
         font-size: 12px;
         color: var(--muted)
      }

      .accordion-arrow {
         display: grid;
         place-items: center;
         width: 48px;
         color: var(--muted);
         font-size: 25px;
         transition: transform .18s ease
      }

      .car-accordion.is-open .accordion-arrow {
         transform: rotate(180deg);
         color: var(--red)
      }

      .car-panel {
         display: none;
         padding: 0 14px 14px;
         border-top: 1px solid var(--line)
      }

      .car-accordion.is-open .car-panel {
         display: block
      }

      .trim-row {
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 12px 2px;
         border: 0;
         border-bottom: 1px solid var(--line);
         background: #fff;
         text-align: left;
         color: var(--ink)
      }

      .trim-row strong {
         color: var(--red)
      }

      .car-panel .btn {
         margin-top: 14px
      }

      @media(max-width:760px), (min-width:481px) {
         .car-summary {
            grid-template-columns: 39% 1fr auto
         }

         .car-summary>img {
            height: 154px
         }

         .car-summary-content {
            padding: 13px 11px
         }

         .car-summary-content strong {
            font-size: 20px
         }

         .accordion-arrow {
            width: 43px
         }

         .car-panel {
            padding: 0 14px 14px
         }
      }

      #chon-xe {
         background:
            radial-gradient(circle at 12% 8%, #fff 0, transparent 28%),
            linear-gradient(135deg, #f7f5f0 0%, #f3f5f7 100%)
      }

      #chon-xe>.wrap {
         width: min(900px, 92%);
         padding: 32px;
         border: 1px solid #e0e5eb;
         border-radius: 14px;
         background: #fff;
         box-shadow: 0 18px 55px #17243b12, 0 2px 8px #17243b0a
      }

      #chon-xe .intro {
         margin-bottom: 22px
      }

      #chon-xe .intro h2 {
         font-size: clamp(28px, 4vw, 38px);
         letter-spacing: -1.2px
      }

      #chon-xe .intro p {
         margin-top: 4px;
         font-size: 16px
      }

      .model-rail {
         display: grid;
         grid-template-columns: repeat(10, minmax(104px, 1fr));
         gap: 0;
         overflow-x: auto;
         padding: 0;
         border-bottom: 1px solid var(--line);
         scrollbar-width: none;
         scroll-snap-type: x proximity
      }

      .model-rail::-webkit-scrollbar {
         display: none
      }

      .model-tab {
         position: relative;
         min-width: 104px;
         padding: 8px 6px 13px;
         border: 0;
         background: #fff;
         color: var(--muted);
         font-size: 12px;
         white-space: nowrap;
         scroll-snap-align: start;
         transition: color .2s ease, background-color .2s ease, transform .2s ease
      }

      .model-tab::after {
         content: '';
         position: absolute;
         left: 18%;
         right: 18%;
         bottom: -1px;
         height: 3px;
         border-radius: 3px 3px 0 0;
         background: var(--red);
         transform: scaleX(0);
         transition: transform .25s cubic-bezier(.2,.8,.2,1)
      }

      .model-tab:hover {
         color: var(--ink);
         background: #fafbfc
      }

      .model-tab img {
         width: 94px;
         height: 52px;
         object-fit: contain;
         margin: 0 auto 6px;
         transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease
      }

      .model-tab.is-active {
         color: var(--red);
         font-weight: 700
      }

      .model-tab.is-active::after {
         transform: scaleX(1)
      }

      .model-tab.is-active img {
         transform: translateY(-3px) scale(1.06);
         filter: drop-shadow(0 6px 7px #16243b20)
      }

      .model-detail {
         display: none;
         padding-top: 28px
      }

      .model-detail.is-active {
         display: block;
         animation: model-in .38s cubic-bezier(.2,.8,.2,1) both
      }

      @keyframes model-in {
         from {
            opacity: 0;
            transform: translateY(9px)
         }

         to {
            opacity: 1;
            transform: translateY(0)
         }
      }

      .model-heading .make {
         color: var(--red);
         font-size: 11px;
         font-weight: 700;
         letter-spacing: 1.35px;
         text-transform: uppercase
      }

      .model-heading h3 {
         font-size: clamp(31px, 5vw, 42px);
         margin: 2px 0 1px;
         letter-spacing: -1.4px
      }

      .model-heading p {
         color: var(--muted);
         font-size: 16px
      }

      .model-hero-image {
         width: 100%;
         height: 340px;
         object-fit: contain;
         margin: 5px 0 0;
         filter: drop-shadow(0 18px 13px #17243b20)
      }

      .model-specs {
         display: flex;
         justify-content: center;
         gap: 30px;
         flex-wrap: wrap;
         padding: 14px 12px 19px;
         font-size: 13px;
         color: #3f4c5e;
         border-bottom: 1px solid var(--line)
      }

      .model-specs span {
         display: inline-flex;
         align-items: center;
         gap: 7px
      }

      .model-specs span::first-letter {
         color: var(--red)
      }

      .model-trim {
         width: 100%;
         display: grid;
         grid-template-columns: 1fr auto 18px;
         gap: 12px;
         align-items: center;
         border: 0;
         border-bottom: 1px solid var(--line);
         background: #fff;
         padding: 14px 12px;
         text-align: left;
         transition: background-color .18s ease, padding-left .18s ease
      }

      .model-trim:hover {
         padding-left: 17px;
         background: #fff7f8
      }

      .model-trim strong,
      .model-trim small {
         display: block
      }

      .model-trim small {
         font-size: 12px;
         color: var(--muted);
         margin-top: 2px
      }

      .model-trim b {
         color: var(--red);
         font-size: 21px;
         white-space: nowrap
      }

      .model-trim i {
         font-size: 26px;
         font-style: normal;
         color: var(--muted)
      }

      .model-detail>.btn {
         min-height: 52px;
         margin-top: 18px;
         border-radius: 7px;
         font-size: 17px;
         box-shadow: 0 9px 20px #eb0a2828;
         transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease
      }

      .model-detail>.btn::after {
         content: '\203A';
         font-size: 25px;
         line-height: 0
      }

      .model-detail>.btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 12px 24px #eb0a2835
      }

      .model-benefits {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 8px;
         margin-top: 24px;
         padding-top: 22px;
         border-top: 1px solid var(--line)
      }

      .model-benefit {
         display: grid;
         justify-items: center;
         gap: 5px;
         color: #4a5769;
         font-size: 12px;
         line-height: 1.35;
         text-align: center
      }

      .model-benefit b {
         display: grid;
         place-items: center;
         width: 34px;
         height: 34px;
         border-radius: 50%;
         background: #f6f7f9;
         color: var(--ink);
         font-size: 17px
      }

      @media(max-width:760px), (min-width:481px) {
         #chon-xe>.wrap {
            width: min(100% - 24px, 900px);
            padding: 22px 16px;
            border-radius: 10px
         }

         #chon-xe .intro {
            margin-bottom: 16px
         }

         #chon-xe .intro h2 {
            font-size: 28px
         }

         .model-rail {
            grid-template-columns: repeat(10, 92px);
            margin-left: -16px;
            margin-right: -16px;
            padding-left: 10px;
            padding-right: 10px
         }

         .model-tab {
            min-width: 92px;
            padding-left: 3px;
            padding-right: 3px
         }

         .model-tab img {
            width: 78px;
            height: 45px
         }

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

         .model-hero-image {
            height: 225px;
            margin: 2px 0 0
         }

         .model-specs {
            justify-content: flex-start;
            gap: 10px 18px;
            padding-left: 3px;
            padding-right: 3px;
            font-size: 11px
         }

         .model-trim {
            padding: 13px 1px
         }

         .model-trim b {
            font-size: 17px
         }

         .model-benefits {
            gap: 2px;
            margin-top: 19px;
            padding-top: 18px
         }

         .model-benefit {
            font-size: 10px
         }

         .model-benefit b {
            width: 30px;
            height: 30px;
            font-size: 15px
         }
      }

      @media(prefers-reduced-motion:reduce) {
         .model-detail.is-active {
            animation: none
         }

         .model-tab,
         .model-tab::after,
         .model-tab img,
         .model-trim,
         .model-detail>.btn {
            transition: none
         }
      }
   
      /* compact vehicle directory */
      #chon-xe>.wrap {
         max-width: 940px
      }

      .model-rail {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 0 28px;
         padding: 0;
         overflow: visible;
         border-top: 1px solid var(--line)
      }

      .model-tab {
         position: relative;
         width: 100%;
         min-width: 0;
         min-height: 132px;
         display: grid;
         grid-template-columns: 150px minmax(0, 1fr) 18px;
         align-items: center;
         gap: 18px;
         padding: 14px 4px;
         border: 0;
         border-bottom: 1px solid var(--line);
         border-radius: 0;
         background: transparent;
         color: var(--ink);
         text-align: left
      }

      .model-tab::after {
         display: none
      }

      .model-tab:hover,
      .model-tab.is-active {
         background: #fafafa
      }

      .model-tab img {
         width: 150px;
         height: 100px;
         object-fit: contain;
         transition: none;
         mix-blend-mode: multiply
      }

      .model-tab:hover img,
      .model-tab.is-active img {
         transform: none
      }

      .model-list-copy {
         min-width: 0
      }

      .model-list-name {
         display: block;
         font-size: 22px;
         font-weight: 700;
         line-height: 1.2;
         letter-spacing: -.45px
      }

      .model-list-price {
         display: block;
         margin-top: 5px;
         color: var(--muted);
         font-size: 17px;
         line-height: 1.25
      }

      .model-list-price strong {
         color: var(--red);
         font-size: 21px
      }

      .model-list-meta {
         display: block;
         margin-top: 3px;
         color: var(--muted);
         font-size: 13px
      }

      .model-list-arrow {
         color: #647084;
         font-size: 30px;
         font-weight: 300;
         line-height: 1
      }

      .model-details {
         margin-top: 24px
      }

      @media(max-width:760px), (min-width:481px) {
         #chon-xe>.wrap {
            width: 100%;
            padding: 24px 16px;
            border-radius: 0
         }

         #chon-xe .intro {
            margin-bottom: 14px
         }

         .model-rail {
            grid-template-columns: 1fr;
            margin: 0;
            padding: 0
         }

         .model-tab {
            grid-template-columns: 36% minmax(0, 1fr) 16px;
            min-height: 112px;
            gap: 12px;
            padding: 10px 0
         }

         .model-tab img {
            width: 100%;
            height: 90px
         }

         .model-list-name {
            font-size: clamp(19px, 5.7vw, 24px)
         }

         .model-list-price {
            font-size: 16px
         }

         .model-list-price strong {
            font-size: clamp(19px, 5.4vw, 23px)
         }

         .model-list-meta {
            font-size: 13px
         }

         .model-list-arrow {
            font-size: 27px
         }
      }

      @media(max-width:380px) {
         .model-tab {
            grid-template-columns: 34% minmax(0, 1fr) 14px;
            gap: 9px
         }

         .model-list-name {
            font-size: 19px
         }

         .model-list-price,
         .model-list-price strong {
            font-size: 17px
         }

         .model-list-meta {
            font-size: 12px
         }
      }

   
      /* hide repeated model heading below the vehicle list */
      .model-details .model-heading {
         display: none
      }