/* Mặc định cho màn hình lớn (PC, laptop) */
body {
    font-size: 16px;
    font-family: 'K2D', sans-serif;
}

/* Khi màn hình 17 inch, zoom xuống 80% */
@media (max-width: 1600px) {
    body {
        zoom: 0.8; /* Thu nhỏ trang web xuống 80% */
    }
}

#menu {
    display:block;
}


#menu-mobile {
    display:none;
}

a{
    text-decoration:none;
    color:#333;
}

.top-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #005aa6;
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    transition: transform 0.6s ease; /* Cải thiện sự mượt mà của việc ẩn/hiện */
}
/* Cho màn hình điện thoại */
@media (max-width: 768px) {
    
    #menu {
    display: none; /* Hiển thị menu PC */
    }
    
    
    #menu-mobile {
    display: block; /* Ẩn menu mobile */
    }

    #top-banner {
        transform: translateY(-100%); /* Đẩy banner ra khỏi màn hình */
    }
}


@media (max-width: 767.98px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Ẩn GIF khi màn hình nhỏ */
@media (max-width: 767.98px) {
  .hide-on-mobile {
    display: none !important;
  }

  /* Hai cột (timeline + nội dung) nằm ngang, không tràn chữ */
  .timeline-wrapper {
    display: flex;
    flex-wrap: wrap; /* cho phép xuống dòng */
  }

  .timeline-nav-wrapper {
    width: 30%;       /* hoặc tùy chỉnh 25-35% tùy bạn */
    min-width: 100px; /* giới hạn nhỏ nhất */
  }

  .timeline-content-wrapper {
    width: 70%;
    flex: 1;
  }

  /* Giúp nội dung text co giãn đúng màn hình */
  .timeline-content-wrapper h4,
  .timeline-content-wrapper p {
    white-space: normal;
    word-wrap: break-word;
  }
}

/* Container mặc định cho màn hình lớn */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

/* Cho màn hình máy tính bảng */
@media (max-width: 1024px) {
    .container {
        max-width: 960px; /* Đảm bảo container không quá rộng trên tablet */
    }
}

/* Cho màn hình điện thoại */
@media (max-width: 768px) {
    .container {
        max-width: 100%; /* Container chiếm hết chiều rộng màn hình trên điện thoại */
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* Định nghĩa container nhỏ */
.container-small {
    max-width: 1400px; /* Chiều rộng tối đa nhỏ hơn container gốc */
    width: 100%; /* Đảm bảo container chiếm hết chiều rộng */
    margin: 0 auto; /* Căn giữa container */
    padding-left: 15px;
    padding-right: 15px;
}

/* Cho màn hình máy tính bảng */
@media (max-width: 1024px) {
    .container-small {
        max-width: 800px; /* Đảm bảo container nhỏ không quá rộng trên tablet */
    }
}

/* Cho màn hình điện thoại */
@media (max-width: 768px) {
    .container-small {
        max-width: 100%; /* Container nhỏ chiếm hết chiều rộng trên điện thoại */
        padding-left: 10px;
        padding-right: 10px;
    }
}

.company-name {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    width: 50%; /* Đảm bảo chiếm toàn bộ chiều rộng của top-banner */
}

.company-name p {
    margin: 0; /* Loại bỏ khoảng cách mặc định của <p> */
    font-weight: bold;
}

.top-menu ul {
    display: flex;
}

.top-menu li {
    list-style: none;
    position: relative;
    padding: 0 15px; /* Thay đổi khoảng cách cho đều hơn */
}

.top-menu li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Căn giữa đường gạch đứng theo chiều dọc */
    height: 50%; /* Điều chỉnh chiều cao của gạch đứng nếu cần */
    border-right: 1px solid #fff;
}

.top-menu li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.top-menu li a:hover {
    color: #000;
}


.navbar {
    position: fixed;
    top: 44px; /* Đẩy xuống dưới top-banner khi hiển thị */
    width: 100%;
    z-index: 1020;
    transition: top 0.6s ease; /* Thêm thời gian và easing để di chuyển mượt mà */
}

.navbar.fixed {
    top: 0; /* Khi cuộn xuống, navbar sẽ cố định ở trên cùng */
}

/* Navbar (Thanh điều hướng) */
.custom-navbar {
    background-color: #ffffff;
    transition: all 0.3s;
}

.custom-navbar .navbar-brand {
    color: #005aa6;
    padding-left: 100px;
}

.brand-logo {
    height: 60px;
    width: auto;
}

.nav-link {
    font-weight: bold;
    text-transform: uppercase;
    color: #005aa6;
    margin: 0 15px;
    transition: all 0.3s;
    padding: 5px 10px;
    border-radius: 5px;
}

.custom-navbar .nav-link:hover {
    background-color: #005aa6;
    color: #ffffff;
}

.custom-navbar .nav-link.active {
    font-weight: bold;
    border-bottom: 2px solid #005aa6;
    color: #005aa6;
    background-color: transparent;
}

/* Trạng thái cố định khi cuộn */
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    z-index: 1000;
    opacity: 0.95;
    background-color: rgba(255, 255, 255, 0.9);
}


.custom-navbar {
    background-color: #f8f9fa; /* Màu nền cho navbar */
}

.dropdown-menu {
    display: none; /* Ẩn menu con theo mặc định */
    position: absolute; /* Đặt vị trí tuyệt đối */
    background-color: white; /* Màu nền cho menu con */
    border-left: 5px solid #005aa6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Đổ bóng cho menu con */
    border-radius: 4px; /* Bo góc cho menu con */
    z-index: 1000; /* Đảm bảo menu con nằm trên các phần tử khác */
    padding: 0; /* Xóa padding mặc định */
}

.dropdown:hover .dropdown-menu {
    display: block; /* Hiển thị menu con khi hover */
}

.dropdown-item {
    padding: 10px 15px; /* Padding cho các mục trong menu con */
    color: #333; /* Màu chữ cho các mục */
    text-decoration: none; /* Xóa gạch chân */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền khi hover */
    border-bottom: 0.5px solid #005aa6; /* Viền cho menu con */
}

.dropdown-item:hover {
    background-color: #005aa6; /* Màu nền khi hover vào mục menu con */
    color: white; /* Màu chữ khi hover */
}

.dropdown-item:not(:last-child) {
    border-bottom: 1px solid #e9ecef; /* Viền giữa các mục */
}





/* Carousel/Slider */



/* Hình ảnh và hiệu ứng carousel */
.carousel-item img {
    transition: transform 1s ease; /* Hiệu ứng chuyển động mượt mà */
}

.carousel-item.active img {
    transform: scale(1.1); /* Phóng to hình ảnh khi active */
}

/* Hiệu ứng chuyển đổi slide */
.carousel-item {
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    transform: scale(1.05);
}

.carousel-item.active {
    opacity: 1;
    transform: scale(1);
}

/* Định dạng phần caption */
.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 65%; /* Điều chỉnh vị trí sang bên phải */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px; /* Tăng kích thước khung */
    border-radius: 15px;
    max-width: 600px; /* Tăng kích thước khung */
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Định dạng văn bản trong caption */
.carousel-caption h5 {
    color: #005aa6; /* Màu xanh cho chữ */
    text-transform: uppercase; /* In hoa */
    font-size: 1.8rem; /* Tăng kích thước chữ cho tiêu đề */
    font-weight: bold;
}

.carousel-caption p {
    color: #000; /* Màu xanh cho chữ */
}

/* Nút "Xem Chi Tiết" */
.btn-detail {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    position: absolute;
    right: 20px;
    bottom: 20px;
    transition: color 0.3s;
}

.btn-detail span {
    font-size: 1.5rem;
    margin-left: 5px;
}

.btn-detail:hover {
    color: #0056b3; /* Màu khi hover */
}

/* Chấm chỉ mục của carousel */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    width: 15px;
    height: 5px;
    border-radius: 5px;
    margin: 0 3px;
}

