@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

[v-cloak] {
    display: none;
}

[v-cloak]::before {
    content: "loading...";
}

.f-sarabun {
    font-family: 'Sarabun', sans-serif;
}

.container-1600 {
    max-width: 1600px;
}

.banner-checkbia-landing {
    background-color: #dfdfdf;
    background-image: url(../img/1920x590_bg.png) !important;
    background-position: top left;
    min-height: 590px;
    height: 590px;
}

.svg-check-mark-landing {
    content: url(../svg/check-mark-landing.svg);
}

.svg-baby {
    content: url(../svg/baby-b.svg);
}

.svg-teen {
    content: url(../svg/teen-b.svg);
}

.bg-blue {
    background-color: #2541B2 !important;
}

/* .box-text-landing-L img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

.box-text-landing-L .h4 span.f-blue {
    font-size: 32px;
}

.content-in-feedback {
    background-color: rgba(222, 227, 243, 0.4);
    border-radius: 12px;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: #959595;
    max-height: 140x;
    height: 135px;
}

.text-blue {
    color: #2541B2 !important;
}

.text-gray {
    color: #959595 !important;
}

.box-detailplan .box-protection .box-protection-head .txt-result {
    white-space: nowrap;
}

.box-detailplan .box-protection .box-protection-detail {
    line-height: 20px;
    font-size: 16px;
}

.box-detailplan .box-protection .box-protection-detail div.sub-L {
    font-weight: 300;
    font-size: 14px;
    margin-left: 40px;
}

.font-weight-300 {
    font-weight: 300 !important;
}


/* custom tab */
.nav-pills.custom-kid {
    border-bottom: 1px solid #C4C4C4;
    flex-wrap: nowrap;
}

.nav-pills.custom-kid#kid-tab {
    margin: 40px 0 30px;
}

.nav-pills.custom-kid#kid-tab-table {
    margin: 40px 0 50px;
}

.nav-pills.custom-kid .nav-item {
    width: 100%;
    max-width: 300px;
}

.nav-pills.custom-kid .nav-link {
    border: 1.5px solid #C4C4C4;
    padding: 16px 5px;
    color: #373737;
    font-size: 20px;
    line-height: normal;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    border-bottom: 0px !important;
}

.nav-pills.custom-kid .nav-link i {
    vertical-align: bottom;
    width: 30px;
    height: 30px;
    margin-right: 8px;
}

.nav-pills.custom-kid .nav-link span {
    font-weight: 300;
}

.nav-pills.custom-kid .nav-link.active,
.nav-pills.custom-kid .show>.nav-link {
    color: #FFFFFF;
    background-color: #2541B2;
    border: 1.5px solid #2541B2;
}

.nav-pills.custom-kid .nav-link.active i.svg-baby,
.nav-pills.custom-kid .show>.nav-link i.svg-baby {
    content: url(../svg/baby-w.svg);
}

.nav-pills.custom-kid .nav-link.active i.svg-teen,
.nav-pills.custom-kid .show>.nav-link i.svg-teen {
    content: url(../svg/teen-w.svg);
}

#kid-tabContent .p-for-box-img-square:nth-child(1) {
    margin-left: auto;
    margin-right: 0;
}

#kid-tabContent .p-for-box-img-square:nth-child(2) {
    margin-left: 0;
    margin-right: auto;
}


/* custom box-img-square */
.box-img-square .card-img-top {
    padding: 8px 8px 0;
}

.box-img-square .card-body {
    padding: 10px 16px 20px;
}

.box-img-square .card-body p.f-blue {
    font-weight: 500;
    font-size: 17px;
    line-height: 25px;
}

.box-img-square .card-body .box-detail {
    justify-content: space-between;
}

.box-img-square .card-body .box-detail .flex-fill {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    max-width: 175px;
}

.box-img-square .card-body .box-detail .flex-fill div.sub-text {
    font-weight: 300;
    font-size: 10px;
    line-height: 15px;
}

.box-img-square .card-body .box-detail .text-right {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    white-space: nowrap;
}

.box-img-square .card-body .box-detail .text-right span {
    font-weight: 300;
    font-size: 14px;
}

