/* Extracted from an inline <style> in: application/views/template/style_global.php
   Edit here; every view listed links this file. */
    /* ─── Variables (Merged) ─────────────────────────────── */
    :root {
        /* Brand Colors */
        --or: #F9C7AC;
        --or-d: #C24400;
        --color-orange-default: #e8632a;

        /* Navy / Main Theme */
        --nv: #00274D;
        --nv-l: #0A3D6B;
        --color-bg-main: #1a2744;
        --color-bg-light: #24345c;

        /* Accent */
        --gd: #F0A500;

        /* Background */
        --bg-w: #F7F7F5;
        --wh: #ffffff;
        --color-white-default: #ffffff;

        /* Text */
        --tx: #111111;
        --tx-2: #060303;
        --sm-text: #390303;
        --color-text-default: #5a5a5a;

        /* Border */
        --bd: #E8E8E4;
        --bt-line: #923300;

        /* Radius + Transition */
        --r: 15px;
        --tr: .24s ease;
    }

    hr {
        border-bottom: 1px solid #eee;
        margin: 15px 0;
        padding: 0 0 5px
    }
.content-area{
    padding-bottom: 30px
}

    .accept-cookie {
        position: fixed;
        left: max(18px, env(safe-area-inset-left));
        right: max(18px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
        z-index: 10000;
        width: min(1120px, calc(100% - 36px));
        min-height: 0;
        height: auto;
        margin: 0 auto;
        padding: 16px 18px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        color: #1f2937;
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
    }

    .accept-cookie-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: #b30000;
        background: #fff;
        border: 1px solid #f1d8d8;
        box-shadow: inset 0 0 0 4px #fff6f3;
    }

    .accept-cookie-icon .material-symbols-outlined {
        font-size: 25px;
        line-height: 1;
    }

    .text-accept-cookie {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        color: #374151;
    }

    .accept-cookie-title {
        display: block;
        color: #111827;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
    }

    .accept-cookie-desc {
        display: block;
        font-size: 14px;
        line-height: 1.55;
    }

    .accept-cookie-desc a {
        color: #b30000;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .button-accept-cookie {
        width: auto;
        min-width: 116px;
        min-height: 44px;
        padding: 12px 22px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: #b30000;
        box-shadow: 0 10px 22px rgba(179, 0, 0, .2);
        font-family: Kanit, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .button-accept-cookie:hover,
    .button-accept-cookie:focus {
        color: #fff;
        background: #d43d00;
        filter: none;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(179, 0, 0, .24);
    }

    .button-accept-cookie:active {
        transform: translateY(0);
    }

    @media (max-width: 991px) {
        .accept-cookie {
            bottom: max(82px, env(safe-area-inset-bottom));
            grid-template-columns: auto minmax(0, 1fr);
            padding: 14px;
            gap: 12px;
        }

        .button-accept-cookie {
            grid-column: 1 / -1;
            width: 100%;
        }
    }

    @media (max-width: 520px) {
        .accept-cookie {
            left: max(10px, env(safe-area-inset-left));
            right: max(10px, env(safe-area-inset-right));
            bottom: max(78px, env(safe-area-inset-bottom));
            width: calc(100% - 20px);
            grid-template-columns: 1fr;
            text-align: center;
            padding: 14px;
            border-radius: 16px;
        }

        .accept-cookie-icon {
            width: 38px;
            height: 38px;
            margin: 0 auto;
            border-radius: 12px;
        }

        .accept-cookie-title {
            font-size: 15px;
        }

        .accept-cookie-desc {
            font-size: 13px;
            line-height: 1.5;
        }
    }
    /* icon class */
    .mi {
        font-family: 'Material Symbols Outlined', sans-serif;
        font-weight: 300;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        -webkit-font-feature-settings: 'liga';
        font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }

    /* ── Modal backdrop ── */
    .tz-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(0, 15, 30, .75);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: clamp(60px, 10vh, 110px) 16px 16px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .tz-modal-backdrop.open {
        opacity: 1;
        pointer-events: all;
    }

    /* ── Modal box ── */
    .tz-modal {
        background: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 520px;
        box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
        transform: translateY(-20px) scale(.98);
        opacity: 0;
        transition: transform .24s ease, opacity .24s ease;
        overflow: hidden;
    }

    .tz-modal-backdrop.open .tz-modal {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Modal header */
    .tz-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px 14px;
        border-bottom: 1px solid var(--bd);
    }

    .tz-modal-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--tx);
    }

    .tz-modal-close {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: var(--bg-w);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--tx-2);
        transition: background var(--tr);
    }

    .tz-modal-close:hover {
        background: var(--bd);
    }

    .tz-modal-close .mi {
        font-size: 17px;
    }


    /* Fields */
    .tz-modal-body {
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tz-mf {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1.5px solid var(--bd);
        border-radius: 12px;
        padding: 0 14px;
        background: var(--bg-w);
        transition: border-color var(--tr), background var(--tr);
    }

    .tz-mf:focus-within {
        border-color: var(--bt-line);
        background: #fff;
    }

    .tz-mf .mi {
        font-size: 18px;
        color: var(--bt-line);
        flex-shrink: 0;
    }

    .tz-mf input,
    .tz-mf select {
        background: none;
        border: none;
        outline: none;
        font-size: 14px;
        color: var(--tx);
        width: 100%;
        padding: 13px 0;
        -webkit-appearance: none;
        appearance: none;
    }

    .tz-mf input::placeholder {
        color: #bbb;
    }

    .tz-mf-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Submit */
    .tz-modal-submit {
        width: 100%;
        padding: 14px;
        background: var(--bt-line);
        color: #fff;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        font-family: 'Sarabun', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transition: background var(--tr), transform var(--tr);
    }

    .tz-modal-submit:hover {
        background: var(--or-d);
        transform: translateY(-1px);
    }

    .tz-modal-submit .mi {
        font-size: 18px;
    }

    /* Quick tags */
    .tz-modal-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 18px 18px;
    }

    .tz-modal-tag {
        padding: 5px 13px;
        border-radius: 100px;
        background: var(--bg-w);
        border: 1px solid var(--bd);
        font-size: 12px;
        font-weight: 600;
        color: var(--tx-2);
        cursor: pointer;
        transition: var(--tr);
        -webkit-tap-highlight-color: transparent;
    }

    .tz-modal-tag:hover {
        background: #fff3ee;
        border-color: var(--bt-line);
        color: var(--or);
    }