@font-face {
      font-family: Avo;
      src: url(fonts/UTM\ Avo.ttf);
    }

    @font-face {
      font-family: Avo;
      src: local(avo bold), url(fonts/UTM\ AvoBold.ttf);
      font-weight: 700;
      font-style: normal;
    }

    @font-face {
      font-family: Colossalis;
      src: url(fonts/UTM-Colossalis.ttf);
    }


    /* Vùng riêng của component */
    #qdnd-slide3 {
      --bg: #f6efe6;
      --paper: #f2e7d9;
      --card: #fffdf9;
      --ink: #3b2e2a;
      --red: #c4142d;
      --gold: #f5cf62;
      --green: #15803d;
      --line: #e5d7c7;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--ink);
    }

    /* Dải timeline phía trên */
    #qdnd-slide3 .ribbon {
      position: relative;
      padding: 20px 0 64px;
      overflow: hidden;

    }

    #qdnd-slide3 .ribbon:after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .25;
      background:
        radial-gradient(circle at 20% 30%, #fff3 0 2px, transparent 3px) 0 0/48px 48px,
        radial-gradient(circle at 70% 60%, #fff2 0 2px, transparent 3px) 0 0/64px 64px;
    }

    #qdnd-slide3 .timeline {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    #qdnd-slide3 .arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: rgba(255, 255, 255, .25);
      border: 1px solid #fff6;
      color: #fff;
      cursor: pointer;
      user-select: none;
      backdrop-filter: blur(6px);
      transition: transform .2s ease, background .2s ease;
    }

    #qdnd-slide3 .arrow:hover {
      transform: scale(1.05);
      background: rgba(255, 255, 255, .35)
    }

    #qdnd-slide3 .arrow svg {
      width: 22px;
      height: 22px;
      fill: #fff
    }

    #qdnd-slide3 .track {
      position: relative;
      overflow: hidden;
      scroll-behavior: smooth;
      flex: 1 1 auto;
      padding: 30px 6px
    }

    #qdnd-slide3 .years {
      display: flex;
      gap: 22px;
      align-items: center
    }

    #qdnd-slide3 .dot {
      --size: 140px;
      width: var(--size);
      height: var(--size);
      border-radius: 999px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 8px;
      line-height: 1.05;
      background: #FFDAA9;
      font-weight: 800;
      /* border:3px solid #ffffff88;  */
      border: 1px dashed #176ded;
      ;
      box-shadow: 13px 17px 16px 1px rgb(0 0 0 / 29%), 0 1px 0 #ffffff77;
    }

    #qdnd-slide3 .dot small {
      display: block;
      font-size: 22px;
      letter-spacing: .3px;
      color: #C1272D;
    }

    #qdnd-slide3 .dot b {
      display: block;
      font-size: 12px;
      font-weight: bold;
      line-height: 1.2;
      color: #006837;
      font-family: Avo;
      text-transform: uppercase;
      margin-top: -40px;
    }

    #qdnd-slide3 .dot.active {
      --size: 190px;
      color: #fff;
      border: 3px solid #fff;
      background: #ED1C24;
      position: relative;
    }

    #qdnd-slide3 .dot.active:before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 999px;
      background: linear-gradient(180deg, #c2182b, #e53935);
      z-index: -1;
      box-shadow: 0 10px 22px rgba(0, 0, 0, .30);
    }

    #qdnd-slide3 .dot.active small {
      color: #fff
    }

    #qdnd-slide3 .dot.active b {
      font-size: 16px;
      color: #FFFF00;
      padding-bottom: 20px;
    }

    /* Khối nội dung dưới */
    #qdnd-slide3 .section {
      max-width: 1100px;
      margin: -80px auto 0px;
    }

    #qdnd-slide3 .title-decor {
      background: var(--paper);
      border: 1px solid #e7d8c7;
      border-left: 8px solid var(--red);
      padding: 14px 18px;
      text-align: center;
      color: var(--red);
      font-weight: 900;
      font-size: clamp(20px, 3vw, 32px);
      letter-spacing: 2px;
      text-transform: uppercase;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    }

    #qdnd-slide3 .card {
      background: #F2DFCE;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 20px;
      padding: 22px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
    }

    #qdnd-slide3 .card1 {
      background: #F2DFCE;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
      text-align: center;
      font-family: Americana;
      color: #C1272D;
      font-size: 2em;
      text-transform: uppercase;
      padding-top: 20px;
      letter-spacing: 1.4px;
    }

    #qdnd-slide3 .card .left {
      border-right: 1px dashed var(--line);
      padding-right: 16px;
      text-align: center;
    }

    #qdnd-slide3 .big-year {
      font: 900 clamp(38px, 6vw, 56px)/0.9 "Segoe UI", system-ui;
      color: var(--red)
    }

    #qdnd-slide3 .sub {
      margin-top: 8px;
      text-transform: uppercase;
      font-weight: 900;
      /* color: var(--green); */
      color: #C1272D;
      font-family: avo;
      font-size: 1.5em;
    }

    #qdnd-slide3 .card p {
      margin: 0;
      font-size: 16px;
      line-height: 1.7;
      color: #443b36;
      font-family: avo;
      text-align: justify;
    }

    #qdnd-slide3 .js-body {
      height: 300px;
      overflow-y: auto;
    }

    /* Độ rộng thanh cuộn */
    #qdnd-slide3 .js-body::-webkit-scrollbar {
      width: 6px;
      /* chỉnh độ rộng */
    }

    /* Nền thanh cuộn */
    #qdnd-slide3 .js-body::-webkit-scrollbar-track {
      background: #f0f0f0;
      /* màu nền */
    }

    /* Thanh kéo */
    #qdnd-slide3 .js-body::-webkit-scrollbar-thumb {
      background-color: #ed8823;
      /* màu thanh kéo */
      border-radius: 6px;
      /* bo góc */
    }

    /* Khi hover */
    #qdnd-slide3 .js-body::-webkit-scrollbar-thumb:hover {
      background-color: #666;
    }

    @media (max-width:800px) {
      #qdnd-slide3 .card {
        grid-template-columns: 1fr;
        gap: 12px
      }

      #qdnd-slide3 .track {
        padding: 5px;
      }

      #qdnd-slide3 .dot {
        --size: 80px;
      }

      #qdnd-slide3 .dot small {
        font-size: 12px;
        margin-top: -10px;
      }

      #qdnd-slide3 .dot b {
        font-size: 7px;
        padding-top: 20px;
      }

      #qdnd-slide3 .dot.active small {
        color: #fff;
        font-size: 14px;
      }

      #qdnd-slide3 .dot.active b {
        font-size: 10px;
        padding-top: 15px;
        padding-bottom: 0px;
      }

      #qdnd-slide3 .dot.active {
        --size: 110px;
      }

      #qdnd-slide3 .timeline {
        gap: 0px;
        padding: 0px 5px;
      }

      #qdnd-slide3 .arrow {
        width: 33px;
        height: 33px;
      }

      #qdnd-slide3 .ribbon {
        padding: 0px 0px 30px 0px;
      }

      #qdnd-slide3 .card1 {
        font-size: 1.3em;
      }

      #qdnd-slide3 .card p {
        font-size: 14px;
      }

      #qdnd-slide3 .big-year {
        font-size: 2em;
      }

      #qdnd-slide3 .sub {
        font-size: 1.2em;
      }

      #qdnd-slide3 .section {
        margin: -20px auto 0px;
      }

      #qdnd-slide3 .card .left {
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px dashed #8b71549e;
        display: none;
      }
    }