du_an_khach_hang/Chico/Mobile/styles.css

*,
::after,
::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.red{color:#DA251C;}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

.text-center {
  width: 100%;
  text-align: center !important;
}

body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Inter, sans-serif;
  line-height: 1.2;
  font-weight: 400;
  color: #000;
  background-color: #f7f7f7;
}

a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

li{
  list-style: none;
}

.gap-12{
  gap: 12px;
}

.container{
  padding:0 10px
}

img {
  display: block;
  max-width: 100%;
}

.list-style-none {
  list-style: none;
}

.list-style-cricle {
  list-style: circle;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-family: Inter, sans-serif;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  font-family: Inter, sans-serif;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-family: Inter, sans-serif;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  font-family: Inter, sans-serif;
}

input,
input::placeholder,
select,
textarea,
textarea::placeholder {
  font-family: Inter, sans-serif;
}

.font-weight-700 {
  font-weight: 700;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-500 {
  font-weight: 500;
}

.font-weight-light {
  font-weight: 300;
}

.line-clamp {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.line-clamp-4 {
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.line-clamp-6 {
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

.boder-radius-15 {
  border-radius: 15px;
}

.text-20 {
  font-size: 20px;
}

.text-12 {
  font-size: 12px;
}

/*FIXED HEADER*/
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 30%);
  box-shadow: 0 1px 6px rgb(0 0 0 / 30%);
  z-index: 10;
}

.fixed-nav .header-logo{display:none;}

.fixed-nav .header-search-group {
  padding: 0;
  position: absolute;
  top: 7px;
  left: 55px;
  width: calc(100% - 111px);
  margin-bottom: 10px;
  display: block;

}

/* GRID */
.grid {
  display: -ms-grid;
  display: grid;
  gap: 10px;
}

.grid--6-cols {
  -ms-grid-columns: (1fr) [6];
  grid-template-columns: repeat(6, 1fr);
}

.grid--5-cols {
  -ms-grid-columns: (1fr) [5];
  grid-template-columns: repeat(5, 1fr);
}

.grid--4-cols {
  -ms-grid-columns: (1fr) [4];
  grid-template-columns: repeat(4, 1fr);
}

.grid--2-cols {
  -ms-grid-columns: (1fr) [2];
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  -ms-grid-columns: (1fr) [3];
  grid-template-columns: repeat(3, 1fr);
}
.grid--product-info {
  -ms-grid-columns: 2fr 1fr;
  grid-template-columns: 2fr 1fr;
}
.grid--product-details {
  -ms-grid-columns: 3fr 1fr;
  grid-template-columns: 3fr 1fr;
}
.grid--product-details-inside {
  -ms-grid-columns: 5.13fr 6.48fr;
  grid-template-columns: 7fr 5.76fr;
}

.align-items-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}


/* FLEX */
.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.align-items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.justify-content-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-content-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-content-around{
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-around;
}

.flex-around {
  justify-content: space-around;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-wrap {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-wrap: row;
  flex-wrap: wrap;
}

/* RESET BLOG CONTENT CSS */
.info-description-content p,
.info-description-content a,
.info-description-content span,
.info-description-content h1,
.info-description-content h2,
.info-description-content h3,
.info-description-content h4,
.info-description-content h5,
.info-description-content h6,
.info-description-content ol,
.info-description-content ul,
.info-description-content li {
  margin: revert;
  padding: revert;
}

/* UTILITIES */
.mb-15px {
  margin-bottom: 15px !important;
}

.min-width-0 {
  min-width: 0;
}

.d-block {
  display: block !important;
}

.d-none, .hide {
  display: none !important;
}

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-16 {
  gap: 16px;
}

body.active::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.2);
  z-index: 2;
}

/*Success Form */
.success-form-svg {
  display: block;
  height: 50px;
  width: 50px;
  color: #CB2026; /* SVG path use currentColor to inherit this */
}

.circle {
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  -webkit-animation: draw 0.5s forwards;
  animation: draw 0.5s forwards;
}

.tick {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  -webkit-animation: draw 0.5s forwards 0.6s;
  animation: draw 0.5s forwards 0.6s;
}

@-webkit-keyframes draw { 
  to { stroke-dashoffset: 0 } 
}

@keyframes draw { 
  to { stroke-dashoffset: 0 } 
}

.cart-success{
  width: 300px;
  height: 183px;
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;

}

.text-cart-success{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  padding-top: 30px;
  text-align: center;
}

.ease-015s{
  -webkit-transition: all ease .15s;
  -o-transition: all ease .15s;
  transition: all ease .15s
}
.success-form{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

}


/* SWIPER */
.swiper-button-next,
.swiper-button-prev {
  width: 30px;
  height: 50px;
  background: rgba(0, 0, 0, 0.15);
}
.swiper-button-prev {
  border-radius: 0px 10px 10px 0px;
  transform: translateX(-10px);
}
.swiper-button-next {
  border-radius: 10px 0 0 10px;
  transform: translateX(10px);
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px;
  color: var(--white);
}

.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiperShowcase {
  border-radius: 15px
}

.swiper-slide img {
  display: block;
  width: 100%;
  border-radius: 10px;

}

.swiper-pagination-bullet{
  width: 10px !important;
  height: 10px !important;
  border-radius: 5px !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.swiper-pagination-bullet-active{
  background: #CC0001!important;
  border-radius: 5px !important;
  width: 42px !important;
  height: 10px !important;
}

.swiper-slide-product {
  height: auto;
  background: #fff;
  border-radius: 15px;
}
.swiper-slide-product:hover {
  box-shadow: var(--box-shadow);
}
.swiper-slide-product:hover .card-img img {
  transition: all 0.4s;
  transform: translateY(-5px);
}

.section-showcase .swiper-pagination{position: unset!important;margin-top: 8px !important;}

/*BRAK CRUMB*/
.global-breadcrumb ol{
  padding-bottom: 10px;
  text-transform: uppercase;
  color: #797979;
  font-size: 12px;
}
.global-breadcrumb li:first-child span{
  margin-right: 5px;
}


/* ANIMATION */
@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}

/* SEARCH RESULT BOX */
.search-results {
  display: none;
  border: 1px solid #ddd;
  background: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;

}
.search-results-list {
  max-height: 300px;
  overflow: auto;
  z-index: 999;
}
.search-results .item {
  background: #fff;
  display: flex;
  gap: 10px;
  padding: 10px;
  width: 100%;
  position: relative;
  text-decoration: none;
  font-weight: 400;
}
.search-results a.item:hover {
  background-color: #f5f5f5;
}

.search-results img {
  width: 60px;
}

.search-results .title {
  font-size: 14px;
  color: #333;
  width: calc(100% - 60px);
}

