body {
   background: var(--blue-color);
}
/* Thong tin nhan hang - Button Close Add new */

.view-account [class="btn btn-primary btn-sm btn-block"] {
  background: var(--gray-color);
  color: var(--black-color);
}

.view-account [class="btn btn-primary btn-sm btn-block yellow"] {
  background: var(--gray-color);
  color: var(--blue-color) !important;
}

.view-account .dialog .dialog-header {
  background: var(--gray-color);
  color: var(--blue-color);
}

.view-account .box-body form {
  padding: 30px;
}

.view-account .box-body .form-password .form-group {
  padding: 10px;
}

.view-account .box-body .form-password .form-group .input-password input {
  text-align: center;
}

.view-account .box-body .form-password .text-center {
  background: var(--gray-color);
  border-radius: 5px;
  margin: 0 10px;
}

.view-account button.btn.btn-primary.btn-block {
  color: var(--blue-color);
}

.view-account .box-body .form-password .text-center .btn.btn-primary {
  background: none;
  font-weight: 600;
  color: var(--blue-color);
  border: none;
}

/* Thong tin Tai khoan - Button Close Add new */

.view-account .box-body img.img-thumbnail.p-0 {
  width: 120px;
  height: 120px;
}

.view-account .account-link ul li a {
  color: var(--blue-color);
}

/* Dinh dang chung cho class .form-control */

.view-login .form-control,
.view-register .form-control {
  font-size: 12px;
  font-weight: normal !important;
}

/* Dinh dang cho cac id*/

.view-login input[name="username"]::placeholder, 
.view-login input[name="password"]::placeholder {
  color: var(--black-color);
  font-size: 12px;
  font-weight: normal !important;
  font-style: italic !important;
}

/* Group input tren cac view-login, view-register, .view-lostpass */

