/* Điện thoại (≤ 575.98px) theo Figma Mobile – header-footer.
   Header: Figma "Menu" (450:14440) – cao 52, padding 10/16, logo 96px, nút menu 36×32.
   Footer: Figma 464:14794 – nền #0351A8, padding 20/16, các khối cách 20px; danh sách tỉnh luôn mở 3 cột;
   dải cam "SỬ DỤNG SỔ TIÊM CHỦNG ĐIỆN TỬ" nằm trên các liên kết chính sách. Chỉ đổi CSS, giữ nguyên nội dung. */
@media (max-width: 575.98px) {
    /* ===== Header ===== */
    html body .td-header {
        border-bottom: 0;
    }

    html body .td-header .td-header__inner {
        height: 52px;
        min-height: 52px;
        padding: 10px 16px;
    }

    html body .td-header .td-header__logo,
    html body .td-header .td-header__logo img {
        width: 96px;
        height: auto;
    }

    html body .td-header .td-header__toggle {
        width: 36px;
        height: 32px;
        border-radius: 6px;
    }

        html body .td-header .td-header__toggle svg {
            width: 28px;
            height: 28px;
        }

            html body .td-header .td-header__toggle svg path {
                stroke-width: 1.4;
            }

    /* ===== Footer ===== */
    html body .td-footer {
        padding: 0;
        background: #0351A8;
    }

    html body .td-footer .td-footer__inner {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px 16px;
    }

    /* Khối thương hiệu: logo + "Thành lập…" bên trái, slogan bên phải, 1 hàng cao ~33px */
    html body .td-footer .td-footer__top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin: 0;
        padding: 0;
    }

    html body .td-footer .td-footer__brand {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        margin: 0;
    }

    html body .td-footer .td-footer__brand-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
        margin: 0;
    }

        html body .td-footer .td-footer__brand-col:first-child {
            flex: 0 0 84px;
        }

        html body .td-footer .td-footer__brand-col:last-child {
            flex: 1 1 auto;
            align-items: flex-start;
        }

        html body .td-footer .td-footer__brand-col img {
            width: 84px;
            height: auto;
            margin: 0;
        }

    html body .td-footer .td-footer__est,
    html body .td-footer .td-footer__note {
        font-size: 7.658px;
        font-weight: 700;
        line-height: normal;
        white-space: nowrap;
    }

    html body .td-footer .td-footer__est {
        color: #fff;
    }

    html body .td-footer .td-footer__note {
        align-self: center;
        margin: 2px 0 0;
        color: #A9CCFF;
    }

    html body .td-footer .td-footer__slogan-1,
    html body .td-footer .td-footer__slogan-2 {
        display: block;
        margin: 0;
        line-height: normal;
        color: #fff;
        white-space: nowrap;
    }

    html body .td-footer .td-footer__slogan-1 {
        font-size: 6.2px;
        font-weight: 700;
    }

    html body .td-footer .td-footer__slogan-2 {
        font-size: 8.6px;
        font-weight: 900;
    }

    /* Liên hệ / Tìm trung tâm / Hotline: chữ cam 14 Black, căn giữa */
    html body .td-footer .td-footer__contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    html body .td-footer .td-footer__contact-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 0;
    }

    html body .td-footer .td-footer__contact-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        font-size: 14px;
        font-weight: 900;
        line-height: normal;
        color: #F7941D;
    }

        html body .td-footer .td-footer__contact-item svg {
            width: 13px;
            height: 13px;
        }

    html body .td-footer .td-footer__open-hours,
    html body .td-footer .td-footer__open-note {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        text-align: center;
    }

    html body .td-footer .td-footer__open-hours {
        margin-bottom: -11px; /* 2 dòng giờ mở cửa cách nhau 3px (gap khối 14px) */
    }

    /* Danh sách tỉnh: luôn mở, 3 cột cách 20, dòng cách 20, chữ 14 thường có chấm đầu dòng */
    html body .td-footer .td-footer__regions {
        display: flex;
        flex-direction: column;
        gap: 56px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    html body .td-footer .td-footer__region {
        margin: 0;
        padding: 0;
        border: 0;
    }

    html body .td-footer .td-footer__region-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0 0 20px;
        padding: 0;
        border: 0;
        background: none;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
        color: #F7941D;
        pointer-events: none;
    }

        html body .td-footer .td-footer__region-title span {
            font-size: 16px;
            font-weight: 900;
            line-height: normal;
            color: #F7941D;
        }

    html body .td-footer .td-footer__chevron {
        width: 18px;
        height: 18px;
        transform: none;
    }

    html body .td-footer .td-footer__provinces,
    html body .td-footer .td-footer__region.is-open .td-footer__provinces {
        display: block;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 0;
        columns: 3;
        column-gap: 20px;
        list-style: none;
    }

        html body .td-footer .td-footer__provinces li {
            position: relative;
            break-inside: avoid;
            margin: 0 0 20px;
            padding: 0 0 0 21px;
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #fff;
        }

            html body .td-footer .td-footer__provinces li::before {
                content: "";
                position: absolute;
                left: 8px;
                top: 7px;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: #fff;
            }

    /* Khối cuối: dải cam Sổ tiêm chủng (lên trước), liên kết chính sách 14, thông tin công ty 12 canh đều */
    html body .td-footer .td-footer__bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: -20px 0 0; /* danh sách tỉnh đã có lề dưới 20px ở dòng cuối */
        padding: 0;
        border: 0;
    }

    html body .td-footer .td-footer__qr {
        order: -1;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 -16px;
        padding: 10px 16px;
        background: #F7941D;
    }

        html body .td-footer .td-footer__qr img {
            display: none;
        }

        html body .td-footer .td-footer__qr::after {
            content: "";
            flex: 0 0 15px;
            width: 15px;
            height: 28px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 28'%3E%3Cpath d='M2 2l11 12L2 26' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        }

    html body .td-footer .td-footer__qr-text {
        flex: 1 1 auto;
        margin: 0;
        font-size: 14px;
        font-weight: 900;
        line-height: normal;
        color: #fff;
        text-transform: uppercase;
        text-align: left;
    }

    /* Figma để 1 dòng; thẻ <br> trong "Sử dụng<br>sổ tiêm chủng<br>điện tử" không bỏ được bằng CSS
       → ẩn chữ gốc (font-size 0, vẫn đọc được bằng trình đọc màn hình) và hiện lại cùng nội dung trên 1 dòng */
    html body .td-footer .td-footer__qr-text {
        font-size: 0;
        white-space: nowrap;
    }

        html body .td-footer .td-footer__qr-text br {
            display: none;
        }

        html body .td-footer .td-footer__qr-text::before {
            content: "Sử dụng sổ tiêm chủng điện tử";
            font-size: 14px;
        }

    html body .td-footer .td-footer__policies {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 0 14px;
    }

        html body .td-footer .td-footer__policies a {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #fff;
        }

    html body .td-footer .td-footer__company,
    html body .td-footer .td-footer__company div,
    html body .td-footer .td-footer__company-name {
        margin: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: normal;
        color: #fff;
        text-align: justify;
    }

    html body .td-footer .td-footer__company-name {
        display: block;
    }
}