/* Giới hạn tối đa 2 dòng 
    display: -webkit-box;
    -webkit-line-clamp: 2; // Dòng tối đa
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

*/
.pb-6{
    padding-bottom: 60px;
}
.base-bg{
    background-color: #121212;
}
.base-t{
    color: rgba(0, 32, 77, 1)!important;
}
/* footer  */
.ft-cn{
    color: rgba(0, 32, 77, 1);
    font-weight: 600;
    font-size: 47px;
    line-height: 35px;
}
.ft-ti{
    color: rgba(0, 32, 77, 1);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}
.ft-ti:hover{
    color: rgba(0, 32, 77, 1);
    font-size: 15px;
}
.ft-tc{
    color: rgba(0, 32, 77, 1);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    cursor: pointer;
}
/* table index  */
/* Tổng thể phần hiển thị */
.d-flex .rounded-top {
    width: 194px;
    height: 41px;
    background-color: #0F3558B2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    color: white;
}

.d-flex .rounded-top a {
    text-decoration: none;
    color: white;
}

.d-flex .bg-dark {
    width: 194px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    color: white;
    background: rgba(15, 53, 88, 0.7);
}

/* Form nhập */
.form-control {
    color: rgba(0, 32, 77, 1);
    font-weight: bold;
    /* text-align: center; */
}