.view-register input[name="phone"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[id="firstname"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 20%;
  transform: translate(0%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[id="lastname"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[placeholder="Midname"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 20%;
  transform: translate(-80%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[name="username"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 20%;
  transform: translate(0%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[name="email"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 50%;
  transform: translate(-80%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[name="code"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[name="password"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 20%;
  transform: translate(0%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-register input[name="re_password"]:focus {
  /* Box format */
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  top: 0%;
  left: 50%;
  transform: translate(-80%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  color:var(--blue-color);
  text-align: center;
}

.view-login input[name="username"]:focus,
.view-login input[name="password"]:focus,

.view-lostpass input[name="phone"]:focus,
.view-lostpass input[name="username"]:focus,
.view-lostpass input[name="email"]:focus,
.view-lostpass input[name="old_password"]:focus,
.view-lostpass input[name="new_password"]:focus,
.view-lostpass input[name="re_password"]:focus,

.view-account input[name="old_password"]:focus,
.view-account input[name="new_password"]:focus,
.view-account input[name="re_password"]:focus {
 /* Box format */
  display: unset !important ;
  position: static !important;
  position: absolute !important;
  z-index: 99;
  width: 80vw;
  transform: translate(-50%, -50%);
  background-color: #ffe8a9;
  padding: 0pt;
  border: 1px solid var(--gray-color);

 /* Text format */
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: normal ;
  color:var(--blue-color) ;
  text-align: center;
}

/* Format view-lostpass*/

.view-lostpass .box-view .box-header .box-title {
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
}

.view-lostpass input[name="phone"]:focus,
.view-lostpass input[name="username"]:focus,
.view-lostpass input[name="email"]:focus,
.view-lostpass input[name="old_password"]:focus,
.view-lostpass input[name="new_password"]:focus,
.view-lostpass input[name="re_password"]:focus {
  left: 50%;
}

/* ==================================*/

.view-account .box-body label {
  color: var(--white-color);
}
.view-account {
  background: var(--blue-color);
  height: 100%;
}

.view-lostpass .box-body {
  padding: 10%
}

.view-account .box-body {
  padding: 0;
  background: var(--blue-color);
  height: 100%;
}

.view-account .box-view.full.right {
  /* height: calc(100% - 60px); */
}

.view-account .account-header {
  position: relative;
  /* top: 10px; */
  background: var(--blue-color) !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  width: 95%;
  /* height: 280px; */
}

.view-account .form-password {
  margin: 10px 0 0 0;
  padding: 10%; 
}

.view-account .btn-primary:disabled {
  background-color: var(--gray-color) !important;
  border: 1px soid var(--gray-color) !important;
  color: var(--black-color);
  opacity: 1;
}

.view-account .box-address .list-address .address-item {
  color: var(--blue-color);
  border-bottom: none;
  padding: 6px;
  border-radius: 3px;
  margin-bottom: 10px;
  background-color: var(--white-color);
}

.view-account input[name="old_password"]:focus,
.view-account input[name="new_password"]:focus,
.view-account input[name="re_password"]:focus {
  left: 50%;
}

.view-account input[name="old_password"]::placeholder, 
.view-account input[name="new_password"]::placeholder, 
.view-account input[name="re_password"]::placeholder {
  color: var(--black-color);
  font-size: 12px;
  font-weight: normal !important;
  font-style: italic !important;
  Text-align: center;
}

.btn-primary::disabled {
  color: var(--black-color);
  background-color: var(--gray-color);
  border-color: var(--gray-color);
}

.view-account .account-header .user {
  position: relative;
  width: 96%;
  height: 186px;
  margin-left: 2%;
  margin-bottom: 5px;
  left: unset;
  background: transparent;
  padding: 6px;
  border-radius: unset;
  border: unset;
  font-size: 14px;
  font-weight: 600;
}

.view-account .account-header .name {
  height: 120px;
  width: 96%;
  margin-left: 2%;
  background: transparent;
  border-radius: 4px;
  border: 1px solid var(--white-color);
  font-size: 12px;
  font-weight: bold;
  background: var(--gray-color);
}

.view-account .account-header .label-k-return,
.view-account .account-header .label-k-real{
  color: var(--black-color);
  padding-left: 6px;
  padding-right: 6px;
  margin-top: 5px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--black-color);
}

.view-account .account-header .label-k-real{
  color: var(--yellow-color);
  border: 1px solid var(--blue-color);
  border-radius: 4px;
  padding-left: 40px;
  padding-right: 40px;
  background: var(--blue-color);
}
.view-account .account-header .col-5.k-return div{
  color: var(--orange-color);
  border-bottom: 1px dotted var(
  --orange-color);
}

.view-account .account-header .col-5.k-real div{
  color: var(--blue-color);
  border-bottom: 1px dotted var(--blue-color);
}

div.account-header div.name div.col-5.k-real div.col-2._reload-data{
  position: absolute !important;
  left: -29px;
  border-bottom: none;
  color: transparent;
  margin: unset !important;
}

div.account-header div.name div.col-5.k-real div.col-2._reload-data .btn.btn-info.btn-sm{
  border-radius: 20px;
}

.view-account .account-header .col-2.k-return div{
  color: var(--black-color);
  border-left: 1px dotted var(--black-color);
  border-right: 1px dotted var(--black-color);
}

.view-account .account-header .col-6.link-account-btn{
  margin-top: 0;
  text-align: center;
  width: 40%;
  border: 1px solid;
  border-radius: 4px;
  padding: 4px 0;
}

.view-account .account-header .col-6.link-account-btn a{
  width: 80px;
  background: var(--white-color);
  color: var(--blue-color);
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}

.view-account .account-link {
  /* position: relative; */
  /* top: 330px; */
  background: var(--white-color);
  padding: 5px;
  border-radius: 5px;
  width: 94%;
  margin-left: 3%;
  margin-right: auto;
  border: 1px solid var(--white-color);
  font-size: 10px;
  margin-bottom: 10px;
}

.view-account .account-link ul li + li {
  border-top: none;
  border-bottom: 1px solid var(--gray-color);
}

.dialog .dialog-content {
  border-radius: 5px;
  width: 90%;
  overflow: hidden;
}

.view-account .account-header .user .avatar {
  width: 170px;
  height: 170px;
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  position: absolute;
  right: 6px;
}

.view-account .account-header .user .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  margin-bottom: 0;
}

.view-account .account-header .user .name {
  float: left;
  width: calc(100% - 150px);
  font-size: 13px;
  color: var(--blue-color);
  text-align: right;
  padding: 6px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 16px;
  background-color: var(--gray-color);
  box-sizing: border-box;
  border-radius: 5px;
  border: 1.5px solid var(--white-color);
}

.view-account .account-header .user .name div {
  font-size: 13px;
}

.view-account .account-header .user .name div.mt-2 {
  align:left;
}

/* ======== Quan ly ban hang Lich su don hang ==========*/
.view-saler-main .box-header .box-title{
  width: 75%;
}

.view-account div.box-body .list-order,
.view-account div.box-body .order-detail{
  background: var(--white-color);
  color: var(--black-color);
  border-radius: 4px;
  margin: 6px;
}
.view-saler-main .box-body .list-order,
.view-saler-main .box-body .order-detail{
  background: var(--white-color);
  border-radius: 4px;
  color: var(--black-color);
}

/* ========= .shop-cart | Gio hang ========*/

.view-cart .shop-cart {
  padding: unset;
  padding-bottom: unset;
  background: var(--blue-color);
  height: auto;
  min-height: 100%;
}

.view-cart .shop-cart .cart-body {
  height: auto;
  position: relative;
  background: var(--blue-color);
}

.view-cart .shop-order {
  padding: unset;
  padding-bottom: unset;
}

.view-cart .shop-order .cart-body {
  height: auto;
  position: relative;
}

.view-cart .shop-cart .list-product {
  font-size: 100%;
  margin-top: 38px;
}
.view-cart .shop-order .list-product {
  margin-top: 30px;
  background: var(--blue-color);
  margin-left: -8px;
  padding-left: 5px;
  margin-right: -8px;
  padding-right: 5px;
  border: 2px soild var(--blue-color);
  border-radius: 4px;
}

.view-cart .shop-cart .list-product .saler {
  background: var(--gray-color);
  border-radius: 4px;
  margin-top: 1px;
  margin-bottom: 2px;
  padding-right: 4px;
  border-bottom: 1px solid var(--gray-color);
}

.view-cart .shop-order .list-product .saler {
  position: relative;
}

.view-cart .shop-order .list-product .saler .name {
  height: 26px;
  margin-bottom: 8px;
}

.view-cart .shop-order .list-product .saler .name b {
  position: absolute;
  /* border: 1px solid var(--orange-color); */
  background: none;
  border-radius: 4px;
  padding: 4px 4px 4px 28px;
  font-weight: bold;
  margin-top: 6px;
  color: var(
  --white-color);
}

.view-cart .shop-order .list-product a.check.red {
  position: absolute;
  font-size: 150%;
  padding: unset;
  z-index: 1;
  margin-left: 6px;
  margin-top: 5px;
  color: var(--white-color) !important;
}

.view-cart .shop-order .cart-body div strong.red {
  background: var(--blue-color);
  padding: 5px;
  border: 1px solid var(--white-color);
  border-radius: 4px;
  color: var(--white-color) !important;
}

.mb-1.pb-1.border-bottom {
  margin-top: 10px;
}

.view-cart .shop-order .cart-body .mb-1 .mb-2 {
  margin-top: 6px;
}

.view-cart .shop-order .cart-body .title-total strong {
  background: var(--yellow-color);
  border-radius: 5px;
}
.view-cart .shop-order .cart-body span.float-right.d-flex.align-items-center {
  font-weight: 700;
}
.view-cart .shop-order .cart-body label.red.mb-0.d-inline-flex.align-items-center.float-right {
  font-weight: 600;
}
.view-cart .shop-order .cart-body label.red.mb-0.d-inline-flex.align-items-center.float-right span {
  color: var(--red-color);
  font-weight: 700;
}

.view-cart .shop-order .cart-body label.red.mb-0.d-inline-flex.align-items-center.float-right span:last-of-type {
  color: var(--blue-color);
}

.view-cart .shop-cart .list-product .product-item,
.view-cart .shop-order .list-product .product-item {
  border: 1px dotted var(--blue-color);
  margin-left: 10px;
  padding: 6px 6px 4px 6px;
  border-radius: 4px;
}

.view-cart .shop-cart .list-product .product-item {
  width: calc(100% + 38px);
}

.view-cart .shop-order .list-product .product-item {
  width: calc(100% - 12px);
}

.view-cart .shop-cart .list-product .product-item .delete a, 
.view-cart .shop-order .list-product .product-item .delete a {
  font-size: 8px;
  padding: 5px 6px 6px 6px;
  margin-right: 10px;
  margin-top: -20px;
}

.view-cart .shop-cart .list-product a.check {
  padding-left: 5px;
  margin-top: 5px;
}

.view-cart .shop-order .list-product a.check {
  font-size: 150%;
  padding-left: 5px;
}
.view-cart .shop-cart .list-product .saler .name {
  margin-top: 4px;
  margin-left: -3px;
}

.view-cart .shop-cart .list-product .saler .control a.btn.btn-primary.btn-xs,
.view-cart .shop-order .list-product .saler .control a.btn.btn-primary.btn-xs {
  font-weight: 800;
  background-color: var(--yellow-color);
  border-color: var(--blue-color);
  color: var(--blue-color);
}

.view-cart .shop-cart .list-product .product-item a.check,
.view-cart .shop-order .list-product .product-item a.check {
  margin-top: -18px;
  height: 40px;
  margin-left: 10px;
  font-size: 150%;
  padding: 10px;
  z-index: 1;
}

.view-cart .shop-cart .list-product .product-item .delete,
.view-cart .shop-order .list-product .product-item .delete {
  padding-top: 20px;
}

.view-cart .shop-cart .list-product .product-item div.flex-grow-1.d-flex,
.view-cart .shop-order .list-product .product-item div.flex-grow-1.d-flex {
  margin-left: -50px;
  margin-top: 6px;
}

.view-cart .shop-cart .list-product .product-item .image,
.view-cart .shop-order .list-product .product-item .image {
  width: 62px;
  height: 47px;
  border: none;
  border-radius: 3px;
  padding-top: 1px;
  margin-top: 10px;
}

.view-cart .shop-cart .list-product .product-item .image img,
.view-cart .shop-order .list-product .product-item .image img {
  width: 62px;
  height: 47px;
  object-fit: fill;
  border-radius: 3px;
  background: none;
}

.view-cart .shop-cart .list-product .product-item .info,
.view-cart .shop-order .list-product .product-item .info {
  position: relative;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  font-size: 100%;
  padding: 0;
  margin-top: -10px;
}

.view-cart .shop-cart .list-product .product-item .info {
  margin-right: 55px;
}
.view-cart .shop-order .list-product .product-item .info {
  margin-right: 10px;
}

.view-cart .shop-cart .list-product .product-item .info h3,
.view-cart .shop-order .list-product .product-item .info h3 {
  font-style: italic;
  line-height: 1.25;
  min-height: 24px;
  margin-bottom: 2px;
  margin-left: 6px;
}

.view-cart .shop-cart .product-item .info .price {
  color: unset;
}

.view-cart .shop-cart .product-item .info .price,
.shop-cart .list-product .product-item .info .price,
.shop-order .list-product .product-item .info .price {
  font-weight: 600;
  text-align: right;
}

.view-cart .shop-cart .list-product .product-item .info .price .red,
.view-cart .shop-order .list-product .product-item .info .price .red,
.shop-cart .list-product .product-item .info div.price span:last-child,
.view-cart .shop-order .list-product .product-item .info div.price span:last-child {
  background: var(--gray-color);
  border-radius: 4px;
  padding: 1px 1px 1px 5px;
  border: 1px solid var(--blue-color);
  font-weight: 800;
}

.view-cart .shop-cart .list-product .product-item .info .price .price-origin,
.view-cart .shop-order .list-product .product-item .info .price .price-origin {
  color: var(--black-color);

  font-size: 12px;
}
.view-cart .shop-cart .list-product .product-item .info .k3-k4 .red,
.view-cart .shop-order .list-product .product-item .info .k3-k4 .red {
  font-weight: 800;
}

.view-cart .shop-cart .cart-header span.float-right,
.view-cart .shop-order .cart-header span.float-right {
  margin-right: 10px;
  font-size: 11.5px;
  text-align: right;
}

.view-cart .shop-cart .list-product .product-item .info .change-number,
.view-cart .shop-order .list-product .product-item .info .change-number {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 120%;
  /* margin-right: -5px; */
}
/* ==== Seller + Pro & Ser + Gio hang: Icon + button-share ====*/

.list-product .product-item .image a.btn-share,
.list-product .product-item .image a.icon-cart {
  position: absolute;
  height: 25px;
  width: 25px;
  text-align: center;
  border-radius: 50%;
  background: var(--blue-color);
  color: var(--white-color);
  border: 1px solid var(--gray-color);
  padding-right: 3px;
}

.list-product .product-item .image a.btn-share {
  left: 2px;
  bottom: 2px;
  line-height: 24px;
}

.list-product .product-item .image a.icon-cart {
  right: 2px;
  bottom: 2px;
  line-height: 25px;
}

.list-product .product-item .saler .name {
  font-style:italic;
  font-size: 9px;
}

.list-product .product-item .info .col2 .price .price-origin .money {
  color: var(--black-color);
}

.shop-detail .product-info .k3,
.list-product .product-item a,
.list-product .product-item .saler .name,
.list-product .product-item .info .col2 .price .price-origin .label,
.list-product .product-item .info .col2 .price .price-origin .money {
  font-weight: 400;
}

.list-product .product-item a {
    text-overflow: ellipsis;
    font-size: 12px;
}

/* ============ Chi tiet san pham ============*/

.box-view.p0.full.shop-detail.right .box-body {
  height: calc(100% - 88px);
}

.box-view.p0.full.shop-detail.right .product-info {
  border-left: 6px solid var(--blue-color);
  border-right: 6px solid var(--blue-color);
  margin-bottom: 0;
}
.box-view.p0.full.shop-detail.right .btn-fix {
  background: var(--blue-color);
  padding: 6px 0 7px 0;
  border-top: 1px solid var(--white-color);
}
.shop-detail .product-info .image {
  margin-bottom: 0;
}

.shop-detail .product-info #product_image {
  border-radius: 5px;
  border: 1px solid var(--gray-color);
}

.shop-detail .product-info .image img {
  width: 100vw;
  height: 71vw;
  object-fit: fill;
  border-radius: 4px;
}

.shop-detail .product-info .col-6:first-child {
  flex: 0 10 40%;
  max-width: 40%;
}

.shop-detail .product-info .col-6:last-child {
  flex: 0 0 60%;
  max-width: 60%;
}

.shop-detail .product-info .k3 div:first-child {
    width: 70%;
}

.shop-detail .product-info .k3 {
  font-size: 13px;
  color: var(--blue-color);
}

.shop-detail .product-info .price {
    margin-right: unset;
    font-size: 12px;
}

.shop-detail .product-info .price b {
    font-size: 14px;
}

.shop-detail .product-info .price .price-origin {
    text-decoration: unset;
    font-size: 12px;
    font-weight: 200;
}

.shop-detail .product-info .price .price-origin .money {
  color: var(--black-color);
}

.shop-detail .product-info .price .price-origin .label {
  text-decoration: unset;
}

.shop-detail .product-info .price .price-origin .label:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f81d" " ";
}

.shop-detail .product-info .sold {
  display: none;
}

.shop-detail .product-info div.saler .group-salerinfo {
  font-size: 12.5px;
  margin-top: 4px;
  color: var(--red-color);
  padding-bottom: 6px;
  font-weight: 400;
  font-style: italic;
}

.shop-detail .product-info .price .price-origin .money {
  color: var(--black-color);
  font-weight: 200;
}

.shop-detail .product-info .change-number {
  color: var(--blue-color);
}
.shop-detail .product-info .title,
.shop-detail .product-info .desc {
  font-size: 16.8px;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 6px;
  color: var(--blue-color);
  font-style: italic;
  font-stretch: 75%;
}

.shop-detail .product-info .desc {
  /* Line phan chia gia sp va mo ta */
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 2px;
  font-weight: 300;
  font-stretch: 75%;
}

.view-saler-page .list-product .product-item .info.clearfix {
  padding: 0 5px 0 5px;
}

/* ========== view-main Products & Services ===========*/

.list-product .product-item .info .col1,
.list-product .product-item .info .col2{
  display: block;
  width: 100%;
}

.view-main .list-product .product-item,
.view-cat .list-product .product-item,
.view-group .list-product .product-item,
.view-search .list-product .product-item {
  display: flex;
  flex-direction: column;
  height: calc(100% - 10px);
  border: 1px solid var(--gray-color);
  border-radius: 5px;
  margin-bottom: 10px;
  background: var(--white-color);
  overflow: hidden;
  font-size: 14px;
}

.view-main .list-product .product-item .image,
.view-cat .list-product .product-item .image,
.view-group .list-product .product-item .image,
.view-search .list-product .product-item .image {
  position: relative;
  border: 1px solid var(--white-color);
  background: none;
  border-bottom: 1px solid var(--gray-color);
  border-radius: 5px 5px 0 0;
}

.view-main .list-product .product-item .image img,
.view-cat .list-product .product-item .image img,
.view-group .list-product .product-item .image img,
.view-search .list-product .product-item .image img {
  height: 35vw;
  border-radius: 5px 5px 0 0;
  object-fit: fill;
}

.view-main .list-product .product-item .info {
  padding: 1px 4px 4px;
}

.list-product .product-item .info .col2 .price b,
.list-product .product-item .info .col1 .k3 b{
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.75px;
  font-stretch: 75%;
}

.list-product .product-item .info .col2 .price .price-origin {
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.75px;
  font-stretch: 75%;
  word-spacing: 0.75px;
}

.list-product .product-item .info .price-origin {
  margin-left:unset;
  padding-left: 10px;
}

/* ======= Slider Home / Products and Servie=ces ==*/

.view-home,
.view-main {
  height: calc(100% - 60px);
}

.view-home #slider_main,
.view-main #slider_main {
  width: 100% !important;
  height: calc(75vw - 15px) !important;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.view-home #slider_main .swiper-slide,
.view-main #slider_main .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  background: var(--white-color);
  border: 1px solid var(--gray-color);
  border-radius: 5px;
}

.view-home .thongbao-num{
  margin: unset;
  padding: 1px 3px 4px 3px;
}

.view-home .chuong .thongbao-num{
  left: 4px;
}

.view-home .chuong .thongbao-num-nologin{
  left: unset;
  padding: 0px 4px;
}
       /*====== img trong slider Home / Products & Servie=ces  =====*/

.view-home #slider_main .swiper-slide img,
.view-main #slider_main .swiper-slide img {
  width: 100% !important;
  height: calc(75vw - 16.5px) !important;
  object-fit: fill;
  max-width: none;
  max-height: none;
  border-radius: 5px;
}

/* ======= Slider Home Left-Top #slider_tab_0 ==*/

.view-home .slider-swiper .wall .wall-col #slider_tab_0 {
  width: 100% !important;
  height: calc(37.5vw - 11.25px) !important; /* Cong thuc scale 4:3 */
  border: 1px solid rgba(234, 234, 234, 0.25);
  border-radius: 5px;
}

.view-home .slider-swiper .wall .wall-col #slider_tab_0 .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

.view-home .slider-swiper .wall .wall-col #slider_tab_0 a img {
  width: calc(50vw - 15px) !important;
  height: calc(37.5vw - 11.25px) !important; /* Cong thuc scale 4:3 */
  object-fit: fill;
  max-width: none;
  max-height: none;
  border-radius: 5px;
}

.view-list #slider_main {
  height: calc(66.67vw - 21.33px) !important; /* Cong thuc scale 3:2 */
}
.view-list #slider_main .swiper-slide img {
  height: calc(66.67vw - 21.33px) !important; /* Cong thuc scale 3:2 */
}

/* ======= Slider Home Left-Top #slider_tab_1,2,3 ==*/

.view-home .slider-swiper .wall .wall-col #slider_tab_1,
.view-home .slider-swiper .wall .wall-col #slider_tab_2,
.view-home .slider-swiper .wall .wall-col #slider_tab_3 {
   width: 100% !important;
  height: calc(37.5vw - 11.25px) !important; /* Cong thuc scale 4:3 */
  border: 1px solid rgba(234, 234, 234, 0.25);
  border-radius: 5px;
}

.view-home .slider-swiper .wall .wall-col #slider_tab_1 .swiper-slide,
.view-home .slider-swiper .wall .wall-col #slider_tab_2 .swiper-slide,
.view-home .slider-swiper .wall .wall-col #slider_tab_3  .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

.view-home .slider-swiper .wall .wall-col #slider_tab_1 a img,
.view-home .slider-swiper .wall .wall-col #slider_tab_2 a img,
.view-home .slider-swiper .wall .wall-col #slider_tab_3 a img {
  width: calc(50vw - 15px) !important;
  height: calc(37.5vw - 11.25px) !important; /* Cong thuc scale 4:3 */
  object-fit: fill;
  max-width: none;
  max-height: none;
  border-radius: 5px;
}

/*.view-home .slider-swiper .wall .wall-col:first-child:before {
  font-family:"Font Awesome 5 Pro";
  font-size: 30px;
  content: " ""\f0e9" " . " "\f464" " . " "\f0f3";
  color: var(--blue-color);
  border: 1px solid var(--red-color);
  display: block;
  text-align: center;
  background: var(
  --yellow-color);
  border-radius: 5px;
  padding-top: 6px;
  margin-bottom: 6px;
}*/

.wrapper .menu-footer .fa.fa-store {
    background: #ff00c8;
    position: relative;
    border-radius: 100%;
    width: 12px;
    height: 14px;
    bottom: -6px;
}

.wrapper .menu-footer .fa.fa-store:before {
    content: "\f4c9";
    font-size: 24px;
    position: relative;
    vertical-align: sub;
    bottom: 8px;
    left: -6px;
}

.wrapper .menu-footer .router-link-exact-active.router-link-active div:last-child {
   font-weight: 700;
  }

.fa-home:before {
    content: "\f54f";
}

.view-home .menu-tab,
.view-main .menu-tab {
  padding: 5px 0 8px 0;
}

.view-home .menu-tab.fixed,
.view-main .menu-tab.fixed {
  padding: 5px 10px 5px 10px;
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
  border-top: 1px solid rgba(234, 234, 234, 0.25);
}

.view-main .menu-trademark {
  margin-top: 0px;
  margin-bottom: 8px;
}

.view-group .view-main .menu-trademark,
.view-cat .view-main .menu-trademark {
  margin-bottom: 8px;
  margin-top: 8px;
}

/*======== Brand of P&S ===========*/
.view-main .menu-trademark #slider_trademark div.swiper-slide a {
  text-align: center;
  font-size: 18px;
  background: var(--white-color);
  border: 1px solid var(--gray-color);
  border-radius: 5px;
  height: 8.75vw;
}
  /*====== img trong slide in Brand of P&S  =====*/
.view-main .menu-trademark #slider_trademark div.swiper-slide a img {
  height: 100%;
  width: 100%;
  border: none;
  object-fit: fill;
  vertical-align: middle;
  border-radius: 5px;
} 