.carousel-indicators .active {
    background-color: #ffc107;
}



/* Tin tức */
.section-title {
    text-align: center; /* Căn giữa tiêu đề */
    font-size: 1.5rem; /* Kích thước chữ */
    color: #005aa6; /* Màu chữ */
    position: relative; /* Để tạo hiệu ứng dưới đường kẻ */
    margin-bottom: 30px; /* Khoảng cách dưới tiêu đề */
}

/* Thêm đường kẻ dưới tiêu đề */
.section-title::after {
    content: ""; /* Tạo đường kẻ */
    display: block; /* Để đường kẻ xuất hiện trên một dòng mới */
    width: 50px; /* Chiều dài đường kẻ */
    height: 4px; /* Chiều cao đường kẻ */
    background-color: #c0392b; /* Màu đỏ đậm cho đường kẻ */
    margin: 10px auto 0; /* Căn giữa đường kẻ và tạo khoảng cách */
    border-radius: 2px; /* Bo tròn các góc của đường kẻ */
}

/* Cải thiện các thẻ tin tức */
.news-card {
    border: none; /* Xóa viền mặc định */
    border-radius: 8px; /* Bo tròn góc */
    overflow: hidden; /* Giúp bo tròn góc cho hình ảnh */
    background-color: #f8f9fa; /* Nền sáng cho thẻ */
    transition: all 0.3s ease; /* Hiệu ứng chuyển tiếp */
    margin-bottom: 15px; /* Khoảng cách giữa các thẻ */
    padding: 20px; /* Thêm padding bên trong */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Bóng đổ nhẹ */
}

/* Hiệu ứng hover cho thẻ tin tức */
.news-card:hover {
    transform: translateY(-5px); /* Nâng thẻ lên khi hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Tăng độ bóng khi hover */
}

