/* =========================================================
   TRUNG LINH QUICK ORDER
========================================================= */

.tlqo{
    --navy:#102a43;
    --ink:#17202e;
    --text:#596579;
    --muted:#98a2b3;
    --line:#e6ebf1;
    --soft:#f6f8fb;

    --orange:#f7941d;
    --orange2:#ff6b35;

    --red:#e53935;
    --green:#16a66a;

    --ease:cubic-bezier(.2,.8,.2,1);

    position:fixed;
    z-index:999999;
    inset:0;

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

    padding:24px;

    visibility:hidden;
    opacity:0;
    pointer-events:none;

    font-family:
        "Be Vietnam Pro",
        Arial,
        sans-serif;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.tlqo *,
.tlqo *::before,
.tlqo *::after{
    box-sizing:border-box;
}

.tlqo.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}


/* =========================================================
   OVERLAY
========================================================= */

.tlqo-overlay{
    position:absolute;
    inset:0;

    background:
        rgba(8,16,27,.72);

    backdrop-filter:
        blur(5px);

    opacity:0;

    transition:
        opacity .35s ease;
}

.tlqo.is-open .tlqo-overlay{
    opacity:1;
}


/* =========================================================
   DIALOG
========================================================= */

.tlqo-dialog{
    position:relative;
    z-index:2;

    width:min(920px,100%);
    max-height:calc(100vh - 48px);

    overflow:auto;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.3);

    opacity:0;

    transform:
        translateY(30px)
        scale(.97);

    transition:
        transform .4s var(--ease),
        opacity .3s ease;
}

.tlqo.is-open .tlqo-dialog{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

.tlqo-dialog::-webkit-scrollbar{
    width:6px;
}

.tlqo-dialog::-webkit-scrollbar-thumb{
    background:#ced5df;
    border-radius:20px;
}


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

.tlqo-header{
    position:sticky;
    z-index:30;
    top:0;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    min-height:98px;

    padding:
        20px
        28px;

    background:
        linear-gradient(
            125deg,
            #f1a718,
            #ff7624
        );

    color:#fff;

    border-bottom:
        1px solid
        rgba(255,255,255,.25);
}

.tlqo-header::before{
    position:absolute;
    inset:0;

    pointer-events:none;

    content:"";

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.16),
            transparent 48%
        );
}

.tlqo-header > *{
    position:relative;
}

.tlqo-eyebrow{
    display:block;

    margin-bottom:5px;

    font-size:10px;
    font-weight:800;

    line-height:1;

    letter-spacing:.14em;

    opacity:.85;
}

.tlqo-header h2{
    max-width:730px;

    margin:0;

    color:#fff;

    font-size:18px;
    font-weight:800;

    line-height:1.45;

    text-transform:uppercase;
}

.tlqo-close{
    display:grid;
    place-items:center;

    width:46px;
    height:46px;

    flex:0 0 46px;

    margin:0;
    padding:0;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius:50%;

    background:
        rgba(255,255,255,.14);

    color:#fff;

    font-size:27px;
    font-weight:300;

    line-height:1;

    cursor:pointer;

    transition:
        background .3s ease,
        transform .3s var(--ease);
}

.tlqo-close:hover{
    background:
        rgba(255,255,255,.27);

    color:#fff;

    transform:
        rotate(90deg);
}


/* =========================================================
   BODY
========================================================= */

.tlqo-body{
    display:grid;

    grid-template-columns:
        270px
        minmax(0,1fr);

    min-width:0;
}


/* =========================================================
   PRODUCT
========================================================= */

.tlqo-product{
    min-width:0;

    padding:
        25px
        23px;

    background:
        linear-gradient(
            180deg,
            #fafbfd,
            #f5f7fa
        );

    border-right:
        1px solid
        var(--line);
}

.tlqo-image{
    display:grid;
    place-items:center;

    aspect-ratio:1;

    margin-bottom:17px;

    padding:10px;

    overflow:hidden;

    border:
        1px solid
        var(--line);

    border-radius:16px;

    background:#fff;
}

.tlqo-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}

.tlqo-product h3{
    margin:
        0
        0
        8px;

    color:
        var(--ink);

    font-size:14.5px;
    font-weight:700;

    line-height:1.55;
}


/* =========================================================
   PRICE
========================================================= */

.tlqo-price{
    margin-bottom:18px;
}

.tlqo-price .price{
    margin:0;
}

.tlqo-price del{
    color:
        var(--muted);

    font-size:12px;

    opacity:1;
}

.tlqo-price ins{
    background:none;

    text-decoration:none;
}

.tlqo-price ins .amount,
.tlqo-price > .amount,
.tlqo-price .price > .amount{
    color:
        var(--red);

    font-size:20px;
    font-weight:800;
}


/* =========================================================
   QUANTITY
========================================================= */

.tlqo-quantity{
    display:grid;

    grid-template-columns:
        46px
        1fr
        46px;

    height:50px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid
        var(--line);

    border-radius:12px;

    background:#fff;
}

.tlqo-quantity button{
    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    border:0;

    background:#fff;

    color:
        var(--text);

    font-size:18px;

    cursor:pointer;

    transition:.25s ease;
}

.tlqo-quantity button:hover{
    background:#fff4e8;

    color:
        var(--orange);
}

.tlqo-quantity input{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    border-width:
        0 1px;

    border-style:solid;

    border-color:
        var(--line);

    border-radius:0;

    background:#fff;

    box-shadow:none;

    color:
        var(--ink);

    font-size:15px;
    font-weight:700;

    text-align:center;

    -moz-appearance:textfield;
}

.tlqo-quantity
input::-webkit-inner-spin-button,
.tlqo-quantity
input::-webkit-outer-spin-button{
    margin:0;
    -webkit-appearance:none;
}

