/* Bảng giá dịch vụ của ID-4 Solution */


/* Container chính bao bọc toàn bộ giao diện */

.iD-4-Bang-gia-main-wrapper {
    width: 100%;
    padding: 60px 20px var(--id4-header-height) 20px;
    /* Padding trên dưới rộng hơn chút cho thoáng */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Tiêu đề bảng */

.iD-4-Bang-gia-title {
    font-family: var(--id4-font-main);
    font-size: var(--id4-font-size-title);
    color: var(--id4-color-text-title);
    font-weight: var(--id4-font-weight-title);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--id4-spacing-md);
    letter-spacing: 0.5px;
}


/* Wrapper cho bảng để xử lý scroll trên mobile */

.iD-4-Bang-gia-table-scroll {
    width: 100%;
    max-width: var(--id4-container-width);
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .53);
    overflow-x: auto;
    /* padding-bottom: 10px; */
}


/* Cấu trúc bảng dùng Flexbox */

.iD-4-Bang-gia-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 600px;
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .22);
    border-radius: 4px;
    overflow: hidden;
    /* Bo tròn góc */
}


/* Dòng chung */

.iD-4-Bang-gia-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}


/* Header của bảng */

.iD-4-Bang-gia-row.iD-4-Bang-gia-header {
    background-color: var(--id4-button-color);
    /* Màu nền header xanh đậm */
    color: #ffffff;
}


/* Dữ liệu của bảng */

.iD-4-Bang-gia-row.iD-4-Bang-gia-data {
    background-color: #ffffff;
    color: var(--id4-color-text-title);
    /* Màu chữ xanh */
    font-weight: 500;
}


/* Hiệu ứng ngựa vằn (Zebra striping) - Dòng chẵn có màu nền nhạt */

.iD-4-Bang-gia-row.iD-4-Bang-gia-data:nth-child(even) {
    background-color: #f7f8fc;
    /* Màu xanh xám rất nhạt */
}


/* Hover effect */

.iD-4-Bang-gia-row.iD-4-Bang-gia-data:hover {
    background-color: #eef0f7;
}


/* Ô (Cell) chung */

.iD-4-Bang-gia-cell {
    font-family: var(--id4-font-main);
    font-size: var(--id4-font-size-desription);
    font-weight: var(--id4-font-weight-small-bold);
    text-transform: capitalize;
    flex: 1;
    padding: 18px 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid transparent;
}


/* Font chữ cho Header */


/* .iD-4-Bang-gia-header .iD-4-Bang-gia-cell {} */


/* Font chữ cho nội dung */

.iD-4-Bang-gia-data .iD-4-Bang-gia-cell {
    font-size: 15px;
}


/* Responsive Breakpoints */


/* Tablet */

@media (max-width: 992px) {
    .iD-4-Bang-gia-main-wrapper {
        padding: 80px 20px;
    }

    .iD-4-Bang-gia-cell {
        padding: 15px 5px;
    }
}


/* Mobile */

@media (max-width: 600px) {
    .iD-4-Bang-gia-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* Scroll ngang kích hoạt bởi class .iD-4-Bang-gia-table-scroll */
}


/* --- KẾT THÚC CSS CỦA COMPONENT --- */