/* Định dạng tin chính với hình ảnh trên và nội dung dưới */
/* Định dạng tin chính với hình ảnh trên và nội dung dưới */
.main-news {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100%;
    text-align: center;
}


/* Khung chứa ảnh cho thẻ tin tức chính */
.main-news-img-container {
    width: 100%;
    height: 170px; /* Đặt chiều cao cố định cho khung ảnh */
    overflow: hidden; /* Giữ ảnh trong khung */
    border-radius: 8px; /* Bo tròn góc */
    background-color: #f8f9fa; /* Màu nền cho khung chứa */
}
@media (max-width: 768px) {
    
    .main-news-img-container {
        height: 260px; /* Đặt chiều cao cố định cho khung ảnh */
    }
}
/* Định dạng ảnh chính */
.news-img-main {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giữ tỷ lệ khung hình của ảnh */
    transition: transform 0.3s ease; /* Hiệu ứng zoom mượt mà */
    border-radius: 4px; /* Bo tròn góc cho ảnh */
}

/* Hiệu ứng zoom khi hover */
.main-news-img-container:hover .news-img-main {
    transform: scale(1.1); /* Phóng to ảnh lên 10% trong khung chứa */
}


/* Nội dung tin chính */
.news-content-main {
    padding: 15px 0;
    text-align:left;
}

.news-description {
    font-size: 10px; /* Thay đổi kích thước chữ ở đây */
    color: #333; /* Màu chữ, có thể chỉnh tùy ý */
    line-height: 1.5; /* Khoảng cách dòng giúp dễ đọc hơn */        
    text-align: justify; /* Canh đều nội dung */
}

/* Định dạng tin phụ bên phải với ảnh và nội dung cạnh nhau */
.col-md-8 .news-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}

/* Định dạng hình ảnh của tin phụ */
/* Định dạng ảnh tin phụ */
.news-img {
    width: 155px; /* Đặt chiều rộng cố định */
    height: 155px; /* Đặt chiều cao cố định */
    object-fit: cover;
    border-radius: 8px;
    margin-right: 10px; 
    transition: transform 0.5s ease-in-out; /* Thời gian dài hơn cho hiệu ứng mượt mà */
}

.news-img-container {
    width: 155px; /* Chiều rộng cố định */
    height: 155px; /* Chiều cao cố định */
    overflow: hidden; /* Giữ ảnh trong khung */
    border-radius: 8px;
    margin-right: 10px;
}


.news-img-container {
    overflow: hidden; /* Giữ ảnh trong khung */
    border-radius: 8px;
    margin-right: 10px;
}

/* Hiệu ứng zoom khi hover */
.news-card:hover .news-img {
    transform: scale(1.2); /* Phóng to ảnh lên 20% khi hover */
}

/* Nội dung của tin phụ */
.news-content {
    flex: 1;
}

/* Định dạng tiêu đề */
.news-title {
    font-size: 1rem;
    color: #005aa6;
    margin-bottom: 10px;
}

/* Định dạng ngày tháng */
.news-date {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 10px;
}

/* Định dạng mô tả */
.news-description {
    font-size: 0.9rem;
    color: #333;
}

/* Hiệu ứng hover cho tất cả các thẻ tin tức */
.news-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

/* Căn chỉnh khoảng cách ngang giữa các thẻ */
.row .col-md-4 {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom:10px;
}






/* Công bố thông tin */
body {
    background-color: #f7f7f7; /* Nền xám nhạt */
}

.custom-link {
    text-decoration: none; /* Bỏ gạch chân */
    color: inherit; /* Giữ nguyên màu sắc của văn bản cha */
}

.custom-link:hover {
    color: #003f7d; /* Đổi màu chữ thành xanh khi hover */
    font-weight: bold;
}

.custom-card {
    background-color: #ffffff;
}

.stock-info {
    background-color: #003f7d; /* Màu xanh cho phần chỉ số */
    border-radius: 5px;
}

.stock-info p {
    margin: 0;
}

.card-body h5.card-title {
    font-size: 1.2rem;
}

.list-group-item {
    background-color: #f8f9fa;
    min-height: 86px; /* Thiết lập chiều cao tối thiểu cho các mục */
}

.badge {
    font-size: 0.9rem;
}
.row.gx-1 {
    gap: 0rem; /* Khoảng cách ngang giữa các card */
}




.footer {
    background-image: url('/images/logo/footer.png'); /* Đường dẫn đến ảnh nền */
    background-size: cover; /* Đảm bảo ảnh nền bao phủ toàn bộ footer */
    background-position: center; /* Đặt ảnh nền ở giữa */
    background-repeat: no-repeat; /* Không lặp lại ảnh nền */
    padding: 20px 0; /* Khoảng cách trên và dưới */
    /* Đổ bóng cho footer */
    height:100%;
}