.view-home .slider-swiper .wall .wall-col .image-rest {
  border-radius: 5px;
}

/* ======= Saler Page: Slider; Icon About, Icon Cart ==*/

a.icon-cart .num {
  z-index: 4;
}

.view-saler-page #slider_image {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 3px;
  height: calc(75vw - 15px) !important;
  border-radius: 5px;
}

.view-saler-page .list-product .product-item .image img {
    object-fit: fill;
}

/*====== img slider of saler-page  =====*/

.view-saler-page .swiper-container .swiper-slide img {
  border-radius: 5px;
  width: 100%;
  height: calc(75vw - 15px) !important;
  object-fit: fill;
}

.view-saler-page .about .text .fa-chevron-up:before {
  font-family: "Font Awesome 5 Pro";
  position: relative;
  content: "\f078";
  display: flex;
  padding: 0px 10px 10px 10px;
  margin-top: 0px;
  z-index: 2;
}

/*.news-detail .box-body div.content-html:before,
.shop-detail .box-body div.content-html:before,
.view-saler-page .about .text .fa-chevron-down:before,
#aboutus .box-body div.content-html:before {
 font-family: "Font Awesome 5 Pro";
  content: "\f0ca";
  right: 50px;
  background-color: rgba(255,193,7,0.5);
}*/

.view-saler-page .about .text .fa-chevron-down:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f077";
  right: 20px;
  background-color: rgba(255,193,7,0.3);
}

#aboutus .box-body div.content-html:before,

/*.news-detail .box-body div.content-html:before,
.shop-detail .box-body div.content-html:before,*/

.view-saler-page .about .text .fa-chevron-down:before,
.view-saler-page .about .text .fa-chevron-down:after {
  color: var(--blue-color);
  border-radius: 6px;
  border: 0.5px solid var(--blue-color);
  bottom: 10px;
  padding: 3.75px 6px 6.5px 6px;
  position: fixed;
  z-index: 2;
}

#aboutus .box-body div.content-html:before,

/*.news-detail .box-body div.content-html:before,
.shop-detail .box-body div.content-html:before*/ {
  right: 20px;
  padding: 2px 6px;
}

.shop-detail .box-body div.content-html:before {
  bottom: 60px;
}

.view-saler-page .product-service .text a.icon-cart .far.fa-shopping-cart:before {
 font-family: "Font Awesome 5 Pro";
  content: "\f07a";
  font-size: 16px;
  position: relative;
  color: var(--yellow-color);
  right: 10px;
}

.view-saler-page .product-service .text a.icon-cart.has-num .fa-shopping-cart:before {
  font-family:"Font Awesome 5 Pro";
  position: absolute;
  display: block;
  content: "\f07a";
  color: var(--yellow-color);
  font-size: 16px;
  right: 10px;
  z-index: 3;
  top: 10px;
}

.view-saler-page .product-service .text a.icon-cart.has-num {
  display: block;
  position: fixed;
  z-index: 6;
  padding: 0px;
  bottom: 10px;
  left: 20px;
  width: 30px;
  height: 30px;
  background: var(--blue-color);
  border-radius: 50%;
}

.view-saler-page .list-product .product-item .info.clearfix {
  padding: 0 5px 0 5px;
}

.view-saler-page .list-product .product-item .saler {
  padding: 0 5px 5px 8px;
}

.view-saler-page .about .content-html,
.product-info .content-html {
  font-size: 16.8px;
  font-weight: 200;
  color: var(--black-color);
}

.menu-tab.fixed {
  border-top: 1px solid var(--white-color);
}

/* ============== Maps =========*/

.view-map #map {
  width: 100%;
  height: calc(100% + 60px);
}

.view-map .box-view .box-body {
  height: calc(100% + 60px);
  padding: 0;
  overflow: auto;
}

/* ====== Gioi thieu - view-list ======*/

.view-list #aboutus .box-body {
  background: var(--blue-color);
}

.view-list #aboutus .box-body div.p-3 {
  background: var(--white-color);
  padding: 0px 10px 10px !important;
  border-radius: 5px;
  color: var(--blue-color);
  font-size: 16.8px;
  font-weight: 200;
  margin-top: 10px;
}
.view-list #aboutus .box-body div.p-3 .title {
  margin-top: 5px;
  margin-bottom: 10px;
  padding-top: 10px;
}
/* ======= Slider Gioi thieu ==*/

.view-list .page-main #page_image {
  width: calc(100% - 10px) !important;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.view-list .page-main #page_image .swiper-slide {
}

  /*====== img trong slider Gioi thieu  =====*/

.view-list .page-main #page_image img {
  border-radius: 5px;
  width: 100%;
  height: calc(75vw - 15px) !important;
  object-fit: fill;
  max-width: none;
  max-height: none;
}

.view-list .news-main {
  background: var(--blue-color);
  width: calc(100% - 10px);
  height: unset;
  margin-top: 2px;
}

.view-list .news-main .view-main {
  margin-left: 5px;
}

.view-list .news-main .list-news {
  padding: 0 0 0 10px;
}

.view-list .news-main .news-item {
  padding: 5px;
  margin-bottom: 5px;
}

.view-list .news-main .news-item .row .col-3 {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  max-width: 100%;
  height: calc((100vw - 22px) * 0.1875);
  margin-top: auto;
  margin-bottom: auto;
}

.view-list .news-main .news-item .row .col-3 .image img {
  height: 100%;
  width: 100%;
  object-fit: fill;
  margin-top: auto;
  margin-bottom: auto;
}

.view-saler-main .tab-content .tab-content-body .card.allow .card-header,
.view-saler-main .tab-content .tab-content-body .card.noallow .card-header,
.view-list .news-main .news-item .row .col-9 .title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--blue-color);
  line-height: unset;
  min-height: unset;
}
.view-list .news-main .list-news .news-item .view,
.view-list .news-main .list-news .news-item .time,
.view-list .news-main .list-news .news-item .time {
  font-size: 8px;
  font-style: italic;
  position: absolute;
}

.view-list .news-main .list-news .news-item .view {
  right: 10px;
  bottom:-1px
}

.view-list .news-main .list-news .news-item .time {
  right:10px;
  bottom:11px;
}

.view-list .news-main .list-news .news-item .saler-name {
  left: 5px;
  bottom:8px;
  text-decoration-line: underline;
  color:var(--blue-color);
}
.view-list .news-main .search-bar {
   z-index: 101;
   position: sticky;
   top: 0px;
   background: var(--blue-color);
   padding-top: 6px;
  /* border-top: 1px solid rgba(196, 196, 196, 0.6);*/
}

.view-money-history .apply-tab {
  z-index: 101;
  position: sticky;
  top: 0px;
  height: 36px;
  /* background:var(--red-color); */
  background: rgba(2,30,137,0.5);
  padding-top: 8px;
  border-radius: 10px;
  /* border: 1px solid rgba(196, 196, 196, 0.6); */
}

.view-money-history .box-view .box-body {
    padding: 0 10px 10px;
}

/*===== Chi tiet eNews / Slider =====*/

#news_image {
  width: calc(100% - 0px) !important;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}

#news_image .swiper-slide {
  width: 100% !important;
}

  /*====== img trong slider Chi tiet eNews / Slider =====*/

#news_image img {
  border-radius: 5px;
  width: 100%;
  height: calc(75vw - 15px) !important;
  object-fit: fill;
  max-width: none;
  max-height: none;
}

/* ===== 04 Trang tren menu ====== */

.view-list #aboutus, 
.view-list #rule,
.view-list #help,
.view-list #proshiparea,
.view-list #browsead,
.view-list #learntok4,
.view-list #bai-viet {
  background: var(--white-color);
  border-left: 5px solid var(--blue-color);
  border-right: 5px solid var(--blue-color);
  border-bottom: 5px solid var(--blue-color);
  border-radius: 5px;
}

 div.title {
  color: var(--blue-color);
}

 .news-detail div.content-html {
  font-size: 16.8px;
  font-weight: 200;
  text-align: justify;
  color: var(--black-color);
}
 .news-detail div.content-html a[href] {
   font-size: 13.6px;
   font-style:italic;
   color: var(--orange);
   padding-left:10px;
 }

.news-detail div.content-html a[href]:before {
  font-family: "Font Awesome 5 Pro";
  content:"\f4be";
  padding-right: 6px;
 }

.view-business .chatvithai {
  background: var(--white-color);
}

.box-view.p0.right .box-body {
  height: calc(100% - 38px);
  width: 100%;
}

.box-view.p0.right .box-body .shop-cat .list-cat ul {
  background: var(--blue-color);
}

.box-view.p0.right .box-body .shop-cat .list-cat ul li {
  padding: 0 5px;
}

.box-view.p0.right .box-body .shop-cat .list-cat ul li a {
  color: var(--red-color);
  padding: 3px 5px;
  background: var(--white-color);
  margin-bottom: 6px;
  border-radius: 3px;
}

.box-view.p0.right .box-body .shop-cat .list-product {
  background: var(--blue-color);
}

/*===== Slide, img 4:3 for new page Tin tuc ====*/

#bai-viet .image {
  width: 100%;
  height: 75vw;
}
#bai-viet .swiper-container {
  width: 100%;
  height: 100%;
}

#bai-viet .swiper-container .swiper-slide a {
  width: 100%;
  height: 100%;
}

#bai-viet .swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  max-width: none;
  max-height: none;
}

#browsead .image {
  width: 100%;
  height: 75vw;
}
#browsead .swiper-container {
  width: 100%;
  height: 100%;
}

#browsead .swiper-container .swiper-slide a {
  width: 100%;
  height: 100%;
}

#browsead .swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  max-width: none;
  max-height: none;
}

/* === Menu Products & Services ===*/

.view-cat .box-body,
.view-group .box-body,
.view-search .box-body {
  background: var(--blue-color);
}

.box-view.view-search.full.right {
  background: var(--blue-color);
  height: calc(100% - 60px);
}

.box-view.view-search.full.right .box-body {
    position: absolute;
    z-index: 101;
    height: calc(100% - 38px);
}

.box-view.view-search.full.right .list-product .product-item h3 {
  display: none;
}

.view-cat .box-view,
.view-group .box-view {
  background: var(--white-color);
  color: var(--blue-color);
  border-left: 5px solid var(--blue-color);
  border-right: 5px solid var(--blue-color);
  border-bottom: 5px solid var(--blue-color);
  border-radius: 5px;
  font-size: 120%;
  text-align: justify;
}

.view-cat .box-view .box-title,
.view-group .box-view .box-title {
    padding-left: 48px;
    padding-right: 48px;
    border: none;
}

.view-cat .box-view .box-header,
.view-group .box-view .box-header {
  width: calc(100% + 10px);
  margin-left: -5px;
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
  border-top: 1px solid rgba(234, 234, 234, 0.25);
}

.view-cat .shop-cat .view-main content,
.view-group .shop-group .view-main content {
  padding: 0 5px;
}

.view-cat .view-main #slider_main .swiper-slide,
.view-group .view-main #slider_main .swiper-slide {
  width: 100% !important;
}
.view-cat .view-main #slider_main .swiper-slide img,
.view-group .view-main #slider_main .swiper-slide img {
  width: 100% !important;
  max-width: none;
  max-height: none;
}

.view-cat .box-view.p0.right .box-body,
.view-group .box-view.p0.right .box-body {
  height: calc(100% - 38px);
  width: 100%;
}

.view-cat .box-view.p0.right .box-body .shop-cat .list-cat,
.view-group .box-view.p0.right .box-body .shop-group .list-product {
  background: var(--blue-color);
  border-top: 1px solid var(--blue-color);
}

.view-cat .box-view.p0.right .box-body .shop-cat .list-cat ul {
  background: var(--blue-color);
}

.view-cat .box-view.p0.right .box-body .shop-cat .list-cat ul li {
  padding: 0 5px;
}

.view-cat .box-view.p0.right .box-body .shop-cat .list-cat ul li a {
  color: var(--blue-color);
  padding: 3px 5px;
  background: var(--yellow-color);
  margin-bottom: 6px;
  border-radius: 3px;
}

.view-cat .box-view.p0.right .box-body .shop-cat .list-product,
.view-group .box-view.p0.right .box-body .shop-group .list-product {
  background: var(--blue-color);
  padding: 0 5px !important;
}

.view-group .shop-group .list-product {
  background: var(--blue-color);
  padding: 0 10px !important;
}

.view-cat .box-view.p0.right .box-body .shop-cat .list-product button,
.view-group .shop-group .list-product button {
  margin-bottom: 5px;
  color: var(--blue-color);
  background: var(--yellow-color);
  border-color: var(--yellow-color);
}

.box-view .box-header {
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
  border-top: 1px solid rgba(234, 234, 234, 0.25);
  background: var(--blue-color);
}

.view-home header,
.view-main header {
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
  border-top: 1px solid rgba(234, 234, 234, 0.25);
}

.view-home header em.fa.fa-list-ul,
.view-main header em.fa.fa-list-ul {
  padding-left: 7px;
}

.view-home header em.fa.fa-search {
  padding-right: 7px;
}

.view-main header .text-right {
  padding-right: 10px;
}

.view-main header span {
  width: 75px;
}

.view-main header .icon-cart {
    padding-left: 8px;
}

.view-cart .shop-cart .cart-header,
.view-cart .shop-order .cart-header {
  position: fixed;
  width: 100%;
  font-size: 13px;
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
  border-top: 1px solid rgba(234, 234, 234, 0.25);
  z-index: 1;
}

.view-cart .shop-cart .cart-header .fa.fa-arrow-left,
.view-cart .shop-order .cart-header.fa.fa-arrow-left {
  color: var(--white-color);
  padding-left: 10px;
  padding-right: 5px;
}

.view-list #aboutus .box-header {
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
  width: calc(100% + 10px);
  margin-left: -5px;
}

.wrapper .menu-footer {
  position: fixed;
  border-top: 1px solid rgba(234, 234, 234, 0.25);
  border-bottom: 1px solid rgba(234, 234, 234, 0.25);
}

.menu-footer.menu-footer-view-cat,
.menu-footer.menu-footer-view-list,
.menu-footer.menu-footer-view-map,
.menu-footer.menu-footer-view-cart,
.menu-footer.menu-footer-view-login,
.menu-footer.menu-footer-view-group,
.menu-footer.menu-footer-view-account {
  display: none !important;
}

/* ============ Index gio hang ============*/

.menu-footer ul li a span {
  font-size: 12px;
}

/* ============== More Menu =========*/

.menu-footer .more ul li a[href="/proshiparea"],
.menu-footer .more ul li a[href="/browsead"],
.menu-footer .more ul li a[href="/learntok4"] {
  /*opacity: 0.4;
  pointer-events: none;*/
}

.view-cat .view-main .text-right,
.view-group .view-main .text-right {
    padding-right: 5px;
}

.view-group .box-header a.icon-cart,
.view-cat .box-header a.icon-cart,
.view-list .box-header a.icon-cart {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 14px;
}

.view-search .box-body .input {
  margin-top: -5px;
}

.view-search .box-body .input input {
  width: calc(100% - 20px);
  position: fixed;
  z-index: 1;
  background: #cafeDa;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-color);
  font-family: Roboto;
  text-align: center;
}

.view-search .box-body .input input:focus {
  background: #cafeA3;
  font-size: 18px;
}

.view-search .box-body .input input::placeholder {
  font-weight:normal;
  font-size: 14px;
}

.view-search .box-body .list-product {
  margin-top: 40px;
}

.view-list .news-main .view-main .menu-trademark {
    margin-top: 10px;
}

.view-list .news-main .search-cat {
  padding: 0 10px 10px;
}

.view-home .slider-swiper .wall .wall-col .item-title {
  position: absolute;
  z-index: 1;
  right: 5px;
  left: 5px;
  top: 0;
  margin-top: unset;
  text-align: center;
  border-radius: 3px;
  padding: 2px;
  font-size: 8px;
  font-weight: 100;
  color: rgba(234, 234, 234, 1);
  background: rgba(50, 50, 50, 0.8);
}

.menu-cat-local {
  height: calc(100% - 60px) !important;
  padding: 0 8px 8px;
}

.menu-cat-local div.tabs {
  position: fixed;
  width: 84%;
  background: var(--blue-color);
  padding: 8px 0 6px 0;
  margin-bottom: 0;
}

.menu-cat-local .menu-content {
  margin-top: 48px;
  width: 75%;
}

.menu-cat-local .menu-content .menu .router-link-exact-active.router-link-active {
  color:var(--red-color) !important;
}

.menu-cat-local .menu-content .menu .fa-chevron-up:before {
  color: var(--red-color);
}

