@charset "UTF-8";
/* #ee7703*/
@font-face {
  font-family: 'DB Helvethaica X Blk Cond v3.2';
  src: url("../font/DB Helvethaica X Blk Cond v3.2.ttf") format("truetype"); }

@font-face {
  font-family: 'bold font';
  src: url("../font/DB Helvethaica X Blk Cond v3.2.ttf") format("truetype"); }

@font-face {
  font-family: 'header font';
  src: url("../font/ufonts.com_block_berthold_condensed.ttf") format("truetype"); }

@font-face {
  font-family: 'normal font';
  src: url("../font/DB Helvethaica X Bd Cond.ttf") format("truetype"); }

@font-face {
  font-family: 'thin font';
  src: url("../font/DB Helvethaica X Cond v3.2.ttf") format("truetype"); }

body {
  font-family: 'DB Helvethaica X Blk Cond v3.2';
  font-size: 1.2rem !important; }

.btn-back-profile {
  color: #ed7702;
  font-size: 1.2rem; }

.btn-back-profile:hover {
  color: #f7a901; }

.ellipsis-1 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-2 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-3 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-4 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.header-font {
  font-family: 'header font','normal font';
  font-weight: normal !important; }

.bg-nav-menu {
  background: #ec7902 !important; }

.Language-color {
  color: #ec7902 !important; }

.link-menu, .link-menu-active, .link-menu-search {
  padding: 15px 15px 15px 15px !important; }

/*%link-menu:hover {
    background: #ddd;
}*/
.fn-3:hover {
  color: #583939; }

.link-menu {
  font-weight: normal;
  color: #fff !important; }

.link-menu-active {
  font-weight: bold;
  color: #f7a901 !important; }

.link-menu-search {
  background: #555555;
  width: 50px;
  text-align: center;
  color: #fff !important; }

.link-menu-right {
  font-size: 1.5em;
  position: relative;
  margin: 0px 7px 0px 7px; }

.link-menu-mobile {
  font-size: 1.6em;
  position: relative;
  margin: 0px 15px 0px 0px;
  color: #9c9c9c; }

.link-menu-mobile:hover {
  text-decoration: none; }

.number-profile, .number-bag {
  position: absolute;
  font-size: 0.5em;
  font-weight: bold;
  color: #fff;
  top: -4px;
  left: 44px;
  display: block;
  width: 20px;
  height: 20px;
  padding: 1px 0px 0px 7px;
  border-radius: 50%; }

.number-profile {
  background: #fff; }

.number-bag {
  background: #ee7703; }

.form-search-menu {
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #f7a901;
  color: #fff;
  width: 160px;
  margin: 15px 0px 10px 15px; }

.form-search-menu:focus {
  outline: 0; }

.btn-accept {
  background-color: #f7a901;
  color: #62301f;
  font-size: 1rem;
  margin-left: 10px;
  margin-top: 3px;
  padding-top: 0px;
  padding-bottom: 0px; }

.div-keep-cookie {
  position: fixed;
  font-size: 1rem;
  bottom: 0px;
  padding: 5px 0;
  z-index: 1030;
  width: 100%;
  background-color: black;
  color: white; }
  @media only screen and (max-width: 768px) {
    .div-keep-cookie {
      padding: 15px 15px 15px 0; }
      .div-keep-cookie .keep-cookie {
        text-align: left; }
        .div-keep-cookie .keep-cookie .btn-accept {
          float: right; } }
  @media (min-width: 992px) {
    .div-keep-cookie {
      font-size: 1.2rem; } }
  .div-keep-cookie .privacy {
    cursor: pointer;
    text-decoration: underline; }
  .div-keep-cookie .btn-accept-code {
    background-image: url("../image/icon/icon-close-gray.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 13px;
    height: 13px;
    float: right;
    margin-top: 8px; }
    @media only screen and (max-width: 768px) {
      .div-keep-cookie .btn-accept-code {
        top: 0;
        position: absolute;
        right: 0;
        margin-top: -5px;
        margin-right: -5px;
        width: 15px;
        height: 15px; } }

.sub-top-menu {
  position: fixed;
  height: 80px;
  width: 100%;
  top: 150px;
  overflow: auto;
  overflow-y: hidden;
  z-index: 1025;
  transition: top 0.5s;
  background: #fff url("../image/header/BG-nav-bar-2.png") no-repeat center center;
  /*background-size:100%;*/
  /*box-shadow: 0px 3px 3px #f00;*/ }
  .sub-top-menu.acceptCookie {
    top: 179px; }
  .sub-top-menu .container .row {
    justify-content: space-between; }

.shopping-bag {
  background-color: #cccccc;
  position: relative;
  cursor: pointer;
  text-align: center;
  height: 100%;
  min-height: 80px;
  width: 90px; }
  .shopping-bag .shopping-bag-txt {
    font-family: 'header font';
    font-size: 1rem;
    text-align: center;
    margin-top: 3px; }

.img-bag {
  margin-top: 15px; }

.shoping-noti-count {
  position: absolute;
  color: white;
  background-color: #ed7702;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
  padding-top: 10px;
  line-height: 0;
  font-size: 1.2rem;
  top: 35px;
  right: 15px;
  /*margin: 43px 0px 0px -14px;*/ }

.fr {
  float: right; }

.sub-top-menu-content {
  text-align: center;
  position: relative;
  width: 1200px;
  margin: 0 auto; }

.circle {
  /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
  height: 100px;
  /* ความสูงปรับให้เป็นออโต้ */
  width: 100px;
  /* ความสูงปรับให้เป็นออโต้ */
  border: 3px solid #ec7902;
  /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
  border-radius: 50%;
  /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  /* เงาของรูป */ }

.circle-2 {
  /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
  height: 30px;
  /* ความสูงปรับให้เป็นออโต้ */
  width: 30px;
  /* ความสูงปรับให้เป็นออโต้ */
  border: 3px solid #ec7902;
  /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
  border-radius: 50%;
  /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/ }

.circle-3 {
  /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
  height: 50px;
  /* ความสูงปรับให้เป็นออโต้ */
  width: 50px;
  /* ความสูงปรับให้เป็นออโต้ */
  border: 3px solid #ec7902;
  /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
  border-radius: 50%;
  /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/ }

.circle-4 {
  /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
  height: 40px;
  /* ความสูงปรับให้เป็นออโต้ */
  width: 40px;
  /* ความสูงปรับให้เป็นออโต้ */
  border: 3px solid #ec7902;
  /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
  border-radius: 50%;
  /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/ }

/*.bk-logo {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -45px;
    left: 10px;
}*/
.bk-logo {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 8px;
  left: 10px; }

.bk-logo-mini {
  display: none; }

.top-btn-mobile {
  display: none; }

.item-sub-top-menu {
  display: inline-block;
  /*border: 1px solid #0f0;*/
  min-width: 110px;
  text-align: center;
  margin: 0px 10px 0px 10px;
  cursor: pointer; }

.img-item-sub-top {
  width: 70px;
  height: 47px;
  /*border: 1px solid #f00;*/
  margin: auto;
  color: #aaa;
  font-size: 2em; }

.text-item-sub-top {
  font-family: 'header font';
  font-size: 1rem;
  font-weight: bold; }

.item-sub-img {
  height: 55px;
  text-align: center; }

.item-sub-text {
  font-family: "header font", "DB Helvethaica X Blk Cond v3.2";
  font-size: 1rem;
  text-align: center; }
  .item-sub-text.active {
    color: #ed7702; }

.footer-1, .footer-2 {
  box-shadow: 0px -2px 2px #ddd;
  padding-top: 10px;
  padding-bottom: 10px; }

.footer-1 {
  background: #fff;
  font-size: 2.3em;
  color: #ccc; }

.footer-2 {
  padding-bottom: 0px;
  background: #333333; }

.footer-2-item, .footer-2-item-text, .footer-2-item-icon {
  /*font-size: $small_font_size;*/
  font-weight: bold;
  display: inline-block;
  /*padding: 10px;*/
  color: #f3f3f3; }

.footer-2-item:hover {
  text-decoration: none;
  color: #9c9c9c; }

.footer-2-item-icon {
  font-size: 1.2em; }

.footer-2-item-icon:hover {
  text-decoration: none;
  color: #9c9c9c; }

.footer-2-small-text {
  color: #f3f3f3;
  font-size: 0.8rem; }

.img-cate {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  display: initial !important; }

.block-cate {
  cursor: pointer;
  /*flex: 0 0 14.28571428571429%;
    max-width: 14.28571428571429%;
    padding-right: 0;
    padding-left: 0; 
    position: relative;
    width: 100%;
    min-height: 1px;*/ }

.carousel-menu-desktop-wrapper {
  width: calc(100% - 100px);
  margin: auto auto auto -30px; }
  .carousel-menu-desktop-wrapper .owl-stage-outer {
    margin-left: 60px; }
    .carousel-menu-desktop-wrapper .owl-stage-outer .owl-stage {
      padding-left: 0px !important; }
  .carousel-menu-desktop-wrapper .owl-nav .owl-prev {
    width: 20px;
    height: 30px;
    top: 50%;
    left: 0%;
    margin-top: -15px;
    margin-left: 40px;
    position: absolute;
    cursor: pointer;
    background-size: 100% !important;
    background: url("../image/icon/icon-arrow-left.png") no-repeat center center;
    /*opacity: 0.9;*/
    cursor: pointer;
    /*&:hover {
                background: url('../image/home/carousel-prev.png') no-repeat center center;
                background-size: 100% !important;
                opacity: 1;
            }*/ }
  .carousel-menu-desktop-wrapper .owl-nav .owl-next {
    width: 20px;
    height: 30px;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    margin-left: 10px;
    position: absolute;
    cursor: pointer;
    background-size: 100% !important;
    background: url("../image/icon/icon-arrow-right-2.png") no-repeat center center;
    /*opacity: 0.9;*/
    /*&:hover {
                background: url('../image/home/carousel-next.png') no-repeat center center;
                background-size: 100% !important;
                opacity: 1;
            }*/ }

.text-item-sub-top.active {
  color: #ed7702;
  border-bottom: 2px solid #ed7702; }

.wrapper-header-delivery-method {
  display: inline-block;
  background-color: #854114;
  padding: 1px;
  border-radius: 5px; }
  .wrapper-header-delivery-method .btn-delivery-method {
    font-family: 'header font';
    min-width: 140px;
    font-size: 0.8rem;
    line-height: 1.7;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    text-align: center;
    padding: 5px 5px 5px 5px;
    background: transparent;
    color: white;
    position: relative;
    height: 30px;
    /*span.pickup {
            width: 20px;
            height: 20px;
            background-image: url('../image/icon/icon-pick-up-W.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            position: absolute;
            left: 27px;
            top: 4px;
        }*/ }
    .wrapper-header-delivery-method .btn-delivery-method .delivery-img {
      height: 20px;
      margin-right: 2px;
      margin-top: -4px; }
    .wrapper-header-delivery-method .btn-delivery-method.active {
      background: #f7a901;
      color: #62301f;
      /*span.delivery {
                background-image: url('../image/icon/icon-delivery-B.png');
            }*/
      /*span.pickup {
                background-image: url('../image/icon/icon-pick-up-B.png');
            }*/ }

.wrapper-address {
  color: #fff;
  font-family: 'thin font';
  display: inline-flex;
  height: 34px;
  border: 0;
  /*box-shadow: 0 3px 2px #d8d8d8;*/
  border-radius: 5px;
  padding: 2px 10px;
  background-color: #854114;
  width: 100%;
  margin-left: 5px;
  font-size: 1.4rem; }
  .wrapper-address .address-str {
    margin-right: 5px;
    position: relative;
    padding-left: 45px; }
    .wrapper-address .address-str .Delivery {
      width: 30px;
      height: 20px;
      background-image: url("../image/icon/icon-delivery-W.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      position: absolute;
      left: 10px;
      top: 4px; }
    .wrapper-address .address-str .Pickup {
      width: 20px;
      height: 20px;
      background-image: url("../image/icon/icon-pick-up-W.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      position: absolute;
      left: 10px;
      top: 4px; }
    .wrapper-address .address-str .InStore {
      width: 20px;
      height: 20px;
      background-image: url("../image/icon/icon-pick-up-W.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      position: absolute;
      left: 10px;
      top: 4px; }
  .wrapper-address .time-str {
    text-align: right;
    white-space: nowrap; }
    .wrapper-address .time-str span {
      color: #f7a901; }
  .wrapper-address .empty-delivery-str {
    text-align: center;
    width: 100%; }

.link-top-menu:hover, .link-fb-btn:hover, .link-locale:hover {
  text-decoration: none;
  color: #ed7702; }

.link-top-menu {
  font-family: 'thin font';
  color: #555555;
  /*font-weight: lighter;*/
  font-size: 1.2rem;
  margin: 0px 2vw 0px 2vw; }

.link-fb-btn {
  color: #62301f;
  margin: 0px 10px 0px 10px; }

.hover-btn-locale {
  position: absolute;
  right: 10px;
  top: 3px; }

.link-locale {
  color: #62301f !important;
  font-size: 1.2em;
  cursor: pointer; }

.link-locale.active {
  color: #fff !important; }

.top-mini-menu {
  background: #ed7702;
  padding-top: 15px;
  position: fixed;
  width: 100%;
  z-index: 1030;
  height: 65px; }
  .top-mini-menu.acceptCookie {
    top: 29px; }

.top-main-menu {
  position: fixed;
  background: #eb7801;
  z-index: 1035;
  width: 100%;
  top: 65px; }
  .top-main-menu.acceptCookie {
    top: 94px; }

.item-top-text-line-1 {
  font-family: 'header font';
  color: #62301f;
  font-size: 1rem;
  line-height: 1;
  /*height: 12px;*/ }

.item-top-text-line-2 {
  font-family: 'header font';
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  margin-top: 10px;
  /*height: 30px;
    margin-top: 7px;*/
  /*line-height: 10px;*/ }

.img-ordernow {
  margin-top: -50px;
  width: 100%; }

@media only screen and (max-width: 575.98px) {
  #loginModal .modal-dialog {
    margin: 0px auto; } }

@media only screen and (min-width: 575.98px) and (max-width: 768px) {
  #loginModal .modal-dialog {
    margin: 0px auto;
    max-width: calc(100vw - 60px); } }

#loginModal .modal-body {
  padding: 0px 0px 0px 0px;
  border-radius: 15px;
  overflow: hidden; }

#loginModal .modal-content {
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 0px; }
  @media only screen and (max-width: 767.98px) {
    #loginModal .modal-content {
      /*background-size: 100% auto;*/
      background-size: 100% 200px;
      border-radius: 0px; } }

#loginModal .div-img-login {
  padding: 0px 0px 0px 15px; }

#loginModal .img-icon-bk {
  width: 25%;
  position: absolute;
  margin-top: 20px;
  margin-left: 20px; }

#loginModal .img-close {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: -10px;
  margin-right: -10px;
  width: 25px;
  cursor: pointer; }
  @media only screen and (max-width: 768px) {
    #loginModal .img-close {
      margin-top: 15px;
      margin-right: 15px;
      background-color: white;
      border-radius: 30px;
      padding: 5px; } }

#loginModal .div-login-right {
  font-size: 1.2rem;
  padding: 0px 30px 0px 30px;
  /*min-height: 600px;*/
  height: 600px;
  overflow-y: scroll;
  position: relative;
  background-color: white;
  display: flex;
  /* END BOX*/ }
  @media only screen and (max-width: 768px) {
    #loginModal .div-login-right {
      height: auto; } }
  @media (min-width: 768px) and (max-width: 991.98px) {
    #loginModal .div-login-right {
      min-height: 880px; } }
  #loginModal .div-login-right .success_register_wrapper {
    font-size: 1.2em; }
  #loginModal .div-login-right .box {
    /*margin: 0;*/
    /*position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);*/
    margin: auto;
    width: 100%;
    /*padding: 0 40px 0 30px;*/ }
    @media only screen and (max-width: 768px) {
      #loginModal .div-login-right .box {
        max-width: 370px;
        padding: 30px 30px 0 30px; } }
    #loginModal .div-login-right .box .form-control {
      font-size: 1.2rem;
      font-family: 'thin font'; }
    #loginModal .div-login-right .box .txtotp {
      text-align: center;
      background: #e6e6e6;
      border: none;
      box-shadow: inset 0 1px 0 1px rgba(206, 206, 206, 0.65);
      width: 34px;
      font-weight: bold; }
    #loginModal .div-login-right .box .txt-resend .text-orange {
      cursor: pointer;
      text-decoration: underline; }
    #loginModal .div-login-right .box .text-orange {
      color: #ed7702 !important; }
    #loginModal .div-login-right .box .text-signin {
      cursor: pointer; }
    #loginModal .div-login-right .box .text-orange.underline {
      border-bottom: 1px solid #ed7702; }
    #loginModal .div-login-right .box .text-terms {
      /*color: $font_dark_color;*/
      cursor: pointer;
      font-size: 1rem;
      font-family: 'DB Helvethaica X Blk Cond v3.2'; }
    #loginModal .div-login-right .box .text-terms.underline {
      border-bottom: 1px solid; }
    #loginModal .div-login-right .box .btn-cancel {
      color: #ed7702;
      background-color: white;
      border: 1px solid #ed7702;
      border-radius: 5px;
      width: 100%;
      font-weight: bold;
      box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
      padding: 10px;
      font-family: 'header font';
      font-weight: normal;
      width: 40%;
      margin-right: 4%; }
    #loginModal .div-login-right .box .btn-verify {
      color: white;
      background-color: #ed7702;
      border: 1px solid #ed7702;
      border-radius: 5px;
      width: 100%;
      box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
      padding: 10px;
      font-family: 'header font';
      font-weight: normal;
      width: 56%; }
    #loginModal .div-login-right .box .txtheader {
      font-size: 2rem;
      margin: 10px;
      font-size: 1.5rem;
      margin: 10px;
      padding: 10px;
      font-family: 'header font','normal font';
      font-weight: normal !important; }
    #loginModal .div-login-right .box .btn-register {
      font-size: 1.2rem;
      color: white;
      background-color: #d8d8d8;
      border: 1px solid #d8d8d8;
      border-radius: 5px;
      width: 100%;
      box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
      font-family: 'header font','normal font';
      font-weight: normal; }
      #loginModal .div-login-right .box .btn-register.active {
        background-color: #ed7702;
        border: 1px solid #ed7702; }
    #loginModal .div-login-right .box .div-img-success {
      padding-left: 30%;
      padding-right: 30%; }
      #loginModal .div-login-right .box .div-img-success img {
        width: 100%; }
    #loginModal .div-login-right .box .file_capture.hidden {
      display: none; }
    #loginModal .div-login-right .box .txt-congrat {
      text-align: center;
      color: #ed7702;
      font-size: 2rem; }
    #loginModal .div-login-right .box .txt-light {
      color: #9c9c9c;
      font-weight: bold; }
    #loginModal .div-login-right .box .img-calendar {
      position: absolute;
      top: 16px;
      right: 25px;
      width: 20px; }
    #loginModal .div-login-right .box ::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      font-family: 'normal font';
      color: #9c9c9c; }
    #loginModal .div-login-right .box ::-moz-placeholder {
      /* Firefox 19+ */
      font-family: 'normal font';
      color: #9c9c9c; }
    #loginModal .div-login-right .box :-ms-input-placeholder {
      /* IE 10+ */
      font-family: 'normal font';
      color: #9c9c9c; }
    #loginModal .div-login-right .box :-moz-placeholder {
      /* Firefox 18- */
      font-family: 'normal font';
      color: #9c9c9c; }
    #loginModal .div-login-right .box .label-input-error {
      color: #f00;
      font-size: 1rem; }
    #loginModal .div-login-right .box .label-input-placeholder {
      color: #9c9c9c;
      font-size: 1rem; }
    #loginModal .div-login-right .box .register-radio-gender {
      width: 33.33%;
      float: left;
      display: flex; }
      #loginModal .div-login-right .box .register-radio-gender .img-wrapper {
        margin: auto 0; }
        #loginModal .div-login-right .box .register-radio-gender .img-wrapper img {
          width: 18px;
          display: block;
          margin: 0 auto;
          cursor: pointer; }
      #loginModal .div-login-right .box .register-radio-gender .radio-txt {
        margin: auto 0 auto 8px;
        color: #9c9c9c; }
    #loginModal .div-login-right .box .title-refcode {
      font-size: 1.3rem; }
    #loginModal .div-login-right .box .TermsCondition {
      padding-left: 20px;
      font-size: 1rem;
      font-family: 'thin font';
      line-height: 1.3rem; }
      #loginModal .div-login-right .box .TermsCondition .chkbox {
        position: absolute;
        left: 15px;
        top: 18px;
        width: 13px;
        cursor: pointer; }
  @media only screen and (max-width: 768px) {
    #loginModal .div-login-right .box.forgot-box {
      /*top: 30%;*/ } }
  @media only screen and (max-width: 768px) {
    #loginModal .div-login-right .box.reset-box {
      /*top: 30%;*/ } }
  #loginModal .div-login-right .box.div-otp {
    color: #9c9c9c; }
    #loginModal .div-login-right .box.div-otp .btn_wrapper {
      display: flex;
      width: 80%;
      margin: 0 auto;
      padding-bottom: 20px; }
  #loginModal .div-login-right .div-input {
    border-radius: 5px; }
    #loginModal .div-login-right .div-input .label-name {
      font-size: 0.8rem;
      color: #ed7702; }
    #loginModal .div-login-right .div-input .form-control:focus {
      box-shadow: none; }
  #loginModal .div-login-right .text-Forgot {
    color: #ed7702;
    font-weight: bold;
    cursor: pointer; }
  #loginModal .div-login-right .btn-primary {
    font-size: 1.2rem;
    color: white;
    background-color: #ed7702;
    border: 1px solid #ed7702;
    border-radius: 5px;
    width: 100%;
    line-height: 30px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    font-family: 'header font', 'DB Helvethaica X Blk Cond v3.2';
    font-weight: normal; }
    #loginModal .div-login-right .btn-primary:hover {
      background: #f0861f; }
    #loginModal .div-login-right .btn-primary:active {
      background: #d36a04; }
  #loginModal .div-login-right .btn-signinfb {
    font-size: 1.2rem;
    color: white;
    background-color: #2b4d95;
    border: 1px solid #2b4d95;
    border-radius: 5px;
    width: 100%;
    font-weight: bold;
    line-height: 30px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
    #loginModal .div-login-right .btn-signinfb:hover {
      background: #2e57ae; }
    #loginModal .div-login-right .btn-signinfb:active {
      background: #4e6cad; }
  #loginModal .div-login-right .img-fb {
    width: 11px;
    margin-right: 15px; }
  #loginModal .div-login-right .text-register {
    color: #ed7702;
    cursor: pointer;
    text-decoration: underline; }

#loginModal .img-login {
  width: 100%;
  /*height: 100%;*/
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

#alertModal {
  z-index: 1051; }
  #alertModal .modal-content {
    background-image: url(../image/border-top.png);
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px; }
  #alertModal .modal-body {
    padding-bottom: 0; }
  #alertModal .modal-footer {
    border-top: none;
    justify-content: center; }
  #alertModal .btn_ok {
    font-size: 1.2rem;
    color: #ed7702;
    background-color: white;
    border: 1px solid #ed7702;
    border-radius: 5px;
    width: 100%;
    max-width: 160px;
    font-weight: bold;
    line-height: 25px; }
  #alertModal .alertMessage {
    font-family: 'normal font';
    color: #636262; }

.menu_top_container {
  /*& > .row {
        justify-content: space-between;
    }*/ }
  .menu_top_container .menu_wrapper {
    display: flex; }
    .menu_top_container .menu_wrapper .hover-logo-bk {
      position: relative;
      height: 1px;
      display: inline-block;
      width: 100px; }
      .menu_top_container .menu_wrapper .hover-logo-bk .top-logo-bk {
        display: inline-block;
        position: absolute;
        width: 100px;
        height: 100px;
        top: 0px;
        overflow: hidden; }
        .menu_top_container .menu_wrapper .hover-logo-bk .top-logo-bk .img-logo-bk {
          width: 85px;
          height: 85px;
          /*margin: 6px 5px 5px 4px;*/ }
    .menu_top_container .menu_wrapper .item-top-main-menu {
      cursor: pointer;
      display: inline-block;
      height: 85px;
      padding: 18px 15px 0px 15px; }
      .menu_top_container .menu_wrapper .item-top-main-menu .wrapper-search {
        display: flex;
        background: #62301f;
        padding: 2px;
        margin: 7px auto auto auto;
        border-radius: 5px; }
        .menu_top_container .menu_wrapper .item-top-main-menu .wrapper-search .input-search-campaign {
          border: 0px;
          padding: 0 5px;
          border-radius: 5px;
          font-family: 'thin font';
          width: 100px; }
        .menu_top_container .menu_wrapper .item-top-main-menu .wrapper-search .input-search-campaign:focus {
          outline: none; }
        .menu_top_container .menu_wrapper .item-top-main-menu .wrapper-search .icon-search {
          height: 15px;
          margin: auto 5px; }
    .menu_top_container .menu_wrapper .item-top-main-menu:hover {
      text-decoration: none;
      background: #f0861f; }
    .menu_top_container .menu_wrapper .item-top-main-menu.active .item-top-text-line-2 {
      color: #62301f; }
  .menu_top_container .profile_wrapper {
    /*width: 150px;*/
    margin: auto 0 auto auto; }
    .menu_top_container .profile_wrapper .point_wrapper {
      padding-bottom: 0px;
      padding-top: 5px; }
      .menu_top_container .profile_wrapper .point_wrapper .profile-point-number {
        color: #fff;
        font-size: 1.5rem;
        line-height: 1;
        margin: auto 0 auto auto; }
        .menu_top_container .profile_wrapper .point_wrapper .profile-point-number .profile-point-icon {
          width: 19px;
          height: 19px;
          line-height: 0px; }
      .menu_top_container .profile_wrapper .point_wrapper .profile-point-unit {
        color: #62301f;
        font-size: 1.2rem;
        line-height: 1;
        margin: 5px auto auto 3px; }
    .menu_top_container .profile_wrapper .profile-top-image {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      display: inline-block;
      margin: 0px;
      cursor: pointer; }
      .menu_top_container .profile_wrapper .profile-top-image .avatar_image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 100% !important; }
    .menu_top_container .profile_wrapper .profile-noti-count-wrapper {
      width: 1px;
      margin: auto;
      position: relative; }
      .menu_top_container .profile_wrapper .profile-noti-count-wrapper .profile-noti-count {
        color: #eb7801;
        background: #fff;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        padding-top: 10px;
        line-height: 0px;
        left: 10px;
        top: -30px; }

@media only screen and (max-width: 2000px) {
  /*.item-top-main-menu {
        padding: 16px 8px 0px 8px;
    }*/
  /*.item-top-text-line-1 {

        font-size: 0.8em;
    }
    .item-top-text-line-2 {
        font-size: 1.8rem;
    }*/
  /*.top-logo-bk {
        top: -73px;
    }*/ }

@media only screen and (max-width: 1200px) {
  .menu_top_container .menu_wrapper .item-top-main-menu {
    padding: 22px 10px 0px 10px; }
    .menu_top_container .menu_wrapper .item-top-main-menu .item-top-text-line-1 {
      font-size: 0.9rem; }
    .menu_top_container .menu_wrapper .item-top-main-menu .item-top-text-line-2 {
      font-size: 1.5rem; } }

@media (max-width: 991.98px) {
  .item-sub-text {
    font-size: 0.6rem; }
  .sub-top-menu {
    height: 75px; } }

@media only screen and (max-width: 768px) {
  .sub-top-menu, .top-main-menu {
    display: none; }
  .bk-logo {
    display: none; }
  .bk-logo-mini {
    position: fixed;
    left: 70px;
    top: 0px;
    width: 58px;
    height: 58px;
    float: left;
    display: inline-block; }
  .navbar-expand-lg {
    margin-top: 0px !important; }
  .top-menu {
    display: none; }
  .sub-top-menu {
    height: 22% !important;
    overflow: auto; }
  .top-btn-mobile {
    display: inline-block; }
  .Ismobile {
    display: none; }
  .sub-top-menu-content {
    text-align: inherit !important; }
  .mx-auto {
    margin-left: 0px !important; }
  .number-profile, .number-bag {
    position: absolute;
    font-size: 0.5em;
    font-weight: bold;
    color: #fff;
    top: 0px;
    left: 15px;
    display: block;
    width: 20px;
    height: 20px;
    padding: 1px 0px 0px 7px;
    border-radius: 50%; } }

@media only screen and (max-width: 320px) and (max-width: 480px) {
  .sub-top-menu {
    height: 30% !important; } }

/*@media only screen and (max-width: 375px) and (max-width: 667px) {
    .sub-top-menu {
        height: 23% !important;
    }
}*/
/*//Iphone x
@media only screen and (max-width: 375px) and (max-width: 812px) {
    .sub-top-menu {
        height: 19% !important;
    }
}*/
.color-B {
  color: #583939; }

.dropbtn {
  /*background-color: #4CAF50;*/
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer; }

.dropdown {
  position: relative;
  display: inline-block; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1; }

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block; }

.dropdown-content a:hover {
  background-color: #f1f1f1; }

.dropdown:hover .dropdown-content {
  display: block; }

.dropdown:hover .dropbtn {
  /*background-color: #3e8e41;*/ }

div[ng-view] {
  overflow: hidden; }

.fix-stm {
  height: 230px; }

@media (max-width: 768px) {
  .sub-top-menu, .top-main-menu, .top-mini-menu {
    display: none; }
  .fix-stm {
    display: none; }
  .nav-menu {
    background-color: #ed7702; }
  .nav-left {
    display: inline-flex;
    /*.nav-logo {
            float: left;
        }*/ }
    .nav-left .icon-nav {
      vertical-align: middle;
      line-height: 1.8;
      font-size: 1.8rem; }
  .nav-right {
    display: inline-flex; }
  .nav-profile {
    display: inline-block;
    width: 46px; }
    .nav-profile .nav-noti-profile {
      color: #eb7801;
      background: #fff;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      line-height: 1;
      right: 0;
      bottom: 0px; }
  /*.nav-shopping {
        display: inline-block;

        .nav-img-shopping {
            text-align: center;
            margin-top: 10px;
            margin-right: -15px;
        }

        .nav-noti-shopping {
            color: #eb7801;
            background: #fff;
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            padding-top: 10px;
            text-align: center;
            line-height: 0;
            left: 0px;
            top: -7px;
        }
    }*/
  /*.nav-profile {
        float: right;
    }*/ }

.section_footer {
  background: #2d2d2d;
  color: #fff; }
  .section_footer .footerhead {
    font-family: 'header font';
    padding: 16px 0;
    font-size: 1.4em;
    padding-bottom: 6px;
    background: none;
    border: none;
    text-align: left;
    color: #fff;
    width: 100%; }
    .section_footer .footerhead .upper {
      vertical-align: super;
      font-size: 0.6em; }
  .section_footer .sub {
    font-weight: 100; }
  .section_footer .subhead {
    font-size: 1em; }
  .section_footer .subhead {
    font-size: 1.2em;
    padding-top: 30px; }
  .section_footer .sup-bot-topic {
    text-decoration: none;
    font-weight: 100;
    color: #fff;
    cursor: pointer;
    font-family: 'thin font';
    font-size: 1.6rem;
    line-height: 1.9rem; }
  .section_footer .social_icon {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 24px;
    cursor: pointer; }
    .section_footer .social_icon.icon_right {
      margin-right: 0px; }
    .section_footer .social_icon.fb_icon {
      background: url("../image/footer/ico-fb.png") no-repeat center center;
      background-size: 100%; }
    .section_footer .social_icon.tw_icon {
      background: url("../image/footer/ico-tw.png") no-repeat center center;
      background-size: 100%; }
    .section_footer .social_icon.gplus_icon {
      background: url("../image/footer/ico-gg.png") no-repeat center center;
      background-size: 100%; }
  .section_footer .app_name_wrapper {
    padding-top: 60px; }
    .section_footer .app_name_wrapper .app_name {
      font-size: 1.6em;
      font-family: 'header font'; }
      .section_footer .app_name_wrapper .app_name .upper {
        vertical-align: super;
        font-size: 0.6em; }
    .section_footer .app_name_wrapper .desc {
      font-weight: 100;
      font-size: 0.8em; }
  .section_footer .btn-back-to-top {
    color: #fff;
    font-size: 1.6em;
    background: url("../image/footer/bg-totop.png") no-repeat center center;
    background-size: contain;
    text-align: center;
    width: 323px;
    padding: 16px 20px 10px 20px;
    font-family: 'header font';
    cursor: pointer;
    border: 0px; }
  .section_footer .btn-back-to-top:hover {
    opacity: 0.9; }
  .section_footer .btn-back-to-top:active {
    opacity: 0.9; }
  .section_footer .btn-back-to-top:focus {
    outline: none; }
  .section_footer .btn-back-to-top span {
    font-size: 0.8em;
    font-weight: normal; }

.btn_login_wrapper {
  height: 85px;
  padding: 0 5px; }
  .btn_login_wrapper .text {
    padding: 10px 0 0 0;
    text-align: center;
    font-family: 'header font';
    white-space: nowrap;
    color: #62301f; }
  .btn_login_wrapper .icon_crown {
    background: url(../image/header/ico-crown.png) no-repeat center center;
    width: 40px;
    height: 40px;
    background-size: 100%;
    margin: auto; }

.btn_login_wrapper:hover {
  background: #f0861f;
  cursor: pointer; }

#modal-video .img-close {
  position: absolute;
  right: 0px;
  margin-top: -10px;
  margin-right: -10px;
  width: 25px;
  cursor: pointer;
  z-index: 1000; }

/*popup confirm*/
#confirmModal .modal-content {
  background-image: url(../image/border-top.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 10px;
  padding-top: 30px; }

#confirmModal .btn-cancel {
  float: left;
  font-family: 'normal font';
  font-size: 1.2rem;
  color: #ed7702;
  background-color: white;
  border: 1px solid #ed7702;
  border-radius: 5px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  width: 40%;
  text-align: center;
  padding: 6px;
  cursor: pointer; }
  #confirmModal .btn-cancel:hover {
    border: 1px solid #f68a20; }

#confirmModal .btn-confirm {
  float: right;
  color: white;
  font-size: 1.2rem;
  background-color: #ed7702;
  border: 1px solid #ed7702;
  border-radius: 5px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  width: 40%;
  text-align: center;
  padding: 6px;
  cursor: pointer; }
  #confirmModal .btn-confirm:hover {
    background: #f68a20;
    border: 1px solid #f68a20; }

#confirmModal .confirm-context {
  font-family: 'normal font';
  text-align: center; }

#confirmModal .message_confirm {
  font-family: 'thin font';
  text-align: center; }

#confirmModal .modal-footer {
  justify-content: space-around;
  border: none; }

/*popup confirm*/
#selectPhotoModal .modal-content {
  background-image: url(../image/border-top.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 10px;
  padding-top: 30px; }

#selectPhotoModal .btn-scan {
  font-family: 'header font';
  float: left;
  color: white;
  font-size: 1.2rem;
  background-color: #ed7702;
  border: 1px solid #ed7702;
  border-radius: 5px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  width: 40%;
  text-align: center;
  padding: 6px;
  cursor: pointer; }
  #selectPhotoModal .btn-scan:hover {
    background: #f68a20;
    border: 1px solid #f68a20; }

#selectPhotoModal .btn-library {
  font-family: 'header font';
  float: right;
  color: white;
  font-size: 1.2rem;
  background-color: #ed7702;
  border: 1px solid #ed7702;
  border-radius: 5px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  width: 40%;
  text-align: center;
  padding: 6px;
  cursor: pointer; }
  #selectPhotoModal .btn-library:hover {
    background: #f68a20;
    border: 1px solid #f68a20; }

#selectPhotoModal .confirm-context {
  font-family: 'thin font';
  text-align: center;
  font-size: 1.5rem; }

#selectPhotoModal .modal-footer {
  justify-content: space-around;
  border: none; }

#confirmModal .modal-dialog, #logoutModal .modal-dialog, #alertModal .modal-dialog, selectPhotoModal .modal-dialog {
  max-width: 500px; }

#staticModal .modal-body {
  padding: 0 1rem 0 0;
  border-radius: 15px;
  overflow: hidden; }

#staticModal .modal-dialog {
  max-width: 100%;
  padding: 16px; }

#staticModal .static-content {
  padding: 15px; }

#staticModal .img-close {
  z-index: 100;
  position: absolute;
  right: 0;
  margin-top: -10px;
  margin-right: -10px;
  width: 25px;
  cursor: pointer; }

#term_pdpa__modal .modal-content {
  background-image: url(../image/border-top.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 10px;
  padding-top: 30px; }
  #term_pdpa__modal .modal-content .term-header {
    font-family: 'bold font';
    text-align: center;
    font-size: 1.5rem;
    margin: 0; }
  #term_pdpa__modal .modal-content .term-content {
    padding: 0 15px 0 15px;
    margin: 0 0 15px 0;
    height: calc(100vh - 160px);
    overflow-y: scroll;
    font-family: 'thin font'; }
    @media (min-width: 768px) {
      #term_pdpa__modal .modal-content .term-content {
        height: calc(100vh - 300px); } }
  #term_pdpa__modal .modal-content .wrapper-btn-term {
    display: flex; }
    #term_pdpa__modal .modal-content .wrapper-btn-term .btn-close-term {
      font-family: 'header font';
      margin: auto 7.5px 15px 15px;
      width: calc(50% - 22.5px);
      border-radius: 5px;
      border: 1px solid #ed7702;
      background-color: white;
      color: #ed7702;
      text-align: center; }
      @media (min-width: 768px) {
        #term_pdpa__modal .modal-content .wrapper-btn-term .btn-close-term {
          width: 150px;
          margin: auto 7.5px 15px auto; } }
    #term_pdpa__modal .modal-content .wrapper-btn-term .btn-accept-term {
      font-family: 'header font';
      margin: auto 15px 15px 7.5px;
      width: calc(50% - 22.5px);
      border-radius: 5px;
      border: 1px solid #ed7702;
      background-color: #ed7702;
      color: white;
      text-align: center; }
      @media (min-width: 768px) {
        #term_pdpa__modal .modal-content .wrapper-btn-term .btn-accept-term {
          width: 150px;
          margin: auto auto 15px 7.5px; } }

.th #term_pdpa__modal .modal-content .wrapper-btn-term {
  display: flex; }
  .th #term_pdpa__modal .modal-content .wrapper-btn-term .btn-close-term {
    font-family: "DB Helvethaica X Blk Cond v3.2";
    font-size: 1.5rem;
    line-height: 1.2; }
  .th #term_pdpa__modal .modal-content .wrapper-btn-term .btn-accept-term {
    font-family: "DB Helvethaica X Blk Cond v3.2";
    font-size: 1.5rem;
    line-height: 1.2; }

#privacy_pdpa__modal .modal-content {
  background-image: url(../image/border-top.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 10px;
  padding-top: 30px; }
  #privacy_pdpa__modal .modal-content .privacy-header {
    font-family: 'bold font';
    text-align: center;
    font-size: 1.5rem;
    margin: 0; }
  #privacy_pdpa__modal .modal-content .privacy-content {
    padding: 0 15px 0 15px;
    margin: 0 0 15px 0;
    height: calc(100vh - 160px);
    overflow-y: scroll;
    font-family: 'thin font'; }
    @media (min-width: 768px) {
      #privacy_pdpa__modal .modal-content .privacy-content {
        height: calc(100vh - 300px); } }
  #privacy_pdpa__modal .modal-content .wrapper-btn-privacy {
    display: flex; }
    #privacy_pdpa__modal .modal-content .wrapper-btn-privacy .btn-close-privacy {
      font-family: 'header font';
      margin: auto 7.5px 15px 15px;
      width: calc(50% - 22.5px);
      border-radius: 5px;
      border: 1px solid #ed7702;
      background-color: white;
      color: #ed7702;
      text-align: center; }
      @media (min-width: 768px) {
        #privacy_pdpa__modal .modal-content .wrapper-btn-privacy .btn-close-privacy {
          width: 150px;
          margin: auto 7.5px 15px auto; } }
    #privacy_pdpa__modal .modal-content .wrapper-btn-privacy .btn-accept-privacy {
      font-family: 'header font';
      margin: auto 15px 15px 7.5px;
      width: calc(50% - 22.5px);
      border-radius: 5px;
      border: 1px solid #ed7702;
      background-color: #ed7702;
      color: white;
      text-align: center; }
      @media (min-width: 768px) {
        #privacy_pdpa__modal .modal-content .wrapper-btn-privacy .btn-accept-privacy {
          width: 150px;
          margin: auto auto 15px 7.5px; } }

.th #privacy_pdpa__modal .modal-content .wrapper-btn-privacy {
  display: flex; }
  .th #privacy_pdpa__modal .modal-content .wrapper-btn-privacy .btn-close-privacy {
    font-family: "DB Helvethaica X Blk Cond v3.2";
    font-size: 1.5rem;
    line-height: 1.2; }
  .th #privacy_pdpa__modal .modal-content .wrapper-btn-privacy .btn-accept-privacy {
    font-family: "DB Helvethaica X Blk Cond v3.2";
    font-size: 1.5rem;
    line-height: 1.2; }

#modal-alert-not-login .modal-alert-content {
  color: #ed7702;
  text-align: center; }

#modal-alert-not-login .text-icon-modal {
  font-size: 2.5em; }

#modal-alert-not-login .btn-custom-outline-orange {
  width: 100%;
  display: block;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  box-shadow: 0px 3px 2px #d8d8d8;
  cursor: pointer; }

#modal-alert-not-login .btn-custom-outline-orange:focus {
  outline: none; }

#modal-alert-not-login .btn-custom-outline-orange {
  color: #ee7703;
  background: transparent;
  border: 1px solid #ee7703; }

#modal-alert-not-login .btn-custom-outline-orange:hover {
  background: #f0861f;
  border: 1px solid #f0861f;
  color: #fff; }

#modal-alert-not-login .btn-custom-outline-orange:active {
  background: #d36a04;
  border: 1px solid #d36a04;
  color: #fff; }

@media (max-width: 320px) {
  .section_footer .btn-back-to-top {
    font-size: 1.5em;
    width: 100%;
    padding: 16px 20px 0px 20px; } }

/* #ee7703*/
@font-face {
  font-family: 'DB Helvethaica X Blk Cond v3.2';
  src: url("../font/DB Helvethaica X Blk Cond v3.2.ttf") format("truetype"); }

@font-face {
  font-family: 'bold font';
  src: url("../font/DB Helvethaica X Blk Cond v3.2.ttf") format("truetype"); }

@font-face {
  font-family: 'header font';
  src: url("../font/ufonts.com_block_berthold_condensed.ttf") format("truetype"); }

@font-face {
  font-family: 'normal font';
  src: url("../font/DB Helvethaica X Bd Cond.ttf") format("truetype"); }

@font-face {
  font-family: 'thin font';
  src: url("../font/DB Helvethaica X Cond v3.2.ttf") format("truetype"); }

body {
  font-family: 'DB Helvethaica X Blk Cond v3.2';
  font-size: 1.2rem !important; }

.btn-back-profile {
  color: #ed7702;
  font-size: 1.2rem; }

.btn-back-profile:hover {
  color: #f7a901; }

.ellipsis-1 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-2 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-3 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-4 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

/* menu mobile */
.navbar.nav-menu {
  padding: 0; }
  @media (min-width: 769px) {
    .navbar.nav-menu {
      display: none; } }
  .navbar.nav-menu .nav-wrapper-header {
    display: flex;
    width: 100%; }
    .navbar.nav-menu .nav-wrapper-header .nav-menu-item {
      width: 40%;
      display: flex;
      height: 50px;
      /*.nav-icon-search {
                height: 18px;
            }*/ }
      .navbar.nav-menu .nav-wrapper-header .nav-menu-item.nav-center {
        width: 20%; }
      .navbar.nav-menu .nav-wrapper-header .nav-menu-item .nav-hamburger {
        margin: 15px 0px auto 15px; }
      .navbar.nav-menu .nav-wrapper-header .nav-menu-item .nav-search {
        margin: 10px auto auto 25px; }
        .navbar.nav-menu .nav-wrapper-header .nav-menu-item .nav-search .nav-icon-search {
          height: 20px; }
      .navbar.nav-menu .nav-wrapper-header .nav-menu-item .nav-logo {
        margin: auto auto auto auto; }
      .navbar.nav-menu .nav-wrapper-header .nav-menu-item .nav-user {
        margin: auto 0px auto auto; }
      .navbar.nav-menu .nav-wrapper-header .nav-menu-item .nav-bag {
        margin: auto 0px 4px 0px; }
  .navbar.nav-menu .nav-left {
    /*padding: 6px 1rem;*/
    display: block; }
    .navbar.nav-menu .nav-left a {
      color: #fff; }
  .navbar.nav-menu .menu_breadcrumb {
    color: #fff;
    /*padding-left: 16px;*/ }
  .navbar.nav-menu .nav-logo img {
    width: 44px;
    height: 44px; }
  .navbar.nav-menu .nav-profile {
    /*margin-right: 10px !important;
        margin-top: 10px;*/ }
  .navbar.nav-menu .nav-shopping {
    width: 80px;
    display: flex;
    position: relative; }
    .navbar.nav-menu .nav-shopping .nav-txt-shopping {
      line-height: 0.9;
      font-size: 1.2rem;
      text-align: center;
      color: white;
      margin: auto 5px auto 14px; }
    .navbar.nav-menu .nav-shopping .nav-img-shopping {
      text-align: center;
      margin: auto 5px auto 0px;
      width: 25px; }
    .navbar.nav-menu .nav-shopping .nav-noti-shopping {
      color: #ed7702;
      background: #fff;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 1;
      right: 4px;
      top: -4px;
      border-radius: 50%;
      position: absolute; }
  .navbar.nav-menu .rounded-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #fff;
    margin-right: 8px; }
  .navbar.nav-menu .item-btn {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .navbar.nav-menu .container-nav {
    display: flex;
    width: 100%;
    padding: 0; }
    .navbar.nav-menu .container-nav .wrapper-search {
      display: flex;
      background: #62301f;
      padding: 2px;
      margin: 7px 15px auto 15px;
      border-radius: 5px;
      width: 100%;
      position: relative; }
      .navbar.nav-menu .container-nav .wrapper-search .input-search-campaign {
        border: 0px;
        padding: 0 5px;
        border-radius: 5px;
        font-family: 'thin font';
        width: 100%; }
      .navbar.nav-menu .container-nav .wrapper-search .input-search-campaign:focus {
        outline: none; }
      .navbar.nav-menu .container-nav .wrapper-search .icon-search {
        height: 15px;
        margin: auto 5px; }
      .navbar.nav-menu .container-nav .wrapper-search .icon-delete {
        height: 12px;
        position: absolute;
        top: 10px;
        right: 38px; }
  .navbar.nav-menu .btn-delivery-method-mb {
    background-color: #bd5e00;
    width: 100%;
    font-family: 'header font';
    color: #d4a97f; }
    .navbar.nav-menu .btn-delivery-method-mb.active {
      background-color: white;
      color: #ed7702; }
  .navbar.nav-menu .wrapper-header-delivery-method {
    width: 100%;
    display: flex; }
    .navbar.nav-menu .wrapper-header-delivery-method .btn-delivery-method {
      width: 50%; }
  .navbar.nav-menu .wrapper-address {
    margin-left: 0px;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: 1.2rem;
    display: block;
    height: auto; }
    .navbar.nav-menu .wrapper-address .address-str {
      margin-right: 5px;
      padding-left: 30px; }
      .navbar.nav-menu .wrapper-address .address-str .Pickup {
        left: 0px; }
      .navbar.nav-menu .wrapper-address .address-str .InStore {
        left: 0px; }
      .navbar.nav-menu .wrapper-address .address-str .Delivery {
        width: 25px;
        height: 18px;
        left: 0px;
        top: 3px; }
    .navbar.nav-menu .wrapper-address .time-str {
      width: 100%;
      text-align: left;
      padding-left: 30px;
      line-height: 1; }
  .navbar.nav-menu .select-address-txt {
    color: white; }
  .navbar.nav-menu .item-input {
    background-color: white;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-family: 'thin font'; }
    .navbar.nav-menu .item-input .address-str-mb {
      width: 100%; }
    .navbar.nav-menu .item-input .time-str-mb {
      width: 100%; }
      .navbar.nav-menu .item-input .time-str-mb span {
        color: #ed7702; }
    .navbar.nav-menu .item-input .empty-delivery-str-mb {
      width: 100%;
      color: #ed7702; }

@media (max-width: 992px) {
  .nav-right {
    display: inline-flex; }
    .nav-right .nav-profile {
      display: inline-block; }
      .nav-right .nav-profile .nav-noti-profile {
        color: #ed7702;
        background: #fff;
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        padding-top: 10px;
        text-align: center;
        line-height: 0;
        left: -14px;
        top: 9px; }
    .nav-right .nav-shopping {
      display: inline-block; }
      .nav-right .nav-shopping .nav-img-shopping {
        text-align: center;
        margin-top: 10px;
        margin-right: -15px; }
      .nav-right .nav-shopping .nav-noti-shopping {
        color: #ed7702;
        background: #fff;
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        padding-top: 10px;
        text-align: center;
        line-height: 0;
        left: 3px;
        top: 13px; } }

.footer_mobile {
  display: none; }

#carousel-menu {
  display: none; }

/* footer */
@media (max-width: 992px) {
  #carousel-menu {
    display: block;
    background: #fff url("../image/header/BG-nav-bar-2.png") no-repeat center center; }
    #carousel-menu .owl-item img {
      display: unset;
      width: auto; }
    #carousel-menu .item-sub-img {
      height: 50px; }
    #carousel-menu .item-sub-text {
      /*font-size: $super_super_small_font_size;*/
      font-size: 0.8rem; }
    #carousel-menu .item-sub-text.th {
      font-size: 1rem; }
    #carousel-menu .div-ordernow {
      width: 100%;
      height: 40px;
      text-align: center; }
      #carousel-menu .div-ordernow .img-ordernow {
        margin-top: 10px;
        height: 40px; }
    #carousel-menu .owl-stage {
      right: 0px; }
  .share_wrapper {
    text-align: center; }
  .section_footer .social_icon {
    width: 30px;
    height: 30px;
    float: none;
    margin-right: 24px;
    display: inline-block; }
  .section_footer .app_name_wrapper {
    padding-bottom: 30px;
    padding-top: 0px;
    text-align: center; }
    .section_footer .app_name_wrapper .app_name {
      display: block; }
  .footer_desktop {
    display: none; }
  .footer_mobile {
    display: block; }
  .head {
    padding-bottom: 0 !important;
    padding-top: 0 !important; }
  #accordion {
    padding-top: 24px; }
    #accordion .menu-header .arrow {
      background: url("../image/icon/arrow-down.png") no-repeat center center;
      width: 12px;
      height: 12px;
      display: inline-block;
      background-size: 12px;
      float: right;
      vertical-align: middle;
      margin-top: 16px;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      transform: rotate(180deg);
      transition: all 0.5s; }
    #accordion .collapsed .arrow {
      transition: all 0.5s;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg); }
  .navbar.nav-menu .nav-profile {
    margin: auto 0;
    text-align: right;
    position: relative; } }

@media (max-width: 774px) {
  .btn_login_wrapper {
    height: auto;
    text-align: center;
    width: 46px; }
    .btn_login_wrapper .text {
      padding: 4px 4px 0 4px;
      text-align: center;
      font-family: 'header font';
      font-size: 1rem;
      line-height: 1; }
    .btn_login_wrapper .icon_crown {
      background: url(../image/header/ico-crown.png) no-repeat center center;
      width: 28px;
      height: 33px;
      background-size: contain; } }

@media (max-width: 676px) {
  #carousel-menu .owl-stage {
    right: 20px; } }

/* mobile menu */
.nav-page {
  position: fixed;
  overflow: hidden;
  top: 0;
  /*left: 58px;*/
  background: transparent;
  text-align: left;
  display: none;
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: background 500ms ease;
  -moz-transition: background 500ms ease;
  transition: background 500ms ease;
  z-index: 999999999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 0;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }
  .nav-page .close_btn {
    background: url("../image/menu/icon-x.png") no-repeat center center;
    width: 20px;
    height: 20px;
    background-size: 100%;
    display: block;
    position: absolute;
    right: 20px;
    top: 15px; }
  .nav-page .burgerking_logo {
    background: url("../image/new-logo/logo-BK-new.png") no-repeat center center;
    width: 110px;
    height: 110px;
    background-size: 100%;
    display: block;
    margin: 60px auto;
    margin-bottom: 20px; }
  .nav-page .menuProfile {
    overflow-y: auto;
    height: calc(100% - 260px); }
    .nav-page .menuProfile li {
      text-align: center;
      color: #fff;
      font-size: 1.6em;
      line-height: 2.2em;
      font-family: 'header font','normal font'; }
      .nav-page .menuProfile li span {
        color: #ed7702; }
  .nav-page .bottom_bar {
    padding: 12px 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0; }
    .nav-page .bottom_bar .language_wrapper {
      overflow: hidden;
      /*width: 135px;*/
      width: 90px;
      float: left;
      line-height: 49px;
      text-align: left; }
      .nav-page .bottom_bar .language_wrapper .lang {
        width: 50px;
        height: 40px;
        float: left; }
        .nav-page .bottom_bar .language_wrapper .lang:last-child {
          margin-left: 20px; }
        .nav-page .bottom_bar .language_wrapper .lang.en:not(.active) {
          background: url("../image/menu/icon_flag-eng-inac.png") no-repeat center center;
          /*background: url('../image/menu/eng.png') no-repeat center center;*/
          background-size: 100%; }
        .nav-page .bottom_bar .language_wrapper .lang.en.active {
          /*background: url('../image/menu/eng.png') no-repeat center center;*/
          background: url("../image/menu/icon_flag-eng-active.png") no-repeat center center;
          background-size: 100%; }
        .nav-page .bottom_bar .language_wrapper .lang.th:not(.active) {
          /*background: url('../image/menu/thai.png') no-repeat center center;*/
          background: url("../image/menu/icon_flag-thai-inac.png") no-repeat center center;
          background-size: 100%; }
        .nav-page .bottom_bar .language_wrapper .lang.th.active {
          /*background: url('../image/menu/thai.png') no-repeat center center;*/
          background: url("../image/menu/icon_flag-thai-active.png") no-repeat center center;
          background-size: 100%; }
    .nav-page .bottom_bar .bzb_logo {
      background: url("../image/menu/icon_powerby buzzebees.png") no-repeat center center;
      width: 100px;
      height: 50px;
      background-size: 100%;
      display: block;
      float: right; }
  .nav-page .profile_menu_wrapper {
    width: 70%;
    border-bottom: 1px solid rgba(232, 232, 232, 0.45);
    margin: 0px auto;
    margin-top: 32px;
    margin-bottom: 10px; }
    .nav-page .profile_menu_wrapper .profile_Image {
      font-size: 3em;
      text-align: left;
      position: relative;
      width: 60px;
      margin: 0 auto; }
      .nav-page .profile_menu_wrapper .profile_Image .profile_avatar {
        width: 60px;
        height: 60px;
        border: 1px solid #fff;
        border-radius: 60px; }
      .nav-page .profile_menu_wrapper .profile_Image .browse_icon {
        background: url(../image/profie/ico-camera.png) no-repeat center center;
        height: 26px;
        width: 26px;
        display: inline-block;
        background-size: 100%;
        vertical-align: middle;
        top: 13px;
        position: absolute;
        right: -8px; }
      .nav-page .profile_menu_wrapper .profile_Image input[type=file] {
        display: none; }
      .nav-page .profile_menu_wrapper .profile_Image .text-user-fullname {
        font-size: 1em;
        font-weight: bold;
        color: #555;
        padding: 16px 0 0 10px; }
    .nav-page .profile_menu_wrapper .text-user-point {
      color: #eb7801;
      font-size: 1.2em;
      padding: 0 0 10px 6px;
      font-family: 'header font'; }
      .nav-page .profile_menu_wrapper .text-user-point .point_logo {
        background: url(../image/icon/icon-bk-point-white.png) no-repeat center center;
        height: 33px;
        width: 32px;
        display: inline-block;
        background-size: 100%;
        margin-right: 4px;
        vertical-align: middle;
        margin-bottom: 10px; }
      .nav-page .profile_menu_wrapper .text-user-point strong {
        font-size: 1.6em;
        line-height: 16px;
        color: #fff;
        font-weight: normal;
        padding-right: 6px; }

.show-nav.nav-page {
  background: url("../image/profie/BG-side-menu.jpg") no-repeat center center;
  background-size: 100% 100%;
  z-index: 1;
  display: block; }

.hide-nav.nav-page {
  background: transparent;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: none; }

.th .nav-shopping .nav-txt-shopping {
  margin-left: 5px !important; }

/* #ee7703*/
@font-face {
  font-family: 'DB Helvethaica X Blk Cond v3.2';
  src: url("../font/DB Helvethaica X Blk Cond v3.2.ttf") format("truetype"); }

@font-face {
  font-family: 'bold font';
  src: url("../font/DB Helvethaica X Blk Cond v3.2.ttf") format("truetype"); }

@font-face {
  font-family: 'header font';
  src: url("../font/ufonts.com_block_berthold_condensed.ttf") format("truetype"); }

@font-face {
  font-family: 'normal font';
  src: url("../font/DB Helvethaica X Bd Cond.ttf") format("truetype"); }

@font-face {
  font-family: 'thin font';
  src: url("../font/DB Helvethaica X Cond v3.2.ttf") format("truetype"); }

body {
  font-family: 'DB Helvethaica X Blk Cond v3.2';
  font-size: 1.2rem !important; }

.btn-back-profile {
  color: #ed7702;
  font-size: 1.2rem; }

.btn-back-profile:hover {
  color: #f7a901; }

.ellipsis-1 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-2 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-3 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

.ellipsis-4 {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden; }

/*  mobile */
.register_wrapper .label-name {
  display: none; }

@media (max-width: 575.98px) {
  .modalPage {
    background: #fff; }
    .modalPage .modal-dialog {
      max-width: none; }
    .modalPage .modal-dialog.modal-dialog-centered {
      align-items: inherit;
      min-height: 100%; }
    .modalPage .modal-body {
      overflow: visible !important; }
    .modalPage .modal-content {
      background: none; }
    .modalPage .div-img-login {
      /*background: url(http://devstoragebuzzebees.blob.core.windows.net/burgerking/LoginBK.jpg) no-repeat center center;*/
      background-size: auto 100%; }
    .modalPage .div-login-right .box {
      position: relative !important;
      padding-bottom: 30px !important; }
  #staticModal .embed-responsive-16by9::before {
    padding-top: 185%; }
  .register_wrapper {
    /*.TermsCondition {
            padding: 12px;
        }*/ }
    .register_wrapper .form-control {
      border: 1px solid #e8e8e8; }
    .register_wrapper .label-name {
      display: block;
      transition: all .2s;
      top: 0em;
      left: 0rem;
      z-index: 3;
      opacity: 0;
      position: absolute;
      color: #ee7703; }
    .register_wrapper .form-control:focus + .label-name {
      font-size: 100%;
      opacity: 1;
      top: .4em;
      left: 28px;
      font-size: 0.8em;
      outline: none; }
    .register_wrapper .form-control:focus {
      padding: 18px 12px;
      padding-bottom: 0px;
      margin-top: 7px !important; }
  .div-otp {
    font-size: 1.2em;
    padding: 0 6px 0 6px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0px; }
    .div-otp .txtheader {
      font-size: 2rem !important;
      padding-bottom: 0 !important;
      padding: 4px !important;
      margin: 6px !important; }
    .div-otp .txtotp {
      text-align: center;
      background: #e6e6e6;
      border: none;
      box-shadow: inset 0 1px 0px 1px rgba(206, 206, 206, 0.65);
      font-weight: bold;
      padding: 6px; }
    .div-otp .txt-resend {
      font-family: 'thin font'; }
    .div-otp .btn-verify {
      font-family: 'header font';
      font-weight: normal; }
    .div-otp .btn-cancel {
      font-family: 'header font';
      font-weight: normal;
      width: 40%;
      margin-right: 4%; }
    .div-otp .btn-verify {
      width: 56%; }
  .success_register_wrapper {
    font-size: 1.4em; }
    .success_register_wrapper .txt-congrat {
      font-size: 1.3em;
      font-family: 'header font';
      font-weight: normal; }
  .forgot-box .btn-primary {
    margin-top: 27px !important; }
  .forgot-box .label-name {
    font-family: 'thin font'; } }

/*@media (max-width: 600px) {

    .modalPage {
        background: #fff; 
    }
}*/
.th .menu_top_container .menu_wrapper .item-top-main-menu {
  font-family: "DB Helvethaica X Blk Cond v3.2"; }
  @media only screen and (max-width: 1200px) {
    .th .menu_top_container .menu_wrapper .item-top-main-menu {
      padding: 22px 10px 0px 10px; } }
  .th .menu_top_container .menu_wrapper .item-top-main-menu .item-top-text-line-1 {
    font-family: "DB Helvethaica X Blk Cond v3.2";
    font-size: 1.5rem;
    line-height: 1; }
    @media only screen and (max-width: 1200px) {
      .th .menu_top_container .menu_wrapper .item-top-main-menu .item-top-text-line-1 {
        font-size: 1.3rem; } }
  .th .menu_top_container .menu_wrapper .item-top-main-menu .item-top-text-line-2 {
    font-family: "DB Helvethaica X Blk Cond v3.2";
    font-size: 2.4rem;
    line-height: 1;
    margin-top: 0px; }
    @media only screen and (max-width: 1200px) {
      .th .menu_top_container .menu_wrapper .item-top-main-menu .item-top-text-line-2 {
        font-size: 2.1rem;
        margin-top: 3px; } }
  .th .menu_top_container .menu_wrapper .item-top-main-menu .wrapper-search {
    margin: 0px auto auto auto; }

.th .btn-menu-list {
  font-family: "DB Helvethaica X Blk Cond v3.2"; }

.th .section_footer .app_name_wrapper .app_name {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 2.2em; }

.th .btn-back-to-top {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 2.2em; }

.th .header_wrapper h4 {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 2em; }

.th .btn_login_wrapper .text {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 1.6em;
  line-height: 30px; }
  @media (max-width: 774px) {
    .th .btn_login_wrapper .text {
      font-size: 1.3rem;
      line-height: 1;
      margin: 5px auto -7px auto; } }

.th .block-cate .item-sub-text {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 1.2em;
  line-height: 24px; }

.th .shopping-bag .shopping-bag-txt {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 1.2em;
  margin-top: 1px; }

.th #selectPhotoModal .btn-scan {
  font-family: "DB Helvethaica X Blk Cond v3.2"; }

.th #selectPhotoModal .btn-library {
  font-family: "DB Helvethaica X Blk Cond v3.2"; }

.th .wrapper-header-delivery-method .btn-delivery-method {
  font-family: "DB Helvethaica X Blk Cond v3.2";
  font-size: 1.2rem;
  line-height: 1.2; }

@media (min-width: 768px) {
  /*.menu_top_container {
        padding-right: 12px;
        padding-left: 12px;
        max-width: 100%;

        .profile_wrapper {
            width: auto;
        }
    }*/ }

@media (min-width: 992px) {
  /*.menu_top_container {
        max-width: 900px; 
    }
    .th {
        .menu_top_container {
            max-width: 880px;
        }
    }*/ }

@media (min-width: 1200px) {
  /*.menu_top_container {
        max-width: 1100px;
    }
    .th {
        .menu_top_container {
            max-width: 920px;
        }
    }*/ }

@media (min-width: 768px) and (max-width: 991.98px) {
  .sub-top-menu .container {
    max-width: 875px; }
    .sub-top-menu .container .row.justify-content-center .col-2 {
      padding-right: 0;
      padding-left: 0; } }

.shopping-bag-wrapper {
  margin: 0 0 auto auto; }

/* thai font */
.th .footerhead {
  font-family: 'bold font';
  font-size: 1.9em; }

.th .text-head-menudetail {
  font-family: 'bold font'; }

.th .txt-head-sub-menu {
  font-family: 'bold font'; }

.th .text-head-menu {
  font-family: 'bold font';
  min-width: 180px; }

.th .menu-name {
  font-family: 'bold font';
  font-size: 1.6rem; }

.th .loading_message {
  font-family: 'bold font' !important;
  font-size: 1.8rem; }

.th .heaer_description {
  font-family: 'bold font'; }

.th .text-head-call {
  font-family: 'bold font'; }

.th .btn-orange {
  font-family: 'bold font'; }

.th .header_wrapper .text-head {
  font-family: 'bold font'; }

.th .section .title {
  font-family: 'bold font'; }

.th .modalPage .font-weight-bold {
  font-size: 1.6rem; }

.th .modalPage .btn-primary, .th .modalPage .btn-signinfb {
  font-family: 'bold font';
  font-size: 1.5rem !important; }

.th .modalPage .dont_have_any_account {
  font-size: 1.1rem; }

.th #alertModal .text-alert {
  font-size: 1.6rem; }

.th #alertModal .btn_ok {
  font-size: 1.4rem; }

.th #alertModal .alertMessage {
  font-size: 1.4rem; }

.th #loginModal .text-terms {
  font-size: 1.1rem; }

.th #loginModal .btn-register {
  font-size: 1.6rem;
  line-height: 35px;
  vertical-align: middle;
  padding-top: 0; }

.th #loginModal .btn-cancel, .th #loginModal .btn-verify {
  font-family: 'bold font';
  font-size: 1.6rem;
  line-height: 25px; }

.th #loginModal .div-otp .font-weight-bold {
  font-size: 1.3rem; }

.th .btn-menu-list {
  font-size: 1.4rem; }

.th .text-user-fullname {
  font-family: 'bold font';
  line-height: 18px;
  padding-bottom: 6px;
  font-size: 1.4rem; }

.th .registerbtn {
  font-size: 1.4rem;
  line-height: 30px; }

.th #change_mobile_number_Modal .header-text {
  font-family: 'bold font';
  font-size: 1.6rem; }

.th #change_mobile_number_Modal .btn-ok, .th #change_mobile_number_Modal .btn-otp {
  font-family: 'bold font';
  font-size: 1.5rem;
  line-height: 26px; }

.th .btn_point_history {
  font-family: 'bold font'; }

.th #confirmModal .title_confirm {
  font-family: 'bold font';
  font-size: 1.4rem; }

.th #confirmModal .btn_cancel_confirm, .th #confirmModal .btn_ok_confirm {
  font-size: 1.6rem;
  line-height: 28px; }

.th .campaignlist-wrapper .campaign-item .name {
  font-family: 'bold font';
  font-size: 1.4rem;
  height: auto;
  line-height: 24px; }

.th .campaignlist-wrapper .campaign-item .point {
  font-family: 'bold font';
  font-size: 1.4rem; }

.th .header-font {
  font-family: 'bold font'; }

.th .menu {
  font-size: 1.4rem; }

.th #modalOrderDetail .btn-cancel, .th #modalOrderDetail .btn-reorder {
  font-size: 1.4rem;
  font-family: 'bold font';
  line-height: 24px; }

.th #modalOrderDetail .text-header {
  font-size: 1.6rem;
  font-family: 'bold font'; }

.th #modalOrderDetail .od-orderno {
  font-size: 1.4rem; }

.th #modalOrderDetail .subdetailhead, .th #modalOrderDetail .od-detaildesc {
  font-size: 1.2rem; }

.th #modalOrderDetail .od-sumdetail, .th #modalOrderDetail .od-total, .th #modalOrderDetail .od-sumprice, .th #modalOrderDetail .od-totalprice, .th #modalOrderDetail .od-detailprice {
  font-size: 1.2rem; }

.th .draw_message .seecode {
  font-family: 'bold font'; }

.th #modalserial .text-header, .th #modalserial .text-redeem-time {
  font-size: 1.4rem; }

.th .btn-back-to-top {
  text-align: center;
  padding: inherit;
  font-family: 'bold font'; }

.th .title-items {
  font-family: 'bold font'; }

.th .title-page {
  font-family: 'bold font'; }

.th .text-top-title {
  font-family: 'bold font';
  font-size: 1.8rem; }

.th .text-title-form {
  font-family: 'bold font';
  font-size: 1.6rem; }

.th .btn-order {
  font-family: 'bold font';
  font-size: 1.6rem; }

.th .btn_orange {
  font-family: 'bold font' !important;
  font-size: 1.6em !important; }

.th .footer_block .line1, .th .footer_block .btn_register {
  font-family: 'bold font'; }

.th .footer_block .desc {
  font-family: 'bold font' !important; }

.th .text-head-rewards {
  font-family: 'bold font'; }

.th .tab-reward {
  font-family: 'bold font';
  font-size: 1.8rem;
  line-height: 1.8rem; }

.th .txt-lbl-area {
  font-family: 'bold font';
  font-size: 1.6rem; }
  @media (max-width: 575.98px) {
    .th .txt-lbl-area {
      font-size: 1.2rem; } }

.th .btn-area {
  font-family: 'bold font';
  font-size: 1.6rem; }
  @media (max-width: 575.98px) {
    .th .btn-area {
      font-size: 1.2rem; } }

.th .card-body .header {
  font-family: 'bold font'; }

.th #modal-promotion .button-primary {
  font-family: 'bold font'; }

.th .box-total .button-secondary {
  font-family: 'bold font'; }

.th .box-total .button-primary {
  font-family: 'bold font'; }

.th .title-items {
  font-size: 2em; }

.th .tab-reward {
  font-family: 'bold font'; }

.th .btn-redeem {
  font-family: 'bold font' !important; }

.th #modalconfirm .confirm-header {
  font-family: 'bold font';
  font-size: 1.6em; }

.th #modalconfirm .confirm-context {
  font-size: 1.2em; }

.th #modalconfirm .btn-cancel, .th #modalconfirm .btn-confirm {
  font-family: 'bold font';
  font-size: 1.6rem;
  padding: 10px; }

.th .title-items {
  font-size: 2em; }

.th #loginModal .btn-cancel, .th #loginModal .btn-verify {
  font-family: 'bold font' !important; }

.th .button-primary {
  font-family: 'bold font'; }

.th .btn-add-bag, .th .campaignname {
  font-family: 'bold font'; }

.small-placeholder::placeholder {
  font-size: 1rem; }

.small-placeholder::input-placeholder {
  font-size: 1rem; }

.small-placeholder::-webkit-input-placeholder {
  font-size: 1rem; }

.small-placeholder::-moz-placeholder {
  font-size: 1rem; }

.small-placeholder:-ms-input-placeholder {
  /* IE */
  font-size: 1rem !important;
  /* ie ต้องใส่ !important ด้วย */ }

.small-placeholder:-moz-placeholder {
  font-size: 1rem; }

.font-reg {
  font-size: 1rem !important; }

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - (.5rem * 2));
  content: ""; }

@media (min-width: 576px) {
  .modal-dialog-centered::before {
    height: calc(100vh - (1.75rem * 2)); } }