.footer h5 {
    font-weight: bold; /* Đậm tiêu đề */
    margin-bottom: 15px; /* Khoảng cách dưới tiêu đề */
    font-size: 1rem;
}

.footer h6 {
    margin-top: 20px; /* Khoảng cách trên tiêu đề con */
}

.footer p {
    margin-bottom: 10px; /* Khoảng cách giữa các đoạn văn */
    line-height: 1.6; /* Khoảng cách dòng */
}

.app-links {
    margin-top: 10px; /* Khoảng cách trên */
}

.app-link {
    display: block; /* Hiển thị theo hàng dọc */
    color: #007bff; /* Màu chữ liên kết */
    text-decoration: none; /* Bỏ gạch chân */
    margin-bottom: 5px; /* Khoảng cách dưới các liên kết ứng dụng */
}

.app-link:hover {
    text-decoration: underline; /* Gạch chân khi hover */
}

.qr-code {
    width: 83%; /* Kích thước QR code */
    margin: 10px 0; /* Khoảng cách trên và dưới */
}

.footer-bottom {
    border-top:3px solid #005aa6;
    text-align: center; /* Canh giữa */
    padding: 8px 0 1px 0; /* Khoảng cách trên và dưới */
    background-color: #d6c5a7; /* Màu nền cho phần dưới footer */
    color: #6c757d; /* Màu chữ */
    font-size: 14px; /* Kích thước font chữ */
    font-weight: bold;
}
.app-links a {
    display: flex; /* Hiển thị flex để căn chỉnh */
    align-items: center; /* Canh giữa hình ảnh và văn bản */
    color: #007bff; /* Màu chữ liên kết */
    text-decoration: none; /* Bỏ gạch chân */
}

.app-icon {
    height: auto; /* Tự động giữ tỉ lệ */
    margin-right: 10px; /* Khoảng cách bên phải hình ảnh */
}
.app-download {
    text-align: center; /* Căn giữa nội dung trong div */
}

.qr-code, .app-icon {
    display: block; /* Đảm bảo mỗi hình ảnh là một khối */
    margin: 0 auto; /* Căn giữa hình ảnh */
}
.app-download {
    text-align: center; /* Căn giữa nội dung trong div */
    padding-bottom: 10px;
}

.qr-code {
    display: block; /* Đảm bảo mã QR là một khối */
    margin: 0 auto; /* Căn giữa mã QR */
}

.app-links {
    display: flex; /* Sử dụng Flexbox để căn chỉnh hàng */
    justify-content: center; /* Căn giữa các biểu tượng */
    margin-top: 10px; /* Thêm khoảng cách giữa mã QR và các biểu tượng */
}

.app-icon {
    margin: 0 5px; /* Thêm khoảng cách giữa các biểu tượng */
}


.fixed-buttons {
    position: fixed;
    bottom: 20px; 
    right: 20px; 
    z-index: 1000;
    display: flex;
    flex-direction: column; /* Sắp xếp nút theo cột */
    gap: 10px;
}

.fixed-button {
    background-color: #ff3d00; /* Màu nền chính */
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 30px; /* Bo góc tròn */
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); /* Hiệu ứng đổ bóng */
    transition: all 0.3s ease;
}

.fixed-button span {
    margin-left: 8px; /* Khoảng cách giữa biểu tượng và chữ */
}

.fixed-button:hover {
    background-color: #ff5722; /* Đổi màu khi hover */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25); /* Tăng độ đổ bóng khi hover */
    transform: translateY(-3px); /* Hiệu ứng nổi lên khi hover */
}

.fixed-button:active {
    transform: translateY(1px); /* Hiệu ứng ấn xuống */
}

#phone-button {
    background-color: #4CAF50; /* Màu riêng cho nút điện thoại */
}

#phone-button:hover {
    background-color: #45a049;
}

#consult-button {
    background-color: #007bff; /* Màu riêng cho nút tư vấn */
}

#consult-button:hover {
    background-color: #0069d9;
}




.text-muted {
    font-size: 0.85em; /* Kích thước chữ nhỏ hơn một chút */
    font-style: italic; /* In nghiêng */
    color: #6c757d; /* Màu xám nhẹ cho ngày đăng */
}

.badge-success {
    background-color: red; /* Màu xanh lá cho badge "New" */
    color: white; /* Màu chữ trắng */
    margin-left: 5px; /* Khoảng cách giữa ngày đăng và chữ "New" */
    font-size: 0.7em; /* Chữ nhỏ hơn cho "New" */
    padding: 0.2em 0.4em; /* Điều chỉnh kích thước padding */
}

.menu-title {
    padding: 0 0 0 5px;
    margin: 0;
    font-weight: bold;
}

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

.custom-vertical-menu > li {
    padding: 5px;
}

.custom-vertical-menu > li:last-child {
    border-bottom: none;
}

.custom-vertical-menu > li > a {
    text-decoration: none;
    color: #555;
    display: block;
    font-weight: bold;
}
.custom-vertical-menu > li > a:hover {
    color: #005aa6;
}

