:root {
    --color-1: #0F4A5E;
    --color-2: #1DAF91;
    --color-3: #308ACA;
    --color-4: #6DBF6B;
    --color-5: #E14B4B;
    --color-6: #454C52;
    --color-7: #F2F2F2;
    --color-8: #E3E2E1;
    --color-9: #D9D9D9;
    --color-10: #777777;
    --shadow-1: rgba(0, 0, 0, 0.25);
}

/* ------------ text -------------------- */
.text-color1 {
    color: var(--color-1) !important
}

.text-color2 {
    color: var(--color-2) !important
}

.text-color3 {
    color: var(--color-3) !important
}

.text-color4 {
    color: var(--color-4) !important
}

.text-color5 {
    color: var(--color-5) !important
}

.text-color6 {
    color: var(--color-6) !important
}

.text-color10 {
    color: var(--color-10) !important
}

.font-24 {
    font-size: 24px !important
}

.font-30 {
    font-size: 30px !important
}

.font-48 {
    font-size: 48px !important
}

/* ------------ end text -------------------- */

/* ------------ background -------------------- */
.bg-color1 {
    background-color: var(--color-1) !important
}

.bg-color7 {
    background-color: var(--color-7) !important
}

/* ------------ end background -------------------- */

/* ------------ border -------------------- */
.border-rd5px {
    border-radius: 5px !important
}

.border-rd10px {
    border-radius: 10px !important
}

.border-rd50px {
    border-radius: 50px !important
}

.border-color8 {
    border: 1px solid var(--color-8) !important
}

.border-bottom-color8 {
    border-bottom: 1px solid var(--color-8) !important
}

.border-color9 {
    border: 1px solid var(--color-9) !important
}

/* ------------ end border -------------------- */

/* ------------ banner -------------------- */
.breadcrumbs .breadcrumb-blog h1 {
    color: var(--color-1) !important;
    font-weight: var(--font-weight-semibold)
}

.breadcrumbs .breadcrumb-blog h2 {
    color: var(--black-color) !important;
    font-size: var(--h6-font-size)
}

.breadcrumbs .breadcrumb-blog {
    text-align: center;
    padding-top: 5px !important;
    padding-bottom: 20px !important
}

#banner-content {
    background-image: url(../images/fire/banner-content-fire-lg.webp);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 320px
}

/* ------------ end banner -------------------- */
/* ------------ other -------------------- */
.shadow1 {
    box-shadow: 0 4px 4px var(--shadow-1) !important
}

.mw-1080px {
    max-width: 1080px;
    width: 100%
}

.cardplan {
    max-width: 303px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.textindent10 {
    text-indent: 10px;
}

/* ------------ end other -------------------- */
/* ------------ icon -------------------- */
.bi-shield::before {
    content: "\f53f"
}

.bi-plus-lg::before {
    content: "\f64d"
}

.bi-flag::before {
    content: "\f3cc"
}

.bi-box-arrow-up-right::before {
    content: "\f1c5"
}

/* ------------ icon -------------------- */

/* ------------ table -------------------- */
.price-table {
    width: 100%;
    border-collapse: separate !important;
    font-size: 16px;
    text-align: center;
    border-spacing: 5px;
}

.price-table thead th {
    background-color: var(--color-1);
    /* สีหัวตาราง */
    color: #fff;
    padding: 12px;
    border-radius: 5px;
    font-weight: 100;
    border: 1px solid var(--color-9);
}

.price-table tbody td {
    padding: 12px;
    color: var(--color-1);
    border-radius: 5px;
    border: 1px solid var(--color-9);
}

.price-table tbody tr:nth-child(even) {
    background-color: var(--white-color);
    /* สลับสีแถว */
}

.price-table tbody tr:hover {
    background-color: var(--color-7);
    /* สีเวลา hover */
}

/* ------------ screen -------------------- */
@media only screen and (max-width:1399px) {
    #banner-content {
        height: 300px;
    }
}
@media only screen and (max-width:874px) {
    .rowcard .col-md-4 {
        flex: 0 0 auto;
        width: 50%;
    }

    .rowcard .col-last {
        flex: 0 0 auto;
        width: 100%;
    }

    .cardplan {
        max-width: 350px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

}

@media only screen and (max-width:768px) {

    #banner-content {
        background-image: url(../images/fire/banner-content-fire-mb.webp);
        background-position: top 0 center;
        max-width: 750px !important;
        width: 100%;
        height: 220px !important;
        object-fit: contain;
        object-position: 50% 0;
        aspect-ratio: 4/3
    }

    .breadcrumbs .breadcrumb-blog h1 {
        padding-top: 50px
    }

}


@media only screen and (max-width:576px) {
    .breadcrumbs .breadcrumb-blog h1 {
        font-size: var(--h4-font-size)
    }

    .rowcard .col-md-4 {
        flex: 0 0 auto;
        width: 100%;
    }

}
@media only screen and (max-width:575px) {
    #lineadd1 {
        display: block !important;
    }

    #lineadd2 {
        display: none;
    }
}

@media only screen and (max-width:443px) {
    .col45 {
        flex: 0 0 auto;
        width: 45%;
    }

    .col100 {
        flex: 0 0 auto;
        width: 100%;

    }

    .col100 p {
        top: -40px !important;
        margin-bottom: 0px;
    }
}