.tlqo-product-note{
    margin:0;

    color:
        var(--muted);

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   CUSTOMER
========================================================= */

.tlqo-customer{
    min-width:0;

    padding:
        25px
        28px
        28px;

    background:#fff;
}

.tlqo-customer-heading{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:18px;
}

.tlqo-user-icon{
    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:12px;

    background:#fff4e8;

    color:
        var(--orange);

    font-size:20px;
}

.tlqo-customer-heading b{
    display:block;

    color:
        var(--ink);

    font-size:16px;
    font-weight:800;

    line-height:1.35;
}

.tlqo-customer-heading small{
    display:block;

    margin-top:2px;

    color:
        var(--muted);

    font-size:11.5px;
}


/* =========================================================
   GENDER
========================================================= */

.tlqo-gender{
    display:flex;

    gap:22px;

    margin-bottom:18px;
}

.tlqo-gender label{
    display:flex;
    align-items:center;

    gap:8px;

    margin:0;

    color:
        var(--ink);

    font-size:13.5px;
    font-weight:600;

    cursor:pointer;
}

.tlqo-gender input{
    position:absolute;

    opacity:0;
    pointer-events:none;
}

.tlqo-gender label span{
    position:relative;

    display:block;

    width:18px;
    height:18px;

    border:
        1.5px solid
        #c8d0db;

    border-radius:50%;

    background:#fff;
}

.tlqo-gender
input:checked + span{
    border-color:
        var(--orange);

    box-shadow:
        0 0 0 3px
        rgba(247,148,29,.12);
}

.tlqo-gender
input:checked + span::after{
    position:absolute;

    inset:3px;

    border-radius:50%;

    background:
        var(--orange);

    content:"";
}


/* =========================================================
   FIELDS
========================================================= */

.tlqo-grid{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:12px;
}

.tlqo-field{
    margin-bottom:14px;
}

.tlqo-field label{
    display:block;

    margin-bottom:6px;

    color:
        var(--text);

    font-size:12px;
    font-weight:600;
}

.tlqo-field label em{
    color:
        var(--red);

    font-style:normal;
}

.tlqo-field label small{
    color:
        var(--muted);

    font-size:11px;
    font-weight:400;
}

.tlqo-field input,
.tlqo-field textarea{
    display:block;

    width:100%;

    margin:0;

    padding:
        12px
        14px;

    border:
        1.5px solid
        var(--line);

    border-radius:10px;

    outline:0;

    background:#fafbfd;

    box-shadow:none;

    color:
        var(--ink);

    font-family:inherit;
    font-size:13.5px;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.tlqo-field input{
    height:46px;
}

.tlqo-field textarea{
    min-height:66px;

    line-height:1.5;

    resize:vertical;
}

.tlqo-field input::placeholder,
.tlqo-field textarea::placeholder{
    color:#b3bcc9;
}

.tlqo-field input:focus,
.tlqo-field textarea:focus{
    border-color:
        var(--orange);

    background:#fff;

    box-shadow:
        0 0 0 4px
        rgba(247,148,29,.09);
}

.tlqo-field
.is-error{
    border-color:
        var(--red) !important;

    background:#fff8f8 !important;

    box-shadow:
        0 0 0 4px
        rgba(229,57,53,.07) !important;
}


/* =========================================================
   SUMMARY
========================================================= */

.tlqo-summary{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin:
        4px
        0
        15px;

    padding:
        14px
        16px;

    border:
        1px solid
        var(--line);

    border-radius:12px;

    background:
        var(--soft);
}

.tlqo-summary > div{
    display:flex;
    flex-direction:column;
}

.tlqo-summary span{
    margin-bottom:2px;

    color:
        var(--muted);

    font-size:11.5px;
}

.tlqo-summary strong{
    color:
        var(--ink);

    font-size:13px;
    font-weight:700;
}

.tlqo-total{
    align-items:flex-end;
}

.tlqo-total strong{
    color:
        var(--red);

    font-size:21px;
    font-weight:800;
}


/* =========================================================
   SUBMIT
========================================================= */

.tlqo-submit{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:56px;

    margin:0;
    padding:0 20px;

    border:0;
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange2)
        );

    box-shadow:
        0 12px 25px
        rgba(247,148,29,.25);

    color:#fff;

    font-family:inherit;
    font-size:14px;
    font-weight:800;

    letter-spacing:.03em;

    cursor:pointer;

    transition:
        transform .3s var(--ease),
        box-shadow .3s var(--ease);
}

.tlqo-submit:hover{
    color:#fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 34px
        rgba(247,148,29,.38);
}

.tlqo-submit:disabled{
    cursor:not-allowed;

    opacity:.75;

    transform:none;
}

.tlqo-submit-loading{
    display:none;
    align-items:center;

    gap:9px;
}

.tlqo-submit.is-loading
.tlqo-submit-default{
    display:none;
}

.tlqo-submit.is-loading
.tlqo-submit-loading{
    display:flex;
}

.tlqo-submit-loading i{
    display:block;

    width:18px;
    height:18px;

    border:
        2px solid
        rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    animation:
        tlqo-spin .7s
        linear
        infinite;
}