.custom-vertical-menu > li ul {
    list-style: none;
    padding-left: 20px;
}

.custom-vertical-menu > li ul li {
    padding: 8px 0;
}

.custom-vertical-menu > li ul li > a {
    font-size: 0.9em;
    color: #666;
}

.custom-vertical-menu > li ul li > a:hover {
    color: #444;
}

.full-map {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    margin-bottom: 100px; /* Tạo khoảng cách dưới footer */
}

.full-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.custom-link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

.custom-navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Thêm hiệu ứng box shadow */
    background-color: #fff; /* Đảm bảo màu nền trắng để dễ nhìn thấy shadow */
    transition: box-shadow 0.3s ease; /* Hiệu ứng chuyển tiếp mượt mà khi scroll */
}

.content-container {
    padding: 20px; /* Thêm khoảng cách xung quanh */
    background-color: #f9f9f9; /* Màu nền nhẹ để nổi bật nội dung */
    border-radius: 8px; /* Góc bo tròn cho thẻ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
}

.content-container img {
    margin-right: 10px;
    float: left;
}

.content-container p {
    margin: 0 0 10px; /* Khoảng cách giữa các đoạn văn */
}

.content-container p:first-of-type {
    font-size: 24px; /* Định dạng tiêu đề lớn hơn */
    font-weight: bold;
    color: #005aa6; /* Màu chữ tiêu đề */
}

.content-container p:nth-of-type(2) {
    font-size: 14px; /* Kích thước chữ cho ngày tháng */
    color: #777; /* Màu sắc nhạt hơn cho ngày tháng */
    font-style: italic; /* In nghiêng ngày tháng */
}

.content-container .thongtinct {
    margin-top: 15px; /* Khoảng cách trên cho phần thông tin chi tiết */
    line-height: 1.6; /* Khoảng cách dòng để dễ đọc */
    font-size: 16px;
    color: #555;
}

.content-container .col-12 {
    margin-top: 20px; /* Khoảng cách trên cho phần tài liệu */
}

/* CSS cho các thiết bị di động */
@media (max-width: 768px) {
    .container.my-5 {
    }

    .mobile-card {
        display: block; 
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 20px; 
    }

    .mobile-card p:first-of-type {
        font-size: 24px;
        font-weight: bold;
        color: #005aa6;
    }

    .mobile-card p:nth-of-type(2) {
        font-size: 14px;
        color: #777;
        font-style: italic;
    }

    .mobile-card a {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 15px;
        color: #fff;
        background-color: #005aa6;
        border-radius: 5px;
        text-decoration: none;
    }

   
    .mobile-card {
        display: none;
    }
}

.share-buttons {
        text-align: right; /* Căn phải nội dung bên trong */
        padding-right: 20px; /* Thêm khoảng cách bên phải nếu cần */
        margin-top: 10px; /* Thêm khoảng cách trên nếu cần */
    }

.share-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.share-buttons .btn i {
    margin-right: 5px;
}

.content-container {
    padding: 20px; /* Khoảng cách chung cho tất cả các nội dung */
}
.pdf-section {
    margin-bottom: 20px; /* Khoảng cách bên dưới khung PDF */
}
.related-news-section {
    padding-top: 20px; /* Khoảng cách giữa PDF và "Tin liên quan" */
}
#pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}
#pagination button.active {
    background-color: #0056b3;
}

.nav-tabs .nav-link {
font-size: 1.1rem;
padding: 10px 15px;
border: 1px solid #ddd;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}

.nav-tabs .nav-link.active {
    background-color: #007bff;
    color: #fff;
    border-color: #ddd;
}

.tab-content .card {
    max-width: 800px;
    margin: 0 auto;
    border: none;
}

.section-title {
    font-weight: bold;
    font-size: 1.5rem;
}

.tab-content {
    margin-top: 20px;
}


.year-selector {
    background-color: #0056b3;
    border-radius: 8px;
    padding: 5px 10px;
}

.year-btn {
    color: #ffffff;
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
}

.year-btn:hover, .year-btn.active {
    background-color: #004494;
    border-radius: 5px;
}


/* TAB */
/* Thiết lập chung cho tab */
.nav-tabs .nav-link {
    color: #333;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    position: relative;
    background-color: transparent;
    transition: color 0.3s;
    font-size:14px;
}

.nav-tabs .nav-link:hover {
    color: #005aa6;
}

/* Thiết lập tab được chọn với nền trong suốt */
.nav-tabs .nav-link.active {
    color: #005aa6;
    background-color: transparent;
}

/* Đường gạch dưới màu xanh cho tab được chọn */
.nav-tabs .nav-link::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: #005aa6;
    position: absolute;
    bottom: -1px; /* Đảm bảo đường gạch dưới nằm sát đường biên dưới của tab */
    left: 0;
    right: 0;
    margin: auto;
    transition: width 0.3s ease-in-out;
}

