#loader {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 3px;      /* chiều cao để pseudo có chỗ hiển thị */
    z-index: 9999;
    background: transparent;
  }

  /* pseudo-element ban đầu (width = 0) */
  #loader::after {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,#f55252,#f5000044);
  }

  /* khi thêm .animate thì bật animation */
  #loader.animate::after {
    animation: loadbar 1.5s ease forwards;
  }

  @keyframes loadbar {
    from { width: 0; }
    to   { width: 100%; }
  }