<style id="qrth-modern-ui-v6">

/* =========================================================
   QR-TH V6 — DESIGN TOKENS
   ========================================================= */

:root {
    --qrth-v6-blue: #0a84ff;
    --qrth-v6-blue-2: #5ac8fa;
    --qrth-v6-purple: #8b5cf6;
    --qrth-v6-pink: #ec4899;
    --qrth-v6-green: #22c55e;

    --qrth-v6-text: #111827;
    --qrth-v6-muted: #64748b;
    --qrth-v6-border: rgba(15, 23, 42, .08);

    --qrth-v6-glass: rgba(255,255,255,.72);
    --qrth-v6-glass-strong: rgba(255,255,255,.88);

    --qrth-v6-shadow:
        0 18px 55px rgba(15,23,42,.08);

    --qrth-v6-shadow-soft:
        0 8px 30px rgba(15,23,42,.06);

    --qrth-v6-radius: 24px;
    --qrth-v6-radius-small: 16px;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html.qrth-v6-active,
body.qrth-v6-active {
    min-height: 100%;
}

body.qrth-v6-active {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(90,200,250,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(139,92,246,.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 48%,
            #ffffff 100%
        ) !important;

    color: var(--qrth-v6-text);
}

/* =========================================================
   HEADER
   ========================================================= */

.qrth-v6-active .qrth-navbar,
.qrth-v6-active .qrth-header,
.qrth-v6-active header {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;

    border-bottom: 1px solid rgba(15,23,42,.055) !important;

    box-shadow:
        0 4px 24px rgba(15,23,42,.035) !important;

    position: relative;
    z-index: 1000;
}

/* Existing QR-TH logo stays untouched */

.qrth-v6-active .qrth-navbar-logo img,
.qrth-v6-active .qrth-public-logo {
    max-height: 58px;
    width: auto;
}

/* Navigation */

.qrth-v6-active .qrth-main-menu a,
.qrth-v6-active .qrth-service-link,
.qrth-v6-active header nav a {
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.qrth-v6-active .qrth-main-menu a:hover,
.qrth-v6-active header nav a:hover {
    color: var(--qrth-v6-blue) !important;
}

/* =========================================================
   LANGUAGE SELECTOR
   ========================================================= */

/*
 * Remove visual globe/icon.
 * Language button itself remains.
 */

.qrth-v6-active .qrth-lang-switcher > i,
.qrth-v6-active .qrth-lang-toggle > i,
.qrth-v6-active .qrth-lang-toggle .fa-globe,
.qrth-v6-active .qrth-lang-toggle .fa-solid.fa-globe,
.qrth-v6-active .qrth-lang-toggle .fa-regular.fa-globe,
.qrth-v6-active .qrth-lang-toggle [class*="globe"] {
    display: none !important;
}

/* Language toggle */

.qrth-v6-active .qrth-lang-toggle {
    min-height: 44px !important;
    padding: 7px 13px !important;

    border-radius: 14px !important;

    background:
        rgba(255,255,255,.76) !important;

    border:
        1px solid rgba(15,23,42,.08) !important;

    box-shadow:
        0 5px 18px rgba(15,23,42,.055) !important;

    backdrop-filter:
        blur(18px) saturate(160%) !important;

    -webkit-backdrop-filter:
        blur(18px) saturate(160%) !important;
}

/* Language menu */

.qrth-v6-active .qrth-lang-menu {
    min-width: 270px !important;
    max-height: min(520px, 70vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 8px !important;

    border:
        1px solid rgba(255,255,255,.85) !important;

    border-radius: 22px !important;

    background:
        rgba(255,255,255,.82) !important;

    backdrop-filter:
        blur(30px) saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(30px) saturate(180%) !important;

    box-shadow:
        0 25px 70px rgba(15,23,42,.16),
        0 2px 8px rgba(15,23,42,.05) !important;

    scrollbar-width: thin;
}

/* Language items */

.qrth-v6-active .qrth-lang-item {
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;

    border-radius: 13px !important;

    padding: 8px 11px !important;

    transition:
        background .18s ease,
        transform .18s ease !important;
}

.qrth-v6-active .qrth-lang-item:hover {
    background: rgba(10,132,255,.08) !important;
    transform: translateX(2px);
}

.qrth-v6-active .qrth-lang-item.qrth-v6-language-active {
    background:
        linear-gradient(
            135deg,
            rgba(10,132,255,.12),
            rgba(139,92,246,.08)
        ) !important;
}

.qrth-v6-active .qrth-lang-flag {
    width: 22px !important;
    min-width: 22px !important;
}

.qrth-v6-active .qrth-lang-name {
    font-weight: 600 !important;
    color: #172033 !important;
}

.qrth-v6-active .qrth-lang-code {
    margin-left: auto !important;
    opacity: .55 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* =========================================================
   HERO
   ========================================================= */

.qrth-v6-active [data-trigger="qrth-public-generate"] {
    margin-top: 24px !important;
}

/*
 * Reduce excessive empty vertical space on the generator page.
 */

.qrth-v6-active main {
    min-height: auto !important;
}

/* =========================================================
   QR GENERATOR CONTAINER
   ========================================================= */

.qrth-v6-active [data-trigger="qrth-public-generate"].qrth-v4-generator {
    position: relative;

    border:
        1px solid rgba(255,255,255,.88) !important;

    border-radius:
        30px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.88),
            rgba(255,255,255,.66)
        ) !important;

    backdrop-filter:
        blur(28px) saturate(175%) !important;

    -webkit-backdrop-filter:
        blur(28px) saturate(175%) !important;

    box-shadow:
        0 28px 80px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    padding: 26px !important;
}

/* =========================================================
   QR TYPE SELECTOR
   ========================================================= */

.qrth-v6-active .qrth-type-section {
    margin-bottom: 22px !important;

    padding:
        18px !important;

    border-radius:
        22px !important;

    background:
        rgba(255,255,255,.60) !important;

    border:
        1px solid rgba(15,23,42,.055) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;
}

.qrth-v6-active .qrth-type-heading {
    margin-bottom: 14px !important;
}

.qrth-v6-active .qrth-type-heading h5 {
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: -.02em !important;
}

.qrth-v6-active .qrth-type-grid {
    display: grid !important;

    grid-template-columns:
        repeat(auto-fit, minmax(105px, 1fr)) !important;

    gap: 10px !important;
}

.qrth-v6-active .qrth-type-card {
    position: relative;

    min-height: 92px !important;

    padding: 14px 10px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius:
        18px !important;

    background:
        rgba(255,255,255,.66) !important;

    border:
        1px solid rgba(15,23,42,.065) !important;

    box-shadow:
        0 5px 18px rgba(15,23,42,.035) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease !important;
}

.qrth-v6-active .qrth-type-card:hover {
    transform: translateY(-3px) !important;

    background:
        rgba(255,255,255,.92) !important;

    box-shadow:
        0 14px 30px rgba(15,23,42,.09) !important;

    border-color:
        rgba(10,132,255,.20) !important;
}

.qrth-v6-active .qrth-type-card.qrth-type-active {
    background:
        linear-gradient(
            145deg,
            rgba(10,132,255,.13),
            rgba(90,200,250,.08)
        ) !important;

    border:
        1.5px solid rgba(10,132,255,.34) !important;

    box-shadow:
        0 10px 30px rgba(10,132,255,.12) !important;
}

.qrth-v6-active .qrth-type-icon {
    width: 42px !important;
    height: 42px !important;

    border-radius: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,132,255,.13),
            rgba(139,92,246,.09)
        ) !important;

    color:
        var(--qrth-v6-blue) !important;
}

.qrth-v6-active .qrth-type-card.qrth-type-active
.qrth-type-icon {
    background:
        linear-gradient(
            145deg,
            #0a84ff,
            #5ac8fa
        ) !important;

    color: #fff !important;
}

.qrth-v6-active .qrth-type-kicker {
    margin-top: 7px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    color: #334155 !important;
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */

.qrth-v6-active [data-trigger="qrth-public-generate"]
.form-control,
.qrth-v6-active [data-trigger="qrth-public-generate"]
.form-select {
    min-height: 52px !important;

    border-radius:
        15px !important;

    border:
        1px solid rgba(15,23,42,.09) !important;

    background:
        rgba(255,255,255,.76) !important;

    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.025) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

.qrth-v6-active [data-trigger="qrth-public-generate"]
.form-control:focus,
.qrth-v6-active [data-trigger="qrth-public-generate"]
.form-select:focus {
    background: rgba(255,255,255,.95) !important;

    border-color:
        rgba(10,132,255,.45) !important;

    box-shadow:
        0 0 0 4px rgba(10,132,255,.10),
        0 8px 22px rgba(10,132,255,.05) !important;
}

/* =========================================================
   CUSTOMIZATION
   ========================================================= */

.qrth-v6-active .qrth-customization-heading {
    padding:
        16px 0 10px !important;
}

.qrth-v6-active #colors > .p-3.border.rounded {
    border:
        1px solid rgba(15,23,42,.06) !important;

    border-radius:
        18px !important;

    background:
        rgba(255,255,255,.60) !important;
}

/* =========================================================
   GENERATE BUTTON
   ========================================================= */

.qrth-v6-active .qrth-v4-generate {
    min-height: 58px !important;

    border: 0 !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            135deg,
            #007aff 0%,
            #0a84ff 42%,
            #5ac8fa 100%
        ) !important;

    color: #fff !important;

    font-size: 16px !important;
    font-weight: 750 !important;

    box-shadow:
        0 14px 32px rgba(10,132,255,.25),
        inset 0 1px 0 rgba(255,255,255,.25) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

.qrth-v6-active .qrth-v4-generate:hover {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 18px 38px rgba(10,132,255,.32),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.qrth-v6-active .qrth-v4-generate:active {
    transform:
        scale(.985) !important;
}

/* =========================================================
   PREVIEW
   ========================================================= */

.qrth-v6-active .qrth-v4-preview-card {
    border:
        1px solid rgba(255,255,255,.88) !important;

    border-radius:
        26px !important;

    background:
        rgba(255,255,255,.70) !important;

    backdrop-filter:
        blur(25px) saturate(170%) !important;

    -webkit-backdrop-filter:
        blur(25px) saturate(170%) !important;

    box-shadow:
        0 24px 60px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    padding:
        20px !important;
}

.qrth-v6-active .qrth-v4-preview-heading {
    border-bottom:
        1px solid rgba(15,23,42,.06) !important;

    padding-bottom:
        13px !important;
}

.qrth-v6-active .qrth-v4-scan-badge {
    border-radius:
        12px !important;

    background:
        rgba(34,197,94,.10) !important;

    color:
        #16a34a !important;
}

/* QR result */

.qrth-v6-active #return-ajax {
    border-radius:
        20px !important;

    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid rgba(15,23,42,.06) !important;

    padding:
        18px !important;
}

/* Download */

.qrth-v6-active .qrth-v4-downloads {
    gap: 8px !important;
}

.qrth-v6-active .qrth-v4-downloads .btn {
    min-height: 46px !important;

    border-radius:
        14px !important;

    border:
        1px solid rgba(15,23,42,.07) !important;

    background:
        rgba(255,255,255,.78) !important;

    color:
        #334155 !important;

    font-weight:
        700 !important;
}

.qrth-v6-active .qrth-v4-downloads .btn:hover {
    background:
        rgba(10,132,255,.08) !important;

    color:
        var(--qrth-v6-blue) !important;
}

/* =========================================================
   UPLOAD CARD
   ========================================================= */

.qrth-v6-active .qrth-upload-card {
    border:
        1px dashed rgba(10,132,255,.25) !important;

    border-radius:
        18px !important;

    background:
        rgba(10,132,255,.035) !important;

    transition:
        background .2s ease,
        border-color .2s ease !important;
}

.qrth-v6-active .qrth-upload-card:hover,
.qrth-v6-active .qrth-upload-card.qrth-dragover {
    background:
        rgba(10,132,255,.08) !important;

    border-color:
        rgba(10,132,255,.50) !important;
}

/* =========================================================
   DESKTOP LAYOUT
   ========================================================= */

@media (min-width: 992px) {

    .qrth-v6-active
    [data-trigger="qrth-public-generate"] > .row {
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .qrth-v6-active
    [data-trigger="qrth-public-generate"]
    > .row > .col-md-8 {
        padding-right: 12px !important;
    }

    .qrth-v6-active
    [data-trigger="qrth-public-generate"]
    > .row > .qrth-v4-preview-column {
        padding-left: 12px !important;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    body.qrth-v6-active {
        overflow-x: hidden !important;
    }

    .qrth-v6-active .qrth-navbar,
    .qrth-v6-active .qrth-header,
    .qrth-v6-active header {
        position:
            sticky !important;

        top:
            0 !important;
    }

    .qrth-v6-active
    .qrth-navbar-logo img {
        max-height:
            50px !important;
    }

    .qrth-v6-active
    [data-trigger="qrth-public-generate"].qrth-v4-generator {
        margin-top:
            12px !important;

        padding:
            14px !important;

        border-radius:
            22px !important;
    }

    .qrth-v6-active
    .qrth-type-section {
        padding:
            12px !important;

        border-radius:
            18px !important;
    }

    .qrth-v6-active
    .qrth-type-grid {
        grid-template-columns:
            repeat(4, minmax(0,1fr)) !important;

        gap:
            7px !important;
    }

    .qrth-v6-active
    .qrth-type-card {
        min-height:
            76px !important;

        padding:
            8px 4px !important;

        border-radius:
            14px !important;
    }

    .qrth-v6-active
    .qrth-type-icon {
        width:
            34px !important;

        height:
            34px !important;

        border-radius:
            11px !important;
    }

    .qrth-v6-active
    .qrth-type-kicker {
        font-size:
            10px !important;

        margin-top:
            5px !important;
    }

    .qrth-v6-active
    .qrth-v4-preview-card {
        margin-top:
            14px !important;

        border-radius:
            20px !important;
    }

    .qrth-v6-active
    .qrth-v4-downloads {
        flex-wrap:
            wrap !important;
    }

    .qrth-v6-active
    .qrth-v4-downloads .btn {
        flex:
            1 1 calc(50% - 5px) !important;
    }

    .qrth-v6-active
    .qrth-lang-menu {
        position:
            fixed !important;

        top:
            72px !important;

        left:
            12px !important;

        right:
            12px !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-height:
            calc(100vh - 92px) !important;

        border-radius:
            22px !important;
    }

}

/* =========================================================
   REDUCE OLD HEAVY SHADOWS
   ========================================================= */

.qrth-v6-active .card {
    box-shadow:
        var(--qrth-v6-shadow-soft);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.qrth-v6-active button:focus-visible,
.qrth-v6-active a:focus-visible,
.qrth-v6-active input:focus-visible,
.qrth-v6-active select:focus-visible {
    outline:
        3px solid rgba(10,132,255,.20) !important;

    outline-offset:
        2px !important;
}

@media (prefers-reduced-motion: reduce) {

    .qrth-v6-active *,
    .qrth-v6-active *::before,
    .qrth-v6-active *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

</style>

<script>
(function () {

    'use strict';

    /*
     * QR-TH Modern UI V6
     * Visual enhancement only.
     */

    function qrthV6Init() {

        document.documentElement.classList.add('qrth-v6-active');

        if (document.body) {
            document.body.classList.add('qrth-v6-active');
        }

        /*
         * -----------------------------------------------------
         * LANGUAGE SYSTEM
         * -----------------------------------------------------
         *
         * Required order:
         *
         * EN
         * TH
         * JA
         * ZH
         * KO
         * ES
         * FR
         * DE
         * PT
         * ID
         * MS
         * KM
         * LO
         * MY
         * TL
         * VI
         *
         * Old languages not in this list are hidden.
         */

        const languageOrder = [
            'en',
            'th',
            'ja',
            'zh',
            'ko',
            'es',
            'fr',
            'de',
            'pt',
            'id',
            'ms',
            'km',
            'lo',
            'my',
            'tl',
            'vi'
        ];

        const languageNames = {
            en: 'English',
            th: 'ไทย',
            ja: '日本語',
            zh: '简体中文',
            ko: '한국어',
            es: 'Español',
            fr: 'Français',
            de: 'Deutsch',
            pt: 'Português',
            id: 'Bahasa Indonesia',
            ms: 'Bahasa Melayu',
            km: 'ភាសាខ្មែរ',
            lo: 'ພາສາລາວ',
            my: 'မြန်မာ',
            tl: 'Filipino',
            vi: 'Tiếng Việt'
        };

        function normalizeLanguageCode(item) {

            if (!item) {
                return '';
            }

            const code =
                item.getAttribute('data-lang') ||
                item.dataset.lang ||
                item.querySelector('.qrth-lang-code')?.textContent ||
                item.querySelector('[data-lang]')?.getAttribute('data-lang') ||
                '';

            return String(code)
                .trim()
                .toLowerCase()
                .split('-')[0];
        }

        function rebuildLanguageMenu() {

            const menus =
                document.querySelectorAll(
                    '.qrth-lang-menu'
                );

            menus.forEach(function (menu) {

                const items =
                    Array.from(
                        menu.querySelectorAll(
                            '.qrth-lang-item'
                        )
                    );

                if (!items.length) {
                    return;
                }

                const mapped = [];

                items.forEach(function (item) {

                    const code =
                        normalizeLanguageCode(item);

                    if (!code) {
                        return;
                    }

                    const index =
                        languageOrder.indexOf(code);

                    if (index === -1) {
                        item.style.display = 'none';
                        return;
                    }

                    item.style.display = '';

                    item.dataset.qrthV6Language = code;

                    const name =
                        item.querySelector(
                            '.qrth-lang-name'
                        );

                    if (name && languageNames[code]) {
                        name.textContent =
                            languageNames[code];
                    }

                    mapped.push({
                        item: item,
                        index: index
                    });
                });

                mapped.sort(function (a,b) {
                    return a.index - b.index;
                });

                mapped.forEach(function (entry) {
                    menu.appendChild(entry.item);
                });

                /*
                 * English first visually and semantically.
                 */

                const english =
                    menu.querySelector(
                        '[data-qrth-v6-language="en"]'
                    );

                if (english) {
                    english.classList.add(
                        'qrth-v6-language-active'
                    );
                }
            });
        }

        rebuildLanguageMenu();

        /*
         * Rebuild again after delayed theme scripts.
         */

        setTimeout(rebuildLanguageMenu, 250);
        setTimeout(rebuildLanguageMenu, 700);
        setTimeout(rebuildLanguageMenu, 1500);

        /*
         * Observe language menu dynamically.
         */

        const observer =
            new MutationObserver(function () {
                rebuildLanguageMenu();
            });

        document
            .querySelectorAll('.qrth-lang-menu')
            .forEach(function (menu) {

                observer.observe(menu, {
                    childList: true,
                    subtree: true
                });

            });

        /*
         * -----------------------------------------------------
         * REMOVE OLD VISUAL GLOBE
         * -----------------------------------------------------
         */

        document
            .querySelectorAll(
                '.qrth-lang-switcher, .qrth-lang-toggle'
            )
            .forEach(function (wrapper) {

                wrapper
                    .querySelectorAll(
                        '.fa-globe, .fa-solid.fa-globe, .fa-regular.fa-globe'
                    )
                    .forEach(function (icon) {
                        icon.remove();
                    });

            });

        /*
         * -----------------------------------------------------
         * QR TYPE CARDS
         * -----------------------------------------------------
         *
         * Keep original click handlers.
         * Only improve keyboard accessibility.
         */

        document
            .querySelectorAll('.qrth-type-card')
            .forEach(function (card) {

                if (!card.hasAttribute('tabindex')) {
                    card.setAttribute('tabindex', '0');
                }

                card.addEventListener(
                    'keydown',
                    function (event) {

                        if (
                            event.key === 'Enter' ||
                            event.key === ' '
                        ) {

                            event.preventDefault();

                            card.click();
                        }

                    }
                );

            });

        /*
         * -----------------------------------------------------
         * GENERATOR
         * -----------------------------------------------------
         *
         * Do NOT replace form submission.
         * Existing QR generation remains untouched.
         */

        const generator =
            document.querySelector(
                '[data-trigger="qrth-public-generate"]'
            );

        if (generator) {

            generator.classList.add(
                'qrth-v6-generator-ready'
            );

            generator.dataset.qrthUiVersion = 'v6';

        }

        /*
         * -----------------------------------------------------
         * MOBILE MENU
         * -----------------------------------------------------
         *
         * Do not replace existing hamburger behaviour.
         */

        document
            .querySelectorAll('.qrth-main-menu')
            .forEach(function (menu) {

                menu.setAttribute(
                    'data-qrth-v6-menu',
                    'true'
                );

            });

        /*
         * -----------------------------------------------------
         * PREVENT HORIZONTAL OVERFLOW
         * -----------------------------------------------------
         */

        document.documentElement.style.overflowX =
            'hidden';

        if (document.body) {
            document.body.style.overflowX =
                'hidden';
        }

    }

    if (
        document.readyState === 'loading'
    ) {
        document.addEventListener(
            'DOMContentLoaded',
            qrthV6Init,
            { once: true }
        );
    } else {
        qrthV6Init();
    }

})();
</script><?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://qr-th.com/sitemap/site.xml</loc>
	</sitemap>
	<sitemap>
		<loc>https://qr-th.com/sitemap/links.xml</loc>
	</sitemap>
	<sitemap>
		<loc>https://qr-th.com/sitemap/biopages.xml</loc>
	</sitemap>
</sitemapindex>