/* Khi tab được chọn, đường gạch dưới sẽ xuất hiện với độ rộng 100% */
.nav-tabs .nav-link.active::after {
    width: 100%;
}

/* Căn chỉnh tab */
.nav-tabs .nav-item {
    margin: 0 10px;
}

/* Container cho toàn bộ thanh dọc */
.timeline-nav {
    position: relative;
    list-style: none;
    padding-left: 0;
}

/* Đặt thanh dọc thẳng hàng với chấm tròn */
.timeline-nav::before {
    content: '';
    position: absolute;
    left: 107px; /* Đặt vị trí của thanh gần chấm tròn hơn */
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #005aa6; /* Màu của đường thẳng */
}

/* Căn chỉnh tab menu dọc */
.timeline-nav .nav-link {
    position: relative;
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    padding: 10px 15px;
    border: none;
    background-color: transparent;
    transition: color 0.3s ease, font-size 0.3s ease;
    display: flex;
    align-items: center;
    padding-left: 0;
}

/* Chấm tròn xám mặc định bên phải */
.timeline-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 88px; /* Đặt chấm tròn ngay bên cạnh thanh dọc */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #333; /* Màu xám mặc định cho chấm */
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Khi tab được chọn */
.timeline-nav .nav-link.active {
    color: #005aa6; /* Chuyển thành màu xanh của bạn khi chọn */
    font-size: 1.6rem; /* Tăng kích thước chữ */
    background-color: transparent; /* Không có nền */
}

/* Chấm tròn màu xanh và to hơn khi được chọn */
.timeline-nav .nav-link.active::after {
    background-color: #005aa6; /* Màu xanh khi được chọn */
    width: 14px;
    height: 14px;
}

/* Màu sắc hover cho tab */
.timeline-nav .nav-link:hover {
    color: #005aa6; /* Chuyển thành màu xanh khi hover */
}
.tab-pane {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa theo chiều dọc */
    align-items: center;
    height: 100%;
    padding: 20px;
    text-align: justify; /* Căn đều hai bên */
}

.tab-pane h4 {
    font-size: 1.4rem;
    margin: 0;
    padding:20px;
    line-height: 1.5;
    text-align: justify; /* Căn đều hai bên */
    text-indent: 20px; /* Thụt vào đầu dòng */
}

.full-width-image-container {
    width: 100vw; /* Chiều rộng bằng toàn bộ cửa sổ trình duyệt */
    position: relative;
    left: 50%; /* Đảm bảo hình ảnh căn giữa */
    right: 50%;
    margin-left: -50vw; /* Đảm bảo không có khoảng trống ở hai bên */
    margin-right: -50vw;
    overflow: hidden; /* Loại bỏ bất kỳ tràn nội dung nào */
    padding-bottom:20px;
}

.full-width-image-container img {
    width: 100vw;
    height: auto;
}
    
 /* Định dạng cho blockquote */
.highlight-text {
    font-size: 60px;
    font-weight: 700;
    color: #0056b3;
    text-align: center;
    line-height: 1.4;
    font-family: 'K2D', sans-serif;
    margin: 0;
    padding: 0;
}

.highlight-textt {
    font-size: 30px;
    font-weight: 700;
    color: #0056b3;
    text-align: center;
    line-height: 1.4;
    font-family: 'K2D', sans-serif;
    margin: 0;
    padding: 0;
}
.highlight-text::before, .highlight-text::after {
    content: '“';
    font-size: 60px;
    color: #0056b3;
}
.highlight-text::after {
    content: '”';
}
.content-section p {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
    margin-top: 20px;
}

        .d-flex {
            align-items:center;
        }

        .align-center {
            align-items: center;
            justify-content: center;
        }
        
        .org-table {
    width: 100%;
    border-collapse: collapse;
}

