/* === Chuyển từ inline page-ldp-tragop-khonglaisuat.php (dòng 8), 04/11/2026 === */
body .longform-page {
        line-height: 1.2;
        font-family: 'Roboto';
        color: #000000;
        font-size: 18px;
        font-weight: 300;
    }

    .cl_global {
        color: #0125B7;
    }

    .cl_white {
        color: #ffffff;
    }

    .font-700 {
        font-weight: 700;
    }

    .font_barlow {
        font-family: 'Barlow';
    }

    .title-box h2,
    .title-box h1 {
        font-size: 36px;
        text-align: center;
        text-transform: uppercase;
        /* margin-top: 0px; */
    }


    .ldp-table {
        width: 100%;
        border-collapse: collapse;
    }

    .ldp-table thead th {
        background: linear-gradient(#0b63d8, #083a83);
        padding: 20px 10px;
        /* xanh đậm giống hình */
        color: #fff;
        text-align: center;
        padding: 12px 8px;
        border: 1px solid #0a48a3;
        /* viền trắng giữa các cột */
        font-weight: bold;
    }

    .ldp-table tbody td {
        border: 1px solid #0a48a3 !important;
        padding: 14px 10px;
        background: transparent;
        text-align: center;
        /* white-space: nowrap; */
        vertical-align: middle !important;
    }

    /* Cột ngân hàng: logo + tên căn trái */
    .ldp-table td.bank-col {
        text-align: center;
        font-weight: normal;
        margin: auto;

    }

    /* Logo ngân hàng */
    .ldp-table td.bank-col img {
        max-height: 50px;
        width: auto;
        flex-shrink: 0;
    }

    .steps_register {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .steps_register .step-item {
        display: flex;
        align-items: center;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.31);
        background: #fff;
        border: 1px solid #0000005c;
    }

    .steps_register .step-icon {
        background: linear-gradient(#0b63d8, #083a83);
        padding: 15px;
        margin: auto;
        text-align: center;
        padding: 20px 25px;
        border-radius: 10px;
        border: 1px solid #fff;
        box-shadow: 0px 1px 8px #888;
    }

    .steps_register .step-icon img {
        width: 80px;
        height: auto;
    }

    .steps_register .step-content h4 {
        margin: 0 0 5px;
        font-weight: bold;
        color: #333;
    }

    .steps_register .step-content p {
        margin: 0;
        color: #555;
    }

    .cta-buttons {
        /* display: flex;
        gap: 15px;
        margin: 25px 0; */
    }

    .btn-cta {
        padding: 12px 5px;
        font-weight: bold;
        border-radius: 30px;
        text-align: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-cta a {
        font-size: 28px;

    }

    .btn-cta.orange {
        background: linear-gradient(#FFCC33, #FFA500);

    }

    .btn-cta.orange a {
        color: #0157DA;
    }

    .btn-cta.blue {
        background: linear-gradient(#0066CC, #0044AA);

    }

    .btn-cta.blue a {
        color: #ffffff;
    }

    .btn-cta:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }

    .goi-vacxin-list {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .goi-vacxin-item {
        flex: 1 1 calc(33.3333% - 15px);
        min-width: 180px;
        border-radius: 12px;
        text-align: center;
        padding: 0px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    .goi-vacxin-title {
        width: 100%;
        color: #F7D82A;
        font-weight: bold;
        margin-bottom: 15px;
        min-height: 120px;
        padding: 12px;
        text-align: center;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #0056D2 0%, #003C9E 100%);
        border-radius: 10px;
        border: 1px solid #fff;
        box-shadow: 0px 5px 8px #00000057;
        z-index: 9;
        border-radius: 10px;
        border: 1px solid #fff;
        box-shadow: 0px 5px 8px #00000057;
        z-index: 9;
        border-top: 0px solid;
    }

    .goi-vacxin-link {
        display: block;
        color: #003C9E;
        font-weight: 400;
        padding: 10px 15px;
        padding-top: 20px;
        border-radius: 0 0 12px 12px;
        text-decoration: none;
        transition: 0.3s;
        border-top: 0px;
        margin-top: -10px;
        border: 1px solid #003C9E;
        box-shadow: 0px 2px 8px #00000057;
    }

    .goi-vacxin-link:hover {
        background: #f1f1f1;
    }

    .loiich-item {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
    }

    .loiich-number {
        background: url(https://vnvc.vn/wp-content/uploads/2025/10/bgr-loiich-number.png);
        background-size: 100% auto;
        color: #fff;
        font-weight: 900;
        font-size: 46px;
        border-radius: 50%;
        width: 65px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 1px 1px 5px #000;
        margin-right: -25px;
        z-index: 9;
    }

    .loiich-content {
        position: relative;
        background: linear-gradient(90deg, #0056D2 0%, #0040A0 100%);
        background-clip: padding-box;
        border: solid 1px transparent;
        border-radius: 15px;
        color: #fff;
        padding: 15px 20px;
        padding-left: 40px;
        font-size: 20px;
        font-weight: bold;
        min-height: 90px;
        display: flex;
        align-items: center;
    }

    .loiich-content:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -4px;
        border-radius: inherit;
        background: linear-gradient(to top, #f9ac69, #edea7b);
    }

    .loiich-content {
        flex: 1;
    }

    .app-block {
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
    }

    .app-block .app-title {
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
    }

    .app-links {
        flex: 1;
    }


    .app-subtitle {
        position: relative;
        color: #0056d2;
        font-weight: bold;
        display: inline-block;
        font-size: 18px;
        padding-top: 15px;
    }

    .app-subtitle::before {
        content: "▶";
        color: #0056d2;
        margin-right: 6px;
        font-size: 16px;
    }

    .app-subtitle::after {
        content: "◀";
        color: #0056d2;
        margin-left: 6px;
        font-size: 16px;
    }


    .app-link-item {
        margin-bottom: 15px;
    }

    .platform {
        font-weight: 400;
        margin-bottom: 5px;
    }

    .platform .note {
        font-weight: normal;
        color: #666;
        margin-left: 5px;
    }

    .btn-app {
        display: inline-block;
        padding: 6px 25px;
        background: linear-gradient(90deg, #0056D2, #003C9E);
        border-radius: 20px;
        color: #fff !important;
        font-weight: bold;
        text-decoration: none;
        transition: 0.3s;
    }

    .btn-app:hover {
        opacity: 0.9;
    }


    .app-title {
        background: linear-gradient(to top, #0056D2, #003C9E);
        font-size: 22px;
        color: #fff;
        font-weight: 700;
        padding: 10px 20px;
    }

    .app_phone_mockup {
        margin-top: -100px;
    }

    .app-content .app_phone_mockup img {
        max-width: 265px;
    }

    .app-qr {
        padding: 15px;
    }

    .ldp-table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }

    section .section-3 .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    section .section-3 [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }


    @media(max-width:1199px) and (min-width:992px) {
        .app_phone_mockup {
            margin-top: -95px;
        }

        .app-qr {
            padding: 0px;
            padding-top: 10px;
        }

        .app-link-item {
            margin-bottom: 7px;
        }

        .app-content .app_phone_mockup img {
            margin: auto;
        }

        .app-block .app-qr img {
            max-width: 180px;
            margin: auto;
        }

        .goi-vacxin-title {
            min-height: 150px;
        }

        .goi-vacxin-item {
            flex: 1 1 calc(20% - 25px);
            min-width: 150px;
        }

        .app-content .list_app_links {
            padding: 0px;
        }
    }

    @media(max-width:991px) {
        /* .steps_register .step-icon {
            width: fit-content;
        } */

        .btn-cta a {
            font-size: 16px;
        }

        .app_phone_mockup {
            margin-top: 0px;
        }

        .app-content .app_phone_mockup img {
            margin: auto;
        }

        .app-block .app-qr img {
            max-width: 265px;
            margin: auto;
        }
    }

    @media(max-width:767px) {

        .steps_register .step-icon {
            padding: 20px;
        }

        .steps_register .step-content {
            font-size: 12px;
        }

        .ldp-table td {
            padding: 0px;
            font-size: 18px;
        }

        .title-box h2 {
            font-size: 28px;
        }

        .steps_register .step-item {
            /* display: inline-block; */
            border-top: none;
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.31);
        }

        .steps_register .step-content {
            padding: 0 5px;
        }

        .steps_register .step-icon img {
            width: 100%;
        }

        .btn-cta a {
            font-size: 14px;
        }

        .cta-buttons {
            /* display: inline-block; */
        }

        .goi-vacxin-item {
            flex: 1 1 calc(50% - 15px);
            padding-bottom: 5px;
            min-width: unset;
            width: 50%;
        }

        .app_phone_mockup {
            margin-top: 0px;
        }

        .app-content .app_phone_mockup img {
            margin: auto;
        }

        .app-block .app-qr img {
            max-width: 265px;
            margin: auto;
        }

        .loiich-content {
            padding: 5px 20px;
            padding-left: 30px;
            font-size: 14px;
            min-height: 60px;
        }

        .loiich-number {
            font-size: 28px;
            width: 45px;
            height: 45px;
        }

    }