.calendar {
    margin: 24px auto;
    padding: 0 8%;
}

.toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    border: 1px solid #ddd;
    background: #37cf91;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

    .btn:hover {
        border: 1px solid #37cf91;
        background: none;
        color: #37cf91 !important;
    }
.table > thead > tr {
    color: #707070;
    font-weight: 400;
     background: none!important;
    /*background-image: -o-linear-gradient(top,#F8F8F8 0,#ECECEC 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0);
}
.input, select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    color:#cccccc80;
}

    .table th, .table td {
        padding: 0px 10px;
        border-bottom: 1px solid #eeeeee19;
        border-left: 1px solid #eeeeee19;
        border-right: 1px solid #eeeeee19;
        vertical-align: middle;
        text-align: left;
    }
    /* ✅ canh giữa theo cả chiều ngang và dọc */
    .table th {
        position: sticky;
        top: 52px;
        background: #fafafa;
        z-index: 2;
    }

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.muted {
    color: #888;
}

.star {
    color: gold;
    font-size: 14px;
    margin-right: 2px;
}
/* ✅ sao vàng */
.flag {
    margin-right: 6px;
}
.badge {
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 35px;
    background: #fff;
    color:#666666;
}
/* ... phần cũ của bạn ... */
.chips {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #252525;
    color: #cccccc;
    border: 1px solid #eeeeee19;
    text-decoration: none;
    user-select: none;
    transition: .15s background,.15s color,.15s border;
}

    .chip:hover {
        background: #eceff1;
        color: #333;
        text-decoration: none;
    }

    .chip.active {
        background: #37cf91;
        color: #000;
        font-weight: 700;
        border-color: #37cf91;
        text-decoration:none;
    }

.rangebox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    border: 1px solid #eeeeee19;
    border-radius: 5px;
    background: #333333;
    margin-left: auto;
    margin-top: 15px;
    color: #ff9d9d80;
}
    .rangebox input[type="date"] {
        border: none;
        outline: none;
        background: #252525;
        padding: 0;
        color: #cccccc80;
    }

    .rangebox span.sep {
        color: #9ca3af;
    }

    .rangebox .icon {
        color: #9ca3af;
    }

@media (max-width:640px) {
    .rangebox {
        width: 100%;
        justify-content: space-between;
    }
}
.tieudelich {
    padding: 0px 12px;
    font-size:150%;
    color:#37cf91;
    padding-top:90px;
    font-weight:600;
}
/* Container cho cuộn ngang */
.table-scroll-x {
    width: 100%;
    overflow-x: auto; /* Cho phép cuộn ngang */
    -webkit-overflow-scrolling: touch; /* Mượt trên iOS */
}

    /* Giúp bảng không bị bóp vỡ layout khi hẹp */
    .table-scroll-x table {
        min-width: 800px; /* tùy bảng của bạn; tăng/giảm cho phù hợp */
        border-collapse: collapse;
    }

    /* Tùy chỉnh thanh cuộn cho WebKit (Chrome, Safari, Edge) */
    .table-scroll-x::-webkit-scrollbar {
        height: 3px; /* độ dày thanh cuộn ngang */
    }

    .table-scroll-x::-webkit-scrollbar-track {
        background: transparent; /* hoặc #f1f1f1 nếu muốn nền */
    }

    .table-scroll-x::-webkit-scrollbar-thumb {
        background: #aaa; /* màu thanh kéo */
        border-radius: 4px;
    }

        .table-scroll-x::-webkit-scrollbar-thumb:hover {
            background: #777;
        }

/* Tùy chỉnh cho Firefox */
.table-scroll-x {
    scrollbar-width: thin; /* mỏng */
    scrollbar-color: #aaa transparent; /* màu thumb và track */
}

