/* =============================================================
   Khối liên hệ cuối bài / sản phẩm / danh mục (:is(.vk-cta, #vkcta).vk-cta) — thẻ liên hệ 2 cột
   Trái: nhãn, tiêu đề, lời mời, 4 lợi ích. Phải: bảng hotline (nút gọi xanh chữ trắng, Zalo, email). Dưới: địa chỉ.
   Chữ trắng trên xanh #0062BD (tương phản 6.3:1); số điện thoại to, đậm, vòng sóng xanh nhẹ + icon rung ngắn.
   ============================================================= */
:is(.vk-cta, #vkcta).vk-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: 1.5rem;
    align-items: start;
    margin: 2rem 0 1rem;
    padding: 1.5rem 1.6rem 1.2rem;
    border: 1px solid #D6E4F3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(11, 42, 74, .08);
    text-align: left;
}
:is(.vk-cta, #vkcta).vk-cta, :is(.vk-cta, #vkcta).vk-cta p, :is(.vk-cta, #vkcta).vk-cta li, :is(.vk-cta, #vkcta).vk-cta h2 { text-align: left !important; text-justify: auto; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__kicker {
    grid-column: 1;
    margin: 0 0 .5rem !important;
    padding: 0 !important;
    background: none;
    color: #0062BD !important;
    font-size: .86rem !important;
    font-weight: 800;
    line-height: 1.4 !important;
}
:is(.vk-cta, #vkcta).vk-cta h2.vk-cta__title.vk-cta__title {
    grid-column: 1;
    margin: 0 0 .55rem !important;
    padding: 0 !important;
    border: 0 !important;
    color: #0B2A4A !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-transform: none;
}
.vk-cta__title.vk-cta__title em { font-style: normal; color: #0062BD; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__lead {
    grid-column: 1;
    margin: 0 0 .9rem !important;
    color: #334155 !important;
    font-size: .98rem !important;
    line-height: 1.65 !important;
}
.vk-cta__lead strong { color: #0B2A4A; font-weight: 800; }
:is(.vk-cta, #vkcta).vk-cta ul.vk-cta__perks {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    margin: 0 0 .2rem !important;
    padding: 0 !important;
    list-style: none !important;
}
:is(.vk-cta, #vkcta).vk-cta ul.vk-cta__perks li {
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 1.75rem !important;
    border: 0;
    background: none;
    color: #0B2A4A;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.45;
    list-style: none !important;
}
/* Dòng mô tả dưới mỗi lợi ích (vk-cta.js thêm) — lấp bề ngang cột trái, chữ xám nhạt hơn tiêu đề */
:is(.vk-cta, #vkcta).vk-cta ul.vk-cta__perks li small { display: block; margin-top: .12rem; color: #64748B; font-size: .84rem; font-weight: 500; line-height: 1.5; }
:is(.vk-cta, #vkcta).vk-cta ul.vk-cta__perks li::before {
    /* Vòng tròn nền (::before) + dấu tick vẽ bằng viền xoay 45° (::after) — không dùng ký tự ✓ hay ảnh nền,
       vì ký tự bị font vẽ thành hình chữ L và ảnh SVG nhúng bị một số trình duyệt vẽ lệch */
    content: "" !important;
    position: absolute;
    left: 0;
    top: .1rem;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 50% !important;
    background: #DCFCE7 none !important;
    box-shadow: none !important;
    transform: none !important;   /* một quy tắc chung của site đặt translateY(-50%) lên li::before làm vòng tròn lệch lên 10px */
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
:is(.vk-cta, #vkcta).vk-cta ul.vk-cta__perks li::after {
    content: "";
    position: absolute;
    left: .4rem;
    top: .3rem;
    box-sizing: content-box;
    width: .3rem;
    height: .6rem;
    border: solid #15803D;
    border-width: 0 .15rem .15rem 0;
    border-radius: 1px;
    transform: rotate(45deg);
}
/* Bảng hotline bên phải */
:is(.vk-cta, #vkcta).vk-cta .vk-cta__actions {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: .65rem;
    margin: 0 !important;
    padding: .95rem;
    border: 1px solid #CFE0F3;
    border-radius: 14px;
    background: linear-gradient(160deg, #F7FBFF 0%, #E6F1FC 100%);
}
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .5rem .8rem;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn:hover { transform: translateY(-1px); }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--call {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: .6rem;
    min-height: 62px;
    padding: .55rem .75rem;
    background: linear-gradient(135deg, #0062BD 0%, #004E96 100%);
    color: #fff !important;
    font-size: 1.15rem;
    box-shadow: 0 8px 18px rgba(0, 98, 189, .32);
    animation: vkCtaPulse 2.4s ease-out infinite;
}
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--call:hover { background: linear-gradient(135deg, #0A70D0 0%, #005AA8 100%); animation-play-state: paused; }
.vk-cta__btn--call .vk-cta__ico {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 1.3rem;
    height: 1.3rem;
    padding: .45rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    fill: #fff;
    transform-origin: 50% 50%;
    animation: vkCtaRing 2.4s ease-in-out infinite;
}
.vk-cta__btn--call .vk-cta__call { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
:is(.vk-cta, #vkcta).vk-cta .vk-cta__btn--call .vk-cta__call small { color: #DCEBFA !important; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
:is(.vk-cta, #vkcta).vk-cta .vk-cta__btn--call .vk-cta__call b { color: #fff !important; font-size: 1.4rem; white-space: nowrap; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--zalo { background: #fff; border-color: #0068FF; color: #0068FF !important; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--zalo:hover { background: #0068FF; color: #fff !important; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--mail { background: #fff; border-color: #94A3B8; color: #0B2A4A !important; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--mail:hover { background: #0B2A4A; border-color: #0B2A4A; color: #fff !important; }
/* Thương hiệu: logo + tên + website (đầu thẻ) */
:is(.vk-cta, #vkcta).vk-cta .vk-cta__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding-bottom: .8rem; border-bottom: 1px solid #D3E3F4; text-align: center; }
:is(.vk-cta, #vkcta).vk-cta img.vk-cta__logo { flex: 0 0 auto; width: auto !important; max-width: 9rem !important; height: 3.2rem !important; margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; }
:is(.vk-cta, #vkcta).vk-cta .vk-cta__brandtext { display: flex; flex-direction: column; align-items: center; max-width: 100%; line-height: 1.3; text-align: center; }
:is(.vk-cta, #vkcta).vk-cta .vk-cta__brandtext strong { color: #0B2A4A; font-size: .84rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
:is(.vk-cta, #vkcta).vk-cta .vk-cta__brandtext a { color: #0062BD !important; font-size: .82rem; font-weight: 700; text-decoration: none !important; border: 0 !important; }
/* Hotline phụ: một dòng, số đậm */
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--phone2 { grid-column: 1 / -1; justify-content: space-between; background: #fff; border-color: #BFD7EE; color: #475569 !important; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--phone2 span { font-size: .86rem; font-weight: 700; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--phone2 b { color: #0B2A4A; font-size: 1.1rem; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
:is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--phone2:hover { border-color: #0062BD; background: #F2F8FF; }
/* Địa chỉ + mạng xã hội (cuối thẻ) */
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__addr { grid-column: 1 / -1; display: flex; align-items: center; gap: .65rem; margin: 0 !important; padding-top: .8rem; border-top: 1px solid #D3E3F4; font-size: .84rem !important; line-height: 1.4 !important; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__addr svg { flex: 0 0 auto; box-sizing: content-box; width: 1rem; height: 1rem; padding: .4rem; border-radius: 50%; background: #DCEBFA; fill: #0062BD; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__addr span { display: flex; flex-direction: column; min-width: 0; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__addr b { color: #0B2A4A !important; font-size: .9rem; font-weight: 800; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__addr em { color: #475569 !important; font-size: .84rem; font-style: normal; font-weight: 600; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__social { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 0 !important; font-size: .82rem !important; line-height: 1.2 !important; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__social a { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: .3rem .4rem; border: 1px solid #BFD7EE !important; border-radius: 999px; background: #fff; color: #0062BD !important; font-weight: 800; text-decoration: none !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__social a:hover { border-color: #0062BD !important; background: #0062BD; color: #fff !important; text-decoration: none !important; }
:is(.vk-cta, #vkcta).vk-cta p.vk-cta__note {
    grid-column: 1 / -1;
    margin: .9rem 0 0 !important;
    padding: .7rem 0 0 !important;
    border-top: 1px solid #E2E8F0;
    color: #64748B !important;
    font-size: .85rem !important;
    line-height: 1.55 !important;
}
@keyframes vkCtaPulse {
    0% { box-shadow: 0 8px 18px rgba(0, 98, 189, .32), 0 0 0 0 rgba(0, 98, 189, .45); }
    70%, 100% { box-shadow: 0 8px 18px rgba(0, 98, 189, .32), 0 0 0 12px rgba(0, 98, 189, 0); }
}
@keyframes vkCtaRing {
    0%, 55%, 100% { transform: rotate(0); }
    60% { transform: rotate(-16deg); }
    66% { transform: rotate(14deg); }
    72% { transform: rotate(-12deg); }
    78% { transform: rotate(10deg); }
    84% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.vk-cta, #vkcta).vk-cta a.vk-cta__btn--call, .vk-cta__btn--call .vk-cta__ico { animation: none; }
}
/* 2 cột (từ 1200px): phần chữ bên trái canh giữa theo chiều cao thẻ liên hệ, không dãn khoảng cách giữa các đoạn */
@media (min-width: 1200px) {
    :is(.vk-cta, #vkcta).vk-cta { grid-template-rows: 1fr auto auto auto auto 1fr auto; }
    :is(.vk-cta, #vkcta).vk-cta p.vk-cta__kicker { grid-row: 2; }
    :is(.vk-cta, #vkcta).vk-cta h2.vk-cta__title.vk-cta__title { grid-row: 3; }
    :is(.vk-cta, #vkcta).vk-cta p.vk-cta__lead { grid-row: 4; }
    :is(.vk-cta, #vkcta).vk-cta ul.vk-cta__perks { grid-row: 5; }
    :is(.vk-cta, #vkcta).vk-cta .vk-cta__actions { grid-row: 1 / span 6; }
    :is(.vk-cta, #vkcta).vk-cta p.vk-cta__note { grid-row: 7; }
}
/* Cột nội dung bài hẹp (dưới 1200px có cột bên) → xếp 1 cột: chữ trên, bảng hotline dưới */
@media (max-width: 1199.98px) {
    :is(.vk-cta, #vkcta).vk-cta { grid-template-columns: minmax(0, 1fr); }
    :is(.vk-cta, #vkcta).vk-cta .vk-cta__actions { grid-column: 1; grid-row: auto; margin-top: .9rem !important; }
}
@media (max-width: 767.98px) {
    :is(.vk-cta, #vkcta).vk-cta { padding: 1.25rem 1rem 1rem; border-radius: 14px; }
    :is(.vk-cta, #vkcta).vk-cta h2.vk-cta__title.vk-cta__title { font-size: 1.3rem !important; }
    .vk-cta__btn--call .vk-cta__call b { font-size: 1.45rem; }
}
:is(.vk-cta, #vkcta).vk-cta h2::before, :is(.vk-cta, #vkcta).vk-cta h2::after { content: none !important; display: none !important; }

/* ===== Tối ưu vẽ trang (gộp vào file này để khỏi thêm 1 request chặn render) ===== */
/* ola-perf.css — tối ưu vẽ trang, KHÔNG đổi giao diện.
   Footer nằm cuối trang: chỉ bố cục / vẽ khi gần tới (content-visibility). Footer đã có overflow:hidden nên containment không cắt thêm gì.
   contain-intrinsic-size = chiều cao đã đo thật (mobile 375px: 1030, 800px: 498, 1024px: 465) để thanh cuộn không nhảy;
   từ khóa 'auto' còn tự ghi nhớ chiều cao thật sau lần vẽ đầu. */
#mt-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 1030px;
}
@media (min-width: 576px) {
    #mt-footer { contain-intrinsic-size: auto 500px; }
}
@media (min-width: 992px) {
    #mt-footer { contain-intrinsic-size: auto 465px; }
}