/*@font-face {*/
/*  font-family: Vietnamese_OpenSan;*/
/*  src: url("https://res.cloudinary.com/yeungon/raw/upload/v1662004969/font/Vietnamese_OpenSans-Regular.ttf");*/
/*}*/

@import url("https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz&display=swap");

@font-face {
    font-family: adelle;
    src: url("https://res.cloudinary.com/yeungon/raw/upload/v1662636833/font/vietnamese_adelleSansEXT-Regular.otf");
}

@font-face {
    font-family: Vietnamese_MuseoSans;
    src: url("/static/fonts/vietnamese_museosanscyrl-500.otf");
}

:root {
    --color__black-main: #0a2d4d;
    --color__black-accent: #2f2d2e;
    --color__black-firefox: #20123a;
    --color__white-main: #fff;
    --color__blue-main: #08083d;
    /*--color__pink-main: #d14671;*/
    --color__pink-main: #e91e63;
    --color__green-main: #009688;
    --color__purple-main-firefox: #2d245b;
    --color__purple-material: #311b92;

    --color__tudien-sub: #3f51b5;
    /*darkred reference: https://vietnamesetypography.com/samples/tcs/*/
    --color__darkred: #483b49;
    /*--color__tudien-word: #615eff;*/

    --color__search-button: var(--color__purple-main-firefox);
    /*#795548;*/

    /*Ref: https://git-lfs.github.com/*/
    --style__day-color-title: #3e2f05;
    --style__day-color-header-strong: #eae9e1;
    --style__day-color-header-lighter: #efefe7;
    /*--style__day-color-header-text: #795548;*/
    --style__day-color-header-text: #009688;
    --style_day-color-bg-green: #0088a8;

    /*--color_nav: var(--color__black-firefox);*/
    --color_nav: var(--style__day-color-header-strong);
    --color_title: var(--style__day-color-header-text);
    --color__tudien-heading: var(--style__day-color-header-text);
    --color__tudien-word: var(--style__day-color-header-text);
    --font__decorate: "Yanone Kaffeesatz", sans-serif;
    --font--text: "adelle";
    --font-heading: "Yanone Kaffeesatz", sans-serif;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    overflow-wrap: break-word;
}

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

body {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    /*fot non-selector tag*/
    font-size: 1.15rem;
    line-height: 2.5rem;
    color: black;
    text-decoration: none;
    font-family: var(--font--text);
}

hr {
    color: #df9274;
    opacity: 0.12;
}

a {
    text-decoration: none;
}

.grid-1024 {
    width: 100%;
    max-width: 1024px;
    height: auto;
    margin: 0 auto;
}

/*Font */

.text15 {
    font-size: 1.5rem;
}

/**/
nav {
    width: 100%;
    max-width: 100%;
    height: 55px;
    background-color: var(--color_nav);
    color: #fff;
    font-size: 2rem;
}

/*Choose a movie*/
.dictionary__list {
    position: relative;
    top: -35px;
    display: flex;
    font-size: 12px;
    font-family: var(--font__decorate);
    width: 320px;
}

.dictionary__list > section {
    margin-left: 20px;
    transition: transform 0.5s;
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*background-color: #2d1260ba;*/
    /*  border-radius: 4px;*/
    /*  border-width: 0;*/
    /*  box-shadow: #2d234266 0 2px 4px, #2d23424d 0 7px 13px -3px, #170440 0 -3px inset;*/

    background-color: #9e9e9e;
    border-radius: 4px;
    border-width: 0;
    box-shadow:
        #2d234266 0 2px 4px,
        #2d23424d 0 7px 13px -3px,
        #918989 0 -3px inset;

    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition:
        box-shadow 0.15s,
        transform 0.15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 12.5px;
    width: 7rem;
    /*border: 2px solid #210b8a;*/
}

.dictionary__selected {
    /*background-color: #e91e63 !important;*/
    background-color: #fa6407 !important;
    color: #fff !important;
    box-shadow:
        #2d234266 0 2px 4px,
        #2d23424d 0 7px 13px -3px,
        #a80d39 0 -3px inset !important;
    transform: scale(1.1);
    border: none !important;
}

.dictionary__list > section:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.wrap-fields {
    background-color: #f2f2f6;
    width: 100%;
    max-width: 100%;
    padding: 40px;
    /*background: linear-gradient(to right, #010936 9%, #009688 100%);*/
    /*background: linear-gradient(to right, #010936 59%, #615eff 100%);*/

    background: linear-gradient(to right, #efefe7 59%, #efefe7 100%);
    height: 50px;
}

main {
    height: auto;
    background-color: var(--color__white-main);
}

header {
    margin-bottom: 2rem;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: -55px;
    z-index: 999;
}

.title {
    color: var(--color_title);
    font-family: var(--font__decorate);
    font-size: 1.65rem;
    padding-top: 5px;
    text-align: center;
    position: relative;
    height: 100%;
    width: 250px;
    transition: 0.25s;
}

.title:hover {
    transform: scale(1.01);
}

/*.title:before {*/
/*  content: "English <--> Vietnamese";*/
/*  position: absolute;*/
/*  left: 193px;*/
/*  font-family: var(--font__main);*/
/*  font-size: 0.7rem;*/
/*  color: #ff7477;*/
/*  opacity: 0;*/
/*  width: 250px;*/
/*  top: 69px;*/
/*  transition: 0.25s;*/
/*  display: none;*/
/*}*/

/*.title:hover:before {*/
/*  opacity: 1;*/
/*}*/

#image-rocket {
    display: none;
}

/* Form */
.form-field {
    width: 320px;
    position: relative;
}

#inputData:focus {
    outline: none !important;
    border: 1px solid white;
    box-shadow: 0 0 10px #79554878;
}

/*Search input Typehead*/
.typeahead,
.tt-query,
.tt-hint {
    height: 55px;
    padding-left: 10px;
    font-size: 1.2rem;
    border-radius: 5px;
    /*border: 0.5px solid #e91e63;*/
}

.typeahead {
    background-color: #ffffff;
}

/*.typeahead:focus {*/
/*    border: 0.5px solid #3f51b5;*/
/*}*/

.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
    color: #999999;
}

.tt-menu {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    /*border-radius: 8px;*/
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 320px;
}

.tt-suggestion {
    font-size: 22px;
    padding: 1px 5px;
    font-family: var(--font__decorate);
    width: 320px;
}

.tt-suggestion:hover {
    cursor: pointer;
    background-color: var(--color__green-main);
    color: #ffffff;
}

.tt-suggestion p {
    margin: 0;
}

.tt-tag-hover:hover {
    text-decoration: none;
    outline: 0;
    background-color: #f5f5f5;
    color: #262626;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: var(--color__green-main);
}

::placeholder {
    padding-left: 3px;
    font-size: 1rem;
    color: var(--color__purple-main-firefox);
}

/*end of search typehead*/
#form__search-icon {
    position: absolute;
    right: 6px;
    top: 11px;
    transition: transform 0.25s;
}

#form__search-icon:hover {
    transform: scale(1.05);
    cursor: pointer;
}

/* End of Form */

/*Search button*/
button {
    font-family: var(--font-heading);
    font-weight: 900;

    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #913d1cba;
    border-radius: 4px;
    border-width: 0;
    box-shadow:
        #2d234266 0 2px 4px,
        #2d23424d 0 7px 13px -3px,
        #955137 0 -3px inset;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition:
        box-shadow 0.15s,
        transform 0.15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 16px;
    width: 7rem;
    /*border: 1px solid #210b8a;*/
}

button:hover {
    transform: scale(1.02);
}

.flex-column-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.align-items-center {
    align-items: center;
}

/*===================================== Tracking ========================================*/
a.tracking_keyword {
    font-family: var(--font--text) !important;
    font-size: 17px !important;
    font-weight: 400;
}

/*===================================== Dictionary Content ========================================*/
#dictionary__display > * {
    font-size: 1.1rem;
    line-height: 2.9rem;
}

#dictionary__display > h3 {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    color: var(--color__tudien-heading);
}

.dictionary__heading {
    font-family: var(--font__decorate);
}

.dictionary_word {
    font-family: var(--font-heading);
    font-size: 2.8rem !important;
    color: var(--color__tudien-word);
}

span.class005500 {
    font-size: 1.2rem;
    font-style: italic;
    color: #022536;
}

span.no1 {
    font-size: 1.5rem;
    background-color: #009688;
    width: 30px;
    height: 30px;
    line-height: 30px !important;
    border-radius: 50%;
    color: white;
    display: inline-block;
    text-align: center;
}

sup {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #009688;
    background-color: #009688;
    border-radius: 50%;
    position: relative;
    top: 6px;
    text-align: center;
    line-height: 30px;
    color: white;
}

tt {
    font-family: var(--font--text);
    font-weight: bold;
    color: #068075;
}

#dictionary__display
    > div.dictionary__vietnamese
    > ul
    > li
    > ul
    > li
    > font
    > b {
    font-weight: normal !important;
}

#dictionary__display > section.dictionary_thesaurus > div > b {
    background-color: #009688;
    width: 30px;
    height: 30px;
    line-height: 30px !important;
    border-radius: 50%;
    color: white;
    display: inline-block;
    text-align: center;
}

#dictionary__display > h3 {
    font-size: 1.8rem;
    color: var(--color__tudien-heading);
    display: inline;
    padding: 7px;
    /*background-color: #fbf1f1;*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: 5px 1px 15px 2px #9e9e9e;*/
    /*box-shadow: 5px 1px 15px 2px #9e9e9e;*/
}

.ex {
    color: #000;
}

/*Overwrite*/
font {
    color: black;
}

span.loaitu,
section.dictionary_collocation > p > u {
    color: var(--color__tudien-sub);
    text-decoration: none;
    font-weight: bolder;
    font-family: var(--font__decorate);
}

span.phienam {
    font-style: italic;
    color: var(--color__tudien-sub);
    padding-left: 5px;
}

span.headword {
    font-weight: bold;
    color: var(--color__tudien-sub);
}

span.thutu {
    margin-right: 5px;
    width: 25px;
    height: 25px;
    background-color: #009688;
    color: white;
    display: inline-block;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
}

img.sound_icon {
    position: relative;
    top: 9.2px;
    left: 3px;
    -webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    transition: transform 0.5s;
}

.sound_icon:hover {
    cursor: pointer;
    transform: scale(1.2);
}

#dictionary__display .phonetics {
    font-size: 85%;
}

.dictionary__latest-search > a {
    color: #0e435d;
    font-size: 95%;
    transition: all 0.5s;
    display: inline-block;
}

.dictionary__latest-search > a:hover {
    transform: scale(1.05);
    color: #795548;
}

.dictionary__latest-search > strong {
    color: #fa6407;
}

/*========================================= END OF DICTIONARY =============================================*/

/*========================================== SCROLL UP BUTTON =============================================*/

.column__right-move__up > img {
    width: 40px;
    height: auto;
    position: fixed;
    right: 5px;
    bottom: 5px;
    display: none;
    transition: transform 0.5s;
}

.column__right-move__up > img:hover {
    transform: scale(1.2);
    cursor: pointer;
}

/*========================================== END OF SCROLL UP BUTTON e=====================================*/

@media (min-width: 320px) {
    /*Search input Typehead*/
    .typeahead,
    .tt-query,
    .tt-hint {
        width: 318px;
        height: 46px;
        padding-left: 5px;
        font-size: 1.2rem;
        border-radius: 5px;
        margin-left: 1px;
        border: 0.5px solid #673ab752;
    }

    #form__search-icon {
        top: 0px;
        right: 0px;
        height: 46px;
    }

    #dictionary__display > h3 {
        font-size: 18px;
        padding: 2px;
        font-weight: bold;
    }

    .title {
        left: -30px;
        opacity: 0;
    }

    .dictionary__list > section {
        margin-left: 11px;
    }
}