.box-img-square .card-body .box-detail .text-right span.sub-R {
    width: 55px;
    display: inline-block;
    text-align: left;
    padding-left: 5px;
}

.box-img-square .card-body hr {
    margin: 8px 0 !important;
    border: 0;
    border-top: 1px dashed #CCCCCC;
}

.box-img-square .card-footer {
    padding: 0 15px 30px !important;
    background-color: #FFFFFF !important;
    border-top: 0 !important;
    border-radius: 10px;
}

.box-img-square .btn-warning-prakun {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    padding: 8px 18px;
    border-radius: 5px
}

.box-img-square .btn-warning-prakun span {
    font-weight: 500;
    font-size: 18px;
}

/* custom table */
.bg-tb-white-blue {
    background: #DEE3F3;
}

.bg-tb-grey {
    background: #F2F5F6;
}

table.table-compare {
    border: 0;
}

table.table-compare thead th,
table.table-compare tbody td {
    padding: 19px 5px;
}

table.table-compare thead tr.colspan-head th {
    border: 0;
    vertical-align: middle;
    z-index: 1;
}

table.table-compare thead tr.colspan-head th {
    background-color: #FFFFFF;
}

table.table-compare thead tr.colspan-head th.box-sp {
    background-color: #F31C38;
    border-radius: 10px 10px 0 0;
    line-height: 17px;
    padding: 13px 0;
    font-size: 20px;
    letter-spacing: -0.3px;
}

table.table-compare.two-disease thead tr.colspan-head th.box-sp {
    background-color: #E5D549;
    color: #373737;

}

table.table-compare thead tr.colspan-head th.box-sp span {
    font-size: 14px;
    line-height: normal;
    padding: 5px 16px;
    display: inline-block;
    border-radius: 8px;
    margin-top: 10px;
    background-color: #E5D549;
    color: #373737;
    letter-spacing: normal;
}

table.table-compare.two-disease thead tr.colspan-head th.box-sp span {
    background-color: #F31C38;
    color: #FFFFFF;

}

table.table-compare thead tr.colspan-head th:nth-child(4) {
    background-color: #959595;
    border-radius: 10px 10px 0 0;
    padding: 11px 0;
    font-size: 20px;
    letter-spacing: -0.3px;
}

table.table-compare .first-head-col {
    min-width: 123px !important;
    max-width: 123px;
}

table.table-compare .first-col {
    min-width: 123px !important;
    max-width: 123px;
    line-height: 8px;
}

table.table-compare .second-col {
    left: 123px !important;
    min-width: 145px !important;
    max-width: 145px;
}

table.table-compare thead th:nth-child(3).col-head {
    min-width: 253px !important;
    max-width: 253px;
}

table.table-compare thead th:nth-child(4).col-head,
table.table-compare thead th:nth-child(5).col-head {
    min-width: 120px !important;
    max-width: 120px;
}

table.table-compare thead th:nth-child(6).col-head,
table.table-compare thead th:nth-child(7).col-head {
    min-width: 174px !important;
    max-width: 174px;
}

table.table-compare tbody .first-col p {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.225px;
}

table.table-compare tbody .first-col span {
    font-size: 13px;
    font-weight: 300;
    line-height: 10px;
    letter-spacing: -0.195px;
}

table.table-compare tbody span {
    font-weight: 300;
    line-height: 16px;
}

table.table-compare tbody tr.colspan-sub td {
    padding: 8px 18px;
    background: #E5D549;
    font-size: 14px;
    line-height: 24px;
    font-weight: 300;
    color: #373737;
}

table.table-compare tbody td.subcol {
    line-height: 18px;
}

table.table-compare tbody td.subcol span.f-blue {
    margin-bottom: 3px;
    display: block;
}

table.table-compare tbody tr.colspan-sub td span {
    font-size: 16px;
    font-weight: 400;
}

table.table-compare tbody p.text-large,
table.table-compare tbody p.price {
    margin-bottom: 0;
}

table.table-compare tbody td .btn.btn-danger-2 {
    height: auto;
    padding: 3px;
    max-width: 110px;
}