/* Tránh xuống dòng gây đội chiều cao khi màn hình nhỏ */
@media (max-width: 768px) {
    #tbl th, #tbl td {
        white-space: nowrap;
    }
    /* Giảm padding để đỡ rộng trên mobile */
    #tbl th, #tbl td {
        padding: 6px 8px;
    }
        /* Tùy chọn: co bớt các cột số */
        #tbl td.mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.95em;
        }
}

/* (Tùy chọn) Giữ header dính khi cuộn ngang/dọc */
#tbl thead th {
    position: sticky;
    top: 0;
    /*background: #fff;*/ /* đổi theo theme của bạn */
    z-index: 2;
    /* Thêm viền dưới để tách */
    border-bottom: 1px solid #eeeeee19;
    border-left: 1px solid #eeeeee19;
    border-right: 1px solid #eeeeee19;
    padding:6px 10px;
}

.calendar.two-cols {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 12px
}

.mini-cal .nav {
    display: block;
    justify-content: space-between;
    align-items: center;
    margin: .25rem 0;
    text-align:center;
    width:100%;
    padding-bottom:5px;
}

.mini-cal table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

.mini-cal th, .mini-cal td {
    text-align: center;
    padding: .25rem;
    border: 1px solid #eeeeee19;
}

.mini-cal a.day {
    display: block;
    border-radius: .4rem;
    text-decoration: none;
    color: inherit;
    padding: .35rem 0
}

.mini-cal .muted {
    color: #bbb
}

.mini-cal .inrange {
    background: #313131;
}

.mini-cal .start, .mini-cal .end {
    background: #4caf50;
    color: #fff
}

.mini-cal .today {
    outline: 1px solid #cccccc80;
    border-radius: .4rem
}

.mini-cal .weekpick {
    width: 1.6rem
}

.chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0
}

.chip {
    border: 1px solid #eeeeee19;
    border-radius: 5px;
    padding: 3px 25px;
    text-decoration: none;
    color: #666666;
    margin-top: 15px
}

    .chip.active {
        background: #333;
        color: #cccccc;
        border-color: #333
    }

.range-title {
    font-weight: 600;
    margin: .25rem 0 .5rem
}

.table-scroll-x {
    overflow: auto
}

.star {
    color: #f0b400
}
.mini-cal .muted {
    color: #ddd;
}

.table, .calendar-left {
    font-size: 12px;
}
.mini-cal .start, .mini-cal .end {
    background: #4caf50;
    color: #fff;
}
table {
    background: #252525;
}
.table > thead > tr > th {
    border-top: 3px solid #37cf91;
    background-image: linear-gradient(to bottom, #383839, #191a1a) !important;
    color: #cccccc80;
    text-align: center;
    font-weight: 600;
    position: relative;
    border-bottom: 1px solid #cccccc1a;
    padding: 6px 2px;
}

    .table > thead > tr > th::before {
        content: "";
        background: linear-gradient(180deg, #cccccc17 20%, #cccccc00 80%);
        top: 0px;
        width: 100%;
        height: 100%;
        left: 0px;
        position: absolute;
    }
.bank_rates {
    margin-top: 20px;
    width: 100%;
    padding: 10px 20px;
    background: no-repeat;
}
.flag{
    width:19px;
}
.bank_rates thead th {
    padding: 30px 20px;
    padding-bottom: 20px;
}
.bank_rates tr{
    border-bottom:1px solid #eeeeee19; 
}
.calendar.two-cols {
    padding:0% 8%;
}
.content_foobc {
   
    padding-top: 128px;
}
.table, .calendar-left {
    font-size: 12px;
    color: #cccccc80;
}
.activeday {
    background: #333;
    color: #cccccc;
}
.detail-content {
    background: none;
    display: none;
    padding: 20px 30px;
}
.detail-row {
    background: #333333;
}
.detail-row td{
    background: no-repeat!important;
    border-top: 0px solid #d1e1ea !important;
}
.noidung_detail {
    padding:5px 20px!important;
    width:139px;
}
.canhle{
    padding:3px 10px!important;
}
td.mono img {
    height: 12px;
}