/*
 * Shared styles for selected pages:
 * - /v2-dich-vu/
 * - /home-test-2026/
 */

:root {
    --primary-color: #1D336E !important;
    --fs-color-primary: #1D336E !important;
    --fs-color-secondary: #dfa93e;
    --fs-color-success: #777777;
    --fs-color-alert: #dd3333;
    --fs-experimental-link-color: #000000;
    --fs-experimental-link-color-hover: #111;
}

.primary,
input[type=submit],
input[type=submit].button {
    background-color: #1D336E;
    border-color: #1D336E;
}

.row-topbar .button.white,
.row-topbar a.button.white,
.row-topbar a.button.white span {
    color: #1D336E !important;
}

body .container-width,
.full-width .ubermenu-nav,
body .container,
.row {
    max-width: 1290px;
    width: 100%;
}

.button_pink {
    background: #EFB9B9 !important;
}

/* @media (min-width: 850px) {
    .loichiase .hide-for-small>.col>.col-inner>.row.row-collapse {
        align-items: stretch !important;
    }

    .loichiase .hide-for-small>.col>.col-inner>.row.row-collapse>.col {
        display: flex;
        flex-direction: column;
    }

    .loichiase .hide-for-small>.col>.col-inner>.row.row-collapse>.col>.col-inner {
        flex: 1;
        height: 100%;
    }

    .loichiase .hide-for-small>.col>.col-inner>.row.row-collapse>.col:first-child .img,
    .loichiase .hide-for-small>.col>.col-inner>.row.row-collapse>.col:first-child .img-inner {
        height: 100%;
    }
} */
.ms-branch .post-content,
.ms-branch.is-selected .post-content,
.uxb-wrapper--ms_room.is-selected .ms-branch .post-content {
    background-color: #F7F5EF;
}


@media (max-width: 849px) {
    .loichiase .show-for-small .slider-wrapper {
        overflow: visible;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 28px;
        min-height: 28px;
        margin: 0;
        padding: 0;
        opacity: 1 !important;
        visibility: visible !important;
        background: #1D336E !important;
        border: 0;
        border-radius: 0;
        color: #fff !important;
        transform: translateY(-50%);
        z-index: 5;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button.previous {
        left: 8px;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button.next {
        right: 8px;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button:disabled {
        opacity: 0.45 !important;
        cursor: default;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button svg {
        display: none;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button.previous::before {
        transform: rotate(-135deg);
        margin-left: 3px;
    }

    .loichiase .show-for-small .flickity-button.flickity-prev-next-button.next::before {
        transform: rotate(45deg);
        margin-right: 3px;
    }
}

/* ============================================================
   Slider hệ thống trung tâm (.ms-facilities) trên MOBILE — DÙNG CHUNG
   cho mọi trang có block này (home, v2-he-thong, dịch vụ, …):
   nút điều hướng nhỏ (navy, mũi tên) thay thanh dọc to + nút full-width.
   ============================================================ */
@media (max-width: 849px) {
    .slider-wrapper .flickity-button.flickity-prev-next-button {
        top: 50% !important;
        bottom: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 18px !important;
        height: 35px !important;
        min-width: 18px;
        min-height: 35px;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #233f88 !important;
        border-radius: 0 !important;
        background: #233f88 !important;
        color: #fff !important;
        opacity: 1 !important;
        z-index: 5;
        box-shadow: none !important;
        transform: translateY(-50%) !important;
    }
    .slider-wrapper .flickity-button.flickity-prev-next-button.previous {
        left: 20px !important;
    }
    .slider-wrapper .flickity-button.flickity-prev-next-button.next {
        right: 20px !important;
    }
    .slider-wrapper .flickity-button.flickity-prev-next-button svg {
        display: none !important;
    }
    .slider-wrapper .flickity-button.flickity-prev-next-button::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    .slider-wrapper .flickity-button.flickity-prev-next-button.previous::before {
        transform: translateX(2px) rotate(-135deg);
    }
    .slider-wrapper .flickity-button.flickity-prev-next-button.next::before {
        transform: translateX(-2px) rotate(45deg);
    }

    /* Nút "Xem ngay" full-width */
    .ms-facilities .post-content .button {
        display: inline-flex !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Bỏ phần slide kế "ló" ra 2 mép (kiểu focus): ẩn slide chưa active.
       Điều hướng vẫn chạy (slide mới thành is-selected sẽ hiện lại). */
    .ms-facilities.slider-style-focus .flickity-slider > .ms-posts:not(.is-selected) {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Nới rộng item (slide) gần full-width, chừa mép nhỏ 2 bên.
       Ghi đè max-width:80vw (theme đang chặn slide ~80% viewport). */
    .ms-facilities .flickity-slider > .ms-posts {
        width: calc(100% - 40px) !important;
        max-width: none !important;
    }
}

body .section.section-footer .menu-item {
    margin-bottom: 10px !important;
}

/* Footer: căn giữa badge BCT + DMCA */
.footer-wrapper .footer-row>.col.large-4 .stack.stack-row {
    justify-content: center !important;
}

/* Footer: số điện thoại */
.footer-wrapper a[href^="tel"] {
    display: block;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #0A0A0A !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

/* ============================================================
   Footer: đồng bộ tỷ lệ cột — large-4 (Chính sách) đang bị co rút
   hẹp hơn large-3 (Logo, Liên hệ) do flex-shrink theo content
   ============================================================ */
@media (min-width: 850px) {
    .footer-wrapper .footer-row>.col.large-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }

    .footer-wrapper .footer-row>.col.large-2 {
        flex: 0 0 16.667% !important;
        max-width: 16.667% !important;
        width: 16.667% !important;
    }

    .footer-wrapper .footer-row>.col.large-4 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}