table.table-compare div.bt-brochure {
    padding: 3px 8px;
    border: 1px solid #2541B2;
    border-radius: 8px;
    max-width: 95px;
    margin: 16px auto 0;
}


table.table-compare i {
    height: 14px;
    vertical-align: middle;
}

table.table-compare div.bt-brochure span {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #2541B2;
    letter-spacing: -0.21px;
}

table.table-compare .bg-tb-sp {
    background: rgba(243, 28, 56, 0.2) !important;
    color: #03256C;
}

table.table-compare.two-disease .bg-tb-sp {
    background: rgba(229, 213, 73, 0.2) !important;
    color: #03256C;
}

table.table-compare .bg-tb-sp td {
    padding: 7px 5px;
}

table.table-compare .border-sp {
    position: absolute;
    height: calc(100% - 11px);
    border-bottom: 5px solid #f31c38;
    width: 493px;
}

table.table-compare.two-disease .border-sp {
    border-bottom: 5px solid #E5D549;
}

table.table-compare .border-sp::before {
    content: '';
    width: 0px;
    height: 100%;
    position: absolute;
    border-left: 5px solid #f31c38;
    top: 0;
    left: 0;
}

table.table-compare .border-sp::after {
    content: '';
    width: 0px;
    height: 100%;
    position: absolute;
    border-right: 5px solid #f31c38;
    top: 0;
    right: 0;
}

table.table-compare.two-disease .border-sp::before {
    border-left: 5px solid #E5D549;
    ;
}

table.table-compare.two-disease .border-sp::after {
    border-right: 5px solid #E5D549;
}

table.table-compare thead tr.colspan-head th:nth-child(1) {
    min-width: 123px !important;
    max-width: 123px;
}

/* custom box-checkbia-landing*/
.box-checkbia-landing {
    border: 0 !important;
    background: transparent;
    padding: 0 35px 0;
    max-width: 570px;
}

.text-title-box-checkbia-landing {
    font-size: 25px;
    line-height: 37px;
    color: #373737;
}

.bt-calender-box-checkbia-landing {
    background-color: #FFFFFF;
}

.box-checkbia-landing .btn-see-plan-prakun {
    max-width: 296px;
    padding: 13px 12px;
    margin-top: 30px;
}

span.year.disabled {
    pointer-events: none;
}

.condition-box-color p {
    font-size: 20px;
    color: #2541B2;
    margin-bottom: 10px;
}

.condition-box-color ul {
    font-size: 16px;
    color: #03256C;
    line-height: 28px;
    list-style: disc;
}

.box-detailplan .box-protection .box-protection-detail ul{
    list-style: disc !important;
}

.condition-box-color ul li::marker {
    font-size: 13px;
}

.circle-change-ins {
    margin: 20px auto 0;
    width: 100%;
    max-width: 300px;
    display: flex;
    align-items: center;
}

.circle-change-ins .circle-before {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #C4C4C4;
    color: #C4C4C4;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.circle-change-ins .circle-before .title {
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    color: #959595;
}

.circle-change-ins .circle-before .price {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #959595;
}

.circle-change-ins .circle-before .price span {
    font-size: 11px;
}

.circle-change-ins .circle-after {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #DEE3F3;
    border: 1px solid #2541B2;
    color: #2541B2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.circle-change-ins .circle-after .title {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #03256C;
}

.circle-change-ins .circle-after .price {
    font-size: 25px;
    font-weight: 400;
    line-height: normal;
    color: #2541B2;
}

.circle-change-ins .circle-after .price span {
    font-size: 17px;
}

.circle-change-ins .line-in-circle {
    border-top: 1px dashed #C4C4C4;
    width: 100%;
    height: 1px;
}

/* form control */
.form-control.h6 {
    font-size: 15px;
    height: 45px;
}

@media (min-width:576px) {
    .modal-dialog.modal-dialog-fix {
        max-width: 90% !important;
    }
}

@media (min-width:768px) {
    .modal-dialog.modal-dialog-fix {
        max-width: 70% !important;
    }
}

@media (min-width:1200px) {
    .modal-dialog.modal-dialog-fix {
        max-width: 40% !important;
    }

    .mt-xl-for-banner {
        margin-top: -138px !important;
    }
}

@media (max-width: 1440px) {}

@media (max-width: 1280px) {
    .banner-checkbia-landing {
        background-image: url(../img/1920x590_bg.png) !important;
    }
}

@media (max-width: 1200px) {
    .box-text-landing-L .svg-check-mark-landing {
        width: 40px;
    }

    table.table-compare .first-col {
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    table.table-compare .first-col::before {
        content: '';
        width: 0px;
        height: 100%;
        position: absolute;
        border-left: 1px solid #A7A7A7;
        top: 0;
        left: 0;
    }

    table.table-compare .first-col::after {
        content: '';
        width: 0px;
        height: 100%;
        position: absolute;
        border-right: 1px solid #A7A7A7;
        top: 0;
        right: -1px;
    }

    table.table-compare .first-head-col {
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    table.table-compare .first-head-col::before {
        content: '';
        width: 0px;
        height: 100%;
        position: absolute;
        border-left: 1px solid #A7A7A7;
        top: 0;
        left: 0;
    }

    table.table-compare .first-head-col::after {
        content: '';
        width: 0px;
        height: 100%;
        position: absolute;
        border-right: 1px solid #A7A7A7;
        top: 0;
        right: -1px;
    }

    table.table-compare thead tr.colspan-head th:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0px;
    }
}

@media (max-width: 991px) {
    .box-text-landing-L {
        transform: scale(1);
    }

    table.table-compare .second-col {
        left: 0px !important;
    }

    .banner-checkbia-landing {
        background-image: url(../img/old/1920x590_bg.png) !important;
        background-position: center;
    }
}

@media (max-width: 767px) {}

@media (max-width: 500px) {
    .box-checkbia-landing {
        padding: 0 20px 0;
    }

    .nav-pills.custom-kid .nav-link {
        padding: 8px 2px;
        font-size: 14px;
    }

    .nav-pills.custom-kid .nav-link i {
        width: 24px;
        height: 24px;
    }

    .nav-pills.custom-kid#kid-tab {
        margin: 20px 0 5px;
    }

    .nav-pills.custom-kid#kid-tab-table {
        margin: 20px 0 20px;
    }

    table.table-compare .first-head-col {
        min-width: 109px !important;
        max-width: 109px;
    }

    table.table-compare .first-col {
        min-width: 109px !important;
        max-width: 109px;
    }

    table.table-compare .second-col {
        min-width: 129px !important;
        max-width: 129px;
    }

    table.table-compare thead tr.colspan-head th:nth-child(1) {
        min-width: 109px !important;
        max-width: 109px;
    }

    table.table-compare thead tr.colspan-head th.box-sp {
        line-height: 20px;
        font-size: 14px;
        letter-spacing: -0.21px;
    }

    table.table-compare thead tr.colspan-head th:nth-child(4) {
        line-height: 20px;
        font-size: 14px;
        letter-spacing: -0.21px;
    }

    table.table-compare thead tr.colspan-head th.box-sp span {
        font-size: 11px;
        padding: 4px 16px;
        margin-top: 8px;
    }

    table.table-compare .first-col img {
        width: 50px;
    }

}

@media (max-width: 424px) {
    .box-img-square .card-body .box-detail .flex-fill {
        font-size: 14px;
        line-height: 20px;
    }

    .box-img-square .card-body .box-detail .text-right {
        font-size: 14px;
        line-height: 20px;
    }

    .box-img-square .card-body .box-detail .text-right span.sub-R {
        display: inline;
        text-align: left;
        padding-left: 0;
    }
}

@media (max-width: 400px) {
    .text-title-box-checkbia-landing {
        white-space: nowrap;
        font-size: 19.5px;
    }
}

@media (max-width: 374px) {
    .nav-pills.custom-kid .nav-link i {
        vertical-align: -6px;
        margin-right: 4px;
    }

    .nav-pills.custom-kid .nav-link span {
        display: block;
    }
}