@keyframes tlqo-spin{
    to{
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   MESSAGES
========================================================= */

.tlqo-message{
    display:none;

    margin-top:12px;

    padding:
        10px
        13px;

    border-radius:9px;

    font-size:12.5px;
    font-weight:500;

    line-height:1.6;
}

.tlqo-message.error{
    display:block;

    border:
        1px solid
        #ffd0d0;

    background:#fff3f3;

    color:#c62828;
}

.tlqo-message.success{
    display:block;

    border:
        1px solid
        #bdebd1;

    background:#f0fbf5;

    color:#087742;
}


/* =========================================================
   TRUST
========================================================= */

.tlqo-trust{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:
        8px
        18px;

    margin-top:16px;

    color:
        var(--muted);

    font-size:10.5px;

    flex-wrap:wrap;
}


/* =========================================================
   SUCCESS
========================================================= */

.tlqo-success{
    display:none;

    padding:
        56px
        35px;

    text-align:center;
}

.tlqo.is-success
.tlqo-form{
    display:none;
}

.tlqo.is-success
.tlqo-success{
    display:block;
}

.tlqo-success-icon{
    display:grid;
    place-items:center;

    width:80px;
    height:80px;

    margin:
        0 auto
        22px;

    border-radius:50%;

    background:#eaf9f1;

    box-shadow:
        0 0 0 10px
        rgba(22,166,106,.07);

    color:
        var(--green);

    font-size:36px;
    font-weight:700;
}

.tlqo-success h3{
    margin:
        0
        0
        10px;

    color:
        var(--ink);

    font-size:25px;
    font-weight:800;
}

.tlqo-success p{
    max-width:540px;

    margin:
        0 auto
        18px;

    color:
        var(--text);

    font-size:14px;

    line-height:1.8;
}

.tlqo-order-number{
    display:inline-block;

    margin-bottom:26px;

    padding:
        8px
        15px;

    border-radius:99px;

    background:
        var(--soft);

    color:
        var(--muted);

    font-size:12.5px;
}

.tlqo-order-number strong{
    color:
        var(--ink);
}

.tlqo-success-actions{
    display:flex;
    justify-content:center;

    gap:10px;

    flex-wrap:wrap;
}

.tlqo-continue,
.tlqo-call{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    margin:0;
    padding:
        0
        20px;

    border-radius:11px;

    font-size:13px;
    font-weight:700;
}

.tlqo-continue{
    border:
        1px solid
        var(--line);

    background:#fff;

    color:
        var(--text);
}

.tlqo-call{
    background:
        var(--green);

    color:#fff;
}


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

@media(max-width:767px){

    .tlqo{
        align-items:flex-end;

        padding:0;
    }

    .tlqo-dialog{
        width:100%;

        max-height:
            calc(100dvh - 10px);

        border-radius:
            22px
            22px
            0
            0;
    }

    .tlqo-header{
        min-height:80px;

        padding:
            16px
            18px;
    }

    .tlqo-header h2{
        max-width:
            calc(100vw - 100px);

        overflow:hidden;

        font-size:14px;

        text-overflow:ellipsis;

        white-space:nowrap;
    }

    .tlqo-close{
        width:40px;
        height:40px;

        flex-basis:40px;

        font-size:24px;
    }

    .tlqo-body{
        grid-template-columns:1fr;
    }

    .tlqo-product{
        display:grid;

        grid-template-columns:
            88px
            minmax(0,1fr);

        column-gap:14px;

        padding:
            16px
            18px;

        border-right:0;

        border-bottom:
            1px solid
            var(--line);
    }

    .tlqo-image{
        grid-row:
            1 / span 2;

        margin:0;

        padding:5px;

        border-radius:12px;
    }

    .tlqo-product h3{
        align-self:end;

        margin:
            0
            0
            3px;

        font-size:13px;
    }

    .tlqo-price{
        margin:0;
    }

    .tlqo-quantity{
        grid-column:
            1 / -1;

        height:44px;

        margin:
            13px
            0
            0;
    }

    .tlqo-product-note{
        display:none;
    }

    .tlqo-customer{
        padding:
            18px
            18px
            22px;
    }

    .tlqo-customer-heading{
        margin-bottom:14px;
    }

    .tlqo-user-icon{
        width:38px;
        height:38px;

        flex-basis:38px;
    }

    .tlqo-customer-heading b{
        font-size:14px;
    }

    .tlqo-grid{
        grid-template-columns:1fr;

        gap:0;
    }

    .tlqo-summary{
        padding:
            12px
            14px;
    }

    .tlqo-total strong{
        font-size:18px;
    }

    .tlqo-submit{
        height:52px;
    }

    .tlqo-success{
        padding:
            44px
            20px;
    }
}

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

    .tlqo,
    .tlqo *,
    .tlqo *::before,
    .tlqo *::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}
html.tlqo-lock,
body.tlqo-lock{
    overflow:hidden !important;
}