/* css cho icon :hover */
.icon-minus {
  mask: url(../img/common/icon-minus-black.svg);
}
.icon-plus {
  mask: url(../img/common/icon-plus-black.svg);
}

.icon-angle-right {
  mask: url(../img/common/icon-angle-right-black.svg);
}

.icon-heart {
  mask: url(../img/common/icon-heart-black.svg);
}

.icon-close {
  mask: url(../img/common/icon-close-black.svg);
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: white;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.icon-black {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: black;
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* flowline */
.cart-page {
  padding-bottom: 36px;
  background: white;
  margin-bottom: 64px;
  padding-top: 8px;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 16px;
}
.cart-page .flowline {
  position: relative;
  margin: 0;
  padding: 8px 0 16px;
  border-bottom: 1px dotted #ccc;
}
.cart-page .flowline ul {
  position: relative;
  margin: 0 auto;
}
.cart-page .flowline ul::before {
  content: "";
  height: 4px;
  background: #525263;
  position: absolute;
  top: 13px;
  margin: 0;
  border-radius: 2px;
  z-index: 0;
}
.cart-page .flowline.step3 ul::before {
  width: 66.66666666%;
  left: 16.6666666%;
}
.cart-page .flowline.step4 ul::before {
  width: 75%;
  left: 12.5%;
}
.cart-page .flowline ul li {
  float: left;
  position: relative;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 1;
}
.cart-page .flowline.step3 ul li {
  width: 33.33333333333333%;
}
.cart-page .flowline.step4 ul li {
  width: 25%;
}
.cart-page .flowline li .flow_number {
  line-height: 30px;
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  font-size: 12px;
  font-size: 1.2rem;
  background: #525263;
  color: #fff;
  top: 0;
  left: 18px;
  display: inline-block;
  margin-bottom: 5px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
}
.cart-page .flowline li.active {
  color: #dc3f02;
}
.cart-page .flowline li.active .flow_number {
  background: #dc3f02;
}

/* messages */
.cart-page #form_cart > .message:first-child {
  padding-top: 16px;
}

.cart-page .message {
  text-align: center;
  padding: 16px 0;
  margin: 0;
}
.cart-page p.message {
  padding: 0 0 16px;
}

.cart-page .total_box {
  padding: 8px 0;
}
.cart-page .total_box dl {
  margin-left: 40%;
  text-align: end;
  padding-top: 8px;
  padding-bottom: 8px;
}
.cart-page .total_box dl dt {
  float: left;
  width: 45%;
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
}

/* tableStyle mobile*/

.cart-page div.table .thead {
  display: table-header-group;
}
.cart-page div.table ol {
  display: table-row;
  margin: 0;
}
.cart-page div.table ol li {
  display: table-cell;
  padding: 16px;
  text-align: center;
  background: #f4f3f0;
  overflow-x: hidden;
  font-weight: bold;
}
.cart-page div.table .tbody .tr > .td {
  padding: 16px;
}
/* tableStyle */

.cart-page div.table {
  width: 100%;
  display: table;
}

.cart-page div.table .tbody {
  display: table-row-group;
}
.cart-page div.table .tbody .tr {
  display: table-row;
  margin: 0;
}
.cart-page div.table .tbody .tr > .td {
  display: table-cell;
  padding: 10px 8px;
  text-align: center;
  overflow-x: hidden;
}
.cart-page .table .tbody .tr > .price {
  text-align: right;
}

/* cart-item */
.cart-page .cart_item {
  border-top: 1px dotted #ccc;
}
.cart-page .cart_item .item_box > .td {
  border-bottom: 1px dotted #ccc;
}
.cart-page .cart_item .item_box .td {
  vertical-align: middle;
}
.cart-page .cart_item .icon_edit {
  position: static;
  width: 8.3333333333%;
}
.cart-page .cart_item .icon_edit a .icon {
  background: black !important;
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-size: 2rem;
}
.cart-page .cart_item .icon_edit a:hover .icon {
  opacity: 0.8;
}
.cart-page .cart_item .item_box a:hover img {
  opacity: 0.8;
}
.cart-page .cart_item .item_box .table {
  width: 58.33333333%;
}
.cart-page .cart_item .item_box .table .item_photo,
.cart-page .cart_item .item_box .table .item_detail {
  display: table-cell;
  vertical-align: middle;
}
.cart-page .cart_item .item_box .table .item_photo {
  min-width: 80px;
  padding-right: 8px;
  width: 40% !important;
}
.cart-page .cart_item .item_box .table .item_detail {
  text-align: left;
}
.cart-page .cart_item .item_box .table .item_name a {
  font-weight: bold;
  color: #525263;
}
.cart-page .cart_item .item_box .table .item_name a:hover {
  color: #9797a1;
}
.cart-page .cart_item .item_detail .item_subtotal {
  display: none;
}
.cart-page .cart_item.table .tbody .tr div.item_subtotal {
  display: table-cell;
  text-align: right;
}
.cart-page .cart_item .item_quantity {
  width: 16.66666667%;
  display: flex;
}

.cart-page .cart_item .item_quantity ul {
  text-align: center;
  white-space: nowrap;
}
.cart-page .cart_item .item_quantity ul li {
  display: inline-block;
  margin: 8px 4px;
}
.cart-page .cart_item .item_quantity ul li a,
.cart-page .cart_item .item_quantity ul li span {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 32px;
  vertical-align: middle;
  border-radius: 50%;
}
.cart-page .cart_item .item_quantity ul li a {
  border: 2px solid #c9c9c9;
}
.cart-page .cart_item .item_quantity ul li span {
  border: 2px solid #e9e9e9;
}
.cart-page .cart_item .item_quantity ul li a .cb {
  color: #525263;
  fill: #525263;
  margin-top: 6px;
  vertical-align: top;
}
.cart-page .cart_item .item_quantity ul li span .cb {
  color: #babac1;
  fill: #babac1;
  margin-top: 6px;
  vertical-align: top;
}
.cart-page .cart_item .item_quantity ul li a:hover {
  opacity: 0.8;
}

.cart-page .quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-page .quantity-control .quantity-number {
  font-weight: bold;
  margin-right: 4px;
}

.cart-page #cart_item_list__quantity_edit {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-page #cart_item_list__quantity_edit li {
  margin: 0 2px;
}