/* Bảng dữ liệu */
.tb{
    border-radius: 14px;
}
.data-board {
    width: 100%;
    margin-top: 10px;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

.data-board thead tr {
    background-color: #8fd6ef;
    color: white;
}
.data-board thead tr th {
    background-color: #8fd6ef;
    color: white;
    padding: 10px;
}

.data-board tbody tr td {
    background-color: rgba(15, 53, 88, 0.7);
    color: white;
    padding: 10px;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Các dòng quan trọng */
.row-highlight-db td {
    background-color: #8fd6ef;
    color: white;
}

.bg-dark-blue-db td {
    background-color: #183c7c;
    color: white;
}

/* slider  */
.carousel-indicators {
    position: relative;
    margin-top: 16px; 
}

.carousel-indicators [data-bs-target] {
    background-color: #ffffff; 
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
/* card  */
.cc{
    background-color: rgba(143, 214, 239, 0.11);
    border-radius: 16px;
    width: 100%;
    /* max-width: 300px; */
}
.c-i{
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: rgba(143, 214, 239, 1);
}
.c-t{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c-b{
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
}
.c-b:hover, .c-t:hover{
    color: rgba(143, 214, 239, 1);
    cursor: pointer;
}
.cc img {
    width: 100%; 
    height: 180px; 
    object-fit: cover; 
    border-radius: 8px; 
}
.cc img:hover{
    transform: scale(1.05); 
    cursor: pointer; 
    transition: transform 0.3s ease; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
}

.chart-trade {
    position: relative;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 30px;
}

.chart-trade:hover {
    border-radius: 9px;
}

/* Hiệu ứng Shine */
.chart-trade::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 80%);
    transform: skewX(-30deg);
    transition: left 0.6s ease-in-out;
}

.chart-trade:hover::after {
    left: 100%;
}

@media (min-width: 768px ) {
    .chart-trade{
        margin-bottom: 20px;
    }
    .carousel-inner .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}


.s-p {
    background-color: rgba(143, 214, 239, 0.23); 
    padding: 10px 0;
}

.s-l .d-flex > div {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

/* price chart list */
.pc-l{
    background: linear-gradient(135deg, #182848, #00416a);
    height: 250px;
}
.pc-i{
    border-right: 2px solid #ffffff;
}
.pc-i:last-child{
    border-right: none;
}

/* Product Service */
.product-service {
    padding: 60px 0;
    color: white;
    animation: fadeIn 0.5s ease-in-out;
}

.product-service-b {
    background: rgba(15, 53, 88, 0.7);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
    .product-service{
        padding: 80px 0;
    }
}
/* Breadcrumb */
.breadcrumb {
    font-size: 14px;
    color: #AAB2D5;
    margin-bottom: 10px;
}

.text-highlight {
    color: #E0E6FF;
    font-weight: 500;
}

/* Section Headers */
.section-header {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-title {
    max-width: 162px;
    font-size: 24px;
    font-weight: 600;
    color: rgba(143, 214, 239, 1);
}

/* Service List */
.service-list {
    display: flex;
    flex-wrap: wrap; /* Tự động xuống dòng khi không đủ chỗ */
    gap: 20px; /* Khoảng cách giữa các mục */
}

.service-i {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(50% - 10px); 
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #E0E6FF;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.service-i :hover {
    color: #56A4FF;
    border-bottom: 2px solid #56A4FF;
    transform: translateX(5px);
}
/* text in image */
/* Khối sản phẩm */
.effect-3 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 14px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Đổ bóng bên ngoài */

}
.effect-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%; /* Tăng chiều cao bóng mờ */
    
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    
    pointer-events: none;
}

.effect-3:hover {
    transform: scale(1.03);
}

.effect-img {
    border-radius: 14px;
    width: 100%;
    height: 200px; 
    overflow: hidden;
    box-shadow: 0px -50px 100px rgba(0, 0, 0, 0.7) inset;

}

.effect-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giữ tỉ lệ ảnh */
    display: block;
    transition: transform 0.3s ease;
}

.effect-3:hover .effect-img img {
    transform: scale(1.1);
}

/* Overlay chứa tiêu đề và danh sách */
.effect-text {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    padding: 20px;
    position: absolute;
    top: 35%;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    padding: 15px;
    color: #fff;
    transition: top 0.3s ease-in-out; 
}
.effect-3:hover .effect-text {
    top: 20%;
}
/* .service-box p {
    font-weight: 600; 
    font-size: 16px;
    line-height: 24px;
} */
.effect-3:hover .effect-img img {
    filter: brightness(0.4); 
    transform: scale(1.1); 
}

/* Tiêu đề luôn hiển thị */
.effect-text h5 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    z-index: 2; 
}

/* Ẩn danh sách ul ban đầu */
.effect-text ul {
    padding: 0;
    margin: 0;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 2; 
}
.effect-3 ul {
    list-style: circle; 
    /* padding-left: 20px; */
    list-style-position: inside; 
}
/* Khi hover vào .effect-3, hiện danh sách ul */
.effect-3:hover .effect-text ul {
    opacity: 1;
    max-height: 200px; 
    margin-bottom: 90px;
}
.effect-3 ul li{
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: rgba(143, 214, 239, 1);
    margin: 10px 0;
}


.effect-3 ul li:last-child{
    border: none;
}

/* service  */
.service-box {
    border-left: 6px solid rgba(143, 214, 239, 1);
    /* text-align: center; */
    padding: 20px 20px 15px 20px;
    background-color: rgba(7, 35, 61, 1);
    color: rgba(143, 214, 239, 1);
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    padding-left: 34px;
    margin-bottom: 20px;
    height: 100%;
  }
  .service-box:hover {
    color: #ffffff;
    transform: translateY(-5px);
    background-color: rgba(143, 214, 239, 1);
    border-left: 5px solid #ffffff;
  }
  .service-box:hover i {
    color: #ffffff !important;
  }
  .service-box i {
    font-size: 30px;
    margin-bottom: 10px;
    display: block;
    color: rgba(143, 214, 239, 1);
  }
  .service-box p {
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    margin: 0;
  }
  .service-box:hover {
    background-color: rgba(143, 214, 239, 1);
    transform: translateY(-5px);
  }
  
/* cusstom bảng  */
.table-responsive {
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }
  .table tbody tr:nth-child(odd) {
    background-color: #0060c1;
  }
  .table tbody tr:nth-child(even) {
    background-color: #ff0000;
  }
  .btn-primary {
    background-color: rgba(0, 32, 77, 1) !important;
    border-color: rgba(0, 32, 77, 1) !important;
  }
  .btn-primary:hover {
    background-color: #fff!important;
    color: rgba(0, 32, 77, 1) !important;
  }
  .table thead th {
    text-transform: uppercase;
    color: rgba(0, 32, 77, 1);
  }
  .table tbody tr td{
    color: rgba(0, 32, 77, 1);
  }
  .table-content p{
    max-width: 500px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: normal;
  }
.table tbody tr td p{
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
.table-responsive{
    border-radius: 14px;
}

/* form search  */
.custom-form {
    width: 100%;
    margin-bottom: 30px;
}

.form-grid {
    display: grid;
    grid-template-columns: 40% 40% 20%;
    gap: 20px;
    align-items: center; 
    padding: 20px;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group label{
    width: 30%;
}
.form-group input, .form-group .select-wrapper{
    width: 70%;
}
.select-wrapper{
    width: 100%;
}
label {
    margin-right: 20px;
    width: 30%;
    white-space: nowrap;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
}

.form-control-custom {
    width: 100%;
    color: #fff;
    flex-grow: 1;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    padding: 5px;
    background: transparent;
    outline: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 50% 50%;
    }

    .btn-group {
        grid-column: span 2;
    }
}


@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 100%; 
    }

    .form-group {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label,.form-group input{
        width: 100%; 
        margin-bottom: 5px;
    }
    .form-group .select-wrapper {
        width: 100%;
    }

    .btn-group {
        grid-column: span 1;
        width: 100%;
    }

    .btn-custom {
        width: 100%;
        margin: 20px 0;
    }
}
.select-wrapper {
    position: relative;
    flex-grow: 1;
}

.select-wrapper::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
}


