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

.site-header{
    width:100%;
    height:108px;

    background:#fff7fa;
    border-bottom:1px solid #f0e5e9;

    position:sticky;
    top:0;

    z-index:var(--z-header);
}


/* ============================================================
   TOP NAV
   ============================================================ */

.header-top{
    width:100%;
    height:36px;

    background:transparent;
}

.header-top-inner{
    width:100%;
    max-width:var(--container-width);

    height:100%;

    margin:0 auto;
    padding:0;

    box-sizing:border-box;

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

    min-width:0;
}

.header-top-left,
.header-top-right{
    display:flex;
    align-items:center;

    min-width:0;
}


/* ============================================================
   TOP NAV LINK
   ============================================================ */

.header-top a{
    position:relative;

    display:inline-flex;
    align-items:center;

    color:#666b73;

    text-decoration:none;

    font-size:12px;
    line-height:1;
    font-weight:500;

    white-space:nowrap;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.header-top a:hover{
    color:var(--primary);
}


/* ============================================================
   TOP NAV SEPARATOR
   ============================================================ */

.header-top-left a + a{
    margin-left:14px;
    padding-left:14px;
}

.header-top-left a + a::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:1px;
    height:12px;

    background:#dedfe2;

    transform:translateY(-50%);
}


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

.header-main{
    width:100%;
    height:72px;

    background:transparent;
}