.search-results .price {
  color: #CB2026;
  font-weight: 700;
  margin-top: 4px;
  display: block;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

/*SPRITE*/
.sprite {
  background-image: url(./img/sprite.png);
  background-repeat: no-repeat;
  display: block;
}

.sprite-bct-footer {
  width: 192px;
  height: 73px;
  background-position: -10px -10px;
}

.sprite-cart-header {
  width: 23px;
  height: 22px;
  background-position: -222px -10px;
}

.sprite-cart-sp {
  width: 18px;
  height: 18px;
  background-position: -265px -10px;
}

.sprite-credit1-footer {
  width: 394px;
  height: 31px;
  background-position: -10px -103px;
}

.sprite-credit2-footer {
  width: 352px;
  height: 32px;
  background-position: -10px -154px;
}

.sprite-doi-tra-footer {
  width: 66px;
  height: 67px;
  background-position: -303px -10px;
}

.sprite-giao-hang-footer {
  width: 66px;
  height: 67px;
  background-position: -10px -206px;
}

.sprite-gift-detail {
  width: 17px;
  height: 16px;
  background-position: -382px -154px;
}

.sprite-ho-tro-footer {
  width: 55px;
  height: 63px;
  background-position: -96px -206px;
}

.sprite-hotline-detail {
  width: 19px;
  height: 19px;
  background-position: -382px -190px;
}

.sprite-menu-header {
  width: 21px;
  height: 17px;
  background-position: -171px -229px;
}

.sprite-newsletter-footer {
  width: 40px;
  height: 40px;
  background-position: -212px -206px;
}

.sprite-search-header {
  width: 20px;
  height: 20px;
  background-position: -272px -229px;
}

.sprite-showroom-home {
  width: 23px;
  height: 27px;
  background-position: -312px -206px;
}

.sprite-thanh-toan-footer {
  width: 66px;
  height: 67px;
  background-position: -312px -253px;
}

.sprite-tin-cong-nghe-home {
  width: 32px;
  height: 26px;
  background-position: -389px -10px;
}

.sprite-tin-khuyen-mai-home {
  width: 36px;
  height: 34px;
  background-position: -398px -229px;
}

.sprite-tu-van-detail {
  width: 52px;
  height: 52px;
  background-position: -171px -283px;
}

.sprite-tuyen-dung-home {
  width: 32px;
  height: 32px;
  background-position: -424px -56px;
}

.sprite-star{
  background-image: url(/static/assets/default/images/star_mb.png);
  width: 76px;
  height: 16px;
  vertical-align: text-bottom;
  display: inline-block;
  background-repeat: no-repeat;
}

.sprite-1star{background:url(/static/assets/default/images/star_rating.png);display:block}


.star0{ background-position: -3px -87px!important}
.star1{background-position: -3px -70px!important}
.star2{background-position: -3px -53px!important}
.star3{background-position: -3px -36px!important}
.star4{background-position: -3px -19px!important}
.star5{background-position: -3px -1px!important}


/*HEADER*/
header .header-top-group {
  background: #CB2026;
  height: 50px;
  padding: 14px 16px 14px 10px;
}


.box-cart-header {
  position: relative;
}

.header-features-cart-amount {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  color: #000;
  font-weight: 700;
  background: #FFB800;
}

.header-search-group {
  padding: 10px;  

}



header .search-form-group {
  display: block;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 30px;
  height: 36px;
  position: relative;
}

header .search-input {
  width: calc(100% - 40px);
  color: #797979;
  padding-left: 14px;
  background: transparent;
  border: 0;
  height: 100%;
  outline: none;
  font-size: 12px;
  font-style: italic;
}

header .search-submit {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url(./img/sprite.png) no-repeat;
  background-color: #DA251C;
  background-position: -267px -224px;
  border: 0;
  position: absolute;
  right: 3px;
  top: 2px;
}

.home-slider img{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; }
.home-icon-list{
  margin: 18px 0;
}

.home-icon-list .box-icon{
  width: 48px;
  height: 48px;
  background-color: #DA251C;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.home-icon-list a{
  font-size: 14px;
  line-height: 16px;

  text-align: center; 
  width: calc(100% / 4 - 8px);
}

.home-icon-list .text{display: block;margin-top: 10px;height: 32px;}


.bg-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: none;
}

.top-menu{
  padding: 30px 10px 0 20px;
}

.global-menu-container {
  position: fixed;
  top: 0;
  left: -100%;
  bottom: 0;
  background: #fff;
  z-index: 99;
  width: 79%;
  -webkit-box-shadow: 4px 0px 6px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 0px 6px 2px rgba(0, 0, 0, 0.3);
  overflow: auto;
  -webkit-transition: .4s all;
  transition: .4s all;
}

.global-menu-container.show {
  -webkit-transition: .4s all;
  transition: .4s all;
  left: 0;
}

.global-menu-container .header-user {
  position: relative;
  padding-left: 70px;
  font-size: 16px;
  line-height: 55px;
  color: #9b9b9b;
}


.global-menu-container .header-user::before {
  content: '';
  background: url(./img/lock\ \(1\).png) no-repeat;
  background-color: #d0d0d0;
  background-position: 10px 8px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.global-menu-container .header-user a {
  color: #797979;
}

.global-menu-container .icon-close {
  width: 26px;
  height: 26px;
  background-position: -97px -2px;
}

.icon-mb {
  background: url(/static/assets/default/images/mobile_splice_2021.png) no-repeat;
}

.global-menu-container .global-menu-list {
  margin-top: 18px;
}

.global-menu-container .title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
  padding: 0 10px 0 20px;
}

.global-menu-container .title::before {
  content: '';
  background: url(./img/menu-dm.png) no-repeat;
  width: 25px;
  height: 22px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
}

.cat-list-group .cat-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E4E4E4;
  padding: 0 10px 0 20px;
}

.global-menu-container .cat-list-group a {
  border: 0;
}

.global-menu-container .cat-list-group a {
  padding: 5px 0;
  font-weight: lighter;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 15px;
}