.news-main .search-cat ul li:first-child:before {

}

.wrapper .menu-footer a.router-link-active.class-yellow-home-local-acive {
  color: var(--yellow-color);
}

.box-view .box-body .text-center span {
  color: var(--gray-color);
}

.box-body .mb-3.d-flex.justify-content-between a {
  margin-right: 4px;
}

.view-saler-setting .box-body .form-group,
.view-saler-setting .box-body .form-control {
  font-weight: 200;
  color: var(--blue-color);
}

.view-saler-setting .box-body .form-group label,
.view-saler-setting .box-body .form-control label {
  color: var(--black-color);
}

.box-body .form-group select {
  display: flex;
  width: 45%;
  font-weight: 200;
  color: var(--blue-color);
}

.box-body .form-group select option {
  font-size: 11px;
  /* color: red; */
}

.view-saler-main .box-view .box-body .btn.btn-info.btn-sm.xemtrang {
  left: unset;
  right: 36px;
}

.view-saler-main .box-view .box-body .btn.btn-danger.btn-sm.caidat,
.view-saler-main .box-view .box-body .btn.btn-info.btn-sm.xemtrang {
  position: absolute;
  background-color: var(--blue-color);
  border-color: var(--blue-color);
  z-index: 101;
  top: 5px;
  margin: unset;
}

.view-saler-main .box-view .box-body .btn.btn-danger.btn-sm.caidat {
  right: 6px;
  color: var(--white-color);
}

.view-saler-main .box-view .box-body .btn.btn-info.btn-sm.xemtrang {
  color: var(--orange-color);
}

.view-saler-main .box-view .box-body .btn.btn-info.btn-sm.xemtrang.xemtrangtemp {
  right: 70px !important;
  color: var(--white-color);
}

.view-saler-main .box-view .box-body .tab-buttons .btn.btn-info {
  color: var(--black-color);
  font-size: 14px;
  font-weight: 400;
  margin: 0 2px;
  padding: 4px 4px;
  background-color: var(--gray-color);
  border-color: var(--gray-color);
}
.view-saler-main .box-view .box-body .tab-buttons {
  margin-bottom: 4px;
}

.view-saler-main .box-view .box-body .tab-buttons .btn.btn-info.active {
  color: var(--blue-color);
  background: #ffe8a9;
}

.view-saler-main .mb-3.d-flex.justify-content-between {
  margin: 0!important;
  position: absolute;
  z-index: 9999;
  top: 0px;
  height: 36px;
  left: 200px;
  right: 10px;
  /* background: var(--orange-color); */
}

.view-saler-main .tab-content .tab-content-body .card.noallow {
 background: #ffc107;
}
.view-saler-main .card.noallow .text-right.border-top.mt-2.pt-2 {
  display: block !important;
}

.view-saler-main .card.noallow a.btn.btn-default.btn-sm .fa.fa-pen:before{
  font-weight: 200;
  font-size: 8px;
}

/*---- Add new ---- Button */
.view-saler-main .tab-buttons .btn.btn-info:last-child {
  position: absolute;
  right: 10px;
  color: var(--blue-color);
}

.view-saler-main .tab-content :nth-last-of-type(1) div.tab-content-body .card {
  background: #ffe8a9;
  width:50%;
  left:50%;
  border-radius: 5px;
}

.view-saler-main .tab-content :nth-last-of-type(1) div.tab-content-body .card-header {
  display: none;
}

.view-saler-main .tab-content :nth-last-of-type(1) div.tab-content-body .card-body {
  padding: 6px;
}

.view-saler-main .tab-content :nth-last-of-type(1) div.tab-content-body .card-body a {
  width: 99%;
  padding: 2px;
  margin: 2px 4px 2px 2px;
  background-color: var(--gray-color);
  border-color: var(--blue-color);
  color: var(--blue-color);
}

div.listneo {
  z-index: 9999;
  bottom: 169px;
}

div.listneo ul {
  position: absolute;
  width: 86vw;
  margin: 2px 0 2px 0;
  padding: 0 10px;
  background: var(--white-color);
  border: 1px solid var(--gray-color);
  border-radius: 6px;
  bottom: 24px;
  left: 24px;
}

.view-saler-page div.listneo ul {
  position: static;
  width: 80vw;
  bottom: 0;
  left: 0;
}

.listneo-btn-hide {
  left: 0;
}

.listneo-btn:before,
.listneo-btn-hide:before {
  background-color: rgba(234, 234, 234, 0.4);
  transition: auto;
}

.listneo-btn-hide:before {
  border-color: var(--red-color);
  color: var(--red-color);
}

div.listneo ul li {
  list-style-type: none;
  padding: 3px 0 3px 0;
}

div.listneo ul li a {
  font-size: 13.6px;
  font-style: italic;
  font-weight: 200;
}

div.listneo ul li a:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f4be";
  padding-right: 6px;
}

input#searchCatInput.searchCatInput {
    width: 96%;
    margin-left: 3%;
    margin-top: -3px;
    margin-bottom: 5px;
    background: #ffe8a9;
    text-align: center;
    border-radius: 5px;
    color: var(--blue-color);
    font-size: 16.8px;
}

input#searchCatInput.searchCatInput::placeholder {
    font-size: 12px;
}

.searchAll-news-close:before {
    color: var(--red-color);
}

#content .view-saler-main .box-body div.alert.alert-info {
}

#content .view-saler-main .box-body div.content-register {
    color: var(--yellow-color);
    padding-left: 12px;
    font-weight: 400;
    font-style: italic;
}

.view-saler-main .tab-content-body .text-right.border-top.mt-2.pt-2,
.view-saler-main .tab-content-body div.text-left.border-top.mt-2.pt-2.col-3.float-left,
.view-saler-main .tab-content-body div.text-right.border-top.mt-2.pt-2.col-9.float-left{
  margin-top: 1px !important;
  padding-top: 4px !important;
  padding-left: 0;
  padding-right: 0px;
}
/* .view-saler-main .box-body div label input,*/
.view-saler-main .box-body div label input[type=checkbox] {
  height: 16px;
  width: 16px;
  margin: 0 6px 0 10px;
  position:relative;
  bottom: -3px;
  left: 58px;
}

.view-saler-main .box-body div label input[type=checkbox][value="2"] {
  accent-color: var(--red-color);
}

.view-saler-main .tab-content-body .text-right.border-top.mt-2.pt-2 label[for="pause"],
.view-saler-main .tab-content-body div.col-9 label[for="pause"]{
  position: relative;
  left: -30px;
  text-decoration-line: underline;
  font-size: 12.8px !important;
  color: var(--red-color);
}

.view-saler-main .tab-content-body .text-right.border-top.mt-2.pt-2 label[for="pause"],
.view-saler-main .tab-content-body div.col-3 .btn.btn-default.btn-sm,
.view-saler-main .tab-content-body div.col-9 label[for="pause"],
.view-saler-main .tab-content-body div.col-9 .btn.btn-info.btn-xs,
.view-saler-main .tab-content-body div.col-9 .btn.btn-primary.btn-xs,
.view-saler-main .tab-content-body div.col-9 .btn.btn-danger.btn-xs {
  font-size: 12px;
  font-weight:400;
}

.view-saler-main .tab-content-body div.col-3 a.btn.btn-default.btn-sm{
  background: var(--primary);
  color: var(--white-color);
  padding: 1px 3px 2px;
}

