@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: Colossalis;color: #C1272D;font-size: 3em;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); 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;}
  @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.7em;}
      #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;}
  }