/* Đặt font mặc định (vd: Roboto) */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
  }
  
  /* Định dạng phần hero (ảnh nền full màn hình) */
  .hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Chiếm toàn bộ chiều cao màn hình */
    /* Dùng Flex để đẩy .hero-content sang bên phải */
    display: flex;
    justify-content: flex-end;  /* Canh sang phải */
    align-items: center;        /* Canh giữa theo chiều dọc */
    background: url("/ModelViews/Thanh_Navigation_khoa/assets/Intro-logo.gif");
    background-repeat: no-repeat;
    background-size: cover;
  /* Điều quan trọng: chỉnh background-position để "xê dịch" ảnh nền sang trái */
  /* Mặc định là 50% center. Giảm giá trị horizontal (< 50%) sẽ dịch sang trái */
    background-position: center;
    z-index: -1;
  }
  /* Phần nội dung hero */
  .content {
    position: absolute;
    bottom: 40px;          /* Căn sát dưới, chỉnh tùy ý */
    left: 50%;             /* Canh giữa ngang */
    transform: translateX(-50%); /* Đưa tâm khối về chính giữa */
    z-index: 2;            /* Trên lớp phủ */
    text-align: center;    /* Chữ giữa khối */
    color: #fff;           /* Màu trắng */
    width: 80%;            /* Giới hạn bề ngang, nếu muốn */
    max-width: 800px;      /* Không quá lớn trên màn hình rộng */
    margin: 0 auto;
}

.content h1 {
    font-weight: bold;
    font-size: 30px; /* Tùy chỉnh cỡ chữ */
    margin-bottom: 2rem;
}

.content p {
font-size: 20px;
margin-bottom: 2.5rem;
}

.divider {
    width: 200px;
    border: none;          /* Loại bỏ đường viền mặc định */
    height: 3px;           /* Độ dày của đường kẻ */
    background-color: #888; /* Màu của đường kẻ */
    margin: 2rem auto;        /* Khoảng cách trên-dưới */
  }
  
  /* Nút TÌM HIỂU */
  #scroll-button {
    background: linear-gradient(to right, #6CA9C3 0%, #122CD4 47%, #3F6BCC 100%);
    color: #fff;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 1rem;
    font-weight:bold;
    border-radius: 10px; /* bo góc nhẹ, tùy chọn */
    transition: background 0.3s;
  }
  
  #scroll-button:hover {
    background: linear-gradient(to right, #6CA9C3 0%, #122CD4 47%, #3F6BCC 100%);
  }
  
  /* Phần About */
  .about-section {
    padding: 50px;
    background-color: #f8f8f8;
  }
  
  /* Nếu muốn thanh navbar cố định khi scroll, bạn thêm class .navbar-fixed ở navbar (xem gợi ý bên dưới) */
  .navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    /* Tuỳ chỉnh màu nền, viền, v.v... */
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }