.by-pd {
    font-family: Kanit, sans-serif;
    color: #1b2f56
}

.by-pd h1,
.by-pd h2,
.by-pd h3 {
    color: #103b9a;
    font-weight: 650
}

.by-pd h1 {
    font-size: clamp(1.55rem, 2.8vw, 2.45rem);
    line-height: 1.18
}

.by-pd h2 {
    font-size: clamp(1.22rem, 2vw, 1.65rem);
    margin-bottom: 18px
}

.by-pd h3 {
    font-size: 1.12rem
}

.by-pd-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #61748f
}

.by-pd-breadcrumb a {
    color: #3863b4;
    text-decoration: none
}

.by-pd-hero {
    background: linear-gradient(115deg, #eef6ff, #fff 55%, #edf5ff);
    padding: 12px 0 35px
}

.by-pd-gallery,
.by-pd-main-image {
    width: 100%
}

.by-pd-main-image {
    border: 1px solid #d9e7f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 375px;
    background: #fff;
    overflow: hidden
}

.by-pd-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.by-pd-empty {
    font-size: 2rem;
    font-weight: 700;
    color: #d0dae8
}

.by-pd-thumbnails {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-top: 10px
}

.by-pd-thumb {
    background: white;
    border: 2px solid #d7e4f6;
    border-radius: 6px;
    width: 77px;
    height: 67px;
    flex-shrink: 0;
    padding: 3px
}

.by-pd-thumb.active,
.by-pd-thumb:hover {
    border-color: #e41626
}

.by-pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.by-pd-tags {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
    flex-wrap: wrap
}

.by-pd-brand {
    color: #e01825;
    font-weight: 800;
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px
}

.by-pd-tag {
    color: #2256ac;
    border: 1px solid #b5cef8;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px
}

.by-pd-subtitle {
    font-size: 1.05rem !important;
    color: #4a6388 !important;
    font-weight: 500 !important
}

.by-pd-summary {
    font-size: .95rem;
    line-height: 1.7
}

.by-pd-checks {
    list-style: none;
    padding: 0
}

.by-pd-checks li {
    display: flex;
    gap: 10px;
    margin: 7px 0;
    font-size: .92rem
}

.by-pd-checks i {
    color: #e71d30
}

.by-pd-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px
}

.by-pd-red {
    background: #e11625;
    color: #fff;
    border: 1px solid #e11625;
    padding: 10px 20px;
    font-weight: 600
}

.by-pd-red:hover {
    background: #bf1021;
    color: #fff
}

.by-pd-outline {
    background: #fff;
    color: #1646aa;
    border: 1px solid #1e55be;
    padding: 10px 18px;
    font-weight: 550
}

.by-pd-outline:hover {
    background: #ebf2ff;
    color: #1646aa
}

.by-pd-specbar {
    background: #eaf3fe;
    padding: 17px 0
}

.by-pd-spec-tile {
    background: #fff;
    border: 1px solid #d8e4f2;
    padding: 13px 11px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px
}

.by-pd-spec-tile i {
    color: #1654c0;
    font-size: 1.45rem
}

.by-pd-spec-tile small {
    display: block;
    color: #3860ac
}

.by-pd-spec-tile strong {
    display: block;
    font-size: .85rem;
    overflow-wrap: anywhere
}

.by-pd-tabs {
    display: flex;
    overflow-x: auto;
    border: 1px solid #acc4ed;
    border-radius: 5px
}

.by-pd-tabs a {
    white-space: nowrap;
    flex: 1;
    text-align: center;
    color: #1f4b9c;
    text-decoration: none;
    padding: 9px 12px;
    border-right: 1px solid #acc4ed;
    font-size: .9rem
}

.by-pd-tabs a:first-child,
.by-pd-tabs a:hover {
    background: #103a9b;
    color: #fff
}

.by-pd-section {
    padding-top: 29px;
    padding-bottom: 29px;
    scroll-margin-top: 105px
}

.by-pd-rich {
    line-height: 1.85;
    overflow-wrap: anywhere
}

.by-pd-rich img {
    max-width: 100%;
    height: auto
}

.by-pd-secondary {
    border-radius: 8px;
    background: #f5f8fd;
    border: 1px solid #e1eafa;
    overflow: hidden
}

.by-pd-secondary img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.by-pd-feature {
    border: 1px solid #dce6f4;
    border-radius: 6px;
    background: #fff;
    padding: 13px 7px;
    text-align: center;
    height: 100%;
    min-height: 142px
}

.by-pd-feature i {
    font-size: 1.7rem;
    color: #1451c5;
    display: block;
    margin-bottom: 9px
}

.by-pd-feature strong {
    display: block;
    color: #123c9a;
    font-size: .87rem
}

.by-pd-feature p {
    font-size: .74rem;
    color: #66748b;
    margin: 5px 0 0
}

.by-pd-table {
    font-size: .88rem;
    border: 1px solid #dbe6f3
}

.by-pd-table th {
    background: #edf4fd;
    color: #234477;
    width: 42%;
    font-weight: 500
}

.by-pd-table td,
.by-pd-table th {
    padding: 8px 11px;
    border-color: #dbe6f3
}

.by-pd-pale {
    background: #edf5fd
}

.by-pd-industry {
    background: #fff;
    border: 1px solid #d8e5f6;
    display: flex;
    min-height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #1044a9;
    border-radius: 6px;
    text-align: center;
    padding: 12px
}

.by-pd-industry>i {
    font-size: 2rem
}

.by-pd-industry strong {
    font-size: .82rem
}

.by-pd-document {
    display: flex;
    gap: 11px;
    align-items: center;
    border: 1px solid #dbe7f5;
    background: #fff;
    padding: 16px;
    border-radius: 7px;
    min-height: 100px
}

.by-pd-document>i {
    font-size: 2rem;
    color: #e11b29
}

.by-pd-document div {
    flex: 1;
    min-width: 0
}

.by-pd-document strong,
.by-pd-document small {
    display: block
}

.by-pd-document strong {
    font-size: .86rem
}

.by-pd-document small {
    color: #8091a8
}

.by-pd-document .btn {
    font-size: .75rem;
    padding: 5px 8px
}

.by-pd-product {
    display: block;
    background: #fff;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    color: #1945a0;
    text-decoration: none;
    overflow: hidden;
    height: 100%
}

.by-pd-product .by-pd-card-image {
    height: 135px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.by-pd-product img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.by-pd-product strong,
.by-pd-product span {
    display: block;
    font-size: .85rem
}

.by-pd-product span {
    margin-top: 9px
}

.by-pd .accordion-item {
    border: 1px solid #d7e4f7;
    margin-bottom: 7px;
    border-radius: 5px !important
}

.by-pd .accordion-button {
    font-weight: 500;
    color: #123e9c;
    font-size: .9rem
}

.by-pd-advice,
.by-pd-contact {
    background: #072a78;
    border-radius: 8px;
    color: #fff;
    padding: 24px;
    height: 100%
}

.by-pd-advice i {
    font-size: 2rem
}

.by-pd-advice h3,
.by-pd-contact h3 {
    color: #fff;
    margin: 12px 0
}

.by-pd-form .form-control {
    border-color: #d9e5f5
}

.by-pd-contact p {
    line-height: 2
}

.by-pd-contact i {
    margin-right: 8px
}

@media(max-width:767px) {
    .by-pd-main-image {
        height: 280px
    }

    .by-pd-section {
        padding-top: 23px;
        padding-bottom: 23px
    }

    .by-pd-tags {
        margin-top: 8px
    }

    .by-pd-document {
        flex-wrap: wrap
    }

    .by-pd-thumbnails {
        gap: 6px
    }
}