@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    /* font-display: swap; */
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans_SemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    /* font-display: swap; */
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans_Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    /* font-display: swap; */
}
@font-face {
    font-family: 'OpenSansCondensed';
    src: url('../fonts/OpenSans_Condensed_Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    /* font-display: swap; */
}
@font-face {
    font-family: 'OpenSansCondensed';
    src: url('../fonts/OpenSans_Condensed_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    /* font-display: swap; */
}
@font-face {
    font-family: 'OpenSansCondensed';
    src: url('../fonts/OpenSans_Condensed_SemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    /* font-display: swap; */
}
:root{
    --gold:#D1A873;
    --gold-drak:#94541A;
    --black: #242220;
    --black800: #656463;
    --black300: #BDBDBC;
    --white: #F4F1EF;
}
html{
    height: 100%;
    width: 100%;
    font-size: 16px;
    font-family: 'OpenSans';
}
html,body{
   inset: 0;
   margin: 0;
   outline: 0;
}
.container{
    margin: 0px auto;
    width: 640px;
}
/* mobile screen */
@media only screen and (max-width: 640px) {
    .container {
        width: 100%;
    }
}
/* color */
.colorGlod{
    color: var(--gold);
}
.colorGlodDark{
    color: var(--gold-drak);
}
.colorBlack{
    color: var(--black);
}
.colorBlack800{
    color: var(--black800);
}
.colorBlack300{
    color: var(--black800);
}
.colorWhite{
    color: var(--white);
}
.colorWhiteWhite{
    color: white;
}
.bgGlod{
    background-color: var(--gold);
}
.bgGlodDark{
    background-color: var(--gold-drak);
}
.bgBlack{
    background-color: var(--black);
}
.bgBlack800{
    background-color: var(--black800);
}
.bgBlack300{
    background-color: var(--black800);
}
.bgWhite{
    background-color: var(--white);
}
.cardRadius6{
    border-radius: 6px;
    overflow: hidden;
}
.cardRadius10{
    border-radius: 10px;
    overflow: hidden;
}
.cardRadius20{
    border-radius: 20px;
    overflow: hidden;
}
.imgCover{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.imgContain{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
/* font */
.sizeTitle{
    font-size: 20px;
}
.sizeTips{
    font-size: 14px;
}
.sizeBody{
    font-size: 16px;
}
.numberFontFmaily{
    font-family: "OpenSansCondensed","OpenSans";
}

.fontBold{
    font-weight: bold;
}
/* margin-left */
.ml-5{
    margin-left: 5px;
}
.ml-10{
    margin-left: 10px;
}
.ml-15{
    margin-left: 15px;
}
.ml-20{
    margin-left: 20px;
}
/* margin-top */
.mt-5{
    margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.mt-20{
    margin-top: 20px;
}
/* margin-right */
.mr-5{
    margin-right: 5px;
}
.mr-10{
    margin-right: 10px;
}
.mr-15{
    margin-right: 15px;
}
.mr-20{
    margin-right: 20px;
}

/* margin-bottom */
.mb-5{
    margin-bottom: 5px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-20{
    margin-bottom: 20px;
}
/* flex */
.flex-row{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}
.flex-column{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    
}
.flex-column.flex-center,.flex-row.flex-center{
    align-items: center;
    -webkit-align-items: center;
}
.flex-column.flex-start,.flex-row.flex-start{
    align-items: start;
    -webkit-align-items: start;
}
.flex-column.flex-end,.flex-row.flex-start{
    align-items: end;
    -webkit-align-items: end;
}
.flex-column[justify='center'],.flex-row[justify='center']{
    justify-content: center;
    -webkit-justify-content: center;
}
.flex-column[justify='start'],.flex-row[justify='start']{
    justify-content: start;
    -webkit-justify-content: start;
}
.flex-column[justify='end'],.flex-row[justify='end']{
    justify-content: end;
    -webkit-justify-content: end;
}
.flex-column[justify='space-around'],.flex-row[justify='space-around']{
    justify-content:space-around;
    -webkit-justify-content:space-around;
}
.flex-column[justify='space-between'],.flex-row[justify='space-between']{
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.flex-column[justify='space-evenly'],.flex-row[justify='space-evenly']{
    justify-content:space-evenly;
    -webkit-justify-content:space-evenly;
}
.flex-none{
    flex: none;
    -webkit-flex: none;
}
.flex-fill{
    flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
}
/* loading */
.loader-layout{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 999;
}

.loader-layout>.loader-content{
    width: 100px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.loader-layout .loader-content .loader-text{
    margin-top: 20px;
    font-family: OpenSans;
    font-size: 1rem;
}
.loader {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid var(--gold-drak); 
    width: 2rem; 
    height: 2rem; 
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.button{
    font-size: 14px;
    color: var(--black);
    padding: 8px 15px ;
    background: var(--gold);
    border-radius: 6px;
    border: none;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    pointer-events: all;
    font-weight: bold;
    text-align: center;
}
.button-inner{
    box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.3) inset;
}
.button-border{
    border: 1px solid var(--gold-drak);
}
.button:hover::after,.button:active::after{
    content: "";
    position: absolute;
    border-radius: 6px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.icon{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 24px;
    height: 24px;
    display: inline-block;
}
.icon.icon-oclock{
    background-image: url('img/ic_oclock.png');
}
.icon.icon-address{
    background-image: url('img/ic_address_outline.svg');
}
.icon.icon-wheelchair{
    background-image: url('img/ic_wheelchair.svg');
}
.icon.icon-wheelchair{
    background-image: url('img/ic_wheelchair.svg');
}
.icon.icon-correct{
    background-image: url('img/ic_correct_outline.svg');
}
.icon.icon-wrong{
    background-image: url('img/ic_wrong_outline.svg');
}
.icon.icon20{
    width: 20px;
    height: 20px;
}
.icon.icon16{
    width: 16px;
    height: 16px;
}


.ellipsis2Lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ellipsis1Lines {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ellipsis3Lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }