/*============================================================================
   #Webcms
==============================================================================*/
.pr-box.cd-flex.ck-box {
  max-width:1160px;
}








.pr-mgtop-45 {
    padding-top: 45px;
}

.pr-box::-ms-input-placeholder { /* Edge 12-18 */
  color: #9B9DA5;
  color: #9B9DA5;
  
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.pr-box::placeholder {
  color: #9B9DA5;
  color: #9B9DA5;

  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}



.ck-col-left {
  max-width:684px;
  width:60%;
  border-right:0.5px solid #373C4B;
  padding-right:76px;
  padding-bottom: 146px
}

.ck-col-right {
  max-width:676px;
  width:50%;
}


.ck-info-payment {
  width:100%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ck-info-user{
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ck-info-form{
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ck-select-date {
  position:relative;
  width:100%;
  display: flex;
  align-items: center;
  gap: 20px;
}




.ck-select-date,.ck-lable {
  color: #373C4B;
   font-family: 'Gotu', sans-serif !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.ck-note-order {
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ck-input {
   width:100%;
}

.ck-input input {
  padding:14px 20px;
    width:100%;
    height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #FFF;
    z-index:10;
} 


.ck-input {
  position:relative;
}

.ck-open-images {
  
    width: 50px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
}

.ck-add-note {
  margin-top:4px;
  padding-left:20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9B9DA5;
 
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}



.ck-city {
  border-radius: 4px;
  background: #FFF;
  display: flex;
  width: 100%;
  padding: 14px;
  justify-content: center;
  align-items: center;
}

.ck-city {
  color: #373C4B;
  
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.ck-group-input-50 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  
  width:100%;
}



.ck-group-input-50 input {
    padding: 14px 20px;
     max-width: 294px;
    /*width: 100%;*/
   
    height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #FFF;
}


.ck-group-input-100 {
  width: 100%;
}

.ck-group-input-100 input {
      padding: 14px 20px;

    width: 100%;
   
    height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #FFF;
}



select {
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;

}


.ck-group-input-50 select,.ck-input select {
    padding: 0px 20px;
     max-width: 294px;
    width: 50%;
    height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #FFF;
    font-size: 14px !important;
}

.ck-col-gap12 {
  width:100%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ck-input select {
   width: 100% ;
    max-width: 100%;
    position: absolute;
    top: 0px;
    z-index:30;
        background: transparent;
}

.ck-input {
  height:44px;
  
   background: #fff;
  
}


.ck-group-input-50 select option,.ck-input select option {
  color: #9B9DA5;
  
 
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}



.ck-input select:disabled {
  background-color: #EDE6DA;
  color: #9B9DA5;
  cursor: not-allowed;
}

.ck-tille-payment {
  color: #373C4B;
   font-family: 'Gotu', sans-serif !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.ck-des-pay {
  color: #9B9DA5;

  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ck-option-pay {
  width:100%;
  background:#F3F3F3;
  border: 0.5px solid #B6CCE5;
  border-top:0px;
  border-radius:4px;
   border-bottom:0px;
}


.ck-submit-form {
  border-radius: 4px;
  background: #C99C8B;
  width:100%;
  max-width: 608px;
  height: 58px;
  flex-shrink: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}



.ck-submit-form span{
  color: #FFF;


  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}













label.checkbox__label__payment:before {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
     left: 30px;
    content: '';
    background: #fff;
    /*border: 1px solid black;*/
}

.papa input[type="radio"]:checked ~ label:after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 33px;
    content: '';
    background: #fff;
}

.papa input[type="radio"]:checked ~ label:before {
  
    background: #E9C079;
}


label.checkbox__label__payment {
    padding-left: 56px;
    position: relative;
    margin: 0;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.papa input[type="radio"] {
    display: none;
}

.describe-pay {
    display: none;
}

.papa input[type="radio"]:checked ~ .describe-pay {
    display: block;
    padding: 12px;
    text-align: center;
    padding-bottom: 42px;
}



.checkbox__label__payment {
  border-radius: 4px;
  border: 0.5px solid #B6CCE5;
  width:100%;
  background: #F1F7FE;
  height: 58px;
      border-left: 0px;
    border-right: 0px;
}




label.checkbox__label__payment{
  color: #373C4B;

  font-size: 14px;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
  width: 100%;
  display: flex;
  justify-content: space-between;
      padding-right: 16px;
}


.box-form-payment{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}


.describe-pay .ck-group-input-50 input {
    padding: 14px 20px;
    max-width: 254px;
    width: 50%;
    height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 0.5px solid #B6CCE5;
    
    background: #FFF;
}

.describe-pay .ck-group-input-100 input{
  width: 528px;
  border-radius: 4px;
  border: 0.5px solid #B6CCE5;
  
  background: #FFF;
}

.describe-pay  .ck-col-gap12 {
  max-width: 528px;
}

.describe-pay {
    padding: 12px;
    text-align: center;
    padding-bottom: 42px;
}





.ck-col-gap20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ck-item-cart{
  display: flex;
  width: 380px;
  align-items: flex-start;
  gap: 8px;
}





.ck-img-product {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 4px;
  color:#EDE6DA;
  background: #EDE6DA;
}


.cd-flex {
  display:flex;
}

.ck-col-right {
  padding-left:96px;
  max-width:476px;
}

.ck-col-gap10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.ck-col-gap2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 218px;
  gap: 2px;
}



.width-100 {
  width:100%;
}


.ck-col-gap2 span.ck-name-product{
  color: #373C4B;

  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}



.ck-col-gap2 span.ck-title-product{
  color: #373C4B;
 
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}



span.ck-quality {
  color: #373C4B;
 
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

span.ck-price{
  color: #373C4B;

  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}


.ck-quality-price{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: baseline;
}

.ck-discount-code {
  display: flex;
  align-items: flex-start;
  gap: 21px;
}

.ck-discount-code input{
  width: 269px;
  height: 48px;
  flex-shrink: 0;
  padding: 16px 20px;
  border-radius: 4px;
}

.ck-col-gap16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}



.ck-sumit-code {
  font-weight: 500;
  cursor: pointer;
  width: 90px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background:#F5EEE5;
  border-radius:4px;
}

.ck-flex-bw {
  width: 100%;
    display: flex;
    justify-content: space-between;
}

span.ck-text-small {
  color: #373C4B;
 
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

span.ck-text-big {
  color: #373C4B;

 
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

span.ck-text-ship {
  color: #373C4B;


  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0;
}


.box-calender {
  display: none;
  padding: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 4px;
  background: #FFF;
  width:343px;
  position:absolute;
  top:100%;
  z-index: 3;
}



.header-calender {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width:100%;
}
 
.top-header-calender {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.nam-thang {
  color: #373C4B;

  font-size: 14pt;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}


.box-next-month {
  display:flex;
}

.ck-button-calender {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 10px;
}

.hours {
  display: flex;


  gap: 7px;
}


.bottom-header-calender{
  width:100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}



.delivery-hours {
color: #373C4B;
 
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    display: flex;
    align-items: center;
    height: 19px;
}
}


.hours{
  display: flex;
align-items: flex-start;
gap: 8px;
}

.hours-box-items{
  display: flex;
  padding: 2px 2px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  border: 1px solid #373C4B;
  color: #373C4B;

font-family: Work Sans;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0;
}


.text-warning-calender {
  color: #7A640A;
    letter-spacing: 0px;

  font-family: 'Mulish', sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.calendar-weekdays{
  display: flex;
  align-items: center;
  /*gap: -1px;*/
      display: flex;
    align-items: center;
    width: 100%;
    /*justify-content: space-between;*/
}

.box-item-calender{
  display: flex;
  padding: 11px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.weekday-item{
  color: #373C4B;

text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: Work Sans;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.content-calender,.calendar-weekdays {
  width:100%;
}

.calendar-dates {
  display:flex;
  flex-wrap: wrap;
  border-bottom:0.5px solid #D5D4DF;
  border-left:0.5px solid #D5D4DF;
  max-width:305px;
}

.content-calender {
     
    max-width: 302px;
}
.box-item-calender.weekday-item {
     width: 43px;
    border-top: 0.5px solid #D5D4DF; 
}


.calendar-dates .box-item-calender.weekday-item{
  border-top:0.5px solid #D5D4DF;
  border-right:0.5px solid #D5D4DF;
}


.calendar-dates .weekday-item.disible-day {
  background:#F2F3F7;
  color:#D5D4DF;
      cursor: not-allowed;
}



.calendar-dates .weekday-item {
  color: #373C4B;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: 8pt;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor:pointer;
      height: 44px;
}



.ck-select-date{
      cursor: pointer;
}


.hours-box-items.active {
  background:#C99C8B;
  color:#fff;
  border:none;
  border: 1px solid #C99C8B;
}




.ft-box {
  margin-top:2px;
}

.discountCodeSuccess {
  padding-top: 10px;
  text-align: center;
  font-weight: 600;
}

#value-discout-code {
  display:none;
}

.ck-lable {
  font-size:16px;
}

.ck-lable.f24 {
  font-size:24px;
}

div.describe-pay:last-of-type  {
      border-bottom: 0.5px solid #B6CCE5;
}

.cake-note {
      z-index: 99;
  display:none;
    position: absolute;
  top: 42px;
  background: #EDE6DA;
}


@media(min-width:1300px) {
  .ck-col-right .ck-col-gap20 {
    position: sticky;
    top: 116px;
  }
}


@media(max-width:425px) {
  .pr-box.cd-flex.ck-box {
      max-width: 460px;
  }
  
  
 
  .pr-box.cd-flex.ck-box{
    flex-direction: column-reverse;
  }
  
  .ck-col-left{
    max-width: max-content;
    width: 100%;
    padding: 0 13px;
    border-right: none;
    padding-right: 13px;
    padding-bottom: 146px;
  }
  
  /*.ck-group-input-50 input {*/
  /*  padding: 14px 20px;*/
  /*  max-width: 175px;*/
  /*  width: 47%;*/
  /*  height: 44px;*/
  /*  flex-shrink: 0;*/
  /*  border-radius: 4px;*/
  /*  background: #FFF;*/
  /*}*/
  
/*  .ck-group-input-50 select, .ck-input select {*/
/*    padding: 0px 20px;*/
/*    max-width: 100%;*/
/*    width: 47%;*/
/*    height: 44px;*/
/*    flex-shrink: 0;*/
/*    border-radius: 4px;*/
/*    background: #FFF;*/
/*    font-size: 14px !important;*/
/*}*/

.describe-pay .ck-group-input-50 input {
    padding: 14px 20px;
    max-width: 254px;
    width: 47%;
    height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 0.5px solid #B6CCE5;
    background: #FFF;
}

.bottom-header-calender {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.hours {
    display: flex;
    gap: 3px;
}
  
  .ck-col-right {
    padding-left: 13px;
    max-width: 476px;
    margin-bottom: 54px;
    width: 100%;
    border-bottom: 1px solid;
    padding-bottom: 32px;
  }
  
  
  .box-calender {
    width: 319px;
  }
  .hours {
    flex-wrap: wrap;
  }
  
  .box-item-calender.weekday-item {
      width: 42.11111px;
  }
  
  .ck-select-date,.ck-lable.f24,.ck-tille-payment,.ck-submit-form span{
    font-size:16px;
  }
  
  .ck-lable {
     font-size:12px;
  }
    
  .box-item-calender {
    padding: 12px;
  }
  .ck-item-cart,.ck-discount-code {
    width:317px;
  }
  .ck-discount-code input  {
    width:210px;
  }
}