.view-saler-main .box-body label[for="check-register"] {
  color: var(--white-color);
  font-size: 16px;
  text-decoration-line: underline;
}

.box-body div.tab-content div.card-body div.mb-2.d-flex b:after,
.list-product .product-item .info .col2 .price b:after,
.list-product .product-item .info .col2 .price .price-origin .money:after,
.shop-detail .product-info .price b:after,
.shop-detail .product-info .price .price-origin .money:after {
  font-family: "Font Awesome 5 Pro";
  content: "k";
}

.news-detail .time, 
.news-detail .view,
.view-saler-main .tab-content-body div.card-body div.mb-2.d-flex .info div:last-child{
  font-size: 10px;
  font-style: italic;
  color: var(--gray-color);
}
.view-saler-main .tab-content-body .card.noallow div.card-body div.mb-2.d-flex .info div:last-child{
color: var(--black-color);
}
.news-detail .time {
    display: block;
    position: relative;
    margin-bottom: -4px;
    top: -10px;
    left: 15vw;
    text-align: right;
    width: 120px;
    /* border: 1px solid; */
}

.news-detail .view {
  position: relative;
  right: -60vw;
  top: -22px;
  margin-bottom: -24px;
  width: 120px;
  /* border: 1px solid; */
  text-align: right;
}

.news-detail .title,
.news-detail .description-html {
    font-size: 16.8px;
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 10px;
}

.news-detail .description-html {
  font-weight: 250;
  font-style: italic;
  color: var(--blue-color);
}

.news-detail .box-body {
  background: var(--white-color);
}

#content .view-detail div div.box-body hr {
  border-width: 1px !important;
  margin: 6px;
}
/* -------------- More/Ban hang Add New & Edit --------------*/

.view-saler-content .step ul.cats li a {
  padding: 5px 0;
  font-size: 14px;
  color: var(--blue-color);
}

.view-saler-content .step ul.cats li a.active input[type="radio"] {
  accent-color: var(--blue-color);
}

.view-saler-content .step input[type="text"],
.view-saler-content .step input[type="number"],
.view-saler-content .step select{
  padding: 2px;
  height: 30px;
  line-height: 1.25;
  font-size: 12.8px;
  text-align: center;
}
.view-saler-content .step input[type="checkbox"] {
    margin: 5px;
    position: relative;
    bottom: -2px;
}

.view-saler-content .step .form-group:last-child label {
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
}

.view-saler-content .step .row .col-6 label {
  margin-bottom: 3px;
  font-size: 12.8px;
  text-decoration-line: underline;
  font-style: normal;
}
.view-saler-content .step label[class="col-4"]{
  margin-bottom: 0;
  margin-top: 2px;
}

.view-saler-content .step .form-group{
  color: var(--blue-color);
  font-size: 12px;
  margin-bottom: 0px;
}

.view-saler-content .step .form-group label {
  margin: 0;
  margin-top: 6px;
}

.view-saler-setting .box-body .form-group label.col-4,
.view-saler-content .step .form-group.col-6 {
  margin: 0;
  margin-top: 6px;
  font-size: 12.8px;
}

.view-saler-setting .box-body .form-group label.col-4{
  margin-top: -12px;
  margin-bottom: 6px;
  text-decoration-line: underline;
  text-align: center;
  border: 1px dotted var(--orange);
  border-radius: 100%;
  padding: 9px 0;
}

.view-saler-setting .box-body .form-group label.col-4:after{
  content: " (shopname) ";
}

.view-saler-setting .box-body .form-group input[type="text"]{
  font-size: 12.8px;
  font-weight: 500;
  text-align: center;
}

.view-saler-setting .box-body{
  background: var(--white-color);
}
.view-saler-setting .box-body form hr{
  border: none;
}
.view-saler-setting .box-body .form-group .label-iamge-myistore,
.view-saler-content .step .label-inews-image,
.view-saler-content .step .label-product-img {
  margin: 6px 0;
  color: var(--red-color);
  font-style: italic;
  font-size: 14px;
  font-weight: unset;
}

.view-saler-setting .box-body .form-group .label-iamge-myistore:before,
.view-saler-content .step .label-inews-image:before,
.view-saler-content .step .label-product-img:before{
  content: "* "
}
.view-saler-content .step .list-image.clearfix{
  margin-top: 5px;
  border: 1px solid var(--gray-color);
  padding: 3px;
}

.view-saler-content .step .text-center{
  margin-top: 6px;
}
.alert {
    padding: 0.5rem 1.25rem;
    margin-bottom: unset;
}

span.alert-info.p-2.text-danger {
  position: absolute;
  left: 130px;
  right: 10px;
  text-align: center;
  font-weight: bold;
  font-size: small;
  padding: 6px !important;
}

.view-money-history div.col-6.history-left,
.view-money-history div.col-6.history-right{
  padding:unset;
  text-align: center;
}

.view-money-history div.col-6.history-left{
  border-right: 1px solid var(--white-color);
}

.view-money-history div.col-6.history-right{
  border-left: 1px solid var(--white-color);
}

.view-money-history div.col-6.history-left button,
.view-money-history div.col-6.history-right button{
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 6px;
  border: 1px solid;
}

.view-money-history div.col-6.history-left button:last-child,
.view-money-history div.col-6.history-right button:last-child{
padding-left: 8px;
padding-right: 8px;
}

.view-money-history div.col-6.history-left .tab-history-active,
.view-money-history div.col-6.history-right .tab-history-active{
  background-color: var(--yellow-color);
}

.view-money-history .table-history{
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: var(--white-color);
  border-radius: 6px;
  font-size: 10px;
}

.view-money-history .table-history tr{
  margin-top: 1px;
  margin-bottom: 1px;
  line-height: 1;
}

.view-account .box-body .form-group.text-center {
  padding: 10px;
  font-size: 12px;
  color: var(--white-color);
}

.view-account .box-body .form-group.text-center .local-Addr,
.view-account .box-body .form-group.text-center .name_avatar,
.view-account .box-body .form-group.text-center .u_gender,
.view-account .box-body .form-group.text-center .mail-uer-mobi,
.view-account .box-body .form-group.text-center .introVertical,
.view-account .box-body .form-group.text-center .bankInfo-code{
    border: 1px dotted var(--gray-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    margin-top: 10px;
    padding: 6px;
}
.view-account .box-body .form-group.text-center .private-code{
    border-bottom: 1px dotted var(--gray-color);
    float: left;
}
.view-account .box-body .form-group.text-center .name_avatar{
   margin-top: unset;
}
.view-account .box-body .form-group.text-center .u_gender{
  position: relative;
  left: 20%;
}

.view-account .box-body .form-group.text-center input,
.view-account .box-body .form-group.text-center label,
.view-account .box-body .form-group.text-center select,
.view-account .box-body .form-group.text-center .btn{
  font-size: 12px;
  text-align: center;
}

.view-account .box-body .form-group.text-center input:focus{
  background: var(--yellow-color);
  font-size: 16px;
  color: var(--blue-color);
  font-weight: 600;
}

.view-account .box-body .form-group.text-center .soNha{
  margin-bottom: 1px !important;
}

.view-account .box-body .form-group.text-center label{
  margin: 3px 0 1px;
}

.view-account .box-body .form-group.text-center .btn.btn-warning{
  margin: 6px 0;
}

/* -------------- Chat icon --------------*/

.chat-icon {
    top: unset !important;
    right: 10px !important;
}
/* ----------End---------*/