.org-table td {
    padding: 8px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.org-table .group-header td {
    text-align: left;
    color:#005aa6;
    font-weight: bold;
    border-top: 2px solid #005aa6; /* Đường viền trên dày hơn cho phần tiêu đề nhóm */
    border-bottom: 2px solid #005aa6; /* Đường viền dưới dày hơn cho phần tiêu đề nhóm */
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Đảm bảo rằng tab-pane chiếm toàn bộ chiều rộng và chiều cao tự động */
.full-screen {
    display: flex; /* Sử dụng Flexbox để căn chỉnh các phần tử bên trong */
    flex-direction: column; /* Xếp các phần tử theo chiều dọc */
    overflow: hidden; /* Ẩn bất kỳ nội dung nào tràn ra ngoài */
    margin: 0; /* Không có margin */
    padding: 0; /* Không có padding */
}

/* Chiếm toàn bộ chiều rộng cho mỗi section */
.section {
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    display: flex; /* Sử dụng Flexbox cho bố cục hình ảnh và văn bản */
    margin: 0; /* Không có margin */
    padding: 0; /* Không có padding */
}

/* Các phần bên trong */
.image-container, .text-container {
    flex: 1; /* Mỗi phần chiếm không gian đều */
    display: flex; /* Sử dụng Flexbox cho các phần này */
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
}

/* Đảm bảo hình ảnh chiếm toàn bộ chiều rộng của container */
.full-width {
    width: 100%; /* Chiều rộng 100% */
    height: auto; /* Tự động điều chỉnh chiều cao */
    display: block; /* Đảm bảo hình ảnh là block */
}

/* Đảo thứ tự các phần trong .reverse */
.reverse {
    flex-direction: row-reverse; /* Đảo ngược thứ tự */
}

/* Loại bỏ margin và padding trong phần văn bản */
.text-container p {
    margin: 0; /* Không có margin */
    padding: 0; /* Không có padding */
}

/* Đảm bảo không có lề hoặc khoảng cách ngoài */
body, html {
    margin: 0; /* Loại bỏ margin mặc định */
    padding: 0; /* Loại bỏ padding mặc định */
    height: 100%; /* Chiều cao bằng 100% */
}

/* Căn giữa ul và bỏ margin */
.year-tab-list {
    display: flex;
    justify-content: center; /* Căn giữa các nút */
    gap: 5px; /* Khoảng cách giữa các nút */
    padding: 0;
    list-style: none; /* Bỏ dấu chấm đầu dòng */
}

.year-button {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size:14px;
}

.year-button:hover {
    background-color: #e2e6ea;
    color: #212529;
}

.year-button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* CSS BCTC */

    /* Định dạng cho bảng Báo cáo tài chính */
    .custom-report-table {
        width: 100%;
        border-collapse: collapse;
    }

    /* Định dạng tiêu đề */
    .custom-report-table .table-header {
        background-color: #005aa6;
        color: white;
        font-weight: bold;
        text-align: left;
        padding: 10px;
    }

    /* Định dạng các ô th và td của bảng */
    .custom-report-table .table-cell, .custom-report-table .table-header-cell {
        padding: 10px 30px;
        border: 1px solid #ddd;
        text-align: center; /* Căn giữa theo chiều ngang */
        vertical-align: middle; /* Căn giữa theo chiều dọc */
    }

    /* Định dạng th cho các tiêu đề cột */
    .custom-report-table .table-header-cell {
        background-color: #f2f2f2;
        color: #005aa6;
        text-transform: uppercase;
        font-weight: bold;
    }

    /* Giảm kích thước các cột */
    .custom-report-table .quarter-column {
        width: 10%;
    }

    /* Định dạng link PDF */
    .custom-report-table .pdf-link {
        color: #005aa6;           /* Đổi màu chữ */
        font-weight: bold;         /* In đậm */
        text-decoration: none;     /* Bỏ gạch dưới */
    }

    .custom-report-table .pdf-link:hover {
        text-decoration: underline; /* Gạch dưới khi hover */
    }

    /* Định dạng ngày */
    .custom-report-table .date-text {
        font-size: 10px; /* Kích thước chữ nhỏ hơn */
        color: #666;
    }
.lang-icon {
    width: 30px; /* Hoặc kích thước bạn mong muốn */
    height: auto;
    vertical-align: middle; /* Căn giữa với văn bản nếu có */
}


 /* Vị trí cố định cho nút chính */
.social-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #005aa6;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social-btn:hover {
    background-color: #004080;
}

/* Nút back-to-top */
.back-to-top {
    position: fixed;
    bottom: 80px; /* Nằm trên nút social-btn */
    right: 20px;
    background-color: #ff9800;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.5s ease, visibility 0.5s ease, background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Ban đầu ẩn */
    visibility: hidden; /* Ban đầu không hiển thị */
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #e68900;
}

/* Ẩn các nút con mặc định */
.social-media-icons {
    position: fixed;
    bottom: 20px;
    right: 80px;
    opacity: 0;
    visibility: hidden;
    flex-direction: column;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.social-media-icons.show {
    opacity: 1;
    visibility: visible;
}

/* CSS cho các nút con */
.social-media-icons .btn {
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social-media-icons .btn img {
    width: 24px;
    height: 24px;
}

.social-media-icons .btn:hover {
    transform: scale(1.1);
}

/* Màu sắc riêng cho từng nút */
.btn-hotline {
    background-color: #e74c3c;
    color: white;
}

.btn-zalo {
    background-color: #0084ff;
    color: white;
}

.btn-facebook {
    background-color: #3b5998;
    color: white;
}

.btn-youtube {
    background-color: #ff0000;
    color: white;
}

.btn-tiktok {
    background-color: #010101;
    color: white;
}

        
/* Cấu hình chung cho tiêu đề các phần trong company-details */
.company-details .details-title1 {
    color: #005aa6; /* Đổi màu thành xanh */
    padding: 15px 0; /* Thêm padding trên và dưới đồng đều */
    font-weight: bold; /* Làm đậm tiêu đề để tạo điểm nhấn */
}

/* Tạo kiểu cho các icon trong phần thông tin */
.company-details .details-icon {
    color: #005aa6; /* Đổi màu icon thành xanh */
    margin-right: 8px; /* Thêm khoảng cách giữa icon và văn bản */
    vertical-align: middle; /* Căn giữa icon với văn bản */
}

/* Optional: Tạo khoảng cách giữa từng phần thông tin công ty */
.company-details p {
    margin-bottom: 10px; /* Tạo khoảng cách dưới mỗi đoạn văn để dễ đọc hơn */
}

.form-control-custom {
    height: 52px; /* Chiều cao tùy chỉnh cho các ô input */
    padding: 10px; /* Thêm padding để văn bản bên trong trông cân đối */
}

/* Riêng cho textarea: Đảm bảo nó dễ nhìn và thoải mái khi nhập nhiều nội dung */
.form-control-custom#message {
    height: auto; /* Giữ chiều cao tự động cho textarea */
    min-height: 100px; /* Đặt chiều cao tối thiểu cho textarea để dễ thao tác */
}

 /* Tùy chỉnh phong cách cho thông báo */
.custom-alert {
    position: fixed;
    bottom: 100px; /* Để hiện trên nút tròn */
    right: 30px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    max-width: 300px;
    z-index: 1050; /* Đảm bảo thông báo hiển thị trên các thành phần khác */
}
    /* Ẩn thông báo ban đầu */
.d-none {
    display: none !important;
}
/* Nút tròn hiển thị nút social */
.btn-social {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}



        /* Điều chỉnh kích thước của modal, giúp nó phù hợp với nội dung */
        #myPopup .modal-dialog {
            max-width: 800px;  /* Điều chỉnh độ rộng tối đa của popup */
        }
        
        /* Đảm bảo rằng ảnh trong popup có kích thước linh hoạt */
        #myPopup .modal-body img {
            width: 100%; /* Ảnh sẽ tự động điều chỉnh kích thước theo chiều rộng của modal */
            height: auto; /* Duy trì tỷ lệ khung hình */
        }
        
        /* Đảm bảo nội dung bài viết dễ đọc */
        #myPopup .article-content {
            font-size: 16px; /* Điều chỉnh kích thước chữ */
            line-height: 1.5; /* Điều chỉnh khoảng cách dòng */
        }
        
        /* Nếu cần, thêm padding hoặc margin cho các phần tử trong popup */
        #myPopup .modal-body {
            padding: 20px;
        }
        .modal.fade .modal-dialog {
            transition: none !important;  /* Loại bỏ chuyển tiếp */
        }
        
        
        
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 10px 5px #0084ff;  /* Đổi độ mờ và kích thước bóng */
                    transform: scale(1); /* Bắt đầu ở kích thước bình thường */
                }
                50% {
                    box-shadow: 0 0 30px 15px #00bfff;  /* Tăng độ mờ và kích thước bóng */
                    transform: scale(1.1); /* Tăng kích thước lên một chút */
                }
                100% {
                    box-shadow: 0 0 10px 5px #0084ff;  /* Trở lại kích thước và độ mờ ban đầu */
                    transform: scale(1); /* Trở lại kích thước ban đầu */
                }
            }
            
            .partner {
    position: relative;
    overflow: hidden; /* Đảm bảo hình ảnh không vượt ra ngoài */
}

