body {
            font-family: 'Inter', sans-serif;
            background-color: #fff;
          
        }

        .layout-wrap{
            max-width: 480px;
    margin: 0 auto; /* Căn giữa */

    box-sizing: border-box; /* Bao gồm cả padding và border trong kích thước */
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #000;
        }

        .logo span {
            color: #f89c25;
        }

        .btn-orange {
            background-color: #f89c25;
            color: #fff;
            border: none;
        }

        .btn-orange:hover {
            background-color: #e68a1b;
        }

        .form-control:focus {
            box-shadow: none;
            border-color: #f89c25;
        }

        .bottom-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
        }

        .bottom-menu a {
            color: #000;
            font-size: 12px;
            text-align: center;
        }

        .bottom-menu a.active {
            color: #f89c25;
        }

        .bottom-menu i {
            font-size: 20px;
        }

        #register-form .form-control{
                 padding: 0.375rem 2.75rem;
    border-radius: 10px;
    height: 50px;
        }

        /*INDEXPAGE*/

        .navbar-brand img {
            width: 120px;
        }

        .main-banner {
           
            color: #fff;
          
            text-align: center;
        }

        .main-banner h1 {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .icon-section {
            margin-top: 20px;
        }

        .icon-section i {
            font-size: 24px;
            color: #FD8901;
        }

        .section-title {
            font-weight: bold;
            margin: 20px 0;
        }

        .hot-events img,
        .trusted-partner img {
            border-radius: 5px;
        }

        /* .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
        }*/

        .footer {
    position: fixed;
    bottom: 0;
    width: 100%; /* Đảm bảo luôn chiếm 100% chiều rộng của màn hình */
    max-width: 480px; /* Giới hạn chiều rộng tối đa */
    left: 50%; /* Đưa footer ra giữa màn hình */
    transform: translateX(-50%); /* Căn giữa */
    background-color: #fff;
    /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);*/
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 999; /* Đảm bảo footer nằm trên các thành phần khác */
}

        .footer a {
            text-align: center;
            color: #000;
            text-decoration: none;
        }

        .footer a.active {
            color: #FD8901;
        }

        .footer i {
            font-size: 20px;
        }

        .news-item {

            padding: 10px;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        .news-item img {
            width: 150px;
            height: 100px;
            -o-object-fit: cover;
               object-fit: cover;
        }

        .news-item p {
            margin-bottom: 5px;
        }

        /* Custom CSS for Horizontal Scrollable Items */

        .scrollable-container {
            display: flex;
            overflow-x: auto;
            gap: 20px; /* Add space between items */
            padding: 10px 0;
        }

        .scrollable-container::-webkit-scrollbar {
            display: none; /* Hide scrollbar on mobile */
        }

        .scrollable-container .partner-item {
            flex: 0 0 auto; /* Prevent shrinking */
            width: 200px; /* Fixed width for items */
            text-align: center;
        }

        .scrollable-container .partner-item img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .scrollable-container .partner-item {
    flex: 0 0 auto; /* Prevent shrinking */
    width: 240px; /* Fixed width for items */
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 10px; /* Space for text */
}

        .scrollable-container .partner-item img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
}

        .scrollable-container .partner-text {
    padding: 10px;
}

        .scrollable-container .partner-text p {
    margin: 0;
}

        /* Sự kiện hot */

        .event-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .event-card img {
            width: 100%;
            height: auto;
        }

        .event-card .content {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: #fff;
            padding: 10px;
        }

        .event-card .content p {
            margin: 0;
            font-size: 0.9rem;
        }

        .event-card .icons {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
        }

        .event-card .icons i {
            font-size: 1rem;
            color: #fff;
        }

        /* Sự kiện hot */

        .event-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .event-card img {
            width: 100%;
            height: auto;
        }

        .event-card .content {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: #fff;
            padding: 10px;
        }

        .event-card .content p {
            margin: 0;
            font-size: 0.9rem;
        }

        .event-card .icons {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
        }

        .event-card .icons i {
            font-size: 1rem;
            color: #fff;
        }

        .scrollable-container {
    display: flex;
    overflow-x: auto;
    gap: 20px; /* Add space between items */
    padding: 10px 0;
}

        .scrollable-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

        /* Video item styles */

        .video-item {
    flex: 0 0 auto;
    width: 330px;
    text-align: center;
    position: relative;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

        .video-thumbnail {
    position: relative;
    width: 100%;
    /*height: 120px;*/
    overflow: hidden;
    border-radius: 10px;
}

        .video-thumbnail img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

        .video-thumbnail .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0);
    transition: all 0.3s ease-in-out;
    font-size: 2rem;
}

        .video-thumbnail:hover .overlay {
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 1);
}

        .video-title {
    margin-top: 8px;
    font-size: 0.9rem;


}

        /* Nút "Xem thêm" */

        .btn-see-more {
    font-size: 0.85rem; /* Nhỏ hơn tiêu đề */
    color: #FD8901; /* Màu cam */
    text-decoration: none;
    /*display: flex;*/
    /*align-items: center;*/
    gap: 5px; /* Khoảng cách giữa chữ và icon */
    font-weight: bold;
}

        .btn-see-more i {
    font-size: 0.9rem;
}

        .main-banner .item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Bo góc hình ảnh nếu cần */
}

        /* Ẩn hoàn toàn các nút điều hướng (nếu hiển thị bất kỳ lý do nào) */

        .owl-nav {
    display: none !important;
}

        /* Ẩn dots (chấm điều hướng) */

        .owl-dots {
    display: none !important;
}

        /* Side Menu */

        .side-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
}

        .side-menu.open {
    right: 0;
}

        .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

        .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

        .user-name {
    font-size: 1rem;
    font-weight: bold;
}

        .close-menu {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

        .search-box {
    padding: 10px 15px;
}

        .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

        .menu-item a {
    padding: 20px 15px; /* Tăng khoảng cách trên và dưới */
    display: flex;
    align-items: center;
    gap: 10px; /* Khoảng cách giữa icon và text */
    font-size: 1rem;
   
    cursor: pointer;
    transition: background 0.2s;
}

        .menu-item:last-child {
    border-bottom: none; /* Xóa đường kẻ cho mục cuối cùng */
}

        .menu-item i {
    font-size: 1.2rem;
    color: #FD8901;
}

        .welcome-text {
    margin: 0;
    font-size: 0.9rem;
    color: #999;
}

        /* Menu header styles */

        .menu-header {
    display: flex;
    justify-content: end;
    align-items: end;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

        .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

        .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

        .welcome-text {
    margin: 0;
    font-size: 0.9rem;
    color: #999;
}

        .user-name {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
}

        /* Search box styles */

        .search-box {
    padding: 15px;
}

        .search-container {
    position: relative;
    display: flex;
    align-items: center;
}

        .search-icon {
    position: absolute;
    left: 10px;
    font-size: 1rem;
    color: #999;
}

        .search-input {
    padding-left: 35px; /* Offset for the search icon */
    border-radius: 8px;
}

        /* Menu list styles */

        .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

        .icon-wrap{
  background-color: #FD8901;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 3px;
}

        .icon-wrap i{
  color: #FFF;
}

        #menu-button{
    margin-left: 10px;
}

        header .btn-download{
    border-radius: 50%;
    background-color: #FD8901;
    width: 38px;
    text-align: center;
    padding-left: 11px;
}

        header .btn-download i{
    color: #FFF;
}

        .news-item p{
    font-size: 15px;
    font-weight: 700;
}

        .news-item small{
    font-size: 12px;
}

        .event-card .content p {
    font-size: 16px;
    font-weight: 600;
}

        .event-item{
        flex: 0 0 auto;
    width: 330px;
    text-align: center;
    background-color: #fff;

    overflow: hidden;
    padding-bottom: 10px
}

        .video-container{
    width: 100%;
    height: 100%;
    position: relative;

}

        .video-icon{
    position: absolute;
    top: 0px;
    left: 0px;
}

        .video-title{
    position: absolute;
        bottom: 0px;
        color: #FFF;
}

        .video-item {
            position: relative;
            width: 300px;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px;
            color: #fff;
        }

        .video-overlay i {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .video-overlay p {
            font-size: 1rem;
  
            margin: 0;
        }

        .video-item {
            position: relative;
            width: 300px;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px;
            color: #fff;
        }

        .video-overlay i {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .video-overlay p {
            font-size: 1rem;
          
            margin: 0;
        }

        .video-item {
            position: relative;
            width: 300px;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px;
            color: #fff;
        }

        .video-overlay i {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .video-overlay p {
            font-size: 1rem;

            margin: 0;
        }

        a{
            color: rgb(33, 37, 41);
            text-decoration: none;
        }

        .menu-list .menu-item.active a,
.menu-list .menu-item:hover a

{
    color: #FD8901
}

        header .btn-download:hover {
    
    background-color: #fbd8af;
   
}

        .text-warning{
    color: #FD8901;
}

        .layout-wrapper{
    margin-bottom: 75px;
}