.global-menu-container .cat-thum {
  width: 30px;
  margin-right: 10px;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.global-menu-container .cat-title {
  width: calc(100% - 40px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;
}

.cat-list-group .cat-item .fa-angle-right {
  display: block;
  padding: 15px 0;
  text-align: center;
  font-size: 16px;
}

.cat-list-group .cat-item .sub-menu {
  width: 100%;
  border-top: 1px solid #f3f3f3;
  background: #f3f3f3;
  padding: 0 8px 0 18px;
  display: none;
}


.collection-tab-container{
  background: url(./img/background_collection-mb.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  padding: 20px 0 10px 10px;
}

.collection-tab-container .collection-tab-title a{
  padding: 6px 12px;
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  text-transform: uppercase;
  text-align: center;
  line-height: 16px;
  color: #fff;
  margin-right: 8px;
}

.collection-tab-container .collection-tab-title a.active, .collection-tab-container .collection-tab-title a:hover{
  background: #FFFFFF;
  color: #000;
}

.collection-tab-title{
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  margin-bottom: 14px;
}

.p-item {background:#fff;padding: 13px 8px;border-radius: 10px;}

.p-item .p-img {
  display: block;
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 100%;
}

.p-item .p-img img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

.p-item .box-sku {
  margin-bottom: 8px;
  height: 28px;
}

.p-item .p-name {
  font-weight: 600;
  height: 32px;
  overflow: hidden;
  line-height: 16px;
  margin-bottom: 6px;
  font-size:12px;
}

.p-item .p-price {
  margin-bottom: 4px;
  font-size: 13px;
  display: block;
  color: #EE1B25;
  font-weight: 800;
}

.p-item .market-price {
  display: block;
  color: #777777;
  font-weight: 500;
  font-size:10px
}

.p-item .p-button {
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.p-item .title-amout-sku {
  color: #008A0E;
  font-size: 10px;
  line-height: 18px;
}

.p-item .p-buy {
  width: 26px;
  height: 26px;
  border-radius: 50px;
  background: #B0B0B0;
  color: #262626;
  font-size: 13px;
  font-weight: 800;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-transition: .1s all;
  transition: .1s all;
}

.p-item .p-sku{font-size:10px;}


.text-bottom{
  margin-top: 10px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.box-product-holder{
  padding-top: 20px;
  background: #fff;
}

.text-bottom i{font-size:10px;}

.box-title-group{
  background: #F9F9F9;
  padding: 13px 10px 0;
  margin: 10px 0;
}

.box-product-container .cat-title{
  font-size:16px;
  text-transform: uppercase;
  line-height:20px;

}

.box-product-container .cat-list-right a{
  display: block;
  color: #3A3A3A;
  text-align: center;
  font-size:13px;
  line-height: 18px;
}


/*CATEGORY*/
.product-list-container .p-item{
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  padding: 10px;
}

.list-filter-category .cat-child-list{
  margin-bottom:12px;

}

.list-filter-category .cat-child-list a{
  border: 1px solid #D9D9D9;
  border-radius: 15px;
  width: max-content;
  padding: 2px 20px;
  color: #797979;
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 6px;
}

.list-filter select{
  display: block;
  margin: 0 10px 10px 0;
  width: calc(100% / 2 - 5px);
  color: #fff;
  background: #797979;
  border-radius: 3px;
  padding: 0 18px;
  position: relative;
  height: 32px;
  font-weight: 500;
  font-size: 14px;
  border: 0;
  text-align: center;
}

.list-filter select:nth-child(2n){
  margin-right: 0;
}

.sort-by-group {
  background: #DA251C;
  border-radius: 3px;
  margin-bottom: 10px;
  position: relative;
}

.sort-by-group > a {
  width: 25%;
  color: #fff;
  text-align: center;
  line-height: 40px;
  position: relative;
  font-size: 14px;
}



.sort-by-group > a::after {
  content: '';
  width: 1px;
  height: 15px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.sort-by-group > a.current::before {
  content: '';
  width: 80px;
  height: 4px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-bottom: 5px;
}

.sort-by-group > a:last-child::after{
  display: none;
}

/*FOOTER*/
.footer-policy{
  padding: 20px 10px 15px;
  background: #f7f7f7;
}

footer .footer-policy .icon-container{
  width: 55px;
}

.footer-policy .item{
  margin-bottom: 30px;
}

.footer-policy .item:last-child{
  margin-bottom: 0;
}

.footer-policy .text{
  margin-left: 30px;
  font-size: 14px;
}

.footer-policy .text span{
  margin-top: 4px;
}

.footer-article{
  padding: 20px 10px 10px;
  background: #fff;
}

.footer-article .box-title h3{
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
}

.footer-article .box-title .footer-link{
  font-size: 12px;
  color: #fff;
  padding: 5px 7px;
  background: #DA251C;
  border-radius: 20px;
  text-align: center;
}

.footer-article .box-title{
  padding-bottom: 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #CC0001;
}

.footer-article .list-item{
  margin-top: 10px;
  gap: 12px;
}

.footer-article .list-item .box-item{width:50%;}

.footer-article .box-item .box-img{
  margin-bottom: 10px;
  border-radius: 10px;
  display: block;
  overflow: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  position: relative;
}

.footer-article .box-item time {
  padding: 6px 2px;
  margin-right: 8px;
  position: relative;
  background: #d81e23;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  text-align: center;
  display: block;
  width: 33px;
  height: 33px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.footer-article .box-item time::after{
  content: '';
  position: absolute;
  right: -4px;
  height: 15px;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: #bbc0c7;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); 
}

.footer-article .box-item .text h3{
  font-size: 12px;
}

.footer-video-container{
  background-color: #ECECEC;
}

.footer-article .box-title h2{
  font-size: 16px;
}

.footer-video-container .box-title h2{
  color: #DA251C;
}

.footer-video-container .box-img::before{
  content: '\f04b';
  font-family: FontAwesome;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 1;
  font-size: 46px;
  color: #fff;
  opacity: .6;
  z-index: 2;
  -webkit-transition: .2s all;
  transition: .2s all;
}

.box-newsletter {
  background: #DA251C;
}

.footer-newsletter {
  max-width: 100%;
  padding: 21px 0;
}

.footer-newsletter .newsletter-form {
  width: 100%;
  background: #a6171b;
  border-radius: 43px;
  padding: 4px 6px 4px 17px;
  position: relative;
  color: #fff!important;
  -webkit-border-radius: 43px;
  -moz-border-radius: 43px;
  -ms-border-radius: 43px;
  -o-border-radius: 43px;
}

.footer-newsletter .newsletter-form input {
  font-style: italic;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  height: 40px;
  width: calc(100% - 45px);
  color: #fff;
  border: none;
  outline: none;
  font-size: 12px;
}

.footer-newsletter .newsletter-form input::placeholder{color:#fff;font-weight: 700;font-size: 12px;}

.footer-info-container{
  color: #3A3A3A;
  font-size: 15px;
  padding: 10px 10px 14px; 
  background: #fff;
}

.footer-info-container .logo-footer img{
  width: auto;
}

.footer-info-container .info-left p {
  margin: 8px 0;
  position: relative;
  font-size: 13px;
  padding-left: 14px;
}

.footer-info-container .info-left p::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5d5d5d;
  position: absolute;
  top: 6px;
  left: 3px;
}

.footer-info-container .map {
  background: #d81e23;
  border-radius: 7px;
  display: inline-block;
  text-align: center;
  margin-top: 5px;
  padding: 6px 12px;
  color: #fff;
}

.footer-info-container .social-media{
  margin-top: 20px;
}

.footer-info-container .social-media a {
  width: 43px;
  height: 43px;
  line-height: 1.8;
  margin-right: 8px;
  font-size: 26px;
  display: inline-block;
  border-radius: 50%;
  background: #4b69b0;
  color: #fff;
  text-align: center;
}

.footer-info-container .social-media a:nth-child(2) {
  background: linear-gradient(88deg, #fbcb7a, #f48d4e, #e32943, #c03771, #964494, #67529f, #6b66aa);
}

.footer-info-container .social-media a:nth-child(3) {
  background: #e83f3a;
}

.footer-info-container .info-item .current .fa-angle-down {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.credit-footer{margin: 0 auto;}

.footer-info-container .info-item .box-title {
  padding: 12px 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #3a3a3a;
  font-size: 13px;
  background: #F1F1F1;
  border-radius: 5px;
  font-weight: 700;
}

.footer-info-container .info-item .fa-angle-down {
  font-size: 13px;
  font-weight: 700;
}

.footer-info-container .support-list {
  padding-left: 25px;
  display: none;
  margin-bottom: 12px;
}

.footer-info-container .support-list p {
  margin-bottom: 10px;
  position: relative;
}

.footer-info-container .support-list p::before {
  content: '';
  background: url(/static/assets/default/images/hot-line-footer.png) no-repeat;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: -22px;
  background-size: 100%;
}

.footer-info-container .info-item ul{
  display: none;
  margin-bottom: 12px;
}

.footer-info-container .info-item li {
  margin: 0 0 10px 17px;
  list-style: disc;
}

.credit-1{
  margin: 10px 0 20px;
}

.footer-right{
  margin-top: 20px;
  display: block;
}

.scroll-top-btn {
  font-size: 32px;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 80px;
  right: 10px;
  background: #DA251C;
  border-radius: 50%;
  z-index: 999;
  -webkit-box-shadow: 0 1px 5px #000;
  box-shadow: 0 1px 5px #000;
  color: #fff;
}

.title-policy{
  line-height: 24px;
  background: #D9D9D9;
  padding: 4px 10px;
  font-size: 16px;
  margin-bottom:20px;
}

/*PRODUCT DETAIL*/
/*DETAIL*/


.product-detail-page .product-name {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 10px;
  margin-top: 20px;
  text-transform: uppercase;
}



.product-detail-page .product-info-image {
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
  padding: 10px;
}

.product-detail-page .product-info-middle {
  font-size: 13px;
  line-height: 16px;
}

.product-info-middle .product-visit{
  margin-bottom: 17px;
}

.product-detail-page .product-info-price {
  margin: 25px 0 10px;
}

.product-detail-page .product-info-price .price{
  margin-right: 10px;
  font-size: 24px;
  line-height: 28px;
  color: #DA251C;

}

.price-vat{
  background: #D9D9D9;
  border-radius: 3px;
  width: max-content;
  padding: 5px 10px;
  margin-bottom: 21px;
  font-size: 12px;
}

.product-info-sku span{padding: 0 5px;}
.product-info-sku span:first-child{padding-left: 0 !important;}

.product-detail-page .product-info-price .market-price{
  font-size: 13px;
  line-height: 16px;
  color: #FFB800;
  text-decoration: line-through;
}

.product-info-summary .product-info-summary-title{
  margin-bottom: 8px;
  display: block;
  background: #F1F1F1;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  line-height: 32px;
  padding: 0 8px;

}

.product-detail-page .product-info-summary ul{
  margin-left:10px;
}

.product-detail-page .product-info-summary li{
  margin: 0;
  position: relative;
  padding-left: 15px;
  margin-bottom: 6px;
}

.product-detail-page .product-info-summary li::after {
  content: '';
  background: #000;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
}

.product-detail-page .product-info-summary .list-summary li:nth-child(n+4) {
  display: none;
}

.product-detail-page .product-info-summary .list-summary.active li:nth-child(n+4) {
  display: block;
}


.product-detail-page .button-showmore {
  color: #DA251C;
  margin-top: 10px;
  display: block;
}

.sp-con-hang{margin-top:25px;}

.product-info-offer{
  margin-top:17px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
}

.product-info-offer .offer-title{padding: 0 8px;padding-bottom:10px;}

.product-info-offer .title-gift-detail{
  background: #DA251C;
  border-radius: 10px 0px; 
  width: 180px;
  padding: 6px 12px;
  color: #fff;
  margin-bottom: 8px;
}

.product-info-offer .title-gift-detail span{
  margin-left: 6px;
}

.product-info-offer .offer-title li{
  list-style: disc;
  margin-left: 19px;
  line-height: 24px;
  color: #3A3A3A;
} 

.hotline-tuvan{
  margin: 10px 0 14px;
  padding: 0 15px;
  height: 36px;
  width: 100%;
  border: 1px solid #DA251C;
  border-radius: 42px;
  font-size:14px;
}

.hotline-tuvan span{margin-left: 4px;}

.product-buy-quantity{
  margin: 13px 0 ;
}

.product-buy-quantity .title{
  line-height: 18px;
  color: #3A3A3A;
  font-size:14px;
}

.cart-quantity-select{
  display: inline-flex;
}

.product-buy-now{width:100%;gap:10px;}

.cart-quantity-select .js-quantity-change {
  padding: 6px 13px;
  text-decoration: none;
  font-size: 16px;
  line-height: 14px;
  color: #000;
  border: 1px solid #e1e1e1;
  font-weight: 700;
  text-align: center;
  border-radius: unset;
}

.cart-quantity-select input {
  border: none;
  outline: 0;
  width: 80px;
  text-align: center;
  color: #000;
  border: 1px solid #e1e1e1;
  font-size: 13px !important;
}

.button-type-1 a {
  margin: 0 0 10px 0;
  padding: 10px 0;
  border-radius: 5px;  
  border: 1px solid #DA251C;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.button-type-1 a:first-child{
  background: linear-gradient(0deg, #F24040 10.84%, #E30B0B 104.56%);;
  color: #fff;
}

.button-type-1 a:last-child{
  margin-right: 0 !important;
}

.button-type-1 a b{
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.button-type-1 a span{
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}


.product-info-support .form-holder{
  width: 100%;
  border-radius: 90px;
  padding: 3px 2px 3px 22px;
  position: relative;
  border: 1px solid #D9D9D9;
  color: #fff!important; 
  margin-bottom: 14px;
}

.product-info-support .form-holder input{
  font-style: italic;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  height: 30px;
  width: calc(100% - 55px);
  color: #797979;
  border: none;
  outline: none;
  font-size: 14px;
}

.product-info-support .form-holder .call-for-me{
  border-radius: 50%;
  width: 51px;
  height: 51px;
  background: #D9D9D9;
}

.icon-support-group{
  background: #DA251C;
  border-radius: 69px;
  width: calc(100% - 470px);
  padding: 4px 20px 4px 4px;
  color: #fff;
}

.icon-support-group .group-left{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  margin-right: 15px;
}

.group-right .text{
  font-size: 18px;
  line-height: 20px;
  margin: 2px 0;
  display: block;
}

.group-right .hotline{
  font-size: 22px;
  line-height: 28px;
}



.product-info-right .item-blog {
  border: 1px solid #DA251C;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 16px;
}

.product-info-right .item-blog .title {
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  background: #DA251C;
  color: #fff;
  border-bottom: 1px solid #d0cbcb;
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
}

.product-info-right .content {
  font-size: 14px;
  padding: 15px 4px 8px 8px;
}

.product-info-right .box-list a{
  margin-left: 8px;
  font-weight: 600;
}

.product-info-right .box-list a:hover{color: #DA251C;}

.product-info-right .box-list{
  margin-bottom: 12px;
}


.product-info-box .box-left .box-item .product-desc{margin-top:16px;position: relative;max-height: 625px;overflow: hidden;}
.product-info-box .box-left .box-item .product-desc::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
  background: linear-gradient(transparent, #fff);
  height: 150px;
}

.product-info-box .box-left .box-item .product-desc.active::after{position: relative!important;}

.product-info-box .button-desc a {
  display: none;
  text-align: center;
  color: #DA251C;
  margin: 20px auto auto auto;
}
.product-info-box .product-desc.active {
  max-height: 100% !important;
}

.box-thong-so{margin-top:13px;}

.product-info-box .button-desc a:hover{background:#DA251C; color: #fff;}

.product-info-box .box-title{
  margin-bottom: 13px;
  display: block;
  background: #F1F1F1;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  line-height: 32px;
  padding: 0 8px;
  font-size:16px;
}

.product-info-comment-rating .title{
  margin-bottom: 12px;
  line-height: 36px;
  background: #F9F9F9;
  font-size: 16px;
  padding: 4px 8px;
}

#newCommentBox {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  background: rgba(0,0,0,.5);
  z-index: 9;
}

#newCommentBox .comment-box-container {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 50% auto auto;
  background: #fff;
  border-radius: 5px;
}

#newCommentBox .comment-box-container .title {
  display: block;
  overflow: hidden;
  padding: 10px;
  font-size: 17px;
  color: #161616;
  border-bottom: 1px solid #f2f2f2;
  font-weight: 700;
}

#newCommentBox .comment-box-container .back-btn {
  float: right;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #161616;
  font-size: 18px;
}

#newCommentBox .comment-box-container .form-wrap {
  display: block;
  overflow: hidden;
  background: #fff;
  padding: 10px;
}

#newCommentBox .comment-box-container .sex label {
  margin-bottom: 0;
  margin-right: 30px;
}

#newCommentBox .comment-box-container .sex .radio {
  display: inline-block;
}

#newCommentBox .comment-box-container .sex .radio input {
  display: none;
}

#newCommentBox .comment-box-container .form-wrap input {
  display: block;
  padding: 8px;
  width: 100%;
  margin: 10px 0;
  height: 35px;
  border: 1px solid #dadada;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
}

#newCommentBox .comment-box-container .sex .radio .icon {
  height: 13px;
  width: 13px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
  margin-top: -3px;
  border-radius: 50%!important;
  background: #fff;
  border: 2px solid #e20505;
  overflow: hidden;
}

#newCommentBox .comment-box-container .sex .radio input:checked~.icon::before {
  background-color: #e20505;
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  left: 2px;
  top: 2px;
  font-size: 11px;
  color: #fff;
  position: absolute;
}

#newCommentBox .comment-box-container .form-wrap input {
  display: block;
  padding: 8px;
  width: 100%;
  margin: 10px 0;
  height: 35px;
  border: 1px solid #dadada;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
}

#newCommentBox .comment-box-container .btn-send-form-cmt {
  display: block;
  width: 100%;
  margin: 0 auto 10px;
  padding: 8px;
  height: 40px;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  border: 1px solid #e20505;
  border-radius: 4px;
  background: #e20505;
  cursor: pointer;
  text-align: center;
}


.product-select-option .product-select-option-title{
  font-weight: 700;
  line-height: 26px;
  color: #3A3A3A;
  margin: 18px 0 10px;
  font-size:14px;
}


.product-select-option .btn-select-option{
  position: relative;
  color: #797979;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  border-radius: 5px;
  padding: 8px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);

  -webkit-transition: .1s all;
  transition: .1s all;
}