/*360px screen --> samsungS5 */
@media (min-width: 360px) {
    .form-field {
        width: 22rem;
    }

    #form__search-icon {
        top: 11px;
    }

    /*Search input Typehead*/
    .typeahead,
    .tt-query,
    .tt-hint {
        width: 351px;
    }
}

/*375px screen: iPhone6/7/8 */
@media (min-width: 375px) {
    #dictionary__display {
        padding-left: 10px;
        padding-right: 10px;
        width: 375px;
    }

    .dictionary__list {
        top: 6px;
        font-size: 10px;
        width: 375px;
    }

    .form-field {
        width: 354px;
    }

    #form__search-icon {
        top: 1px;
        right: 0px;
        height: 44px;
    }

    /*Search input Typehead*/
    .typeahead,
    .tt-query,
    .tt-hint {
        width: 354px;
    }
}

/*411: Pixel */
@media (min-width: 411px) {
    .form-field {
        width: 24rem;
    }

    .typeahead,
    .tt-query,
    .tt-hint {
        width: 384px;
    }

    .dictionary__list {
        top: -35px;
        font-size: 10px;
        width: 411px;
        left: 204px;
    }
}

/*414px screen iPhone6/7/8 Plus*/
@media (min-width: 414px) {
    .form-field {
        width: 25rem;
    }

    #form__search-icon {
        top: 0px;
    }

    /*Search input Typehead*/
    .typeahead,
    .tt-query,
    .tt-hint {
        width: 400px;
    }

    .dictionary__list {
        top: 8px;
        font-size: 10px;
        width: 414px;
    }
}

/*768px screen */
@media (min-width: 768px) {
    .form-field {
        width: 32rem;
    }

    .title {
        opacity: 1;
    }

    #form__search-icon {
        right: 21px;
        top: 1px;
    }

    /*Search input Typehead*/
    .typeahead,
    .tt-query,
    .tt-hint {
        width: 490px;
    }

    .dictionary__list {
        width: 410px;
    }
}

/*1024px screen */
@media (min-width: 1024px) {
    /*Choose a movie*/
    .dictionary__list {
        left: 550px;
        width: 400px;
    }

    .dictionary__list > section {
        margin-left: 25px;
    }

    .wrap-fields {
        height: 80px;
    }

    .form-field {
        width: 40rem;
    }

    .tt-suggestion {
        width: 40rem;
    }

    #form__search-icon {
        top: 15px;
        right: 6px;
    }

    #dictionary__display {
        /*width: 100%;*/
        /*max-width: 800px;*/
        /*https://dev.to/ibn_abubakre/responsive-css-width-2jnm*/
        width: 800px;
        max-width: calc(100% - 20px);
        margin: 0 auto;
        padding: 0 10px;
    }

    /*Search input Typehead*/
    .typeahead,
    .tt-query,
    .tt-hint {
        width: 40rem;
        height: 55px;
        padding-left: 10px;
        font-size: 1.2rem;
        border-radius: 10px;
        /*border: 0.5px solid #607d8b;*/
        border: 0.5px solid #673ab752;
    }

    /*Search input Typehead*/
    .tt-menu {
        width: 40rem;
    }

    .title {
        font-size: 1.4rem;
        left: 296px;
    }

    #image-rocket {
        position: absolute;
        top: 52px;
        left: 124px;
        display: block;
    }

    .title:before {
        display: block;
    }

    #dictionary__display > h3 {
        font-size: 1.75rem;
    }
}

/*1280 laptop*/
@media (min-width: 1280px) {
    #image-rocket {
        left: 171px;
        top: 50px;
        width: 183px;
        height: auto;
        display: block;
    }

    #form__search-icon {
        right: 4.5px;
        top: 5px;
    }
}

/*1920, HD 24 inch*/
@media (min-width: 1920px) {
    #image-rocket {
        top: 61px;
        left: 404px;
        display: block;
        width: 145px;
    }

    .dictionary__list {
        left: 710px;
    }

    .title {
        left: 413px;
    }
}