.cart-page #cart_item_list__quantity_edit {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-page #cart_item_list__quantity_edit li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-page .quantity-number {
  min-width: 32px;
  text-align: center;
  font-weight: bold;
}
.cart-page #cart_item_list__quantity_edit a {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: black;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-page #cart_item_list__quantity_edit a:hover {
  background-color: rgba(0, 0, 0, 0.251);
}
.cart-page #cart_item_list__quantity {
  justify-content: center;
}

.cart-page #cart_item_list__quantity_edit {
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-page .item_name {
  min-height: 40px !important;
}
.cart-page .item_price {
  font-size: 130% !important;
  color: #dc3d00 !important;
}

.cart-page .total_box {
  min-width: 256px;
  float: right;
  padding: 0;
}

.cart-page .total_box dl dd {
  text-align: right;
}
.cart-page .total_box dl.total_price dd {
  font-weight: bold;
  color: #de5d50;
  font-size: 24px;
}

.cart-page #total_box__user_action_menu {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cart-page #total_box__user_action_menu p {
  flex: 1 1 auto;
  margin: 0;
  width: 200px;
}

.cart-page #total_box__user_action_menu a {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

.cart-page .btn-primary {
  color: #fff;
  background-color: #d85145;
  border-color: #d85145;
}

.cart-page .btn-info {
  color: #fff;
  background-color: #474757;
  border-color: #474757;
}

.card-page .page-heading {
  padding-left: 36px;
}