.product-select-option .btn-select-option:hover{
  border: 1px solid #009E2A;
}

.product-select-option .btn-select-option.active::before{
  content: '\f058';
  font-family: FontAwesome;
  color: #008A0E;
  line-height: 1;
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 13px;

}

.product-select-option .btn-select-option.active{
  border: 1px solid #009E2A;
  padding-left:22px;
}

.product-select-option .price-variant{
  width: 100%;
  display: block;
  font-size: 14px;
  color: #DA251C;
}

.video-unbox .title{font-size: 20px;line-height: 18px;padding: 10px 0 22px;}

.video-unbox iframe {
  display: block;
  height: 501px;
  width: 100%;
  border-radius: 5px;
}

.product-info-box .box-right .box-item{box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);border-radius: 20px;background: #fff;padding: 14px 12px;}
.product-info-box .box-right .box-right-title {
  font-size: 20px;
  padding: 18px 10px;
  background: #F3F3F3;
}

.info-tech-list{padding-bottom: 10px;font-size:14px;max-height: 663px;}
table{border-collapse:collapse;width:100%!important;background:#fff}
.info-tech-list td {padding: 10px;}

.button-box-spec{
  display: block;
  text-align: center;
  color: #000;
  width: 100%;
  margin: 20px auto;
  border: 1px solid #D9D9D9;
  border-radius: 81px;
  line-height: 50px;
  background: #F3F3F3;
}

.button-box-spec:hover{background: #e6e6e6;}
#product-spec table {
  max-width: 100%;
}
#product-spec{padding:15px;}
.spec-table td {
  padding: 10px;
}

.box-aritlce-product-detail{margin-top:20px;}

.box-aritlce-product-detail .title{ 
  padding: 15px 0 20px;
  font-size: 20px;
  line-height: 22px;
}

.box-aritlce-product-detail .item-article{border-bottom: 1px solid #D9D9D9;padding:10px 0;}
.box-aritlce-product-detail .item-article:last-child{border-bottom:none;}
.box-aritlce-product-detail .item-article .img-artice {width:161px;margin-right: 12px;}
.box-aritlce-product-detail .item-article .text-article{width: calc(100% - 161px - 12px);}

.product-info-detail-bottom{
  margin-bottom: 16px;
  background: #fff;
  margin-top: 10px;
}

.product-info-detail-bottom .box-title{
  line-height: 36px;
  background: #F9F9F9;
  font-size: 16px;
  padding: 4px 8px;

}

.content-product-detail-title{font-size:20px; line-height:28px;margin-bottom:43px;}


.content-product-detail-title .related-products{
  padding: 12px 40px;
  width: max-content;
  font-weight: 700;
  background: #fff;
  display: block;
  color: #000;
}

.content-product-detail-title .related.current{background: #DA251C;border-radius: 20px 0px 0px 0px;color:#fff}
.content-product-detail-title .history.current{background: #DA251C;color:#fff}
.related-product-content .swiper-button-prev, .related-product-content .swiper-button-next{background: #fff !important;box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);}
.related-product-content .swiper-button-prev::after, .related-product-content .swiper-button-next::after{color: #000 !important;}

/*REVIEW DETAIL*/
.box-info-review{
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  padding: 14px 6px;
}



.title-avgRate{
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  margin-bottom: 12px;
  text-transform: uppercase;

}

.review-info .avgRate{text-align: center;width: 35%;margin-right: 6px;}

.review-info .avgRate span{font-size:24px;color: #FF8A00;}

.avg-rate-count {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #000;
  padding-left: 10px;
  border-left: 1px solid #797979;
  width:calc(100% - 35% - 6px);
}

.rate-number i {
  padding-left: 3px;
  color: #FF8A00;
}

.nhan-xet-bar {
  width: 72%;
  height: 8px;
  background: #d9d9d9;
  margin: 0 10px;
  position: relative;
}

.nhan-xet-bar .percent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #DA251C;;
}

.total-avg-rate {
  color: #000;
}

.button-review{
  max-width: 160px;
  width: 100%;
  margin: 10px auto 0;
}
.button-review a{
  width: 100%;
  text-align: center;
  background: #DA251C;
  line-height: 30px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  display: block;
}


.rating-selection{display:inline-block}
.rating-selection input{opacity:0;float:right;width:17px;height:17px;padding:0;margin:0 0 0 -16px}
.rating-selection label:hover,.rating-selection label:hover~label{background-position:-16px -57px!important}
.rating-input:checked~.rating-star,.rating-input:checked~.rating-star:hover{background-position:-16px -57px!important}
.rating-selection label{position:relative;float:right;display:block;width:17px;height:17px;margin:0 3px;background-position:-16px -28px!important}
.btn-green{background:#DA251C;color:#fff;padding:7px 20px;font-size:15px;border-radius:5px;-moz-border-radius:5px;display:inline-block}
.box-review {
  width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: dashed 1px #acacac;
}

.box-list-star .rating{margin-left: 20px;}
.box-list-star{margin-bottom: 10px;}

.rating-form-left textarea{width:100%;height: 92px;resize: none;padding: 12px;outline: none;}

.rating-form-right input, .rating-form-right a{
  width: 100%;
  height: 50px;
  padding: 10px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #acacac;
  color: #161616;
  margin-top: 10px;
}

.rating-form-right a{color: #fff;background: #e31212;}

.list-review{margin-top:20px;}
.list-review .item{padding:12px 0;}
.list-review .item:last-child{margin:0;}

.list-review .item-name{margin-bottom:13px;}

.review-reply{margin-top:12px;}
.review-reply .text{margin-left:4px;}
.review-reply .text:hover{color:#DA251C;}


.comment-list{margin:0 12px}
.item-comment{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:20px}
.item-comment .comment-form-left .avatar-user{display:flex;justify-content:center;align-items:center;text-align:center;width:34px;height:34px;line-height:34px;margin-right:12px;border-radius:5px;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;background:#d9d9d9;text-transform:uppercase;font-weight:700;font-size:17px}
.item-comment .comment-form-left .avatar-user img{display:block;margin:auto;padding:6px;max-width:100%;height:auto}
#js-review-holder .item{margin-bottom:12px}
.item-comment .comment-form-right{width:calc(100% - 46px)}
.item-comment .comment-form-right .comment-name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
.item-comment .comment-form-right .comment-name .user-name{text-transform:capitalize;margin:0 10px 0 0}
.item-comment .comment-form-right .comment-name i{background:#DA251C;color:#fff;font-size:10px;padding:3px;border-radius:3px}
.item-comment .comment-form-right .comment-content{font-size:16px;margin:8px 0}
.item-comment .comment-form-right .info_feeback{margin-bottom:10px}
.item-comment .comment-form-right .info_feeback a{color:#DA251C;position:relative}
.reply-form-group{border:1px solid #d9d9d9;border-radius:12px;overflow:hidden;margin:15px 0}
.reply-list-container .item_reply:last-child{border-radius:0 0 12px 12px;border:0}
.item_reply{border-bottom:1px solid #e1e1e1;background:#f9f9f9;padding:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.reply-form-group textarea{display:block;padding:14px;resize:none;outline:0;height:122px;-webkit-box-shadow:none;box-shadow:none;border-radius:0;border:0;border-bottom:1px solid #d9d9d9;width:100%}
.reply-form-group .form-input{padding:12px}
.inputText{border:1px solid #d9d9d9;height:38px;padding:0 0 0 10px;margin-right:10px;min-width:250px;border-radius:5px}
.comment-form-input .btn-send-comment{color:#fff;font-weight:500;font-size:14px;background:#DA251C;border-radius:5px;padding:10px}
.p-comment-group .content-holder{outline:0;width:100%;border:0;padding:10px;height:122px;border-bottom:1px solid #e1e1e1}
.reply-template textarea{display:block;padding:14px;resize:none;outline:0;height:122px;-webkit-box-shadow:none;box-shadow:none;border-radius:0;border:0;border-bottom:1px solid #d9d9d9;width:100%}
.p-comment-group .cmt-form-group{border:1px solid #e1e1e1;border-radius:7px;overflow:hidden;margin-bottom:15px}
.p-comment-group .inputText{float:left;border:1px solid #e1e1e1;margin-right:10px;height:30px;padding-left:10px;border-radius:4px}
.reply-template .form-input{padding:12px}
.p-comment-group .form-group{margin:0}
.p-comment-group .inputText{float:left;border:1px solid #e1e1e1;margin-right:10px;height:30px;padding-left:10px;border-radius:4px}
.p-comment-group .btn-send-comment{background:#DA251C;color:#fff;text-decoration:underline;border:0;width:128px;height:38px;border-radius:4px;float:right;text-decoration:none;font-weight:700;font-size:14px}



.p-comment-group .content-holder {
  display: block;
  resize: none;
  outline: 0;
  width: 100%;
  border: 0;
  padding: 10px;
  height: 122px;
  border-bottom: 1px solid #e1e1e1;
  border-radius: 0;
}

.reply-template .form-input {
  padding: 12px;
}

.p-comment-group .form-group {
  margin: 0;
}

.p-comment-group .inputText {
  float: left;
  border: 1px solid #e1e1e1;
  margin-right: 10px;
  height: 38px;
  padding-left: 10px;
  border-radius: 4px;
}
.p-comment-group .btn-send-comment {
  background: #DA251C;
  color: #fff;
  text-decoration: underline;
  border: 0;
  width: 128px;
  height: 38px;
  border-radius: 4px;
  float: right;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  margin-bottom:12px;
  cursor:pointer;
}

.p-comment-group .cmt-form-group {
  border: 1px solid #e1e1e1;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 15px;
  margin-top:10px;
}

.box-comment{margin-top:30px;}
.box-comment-title{
  font-size: 20px;
  line-height: 38px;
  margin-bottom:12px;
}

.form-comment {
  width: 100%;
}

.form-comment textarea {
  font-size: 14px;
  color: #999;
  padding: 5px;
  margin: 0px;
  width: 100%;
  height: 70px;
  resize: none;
  border: 1px solid #D9D9D9;
  outline: 0;
  border-radius: 10px 10px 0px 0px;
  display: block;
  padding:10px;
}

.form-comment .send-comment {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #D9D9D9;
  border-radius: 0px 0px 10px 10px;
  border-top: none;
  justify-content: flex-end;
}

.form-comment .send-comment a.qd-cmt {
  float: left;
  font-size: 14px;
  color: #e31212;
  line-height: 27px;
}

.form-comment .send-comment a.btn-send-form-cmt {
  width: 60px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding:0 16px;
  background: #e31212;
  line-height: 23px;
  border-radius: 5px;
}


/*FANCYBOX*/
a[data-fancybox] img {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.fancybox__container {
  --fancybox-color: #fff;
  --fancybox-accent-color: red;
  --carousel-button-svg-filter: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
}
.fancybox__content {
  padding: 12px;
  border-radius: 15px;
}
.product-detail-page .fancybox__toolbar {
  position: relative;
  padding: 0;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border-bottom: 1px solid #edeef0;
  text-shadow: none;
  font-weight: 400;
  --carousel-button-svg-stroke-width: 1.75;
  --carousel-button-svg-width: 22px;
  --carousel-button-svg-height: 22px;
}
.product-detail-page .fancybox__slide {
  padding-top: 8px;
  padding-bottom: 8px;
}
.product-detail-page .fancybox__nav {
  --carousel-button-bg: #e5e7eb;
  --carousel-button-border-radius: 6px;
  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}
.product-detail-page .fancybox__leftCol {
  width: 100vw;
  min-height: 1px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.thumb-img{border: 1px solid #D9D9D9;border-radius: 5px;cursor:pointer;}
/*END*/



/*CART*/
.cart-header{width:100%;padding:0 10px;font-size:12px;padding-bottom: 6px;border-bottom: 1px solid #DA251C;}
.cart-header-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;line-height:52px;text-transform:uppercase;border-bottom:1px solid #D9D9D9}
.cart-item-info{
  overflow: unset;
  font-size: 12px;
  font-weight: lighter;
  color: #3A3A3A;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px 16px;
  border-bottom: 1px solid #D9D9D9;
}

.box-cart-item-list .cart-item-left{
  width: 100px;
  margin-right: 14px;
}

.cart-col-1{
  display:block;
}

.cart-col-1-img{
  width: 100%;
  height: auto;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  display: block;
  padding: 6px;
}

.cart-col-1-img img{
  width: 100%;
  border-radius: 8px;
  height: auto;
}

.box-cart-item-list .cart-item-right{
  width: calc(100% - 100px - 14px);
}

.cart-item-name{
  color: #3A3A3A;
  font-size: 14px;
}

.cart-item-price{
  font-size: 18px;
  font-weight: 700;
  color: #DA251C;
  line-height: 24px;
}

.cart-item-info .p-info{
  position: relative;
  color: #797979;
  line-height: 20px;
} 

.item-offer .title{
  color:#0d699e;
  font-weight:400;
  position:relative;
  cursor:pointer;
  margin:0;
  font-size: 12px;
}

.item-offer .title::before{
  content:'';
  width:12px;
  height:12px;
  background:url(../images/sprite_2021.png) no-repeat;
  background-position:-308px -322px;
  position:absolute;
  left:0;
  top:3px
}

.item-offer-content{
  padding:4px 0;
}

.item-offer-content b{
  color: #DA251C;
}

.item-offer-content span,.item-offer-content p{
  display:block;
  position:relative;
  padding-left:15px;
  margin:0;
}

.item-offer-content span::before,.item-offer-content p::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a5a5a5
}

.item-offer-content span li span::before{
  display:none!important
}

.blue{
  color: #0060AF;
}

.item-offer li{
  list-style: none;
}

.cart-item-marketPrice{
  font-size: 14px;
  line-height: 18px;
  color: #999;
  text-decoration: line-through;
}

.cart-item-info .cart-col-2{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.cart-item-info .cart-col-3{
  margin: 6px 0;
}

.price-cart-item{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}

.global-cart .product-info-offer{margin-top: 0 !important;border: 1px solid #DA251C !important;}
.global-cart .cart-customer-infomation{border-top:0 !important;}

.quantity-change{
  display: block;
  float: left;
  width: 38px;
  height: 28px;
  line-height: 28px;
  font-size: 16px;
  color: #000;
  cursor: pointer;
  text-align: center;
  border: 1px solid #D9D9D9;
}

.quantity-buy{
  width: 80px;
  float: left;
  border: 1px solid #D9D9D9;
  text-align: center;
  line-height: 28px;
  font-size: 20px;
  color: #3A3A3A;
  font-weight: 700;
  height: 28px;
  outline: none;
}



.cart-item-text{
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.cart-item-info .cart-col-4{
  margin-top: 10px;
  color: #D91605;
  font-weight: 600;
  display: flex;
  justify-content: flex-end;
}

.cart-item-info .cart-col-5{
  font-size: 16px;
  color: #DA251C;
  margin-left: 15px;
}

.customer-info p{
  padding-left: 6px;
  background: #F1F1F1;
}

.cart-customer-infomation{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding: 6px 10px 0;
  position: relative;
  border-top: 8px solid #DA251C;

}

.cart-customer-infomation::before{
  content: '';
  background-image: url(./image/cart/cart-border.jpg) ;
  background-position: -55px 0px;
  height: 4px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

}

.cart-customer-left{
  width: 100%;
  margin-right: 68px;
}

.customer-info{
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  color: #3A3A3A;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 10px;
}

.cart-customer-upload-file, .receipt-info{
  margin-top: 16px;
}

.cart-customer-group-info .item-group .title{margin-bottom:6px;}

.cart-customer-group-info input, .cart-customer-group-info select, .cart-customer-group-info input, .cart-customer-group-info select, .cart-customer-group-info textarea, .cart-customer-upload-file input{
  margin-bottom: 12px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  padding: 0 16px;
  height: 40px;
  color: #818181;
  outline: none;
  resize: none;
  width: 100%;
}
.cart-customer-group-info textarea::-webkit-input-placeholder {
  font-size: 14px;
}
.cart-customer-group-info textarea::-moz-placeholder {
  font-size: 14px;
}
.cart-customer-group-info textarea:-ms-input-placeholder {
  font-size: 14px;
}
.cart-customer-group-info textarea::-ms-input-placeholder {
  font-size: 14px;
}
.cart-customer-group-info textarea::placeholder {
  font-size: 14px;
}
.cart-customer-upload-file input{
  width: 100%;
}

.cart-customer-group-info input:nth-child(2), .cart-customer-group-info input:last-child{
  width: 100%;
}

.cart-customer-group-info input:nth-child(3){
  margin-right: 7px;
}

.cart-customer-group-info input:nth-child(7){
  width: 100%;
}

.cart-customer-group-info select{
  width: 100%;
  outline: none;
}

.label-container input{
  width: 12px !important;
  height: 12px;
}

.cart-sex-user{
  margin-bottom: 17px;
}

.label-container:first-child{
  margin-right: 12px;
}

.cart-customer-group-info textarea{
  height: 130px;
  padding: 15px;
  width: 100%;
  font-family: 'Roboto';
  resize: unset;
}

.cart-btn-group{
  width: 100%;
}

.cart-btn-group a{
  font-size: 16px;
  background: #DA251C;
  border-radius: 5px;
  line-height: 40px;
  color: #fff !important;
  display: block;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  float: left;
  margin-bottom: 8px;
}


.cart-btn-img{
  margin-right: 12px;
}

.cart-customer-right{
  width :100%;
}

.cart-customer-title-pay{
  background: #F1F1F1;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  line-height: 32px;
  color: #3A3A3A;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}


.cart-customer-title i{
  margin-right: 8px;
}

.cart-customer-right .label-container{
  margin-bottom: 8px;
  display:block;
}

.cart-customer-right .label-container input{
  margin-right: 8px;
  width: 14px !important;
  height: 14px !important;
}

.cart-customer-right .label-container input, .cart-customer-left .label-container input{
  border:2px solid white;
  -webkit-box-shadow:0 0 0 1px #EE1B25;
  box-shadow:0 0 0 1px #EE1B25;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:50%;
  background-color:#fff;
  -webkit-transition:all ease-in 0.2s;
  -o-transition:all ease-in 0.2s;
  transition:all ease-in 0.2s;
  cursor: pointer;
}

.cart-customer-left .label-container input{
  padding: 0 !important;
  margin-bottom: 0px !important;

}

.cart-customer-right .label-container input:checked, .cart-customer-left .label-container input:checked{
  background-color: #EE1B25;
}

.infomation-customer-detail{
  margin-left: 35px;
}

.infomation-customer-detail p{
  margin-bottom: 13px;
}



.total-title{
  margin: 20px 0;
}

.cart-customer-total{
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
  font-size: 13px;
  align-items: center;
  color: #797979;
}


.cart-customer-total-price{
  font-size: 14px;
}

.cart-btn-buy{
  margin-top: 15px;
}

.total-product span{
  font-weight: 600;
}

.total-product p{
  font-size: 18px;
  font-weight: 700;
  color: #DA251C;
}

.cart-btn-buy button{
  width: 100%;
  line-height: 46px;
  background: #DA251C;
  border-radius: 5px;
  font-size: 20px;
  border: none;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 10px;

}

.cart-go-pro a{color:#DA251C}

.cart-btn-buy button:hover{
  background: #ba1e22;
}

.none-product-cart{
  margin: 60px 0;
  text-align: center;
}

.none-product-cart p{
  font-size: 24px;
  font-weight: 700!important;
  margin-bottom: 16px; 
  line-height: 36px;
}

.none-product-cart a{
  font-size: 16px;
  font-weight: 600!important;
  color: #d91605;
}

.cart-voucher-group{
  padding: 12px;
  background: #f5f5f5;
  margin-bottom: 12px;
}

.cart-voucher-form{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 6px;
}

.voucher-input{
  width: 100%;
  font-size: 14px;
  height: 40px;
  padding: 0 2px 0 12px;
  border: none;
  outline: none;
}

.btn-check-voucher{
  top: 0;
  bottom: 0;
  right: 0;
  background: #DA251C;
  color: #fff !important;
  width: 140px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
}

.btn-check-voucher i{
  margin-right: 10px;
}

.voucher-message{
  display: none;
}

.cart-btn-pay{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.cart-pay{
  width: calc(100% / 2 - 5px);
  margin: 10px 10px 0 0;
  line-height: 1.5;
  padding: 5px;
  background-color: #e90707 !important;
  color: #ffffff !important;
  border: none;
  outline: none;
  border-radius: 5px;
}

.cart-pay p{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.cart-pay span{
  font-size: 12px;
}

.card-pay-bank{
  background-color: #288ad6 !important;
}

/* SEND CART */
.send-cart-success, .send-cart-error{
  max-width: 824px;
  margin: auto;
}

.send-cart-title{
  padding: 20px 10px;
  text-align: center;
}

.send-cart-title-name{
  font-weight: 600;
  color: #DA251C;
  font-size: 24px;
  font-size: 24px;
  margin-bottom: 8px;
  line-height: 30px;
}

.send-cart-title-descreption{
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.red-text{
  color: var(--red);
}

.send-cart-title-descreption a{
  font-weight: 700;
  text-decoration: none;
}

.send-cart-info{
  padding: 20px 15px;
  margin-top: 12px;
  background: #f2f2f2;
  font-weight: 300; 
  font-size: 14px;
}

.send-cart-info p{
  margin-bottom: 16px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.send-cart-info b{
  font-weight: 700;
  width: 50%;
  display: inline-block;
}

.send-cart-info span{
  width: 50%;
}

.send-cart-detail-product{
  margin-top: 15px;
  -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
  box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
  border: 1px solid #dee2e6!important;
}

.send-cart-product-title{
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #dee2e6;
}

.send-cart-product-info{
  padding: 10px;
  display: block;
  width: 100%;
  border-bottom: 1px solid #dee2e6;

}

.send-cart-item-left{
  width: 84px;
  margin-right: 10px;
  float: left;
  height: 100%;
}

.send-cart-item-left img{
  width: 100%;
  height: 100%;
}

.send-cart-item-center a{
  float: left;
  width: calc(100% - 94px);
  margin-bottom: 14px;
}



.send-cart-item-right{
  text-align: right;
  line-height: 20px;
  margin-top: 10px;
  font-size: 14px;
}

.new-price, .total-price{
  font-size: 18px;
  color: #D60000;
  font-weight: 800;
}

.new-price{
  color: #000 !important;
}

.old-price{
  font-size: 16px;
  color: #888;
  text-decoration: line-through;
}

.number-item{
  font-weight: 700;
  font-size: 12px;  
}

.total-item{
  color: #D91605;
  font-size: 16px;
  font-weight: 800;
}

.send-cart-total{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 15px;
}

.send-cart-total p:first-child{
  font-size: 16px;
  font-weight: 700;
}

.again-cart{
  display: block;
  text-decoration: none;
  padding: 22px 0 50px;
  text-align: center;
  color: #DA251C;
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
}

.send-cart-item-center a:hover{
  color: #D60000;
}

.send-cart-error-descreption{
  text-align: center;
}

.send-cart-error-title{
  color: #DA251C;
  font-size: 28px;
  font-weight: 700;
  margin: 15px 0;
  line-height: 36px;
}

.send-cart-error-descreption p:nth-child(3){
  font-size: 15px;
  margin-bottom: 15px;
  padding: 0 10px;
}


.send-cart-error-descreption p:last-child{
  font-size: 15px;
  margin-bottom: 48px;
}


.sprite-send-cart-face {
  background-position: -103px -96.5px !important;
  width: 30px;
  height: 30px;
  background-size: 155px 131.5px !important;
  margin: 0 auto;
  -webkit-filter: invert(34%) sepia(83%) saturate(2123%) hue-rotate(131deg) brightness(97%) contrast(101%);
  filter: invert(34%) sepia(83%) saturate(2123%) hue-rotate(131deg) brightness(97%) contrast(101%);
}


/*ARTICLE*/
.article-category {
  padding:10px;
  background: #f7f7f7;
  color: #000;
  font-weight: 600;
}

.article-category ul{
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
  font-size: 16px;
}

.article-category ul li img{
  width: 28px;
  margin-right:10px;
}


.article-page .article-content {
  background-color: #fff;
}

.article-page .section-hero {
  border-bottom: 2px solid #e1e1e1;
  padding-bottom: 20px;
}

.article-page .section-hero .sprite-article-icon-eye {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}


.article-page .section-hero .col-left {
  min-width: 0;
  border-radius: 25px;
  overflow: hidden;
}

.article-page .section-hero .col-right {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 38px;
}
.article-page .article-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}

.article-page .article-hero img {
  height: 100%;
}

.article-page .article-hero-content {
  position: absolute;
  bottom: 10%;
  left: 16px;
  max-width: 357px;
}

.article-page .article-hero-content .wrapper {
  gap: 30px;
  margin-top: 16px;
}

.article-page .swiper-article-category {
  background: linear-gradient(90deg, #FF5C00 0%, #FFA800 100%);
  border-radius: 20px;
  padding: 2px;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  padding: 6px;
}

.article-page .swiper-article-slider {
  position: relative;
}

.article-page .swiper-article-slider h2 {
  font-size: 18px;
  line-height: 40px;
  font-weight: 600;
  max-width: 740px;
}

.article-page .swiper-article-slider .wrapper {
  position: absolute;
  left: 10px;
  bottom: 30px;
}

.article-page .swiper-button-next,
.article-page .swiper-button-prev {
  background: rgba(202, 202, 202, 0.15);
}



.article-page .section-main-content {
  padding-top: 20px;
}

.article-page .article-box {
  margin-bottom: 24px;
  font-size: 16px;
}

.article-category li:hover, .article-category li.active{
  color:  #DA251C;
}

a.font-weight-bold.text-artilce-right.box-content-right.line-clamp-2 {
  width: calc(100% - 105px - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

.article-page .article-item .sprite-article-icon-clock,
.article-page .article-newest .sprite-article-icon-clock-small, .sprite-article-icon-clock {
  -webkit-filter: brightness(0%);
  filter: brightness(0%);
}



.article-page .article-box .grid {
  gap: 10px;
}

.article-page .article-box .article-image {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  display: block;
  margin-bottom: 10px;
}

.article-page .article-box .article-image img{
  border-radius: 5px;
  height: 100%;
}

.article-page .article-box .article-image h4 {
  position: absolute;
  left: 10px;
  bottom: 20px;
}

.article-page .article-box .article-text {
  margin: 10px 0;
  font-size: 19px;
  line-height: 25px;
}

.article-hero-features{
  font-size: 16px;
}

.article-hero-features p{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  word-break: break-all;
}

.article-hero-features p i{
  margin-right: 8px;
}

.article-page .article-box-heading {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  border-bottom: 2px solid  #DA251C;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}

.article-page .article-box-heading-category, .article-box-heading-detail{
  border-bottom:none !important;
}

.article-box-heading-detail{
  margin-bottom: 21px !important;
}

.article-hero-features-detail{
  padding-bottom: 14px;
  border-bottom: 1px solid #D9D9D9;
  gap: 10px;
  flex-wrap: wrap;
}

.article-page .article-box-btn {
  padding-top: 20px;
  text-align: center;
  position: relative;
}

.article-page .article-box-btn a {
  display: inline-block;
  color: #939393;
  padding: 9px 25px 7px;
  border: 1px solid #999999;
}

.article-newest ul{
  margin-top: 10px;
}

.article-page .article-newest-heading {
  font-size: 20px;
  line-height: 26px;
}

.article-page .article-newest {
  padding-bottom: 20px;
}

.article-page .article-newest .wrapper {
  margin-top: 8px;
}

.article-page .article-newest li {
  margin-bottom: 20px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
}

.article-page .article-newest li .box-img{
  width: 40%;
  margin-right: 10px;
}

.article-page .article-newest li .text-artilce-right{
  width: calc(100% - 40% - 10px);
}

.new-artilce-text{
  width: 50%;
}

.new-artilce-name{
  width: 100% !important;
}

.gap-10 {
  gap: 10px;
}

.article-page .article-newest img {
  border-radius: 8px;
}

.article-page .article-newest .wrapper {
  margin-top: 8px;
}

.article-page .product-sale img {
  max-width: 120px;
  margin-right: 10px;
}

.article-page .product-sale .article-box-heading {
  margin-bottom: 8px;
}

.article-page .product-sale li {
  padding: 12px 0;
  border-bottom: 2px solid #f6f6f6;
}

.article-page .product-sale li:last-child{
  padding-bottom:0!important;
  border-bottom:unset !important;
}

.article-page .article-banner {
  padding-top: 20px;
}

.product-sale .price{
  font-size: 16px;
  color:#DA251C;
  font-weight: 700;
  margin-top: 4px;
}


.product-hot-text{
  width: calc(100% - 105px - 10px);
  margin-left: 10px;
  margin-top: 10px;
}


.article-page .section-promotional .article-box-btn::after {
  right: 18%;
}

.article-page .section-promotional .article-box-btn::before {
  left: 18%;
}

.article-page .section-videos {
  background-color:  #DA251C;
  padding: 16px 10px;
  border-radius: 5px;
}

.article-page .section-videos .article-box-heading {
  margin-bottom: 10px;
  font-size: 25px !important;
  color: var(--white);
  font-style: normal;
}

.article-page .section-videos .header-global-item {
  display: inline-block;
  margin-top: 20px;
}

.article-page .section-videos .article-box {
  margin-bottom: 0;
}

.article-page .section-videos .text-video-artilce {
  font-size: 18px;
  line-height: 26px;
  color: var(--white);
}

.article-page .section-videos i, .col-left ul .article-image i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* ARTICLE CATEGORY */
.article-content-category{
  padding-top: 0 !important;
}

.article-box-title{
  margin-bottom: 12px;
}

.article-box-title span::before{
  content: '\f111';
  font-family: 'Font Awesome 5 Free';
  color: #000;
  font-size: 6px;
  margin-right: 5px;
  font-weight: 900;
}

.pagingViewed{
  padding: 8px 14px;
  background-color:  #DA251C;
  border-radius: 5px;
  color: #fff;
}

.pagingIntact{
  padding: 8px 14px;
  border-radius: 5px;
}

.box-article-paging{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 30px;
}

.article-box-detail{
  margin-top: 18px;
}

.article-box-detail p{
  line-height: 32px;
}

.article-box-detail h2,
.article-box-detail h3{
  margin: 12px 0;
  display: block;
  font-size: 20px;
  line-height: 26px;
}

.article-box-detail img{
  height: auto;
  margin: 0 auto;
  padding: 8px 0;
}

.toc_title img{
  width: 28px;
  margin: 12px 12px 12px 0;
}

#js-outp{margin-left:21px}

#js-outp li{list-style: auto;line-height: 26px;}

.article-image-detail{
  height: unset !important;
  width: 50%;
}

.article-item{
  margin-bottom: 25px;
}

.article-item-detail{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  gap: 10px;
}

.list-item-artilce-detail{
  gap: 10px !important;
}


.article-image-detail h4{
  bottom: 10px !important;
}

.article-detail-text{
  width: calc(50% - 18px);
}



.article-detail{
  margin-bottom: 0 !important;
}

.article-box-detail .archor-text-group {
  background-color: #F6F5F5;
  border-radius: 25px;
  padding: 0 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 10px 0;
}

.article-box-detail .archor-text-group ol {
  padding-bottom: 20px;
}

.text-ship {
  background:  #DA251C;
  color: #fff;
  padding: 6px;
  margin-top: 10px;
  font-size: 13px;
}

.text-ship a{
  color: yellow;
  font-size: 16px;
  font-weight: 700;
}

/* ICON MAP ARTICLE */
.sprite-article {
  background-image: url(/static/assets/default/images/sprite-article.png);
  background-repeat: no-repeat;
  background-size: 120.5px 99px;
  display: block;
}

.sprite-article-icon-clock {
  width: 20px;
  height: 20px;
  background-position: -2.5px -2.5px !important;
}

.sprite-article-icon-clock-small {
  width: 18px;
  height: 18px;
  background-position: -1.875px -1.875px !important;
  background-size: 90.375px 74.25px !important;
}

.sprite-article-icon-eye {
  width: 20px;
  height: 20px;
  background-position: -27.5px -2.5px !important;
}

.sprite-article-icon-gamepad {
  width: 28px;
  height: 28px;
  background-position: -52.5px -2.5px !important;
}

.sprite-article-icon-list {
  width: 25px;
  height: 25px;
  background-position: -2px -35px !important;
}

.sprite-article-icon-play {
  width: 53.5px;
  height: 53.5px;
  background-position: -31.5px -35.5px !important;
}

.sprite-article-icon-play-btn {
  width: 28px;
  height: 28px;
  background-position: -85.1px -2.5px !important;
}

.sprite-article-icon-tag {
  width: 28px;
  height: 28px;
  background-position: -90px -35.5px !important;
}

.sprite-article-icon-write {
  width: 26px;
  height: 28px;
  background-position: -90px -68.5px !important;
}


/* CUSTOMER */
.customer-content-group {
  max-width: 825px;
  margin: 20px auto;
  -webkit-box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 20%);
  box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 20%);
  background: #fff;
  padding: 20px 10px;
}

.customer-content-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
.customer-content-title a {
  color: #222;
}
.customer-content-title a:first-child {
  margin-right: 16px;
}
.customer-content-title a.current,
.customer-content-title a:hover {
  color: #DA251C;
  border-bottom: 1px solid #DA251C;
}

.customer-form {
  margin: auto;
  max-width: 616px;
}
.customer-form .item {
  margin-top: 20px;
  font-weight: 300;
}
.customer-form .item input {
  display: block;
  width: 100%;
  border: 1px solid #d7d7d7;
  padding: 0 12px;
  height: 42px;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 16px;
  outline: none;
}
.customer-form .item span {
  color: #d91605;
}
.customer-form .item p {
  font-size: 14px;
  font-weight: 400;
}
.btn-customer {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 6px;
  background-color: #DA251C;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
}
.password-input {
  position: relative;
}
.show-pass {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
}

.forgot-password {
  display: block;
  text-align: right;
  color: #208ce8;
  margin: 8px 0 0;
  font-size: 14px;
}

.forgot-password-content {
  max-width: 800px;
  padding-top: 50px;
  margin: 0 auto;
}
.forgot-password-content h2 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 8px;
}
.forgot-password-content p {
  font-size: 16px;
  margin-bottom: 20px;
}
.forgot-password-content table {
  width: 100%;
}
.forgot-password-content input {
  width: 100%;
  padding: 10px 8px;
  font-size: 18px;
  border-radius: 5px;
  outline: none;
  border: 1px solid var(--color-primary);
}
.forgot-password-content td:first-child {
  font-size: 18px;
}
.btn-forgot-password {
  display: block;
  width: 50%;
  margin: 30px auto;
}

.js-alert-mess {
  font-size: 16px;
  font-weight: 500;
  color: #d91605;
}

/* ACCOUNT */
.section-account .account {
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-size: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.section-account .account .left-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 60px 20px 0;
  width: 220px;
}

.section-account .account .left-title span {
  font-size: 16px;
  font-weight: 400;
}

.section-account .account .left-title p {
  font-size: 18px;
  margin-top: 4px;
}

.section-account .account .title-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}

.section-account .account .title-list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  width: 95px;
}
.section-account .account .title-list a:hover {
  background-color: #f5f5f5;
}

.section-account .account .col-right {
  padding: 10px;
  -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
}

.section-account .account .col-right h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
}

.section-account .col-right table {
  width: 100%;
}

.section-account .account .col-right .form-input {
  width: 100%;
  padding-left: 13px;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  height: 38px;
  margin-bottom: 8px;
  outline-color: var(--color-primary);
}

.section-account .btn-change {
  padding: 10px 20px;
  border: none;
  background-color: #ee2d24;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.section-account .order-page table {
  font-size: 16px;
}

.section-account .order-page td {
  padding: 4px;
  border: 1px solid #ccc;
}

.section-account .red-bold {
  color: #d91605;
  font-weight: 600;
}

.section-account .send-cart-info{
  padding: 20px 15px;
  margin-top: 12px;
  background: #f2f2f2;
  font-weight: 300; 
}

.section-account .send-cart-info p{
  margin-bottom: 16px; 
  width: 100%;
}

.section-account .send-cart-info b{
  font-weight: 700;
  width: 145px;
  display: inline-block;
}

.section-account .send-cart-info span{
  width: calc(100% - 200px);
}

.section-account .send-cart-detail-product{
  margin-top: 15px;
  -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
  box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
  border: 1px solid #dee2e6!important;
}

.section-account .send-cart-product-title{
  padding: 20px 15px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #dee2e6;
}

.section-account .send-cart-product-info{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  width: 100%;
  border-bottom: 1px solid #dee2e6;

}

.section-account .send-cart-item-left{
  margin-right: 8px;
  text-align: center;
}

.section-account .send-cart-item-left img{
  width: 100%;
}

.section-account .send-cart-item-center a{
  font-size: 14px;
  font-weight: 600;
  color: #222;
  text-decoration: none ;
}

.section-account .send-cart-item-right{
  line-height: 20px;
  margin-top: 8px;
}

.section-account .new-price, .total-price{
  font-size: 18px;
  color: #D60000;
  font-weight: 800;
}

.section-account .new-price{
  color: #000 !important;
  font-size: 17px;
}

.section-account .old-price{
  font-size: 16px;
  color: #888;
  text-decoration: line-through;
}

.section-account .number-item{
  font-weight: 700;
  font-size: 13px;  
  margin: 3px 0;
}

.section-account .total-item{
  color: #D91605;
  font-size: 17px;
  font-weight: 800;
}

.section-account .send-cart-total{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 15px;
}

.section-account .send-cart-total p:first-child{
  font-size: 16px;
  font-weight: 700;
}

.section-account .again-cart{
  display: block;
  text-decoration: none;
  padding: 22px 0 50px  ;
  text-align: center;
  color: #D60000;
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
}