.header-inner{
    width:100%;
    max-width:var(--container-width);

    height:100%;

    margin:0 auto;
    padding:0;

    box-sizing:border-box;

    display:flex;
    align-items:center;

    min-width:0;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo{
    display:inline-flex;
    align-items:center;

    flex:0 0 auto;
    min-width:0;

    color:#202124;

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

    letter-spacing:-1.5px;
    line-height:1;

    text-decoration:none;
    white-space:nowrap;

    transition:opacity .2s ease;
}

.logo:hover{
    opacity:.9;
}

.logo span{
    color:var(--primary);
}


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

.header-search{
    flex:1 1 auto;

    width:auto;
    min-width:0;
    max-width:none;

    margin-left:48px;
    margin-right:30px;
}

.header-search form{
    width:100%;
    height:44px;

    display:flex;
    align-items:center;

    padding:3px;

    box-sizing:border-box;

    background:#fff;

    border:1px solid #eadfe3;
    border-radius:4px;

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

.header-search form:focus-within{
    border-color:#e5a1b7;

    box-shadow:
        0 0 0 2px rgba(216,27,96,.05);
}


/* ============================================================
   SEARCH ICON
   ============================================================ */

.header-search svg{
    width:18px;
    height:18px;

    flex:0 0 18px;

    margin-left:11px;
    margin-right:9px;

    fill:none;

    stroke:#8a8f97;
    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ============================================================
   SEARCH INPUT
   ============================================================ */

.header-search input{
    flex:1;

    width:100%;
    min-width:0;
    height:100%;

    padding:0 8px;

    border:0;
    outline:0;

    background:transparent;

    color:#34363b;

    font-family:inherit;

    font-size:13px;
    line-height:1.4;
}

.header-search input::placeholder{
    color:#9aa0a6;
}

.header-search input::-webkit-search-cancel-button{
    cursor:pointer;
}


/* ============================================================
   SEARCH BUTTON
   ============================================================ */

.header-search button{
    width:72px;
    height:36px;

    flex:0 0 72px;

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

    padding:0;

    border:0;
    border-radius:3px;

    background:var(--primary);
    color:#fff;

    cursor:pointer;

    font-family:inherit;
    font-size:13px;
    font-weight:600;

    transition:
        background .2s ease,
        transform .15s ease;
}

.header-search button:hover{
    background:var(--primary-dark);
}

.header-search button:active{
    transform:scale(.97);
}


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

.header-actions{
    display:flex;
    align-items:center;

    gap:8px;

    margin-left:0;

    flex:0 0 auto;
}


/* ============================================================
   QR BUTTON
   ============================================================ */

.qr-toggle{
    width:44px;
    height:44px;

    flex:0 0 44px;

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

    padding:0;

    border:1px solid #efdbe2;
    border-radius:6px;

    background:#fff;

    color:var(--primary);

    cursor:pointer;

    position:relative;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease;
}

.qr-toggle:hover{
    background:#fff1f6;
    border-color:#efc7d5;
}

.qr-toggle:active{
    transform:scale(.96);
}

.qr-toggle svg{
    width:21px;
    height:21px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width:1400px){

    .header-search{
        margin-left:60px;
        margin-right:36px;
    }

    .header-search form{
        height:46px;
    }

    .header-search button{
        width:76px;
        height:38px;

        flex-basis:76px;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1000px){

    .header-search{
        margin-left:28px;
        margin-right:20px;
    }

    .header-search button{
        width:64px;
        flex-basis:64px;
    }

}


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

@media (max-width:800px){

    .site-header{
        height:100px;
    }


    /* --------------------------------------------------------
       TOP NAV
       -------------------------------------------------------- */

    .header-top{
        display:block;
        height:36px;
    }

    .header-top-inner{
        padding:0 16px;
    }

    .header-top a{
        font-size:12px;
    }


    /* --------------------------------------------------------
       MAIN HEADER
       -------------------------------------------------------- */

    .header-main{
        height:64px;
    }

    .header-inner{
        padding:0 16px;
    }


    /* --------------------------------------------------------
       LOGO
       -------------------------------------------------------- */

    .logo{
        font-size:23px;
        letter-spacing:-1.2px;
    }


    /* --------------------------------------------------------
       SEARCH
       -------------------------------------------------------- */

    .header-search{
        flex:1;

        min-width:0;
        max-width:none;

        margin-left:16px;
        margin-right:10px;
    }

    .header-search form{
        height:40px;

        padding:2px;

        border-radius:4px;
    }

    .header-search svg{
        width:17px;
        height:17px;

        flex-basis:17px;

        margin-left:9px;
        margin-right:6px;
    }

    .header-search input{
        padding:0 4px;

        /*
         * iOS Safari:
         * font-size >= 16px prevents auto zoom
         * when input receives focus.
         */
        font-size:16px;

        line-height:1.4;
    }

    .header-search input::placeholder{
        font-size:16px;
    }

    .header-search button{
        width:58px;
        height:34px;

        flex-basis:58px;

        font-size:12px;
    }


    /* --------------------------------------------------------
       QR
       -------------------------------------------------------- */

    .qr-toggle{
        width:42px;
        height:42px;

        flex-basis:42px;

        border-radius:6px;
    }

    .qr-toggle svg{
        width:20px;
        height:20px;
    }

}


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

@media (max-width:480px){

    .site-header{
        height:98px;
    }

    .header-top{
        height:36px;
    }

    .header-top-inner{
        padding:0 14px;
    }

    .header-top a{
        font-size:11px;
    }

    .header-top-left a + a{
        margin-left:11px;
        padding-left:11px;
    }


    /* --------------------------------------------------------
       MAIN
       -------------------------------------------------------- */

    .header-main{
        height:62px;
    }

    .header-inner{
        padding:0 14px;
    }


    /* --------------------------------------------------------
       LOGO
       -------------------------------------------------------- */

    .logo{
        font-size:22px;
        letter-spacing:-1.1px;
    }


    /* --------------------------------------------------------
       SEARCH
       -------------------------------------------------------- */

    .header-search{
        margin-left:11px;
        margin-right:7px;
    }

    .header-search form{
        height:40px;
    }

    .header-search svg{
        width:16px;
        height:16px;

        flex-basis:16px;

        margin-left:7px;
        margin-right:5px;
    }

    .header-search input{
        /*
         * Không giảm xuống 11.5px.
         * iOS Safari sẽ zoom nếu < 16px.
         */
        font-size:16px;

        line-height:1.4;
    }

    .header-search input::placeholder{
        font-size:16px;
    }

    .header-search button{
        width:52px;
        height:34px;

        flex-basis:52px;

        font-size:11px;
    }


    /* --------------------------------------------------------
       QR
       -------------------------------------------------------- */

    .qr-toggle{
        width:40px;
        height:40px;

        flex-basis:40px;

        border-radius:6px;
    }

    .qr-toggle svg{
        width:19px;
        height:19px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width:360px){

    .site-header{
        height:96px;
    }

    .header-top{
        height:34px;
    }

    .header-top-inner{
        padding:0 12px;
    }

    .header-top a{
        font-size:10.5px;
    }

    .header-top-left a + a{
        margin-left:9px;
        padding-left:9px;
    }


    /* --------------------------------------------------------
       MAIN
       -------------------------------------------------------- */

    .header-main{
        height:62px;
    }

    .header-inner{
        padding:0 12px;
    }


    /* --------------------------------------------------------
       LOGO
       -------------------------------------------------------- */

    .logo{
        font-size:21px;
        letter-spacing:-1px;
    }


    /* --------------------------------------------------------
       SEARCH
       -------------------------------------------------------- */

    .header-search{
        margin-left:9px;
        margin-right:6px;
    }

    .header-search form{
        height:38px;
    }

    .header-search svg{
        width:15px;
        height:15px;

        flex-basis:15px;

        margin-left:6px;
        margin-right:4px;
    }

    .header-search input{
        /*
         * Giữ 16px để iOS không tự zoom khi focus.
         */
        font-size:16px;

        line-height:1.4;
    }

    .header-search input::placeholder{
        font-size:16px;
    }

    .header-search button{
        width:46px;
        height:32px;

        flex-basis:46px;

        font-size:10px;
    }


    /* --------------------------------------------------------
       QR
       -------------------------------------------------------- */

    .qr-toggle{
        width:38px;
        height:38px;

        flex-basis:38px;

        border-radius:6px;
    }

    .qr-toggle svg{
        width:18px;
        height:18px;
    }

}