select {
    appearance: none;
    background: transparent;
    padding-right: 30px; 
    width: 100%;
}
/* Áp dụng style cho option */
.select-wrapper select option {
    background-color: #fff;  /* Màu nền */
    color: rgb(13, 72, 126);  /* Màu chữ */
    padding: 10px;
}

/* Khi hover */
.select-wrapper select option:hover {
    background-color: #50a7ff;
    color: #fff;
}

.btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2; 
    height: 100%;
    width: 130px;
    margin: 0 auto;
}

.btn-custom {
    background-color: rgba(46, 181, 249, 1);
    color: white;
    padding: 7px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-weight: 600;
    line-height: 24px;
    font-size: 16px;
}

.btn-custom:hover {
    background-color: #3498db;
    transform: scale(1.05);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
}

.btn-custom:active {
    transform: scale(0.95);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* business profile  */
.filter-group {
    padding: 15px;
}
.filter-item button {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}
.filter-item button:last-child{
    color: rgba(46, 181, 249, 1);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}
.filter-item .active{
    background: rgba(46, 181, 249, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
}

/* Ô tìm kiếm */
.search-box {
    background-color: rgba(15, 53, 88, 0.8);
    color: white;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    height: 50px;
}

.search-box i {
    font-size: 20px;
    margin-right: 10px;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    color: white;
    width: 100%;
    font-size: 16px;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Gạch ngang dưới input */
.search-box::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: white;
}

/* Dropdown chung */
.custom-select {
    background-color: rgba(15, 53, 88, 0.8);
    color: white;
    border-radius: 8px;
    padding: 8px 15px;
    width: 100%;
    max-width: 150px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-select select {
    appearance: none;
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    font-size: 16px;
    outline: none;
    padding-right: 20px;
}
.custom-select option {
    text-align: center;
    background-color: #00416a;
    color: white;
}


/* Icon dropdown */
.custom-select::after {
    content: "\f282";
    font-family: "Bootstrap-icons";
    font-size: 16px;
    position: absolute;
    right: 15px;
    pointer-events: none;
}

/* Nhóm label + dropdown */


.d-flex p {
    margin: 0;
    color: white;
    font-weight: 500;
}

/* Căn chỉnh nút XEM */
.btn-search {
    width: 100%;
    max-width: 120px;
    text-align: center;
    color: white;
    background-color: rgba(15, 53, 88, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search:hover {
    background-color: rgb(13, 72, 126);
}



/* bussines info  */
.company-logo{
    width: 300px;
}
.company-logo img{
    border-radius: 14px;
    object-fit: cover;
}
.b-name{
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 10px;
}
.b-category{
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    padding-bottom: 5px;
}
.b-desc {
    width: 100%;
}

.text-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    max-height: 4.8em; /* 2 dòng */
    overflow: hidden;
}

.text-container p {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

.text-container a {
    white-space: nowrap;
    margin-left: 15px; 
    color: rgba(46, 181, 249, 1);
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}
/* table switch  */
.nav-tabs .nav-link {
    color: rgba(0, 32, 77, 1);
    background-color: rgba(255, 255, 255, 1);
    border-right: 2px solid rgba(0, 32, 77, 1);
    border-bottom: 2px solid rgba(0, 32, 77, 1);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}
.nav-tabs .nav-link.active {
    background-color: rgba(0, 32, 77, 1);
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}
.table-container {
    background: #F5F6FA;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}
.tab-pane table thead tr th {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    height: 50px;
    color: rgba(0, 32, 77, 1);
}
.tab-pane table tbody tr td {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    height: 50px;
    color: rgba(0, 32, 77, 1);
    padding: 10px;
}
@media (max-width: 1024px) {
    .nav.nav-tabs {
        flex-direction: column; /* Tabs chuyển thành dạng dọc */
        align-items: center;
    }

    .nav-item {
        width: 100%;
        text-align: center;
    }

    .nav-link {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .nav-tabs {
        display: none !important; /* Ẩn tab khi dưới 768px */
    }

    .tabSelector {
        display: block !important; /* Hiện dropdown thay thế */
    }
    #tabSelector{
        border-radius: 9px 9px 0 0;
    }
}


/* card trade  */
/* card trade */
.card-trade, .chart-container, .news-view {
    display: flex;
    flex-direction: column;
    background-color: rgba(143, 214, 239, 0.18);
    border-radius: 8px;
    padding: 25px 25px 0 25px;
    min-height: 100%;
}

.card-trade p {
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
}

.card-trade .price {
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-trade .price p {
    font-weight: 700;
    font-size: 36px;
    line-height: 26px;
    color: rgba(66, 215, 74, 1);
    margin: auto 0;
}

.card-trade .price .change {
    font-weight: 500;
    font-size: 11px;
    line-height: 18px;
    color: rgba(66, 215, 74, 1);
    margin: 0 auto;
}

.parameter {
    display: flex;
    justify-content: space-between;
}
.ud {
    border-bottom: 1px solid rgba(143, 214, 239, 0.16);
    margin-bottom: 10px;
}

.param-t {
    color: rgba(46, 181, 249, 1);
}

.param-c {
    color: rgba(255, 255, 255, 1);
    margin-left: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* biểu đồ lọc */
.filter-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    color: white;
}
.filter-select {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: white;
}

/* Ẩn button trên mobile */
@media (max-width: 767px) {
    .filter-buttons {
        display: none !important;
    }
}

/* Ẩn dropdown trên desktop */
@media (min-width: 768px) {
    .filter-select {
        display: none;
    }
}

.filter-buttons .btn.active {
    background: #42A5F5;
    color: white;
}


.y-labels {
    font-size: 14px;
    color: #fff;
}

/* news view */
.news-head h5 {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: rgba(255, 255, 255, 1);
}

.news-head a {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(46, 181, 249, 1);
    text-decoration: solid;
}



/* biểu đồ quý*/
.quarter-btn button {
    background-color: transparent; 
    color: rgba(46, 181, 249, 1);
    border: 2px solid rgba(46, 181, 249, 1);
    border-radius: 8px;
    padding: 10px 15px;
    margin-right: 40px;

    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    transition: all 0.3s ease;
}
.quarter-btn button:hover {
    background-color: rgba(46, 181, 249, 1);
    color: rgba(255, 255, 255, 1);
}
.quarter-btn .quarter-btn-active{
    background-color: rgba(46, 181, 249, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    margin-right: 40px;

    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.chart-img img {
    max-width: 300px;
    height: 300px;
    width: 100%;
    height: auto;
    margin-top: 20px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.chart-img img:hover {
    transform: scale(1.05); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.select-wrapper {
    display: flex;
    justify-content: center;
}
#tabSelector {
    text-align: center;
    text-align-last: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* shareholder_relations.html */
.filter-btn a{
    font-weight: 600;
    font-size: 17px;
    line-height: 40px;
    color: rgba(255, 255, 255, 1);
    margin-right: 20px;
  }
.filter-btn .filter-btn-active{
    font-weight: 600;
    font-size: 17px;
    line-height: 40px;
    color: rgba(143, 214, 239, 1);
}
  































/* ======================== Responsive ======================== */
@media (max-width: 600px) {
    .table {
        font-size: 14px;
    }
}
@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 40% 40% 20%;
    }
}
/* Mobile (dưới 768px) */
@media screen and (max-width: 767px) {
    .quarter-btn{
        
    }
    .param-t{
        margin-right: 20px;
    }
    .news-view{
        width: 100%;
    }
    .card-trade, .chart-container, .news-view {
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    .card-trade p {
        font-size: 10px;
        line-height: 18px;
    }

    .card-trade .price {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .card-trade .price p {
        font-size: 28px;
        line-height: 22px;
    }

    .card-trade .price .change {
        font-size: 10px;
    }

    .parameter {
        align-items: flex-start;
    }

    .param-c {
        margin-left: 0;
    }

    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .y-labels {
        font-size: 12px;
    }

    .news-head h5 {
        font-size: 20px;
        line-height: 30px;
    }

    .news-head a {
        font-size: 12px;
        line-height: 20px;
    }
}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .chart-view {
        display: flex;
        justify-content: center; /* Căn giữa theo chiều ngang */
        align-items: center; /* Căn giữa theo chiều dọc */
        height: 100vh; /* Đảm bảo toàn màn hình */
    }
    .card-trade p {
        font-size: 11px;
    }
    .card-trade, .chart-container, .news-view {
        padding: 15px;
    }
    .card-trade p {
        /* font-size: 11px; */
    }

    .card-trade .price p {
        font-size: 32px;
    }

    .card-trade .price .change {
        font-size: 10px;
    }

    .news-head h5 {
        font-size: 22px;
    }

    .news-head a {
        font-size: 13px;
    }
}

/* Desktop (>1024px) */
@media screen and (min-width: 1025px) {
    .news-head h5 {
        font-size: 26px;
    }
}



































/* Đảm bảo khi xuống dòng vẫn cân đối */
@media (max-width: 768px) {
    .service-i  {
        width: 100%; /* Trên màn hình nhỏ thì mỗi mục chiếm toàn bộ hàng */
    }
}

/* Responsive */
@media (max-width: 768px) {
    .filter-item {
        flex-direction: column;
        gap: 10px;
    }

    .custom-select,
    .btn-search {
        max-width: 100%;
    }
    .b-s{
        width: 100%;
    }
}





@media (max-width: 768px) {
    .d-flex {
        flex-wrap: wrap;
    }
    .s-l .d-flex > div {
        flex-basis: 50%;
        padding: 8px 0;
    }
    .s-l .d-flex > div:last-child {
        flex-basis: 100%; 
        margin-top: 8px;
    }
}
.title-service{
    padding-left: 70px;
}

@media (max-width: 768px) {
    .product-service-b{
        padding: 20px;
    }
    .title-service{
        padding-left: 10px;
    }
    .header .logo{

    }
    .header .logo img{

    }
    .hero {
        padding: 10px 0; 
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .carousel-inner .row {
        justify-content: center; 
    }

    .col-md-3 {
        margin-bottom: 10px;
    }
    
    .col-md-3 {
        margin-bottom: 10px;
    }
    .rps-mb{
        margin-bottom: 20px;
    }
}


@media (max-width: 991px) {
    .btn-chart{
        display: flex;
    }
}
@media (max-width: 768px) {
    .pc-l {
        flex-direction: column;
        height: auto;
    }

    .pc-i {
        border-right: none; /* Ở mobile, không cần border phải */
        border-bottom: 2px solid #ffffff; /* Thêm border dưới để phân chia */
        width: 100%;
        text-align: center;
    }

    .pc-i:last-child {
        border-bottom: none;
    }
}

/* Table chart */
.table-chart-btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #16213E; /* Nền tab */
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.table-chart-btn a {
    text-align: center;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
}

/* Nút được chọn */

.btn-chart .active{
    border: none;
    padding: 15px 25px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(15, 53, 88, 0.7);
    border-radius: 9px 9px 0 0 ;
}
.btn-chart button{
    border: none;
    padding: 15px 25px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 9px 9px 0 0 ;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
}
.btn-chart button:hover{
    background-color: rgba(15, 53, 88, 1);
}
.chart-table{
    background-color: rgba(15, 53, 88, 0.7);
    padding: 20px;
    border-radius: 0 9px 9px 9px ;
}
.table-view table tbody tr td {
    background-color: #00416a;
    color: rgba(255, 255, 255, 1);
}
.table-view table thead tr th{
    background-color: rgba(143, 214, 239, 1);
    color: rgba(255, 255, 255, 1);
}
@media (max-width: 600px) {
    .chart-i .chart-t{
    }
}
@media (max-width: 768px) {
    .filter-group .col-md-3 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .filter-group .col-md-3.d-flex p {
        display: block;
        margin-bottom: 5px;
    }

    .filter-group .col-md-3 .custom-select {
        width: 100%;
    }
}
.filter-buttons {
    display: flex;
    flex-wrap: wrap; /* Đảm bảo các nút xuống dòng khi không đủ chỗ */
    justify-content: center; /* Căn giữa nút */
    gap: 10px; /* Khoảng cách giữa các nút */
}

.filter-buttons .btn {
    flex: 1; /* Các nút tự giãn theo hàng ngang */
    min-width: 100px; /* Đảm bảo nút không quá nhỏ */
    white-space: nowrap; /* Giữ nội dung nút trên một dòng */
}

/* Responsive cho tablet */
@media (max-width: 1024px) {
    .filter-buttons {
        justify-content: center; /* Giữ các nút căn giữa */
    }

}

/* Responsive cho mobile */
@media (max-width: 768px)and (max-width: 1024px) {
    
    .filter-buttons {
        flex-direction: column; /* Nút xếp dọc khi không đủ chỗ */
        align-items: center;
    }
    .tabSelector {
        display: block !important;
    }

    .filter-buttons .btn {
        width: 80%; /* Đảm bảo nút không quá to trên mobile */
    }
}
.section.dark-background {
    overflow: visible !important;
}
.chart-view > .col-md-4 {
    min-height: 100%;
}
.section, .container {
    overflow: hidden;
}

@media (max-width: 767px) {
    .pros{
        width: 90%;
    }
    .filter-buttons {
        justify-content: space-between;
    }
}


.tabs-chart button {
    border: none;
    margin-right: 10px;
    background: none;
    color: rgba(143, 214, 239, 1);
    border: 1px solid rgba(143, 214, 239, 1);
    padding: 10px 10px;
    border-radius: 9px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    transition: all 0.3s ease-in-out; /* Thêm hiệu ứng chuyển đổi */
}


.tabs-chart button:hover {
    background-color: rgba(143, 214, 239, 0.2); 
    color: rgba(46, 181, 249, 1); 
    border-color: rgba(46, 181, 249, 1);
    transform: scale(1.05);
}


.tabs-chart .active {
    border: none;
    margin-right: 10px;
    background-color: rgba(46, 181, 249, 1);
    color: rgba(255, 255, 255, 1);
    padding: 10px 10px;
    border-radius: 9px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}


.tabs-chart .active:hover {
    background-color: rgba(35, 150, 220, 1); 
    transform: scale(1.05);
}

.chart-img-tabs {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease-in-out; 
}

.chart-img-tabs img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px; 
    transition: all 0.3s ease-in-out;
}
.chart-img-tabs:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
    .res-btn{
        width: 100%;
    }
}



/* nhan dinh tin tuc  */
.custom-dropdown {
    position: relative;
    min-width: 420px
}
@media (max-width: 768px) {
    .custom-dropdown {
       min-width: 100%;
    }
    .search-container{
        min-width: 100%;
        margin: 10px 0;
    }
 }
.custom-dropdown select {
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%; /* Full width */
    height: 58px;
}

/* Hiệu ứng gạch chân */
.custom-dropdown select:focus {
    outline: none;
    border-bottom: 2px solid white;
}

/* Mũi tên custom */
.custom-dropdown::after {
    content: "▾";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
    pointer-events: none;
}

.custom-dropdown select option {
    color: #000;
}

/* Responsive cho mobile */
@media (max-width: 375px) and (max-height: 667px) {
    .row {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .custom-dropdown,
    .search-container {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .custom-dropdown select {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }

    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;
    }

    .search-container input {
        width: 100%;
        max-width: 400px;
        padding: 10px;
        font-size: 16px;
        padding-left: 35px; /* Đẩy text qua để tránh icon */
    }

    .search-container i {
        position: absolute;
        left: 10px;
        font-size: 18px;
        color: gray;
    }
}

  /* Chỉnh input */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
  }
  .search-container i {
    position: absolute;
    left: 10px;
    color: white;
    font-size: 18px;
  }
  .custom-input {
    width: 100%;
    padding: 10px 10px 10px 30px;
    background: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid white;
    outline: none;
    font-size: 16px;
    border-radius: unset;
  }
  .custom-input::placeholder {
    color: white;
    opacity: 0.7;
  }
  .custom-input:focus {
    color: #ffff;
    border-bottom: 2px solid white;
    background: none;
    outline: none;
  }




/* post  */
.list-post {
    margin-top: 20px;
}


.new-post {
    width: 100%;
    max-width: 400px;
    height: auto;
    /* background: rgba(255, 255, 255, 0.05); */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.new-post-img {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}
.new-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}
.new-post-img img:hover {
    transform: scale(1.05);
}


.new-post-title a {
    color: rgba(255, 255, 255, 1)!important;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.new-post-title a:hover {
    color: rgba(46, 181, 249, 1)!important;
}
.post-detail{
    list-style: none;
}
.new-post .new-post-title a:hover, .post-item .new-post-title a:hover, .post-detail .new-post-title a:hover{
    color: rgba(46, 181, 249, 1)!important;
}

.new-post-desc p {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.73);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.post-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(143, 214, 239, 1), rgba(80, 160, 200, 1));
    border-radius: 2px;
    margin: 8px 0;
}


.post-item {
    list-style: none;
    padding-bottom: 13px;
    transition: background 0.3s ease-in-out;
}

/* Định dạng hàng chứa các cột */
.list-post .row {
    display: flex;
    align-items: flex-start;
}

.list-post .col-md-4 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.p-img {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 9px;
}

.p-img img {
    width: 100%;
    max-height: 80px;
    object-fit: cover;
    border-radius: 9px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.p-img img:hover {
    
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.post-layout {
    width: 100%;
}
@media (max-width: 820px) {
    .nav-pills {
        flex-wrap: nowrap; /* Ngăn các tab xuống dòng */
        overflow-x: auto; /* Cho phép cuộn ngang nếu tab quá dài */
        white-space: nowrap;
        justify-content: center; /* Canh giữa các tab */
    }

    .nav-pills .nav-item {
        flex: 1;
        text-align: center;
    }

    .nav-pills .nav-link {
        font-size: 14px; /* Giảm kích thước chữ */
        padding: 8px 12px;
    }
}

@media (max-width: 768px) {
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: center;
        padding-bottom: 5px; /* Thêm khoảng cách để dễ bấm */
    }

    .nav-pills .nav-item {
        flex: 1;
        text-align: center;
    }

    .nav-pills .nav-link {
        font-size: 13px; 
        padding: 6px 10px;
    }
}
.nav-pills .nav-item .nav-link{
    color: rgba(201, 224, 255, 1)!important;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}
.nav-pills .nav-item .active {
    border: 1px solid #ffff; 
    color: #ffff;
    font-size: 14px;
    line-height: 24px;
    border-radius: 8px; 
    <!-- padding: 8px 16px; -->
    transition: all 0.3s ease-in-out;
    background-color: transparent; 
}
.nav-pills{
    display: flex;
    align-items: center;

}


.news-newly-item {
    position: relative;
    width: 100%;
    max-width: 350px; 
}

.news-image {
    position: relative;
    display: inline-block;
}

.news-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.news-date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(143, 214, 239, 1); 
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 5px;
}

.news-newly-item p {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
    margin: 5px 0;
    display: -webkit-box;  
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;              
    text-overflow: ellipsis;   
    white-space: normal;           
    max-width: 100%;             
}
/* .new-post-title a{
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
} */
/* Màn hình từ 820px trở xuống */
@media (max-width: 820px) {
    .news-newly-item p {
        font-size: 16px;
        line-height: 22px;
    }
    .news-date {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* Màn hình từ 768px trở xuống */
@media (max-width: 768px) {
    .news-newly-item p {
        font-size: 14px;
        line-height: 20px;
    }
    .news-date {
        font-size: 11px;
        padding: 3px 5px;
    }
}

.base-title{
    font-weight: 700;
    font-size: 22px;
    line-height: 40px;
}


.account{
    background-color: #ffff;
    padding: 8px 16px;
    border-radius: 9px;
}
.account:hover{
    background-color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}
.account a{
    color: rgba(0, 32, 77, 1);
}

.breadcrumb p span{
    color: rgba(143, 214, 239, 1);
}

.filter-container active{
    
}


.filter-btn a {
    text-decoration: none;
    padding-right: 1rem;
    border-right: 1px solid rgba(143, 214, 239, 1); 
}

.filter-btn a:last-child {
    border-right: none; 
}


/* img background  */
.bg-main {
    background-image: url('../img/bg-main.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}
:root { 
    --sky-coclor: rgba(143, 214, 239, 1);
    --white-color: rgba(255, 255, 255, 1);
}
.news-poster {
    width: 100%;
    margin: 30px 0;
    max-height: 330px;
    overflow: hidden; /* Tránh tràn ảnh */
}

.news-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



.chart-line {
    position: relative;
    width: 100%;
    height: 250px;
    border: 1px solid white; 
    border-right: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.line {
    width: 100%;
    height: 1px;
    background-color: white;
}

.param-g{
    color: rgba(143, 214, 239, 1);
}

/* fix footer  */
.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #0f0f4a;
}

.icon {
    width: 24px;
    height: 24px;
    background-color: #0f0f4a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    margin-right: 10px;
    flex-shrink: 0;  /* Ngăn không cho icon bị ép lại */
}

.text-wel{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.contact-item span{
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}
@media (max-width: 576px) {
    .text-wel {
        font-size: 14px;
        line-height: 20px;
    }

    .contact-item span {
        font-size: 12.5px;
        line-height: 20px;
    }
}
.filter-lable{
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: calc(14px * 2 / 100);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f105"; /* Mã Unicode của Font Awesome "fa-angle-right" */
    font-family: "Font Awesome 6 Free"; /* Font Awesome */
    font-weight: 900; /* Font đậm */
    margin: 0 6px; /* Cách chữ 6px */
    color: #ffff; /* Màu xám nhẹ */
}

.breadcrumb-item.active a{
    color: rgba(143, 214, 239, 1);
}
.breadcrumb-item a{
    color: white;
}

.text-root{
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
}

.btn-chart{
    border-bottom: none;
}
.btn-chart .nav-item button {
    background-color: rgba(0, 0, 0, 0.55);
    color: #ffff;
}
.btn-chart .nav-item .active{
    background-color: rgba(15, 53, 88, 0.7);

}


/* Section Title */
.sec-title {
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: 600;
    margin: 40px 0 20px;
    padding: 15px 25px;
    background: linear-gradient(90deg, rgba(26, 115, 232, 0.1), transparent);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.sec-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="rgba(26,115,232,0.1)" d="M40-20c50,60,100,30,150,90s50,120,0,180-100,90-150,30-50-120,0-180z"/></svg>');
    background-size: 200px;
    opacity: 0.3;
}

.modern-card {
    border: none;
    border-radius: 15px;
    box-shadow: var(--shadow);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-content {
    padding: 30px;
    line-height: 1.8;
}

.fee-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.fee-item:last-child {
    margin-bottom: 0;
}

.fee-item:hover {
    background: #e9ecef;
}

.feature-icon {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-right: 15px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.fee-item:hover .feature-icon {
    transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .sec-title {
        font-size: 1.5rem;
        padding: 10px 15px;
    }
    .card-content {
        padding: 20px;
    }
    .fee-item {
        padding: 15px;
    }
}

#language-select {
  padding: 8px 12px;
  font-size: 16px;
  border: 1.5px solid #0f0f4a;
  border-radius: 6px;
  background-color: white;
  color: #0f0f4a;
  cursor: pointer;
  min-width: 160px;
  transition: border-color 0.3s ease;
}

#language-select:hover,
#language-select:focus {
  border-color: #3a3a9f;
  outline: none;
  box-shadow: 0 0 5px rgba(58, 58, 159, 0.5);
}

/* Responsive nhỏ hơn mobile */
@media (max-width: 480px) {
  #language-select {
    width: 90%;
    font-size: 14px;
    min-width: auto;
  }
}