.partner img {
    width: 260px;
    height: 150px;
    object-fit: cover; /* Đảm bảo hình ảnh phủ đầy khu vực mà không bị méo */
    object-position: center; /* Căn chỉnh hình ảnh ở giữa */
    transition: transform 0.3s ease; /* Thêm hiệu ứng chuyển động */
    background:white;
    padding:10px;
}

.partner p {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

/* Đảm bảo mỗi ô đều có chiều cao bằng nhau */
.row {
    display: flex;
    justify-content: space-evenly;
}

.col-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius:15px;
    padding-bottom:20px;
    width:254px;
}

.partner:hover img {
    transform: scale(1.1); /* Hiệu ứng khi hover */
}

@media (max-width: 768px) {
    .col-2 {
        height: 180px; /* Điều chỉnh chiều cao cho các màn hình nhỏ */
    }

    .partner img {
        max-width: 70px; /* Giảm kích thước hình ảnh trên các màn hình nhỏ */
    }
}

@media (max-width: 576px) {
    .col-2 {
        height: 160px; /* Điều chỉnh chiều cao cho màn hình điện thoại */
    }

    .partner img {
        max-width: 50px; /* Giảm thêm kích thước hình ảnh */
    }
}

/* Ẩn các mục trên màn hình nhỏ hơn */
@media (max-width: 576px) {
    .d-none.d-sm-block {
        display: none !important; /* Ẩn các đối tác trên màn hình nhỏ */
    }
}