/*
Theme Name: zippo
Theme URI: https://congminhweb.com/
Author: https://congminhweb.com/
Author URI: https://congminhweb.com/
Description: https://congminhweb.com/
Template: flatsome
Version: 1.7.0
*/
/*************** ADD CUSTOM CSS HERE. ***************/

/* Font Face Declarations - Quicksand */
/* Tối ưu hóa: Giữ nguyên các định nghĩa @font-face vì chúng là cần thiết để tải các trọng lượng font khác nhau. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/quicksand-v19-vietnamese_latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/quicksand-v19-vietnamese_latin-ext_latin-regular.eot');
  src: local(''),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-regular.woff2') format('woff2'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-regular.woff') format('woff'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-regular.ttf') format('truetype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-regular.svg#Quicksand') format('svg');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/quicksand-v19-vietnamese_latin-ext_latin-500.eot');
  src: local(''),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-500.eot?#iefix') format('embedded-opentype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-500.woff2') format('woff2'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-500.woff') format('woff'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-500.ttf') format('truetype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-500.svg#Quicksand') format('svg');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/quicksand-v19-vietnamese_latin-ext_latin-600.eot');
  src: local(''),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-600.eot?#iefix') format('embedded-opentype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-600.woff2') format('woff2'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-600.woff') format('woff'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-600.ttf') format('truetype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-600.svg#Quicksand') format('svg');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/quicksand-v19-vietnamese_latin-ext_latin-700.eot');
  src: local(''),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-700.woff2') format('woff2'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-700.woff') format('woff'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-700.ttf') format('truetype'),
       url('fonts/quicksand-v19-vietnamese_latin-ext_latin-700.svg#Quicksand') format('svg');
}

/* General Body and Typography */
/* Tối ưu hóa: Kết hợp các thuộc tính body và nav */
body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 0; /* Lưu ý: font-weight: 0 thường không hợp lệ, nên dùng 300, 400, 500, 600, 700 */
  color: #353535;
}

.nav > li > a {
  font-family: 'Quicksand', sans-serif;
  font-weight: 0; /* Lưu ý: font-weight: 0 thường không hợp lệ */
}

h1, h2, h3, h4, h5, h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: #0a0a0a;
}
h1, h2, h3, h4, h5, h6, .heading-font, .banner h1, .banner h2 {
  font-weight: 700; /* Trùng lặp với khối trên nhưng có thể là do kế thừa, giữ lại */
}

.alt-font {
  font-family: 'Quicksand', sans-serif;
  font-weight: 0 !important; /* Lưu ý: font-weight: 0 thường không hợp lệ */
}

/* Header Styles */
#header.header {
  background: #f53d2d;
  background: -webkit-gradient(linear, left top, left bottom, from(#f53d2d), to(#f63));
  background: linear-gradient(-180deg, #f53d2d, #f63);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
  transition: -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
}
header .searchform .search-field.mb-0 {
  border: 0px;
  box-shadow: none;
}
header .searchform {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .09);
  padding: .1875rem;
  border-radius: 2px;
  background: #fff;
}
header .searchform-wrapper:not(.form-flat) .searchform .ux-search-submit {
  padding: 0 15px;
  border-radius: 2px !important;
  min-width: 60px;
  max-width: 190px;
}
#wide-nav {
  margin-top: -20px
}
.header-main .nav > li > a {
  font-weight: 300
}
#masthead .header-inner.flex-row {
  align-items: end;
}
@media(min-width: 768px) {
  #masthead {
    padding-top: 10px
  }
}
@media (max-width: 549px) {
  #logo img {
    max-height: 40px !important;
  }
  .header-cart-icon[data-icon-label]:after {
    right: 0px
  }
}

/* Footer Styles */
footer#footer {
  font-size: 12px;
  color: rgba(0, 0, 0, .54);
}
footer#footer .info-footer ul {
  padding-left: 0px;
}
footer#footer .info-footer ul li {
  list-style: none;
  margin-bottom: 10px;
  margin-left: 0px
}
footer#footer .info-footer ul li a {
  color: rgba(0, 0, 0, .54);
}
footer#footer .button.icon.circle {
  background: #000;
  color: #fff
}
footer#footer .info-footer ul li a:hover {
  color: #f6470e
}

.coppyright {
  font-size: 14px;
  padding-top: 30px;
  border-top: .03125rem solid rgba(0, 0, 0, .1);
}
.coppyright ul li {
  display: inline-block;
  margin-bottom: 0px !important;
  border-right: 1px solid rgba(0, 0, 0, .2);
  padding: 0 .3125rem;
}

.quocgia ul, .quocgia p {
  display: inline-block;
  margin-bottom: 0px
}
.bottom ul li {
  display: inline-block;
  margin-bottom: 0px !important;
  border-right: 1px solid rgba(0, 0, 0, .2);
  padding: 0 15px;
}
.bottom {
  line-height: 25px
}

/* Hot Deal Section */
.hot-deal .box-image {
  text-align: center;
}
.hot-deal .box-image img {
  width: 45px;
}
.hot-deal .box-text.text-center {
  padding: 0px;
  font-size: 12px;
  margin-top: 10px;
}
.hot-deal .col {
  cursor: pointer;
  padding-bottom: 0px;
}
.hot-deal .col:hover {
  margin-top: -2px
}

/* Box Slider */
.box-slider {
  margin-top: 0;
  background-color: #fff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
  border-radius: .125rem;
  overflow: hidden;
}

/* Danh Muc Section */
.danhmuc h5.uppercase.header-title {
  color: rgb(45, 45, 45);
  font-size: 13px;
  text-decoration: none;
  line-height: 1.25rem;
  max-height: 2.5rem;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-transform: inherit;
  font-weight: 400;
  height: 40px;
}
.danhmuc .row-box-shadow-1 .col-inner {
  box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(171, 171, 171, 0.24);
  padding-top: 10px
}
.danhmuc .row-box-shadow-1 .col-inner:hover {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 1;
  border-color: rgba(0, 0, 0, .05);
  box-shadow: 0 0 0.8125rem 0 rgba(0, 0, 0, .05);
}

/* Section Title */
.section-title-container {
  margin-bottom: 0px;
  background: #fff;
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  padding: 0 1.25rem;
  line-height: 60px;
}
.section-title-normal {
  margin-bottom: 0px;
  font-size: 1rem;
  color: rgba(0, 0, 0, .54);
  font-weight: 500;
  border-bottom: 0px;
  padding: 0px 20px
}
.section-title-normal span {
  border-bottom: 0px;
  padding-bottom: 0px
}


/*==============================
= Blog & List Post Styles =
==============================*/
/* === Blog list - fix hình nhỏ và chia 2 hàng trên mobile === */

/* Giảm chiều cao hình ảnh cho gọn */
.list-post .post-item img {
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: cover;
    border-radius: 6px;
}

/* Giữ định dạng chữ */
.list-post .post-item .box-text {
    padding: 0;
    padding-top: 10px;
    text-align: left;
}
.list-post .post-item .post-title {
    font-size: 16px;
    height: 60px;
    overflow: hidden;
    margin-bottom: 0px;
}
.list-post .post-item .from_the_blog_excerpt {
    margin: 0;
    font-size: 14px;
    height: 41px;
    overflow: hidden;
}
.tin-tuc-section .list-post-ngang .post-item {
    padding: 0px 10px !important;
}
.tin-tuc-section .list-post-ngang .post-item .post-title {
    font-size: 14px;
    font-weight: 600;
}
/* === Khung viền nguyên khối & hiệu ứng hover như nút bấm === */
.tin-tuc-section .list-post-ngang .post-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
    transform: translateY(0);
}

.tin-tuc-section .list-post-ngang .post-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
    border-color: #d0d0d0;
}

/*======================================================
= Hiệu ứng khung viền nguyên khối & hover như nút bấm =
======================================================*/
.has-shadow>.product-small.col>.col-inner:hover{
border: 1px solid #ee4d2d;
}
.has-shadow > .product-small.col > .col-inner {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
    transform: translateY(0);
    z-index: 1;
    position: relative;
}

.has-shadow > .product-small.col > .col-inner:hover {
    border-color: #ee4d2d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    z-index: 2;
}
@media (min-width: 768px) {
  .has-shadow > .product-small.col > .col-inner:hover {
    border-color: #ee4d2d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    z-index: 2;
  }
}
/* ================================
= MINI CART WIDGET (Giỏ hàng nhỏ) =
=============================== */

.product_list_widget span.amount {
  color: #e80000; /* Màu đỏ cho giá tiền */
}

ul.product_list_widget li img {
  border-radius: 50%; /* Bo tròn ảnh sản phẩm */
}
/* =======================================
= Hiệu ứng Fade In Right như Elementor =
======================================= */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =======================================
=  Widget (Block Widget 3) =
======================================= */
.widget-title.shop-sidebar {
  font-weight: bold;        /* In đậm */
}

#block_widget-3 .icon-box:hover{
    background:white
}
#block_widget-3 .icon-box{
    background: #fafafa;
    padding: 2px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px dashed #ececec
}
#block_widget-3 .icon-box .icon-box-text{
    padding-left: 0;
    font-size: 14px;
}
#block_widget-3 .icon-box h4{
    font-size: 15px;
    margin-bottom: -2px;
    padding-top: -50px;
}


/* Grid Tools */
.grid-tools .quick-view {
  font-size: 14px;
  text-transform: initial;
  font-weight: 300;
  padding: 0px;
  color: #fff
}

/* Badges and Promotions */
.shopee-badge--promotion:after {
  content: "";
  width: 0;
  height: 0;
  left: 0;
  bottom: -4px;
  position: absolute;
  border-color: transparent rgba(255, 212, 36, .9);
  border-style: solid;
  border-width: 0 19px 4px;
}
.badge-container.absolute.left {
  right: 0px;
  left: auto;
  top: 0px;
  margin-top: 0px;
}
.badge-container.absolute.left .badge-inner {
  background-color: rgba(255, 212, 36, .9);
}
.badge-container.absolute.left .badge-inner:before {
  content: "";
  width: 0;
  height: 0;
  left: 0;
  bottom: -4px;
  position: absolute;
  border-color: transparent rgba(255, 212, 36, .9);
  border-style: solid;
  border-width: 0 19px 4px;
}
.badge-container.absolute.left .badge {
  width: 38px;
  height: 35px;
}
.badge-container.absolute.left .badge-inner .onsale {
  font-size: 12px;
  color: #ee4d2d;
}

/* Cart Icon */
.header-cart-icon:before {
  background-color: #ffffff !important;
  color: #ff3f00;
  opacity: 1;
}
.header-cart-icon[data-icon-label]:after {
  border-radius: 2.75rem;
  min-width: .6875rem;
  line-height: 1.2em;
  text-align: center;
  height: 1rem;
  border: .125rem solid #ee4d2d;
  color: #ee4d2d;
  background-color: #fff !important;
  right: -5px;
  top: -.5rem;
  margin-right: -.875rem;
  box-shadow: none !important;
  width: 25px;
  height: 20px;
  opacity: 1;
  font-size: 13px;
  line-height: 15px;
}

/* Shop Page Titles and Breadcrumbs */
.featured-title .page-title-inner {
  padding-top: 5px;
  padding-bottom: 5px
}
.shop-page-title {
  color: rgba(0, 0, 0, 0.8) !important;
  text-shadow: none;
  font-size: 16px;
  font-weight: 300;
  margin: 0px;
  text-shadow: none !important;
}
.dark .breadcrumbs a,
.breadcrumbs a { /* Tối ưu hóa: Kết hợp hai quy tắc cho breadcrumbs a */
  color: rgba(0, 0, 0, 0.8) !important;
}
.dark .breadcrumbs {
  color: rgba(0, 0, 0, 0.8) !important;
  font-size: 12px;
  display: none;
}
.breadcrumbs { /* Tối ưu hóa: Đã có trên, nhưng đây có thể là quy tắc chung */
  font-size: 14px;
}
.dark .form-flat .woocommerce-ordering select.orderby {
  background-color: rgb(254, 99, 51) !important;
  color: #fff !important;
  border-radius: 0px;
  height: 30px;
  font-size: 12px;
  cursor: pointer;
}
.dark .form-flat .woocommerce-ordering select.orderby option {
  color: #fff
}
.shop-page-title.featured-title .title-overlay {
  background-color: #fff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
  border-radius: .125rem;
}
.page-title.shop-page-title.product-page-title .page-title-inner {
  padding-top: 10px;
  padding-left: 0px;
  min-height: 0px;
  padding-right: 0px;
}
.woocommerce-breadcrumb .divider {
  font-size: 0px;
  opacity: 1
}
.woocommerce-breadcrumb .divider:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f105";
  font-size: 14px;
  color: rgba(0, 0, 0, .8);
  margin: 0px 5px
}
.bread-crumb {
  font-size: 14px;
}

/* Widgets */
#shop-sidebar span.widget-title {
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
}
.widget .is-divider {
  display: none;
}
.widget_layered_nav li a {
  font-size: 14px;
}
.widget_layered_nav li {
  border: 0px;
} /* Tối ưu hóa: Đã có trên, nhưng đây có thể là quy tắc chung */
.widget > ul > li .count {
  display: none;
}
.widget.widget_layered_nav > ul > li + li {
  border: 0px;
}
.widget > h2.title-head {
  margin-bottom: 0px
}
.widget_layered_nav li a:before {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  width: .8125rem;
  height: .8125rem;
  line-height: .6875rem;
  border: 1px solid rgba(0, 0, 0, .26);
  border-radius: 2px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: .625rem;
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .05);
  display: inline-block;
  content: ""
}
ul.yith-wcan-list li.chosen a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
  font-size: 9px;
  color: #fe6333;
  opacity: 1;
  font-weight: 300;
  line-height: 10px;
  margin-right: 10px;
}
#shop-sidebar .widget {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}

/* Product Page General */
.bg-light {
  background: #FFF
}
.product-main > .content-row, .product-page-sections .product-section {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
  padding-bottom: 15px;
  padding-top: 15px
}
.product-page-sections .product-section { /* Tối ưu hóa: Đã có trên, nhưng đây có thể là quy tắc riêng biệt */
  padding: 15px;
  margin-bottom: 15px
}
h1.title-product {
  font-weight: 500;
  font-size: 1.25rem;
}

/* Variations */
table.variations {
  width: auto
}
.variations td.label label {
  font-size: 14px !important;
  padding-right: 10px;
  font-weight: 300 !important;
  color: #757575;
}
.variations .reset_variations {
  position: relative;
}
.button-variable-item span {
  font-size: 13px
}
.woo-variation-swatches-stylesheet-enabled.woo-variation-swatches-style-squared .variable-items-wrapper .variable-item.button-variable-item {
  cursor: pointer;
  min-width: 5rem;
  min-height: 2.125rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .25rem .75rem;
  color: rgba(0, 0, 0, .8);
  text-align: left;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .09);
  position: relative;
  background: #fff;
  outline: 0;
  word-break: break-word;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: none
}
.woo-variation-swatches-stylesheet-enabled.woo-variation-swatches-style-squared .variable-items-wrapper .variable-item.button-variable-item:hover {
  color: #ee4d2d;
  border-color: #ee4d2d;
}
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, .woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
  color: #ee4d2d !important;
  border-color: #ee4d2d !important;
  box-shadow: none !important
}
.product-variation__tick {
  width: .9375rem;
  height: .9375rem;
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: 0;
  display: none;
}
.product-variation__tick:before {
  border: .9375rem solid transparent;
  border-bottom-color: #ee4d2d;
  content: "";
  position: absolute;
  right: -.9375rem;
  bottom: 0;
}
.product-variation__tick > .icon-tick-bold {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 8px;
}
.shopee-svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  position: relative;
}
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected .product-variation__tick {
  display: block;
}

/* Price Styling */
/* Tối ưu hóa: Kết hợp và sắp xếp lại các quy tắc liên quan đến giá */
.woocommerce-Price-amount.amount {
  font-size: 18px !important; /* Kích thước font tổng quát cho giá tiền */
}

span.amount { /* Quy tắc chung cho tất cả span.amount */
  white-space: nowrap;
  color: #f7462e; /* Màu đỏ cho giá hiện tại */
  font-weight: bold;
}

.product-small.box span.amount { /* Cụ thể hơn cho giá trong box sản phẩm nhỏ */
  font-size: 1rem !important;
  color: #FF0000 !important;
  font-weight: 500 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-info .price-wrapper {
  padding: 15px 20px;
  background: #fafafa;
  margin-bottom: 10px
}
.product-info ins span.amount {
  font-size: 1.875rem;
  font-weight: 500;
  color: #ee4d2d;
}

/* Product Info */
.product-info .star-rating span:before, .product-info .star-rating:before, .woocommerce-page .product-info .star-rating:before {
  color: #ee4d2d;
}
.product-info ._2MH7dC {
  font-size: 14px;
  background: url(images/re.png) left center;
  padding-left: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  height: 22px;
  line-height: 22px;
}
select, .select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection {
  box-shadow: none
}
.product-info .social-icons .button.icon.circle {
  padding-left: 0;
  padding-right: 0;
  background: #000;
  color: #fff;
  border: 0px;
  line-height: 32px;
}
.product-info .social-icons .button.icon i {
  font-size: 12px;
}
.button.tooltip {} /* Keep as is */
.sticky-add-to-cart--active {
  background-color: #fff !important
}
.product-info .sticky-add-to-cart--active .price-wrapper {
  padding: 0px;
  background: none;
}
.mt-wh {
  background: rgba(0, 0, 0, .02);
  color: rgba(0, 0, 0, .87);
  font-size: 1.125rem;
  padding: .875rem;
  text-transform: capitalize;
  font-weight: 300;
  text-transform: uppercase;
}

/* Buttons and Quantity */
.single_add_to_cart_button.button {
  background-color: #f6470e !important;
  border-radius: 3px;
  font-weight: 300;
  border: 0px;
  font-size: 13px;
  padding: 0px 30px;
}
.quantity input {
  padding-left: 0;
  padding-right: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  height: 32px;
  box-shadow: none
}
.quantity input[type='button'].is-form.button {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  text-shadow: 1px 1px 1px #fff;
  color: #666;
  border: 1px solid #ddd;
  text-transform: none;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  min-height: 32px;
  width: 32px;
  border-radius: 3px;
}
.button, input[type='submit'], input[type='submit'].button, input[type='reset'].button, input[type='button'].button {
  font-weight: 300
}

/* Related Products */
.related .product-small.col {
  padding: 0px 5px 10px 5px !important;
}
.related .product-small.col .col-inner {
  background: #fff;
  border-radius: 3px
}
.related .product-small.col .col-inner .box-text {
  padding-top: .7em;
  padding-bottom: 1.4em;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  width: 100%;
  font-size: .9em;
}
.product-section-title {
  padding-top: 15px;
  text-transform: inherit;
  font-weight: 300;
}

/* Reviews and Comments */
div#reviews.woocommerce-Reviews {
  font-size: 14px;
  font-weight: 300;
}
#comments a.btn-reviews-now {
  background-color: #f6470e;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 3px;
  /* text-transform: uppercase; */
  font-weight: 300;
  text-decoration: none;
}
span.devvn_num_reviews {
  min-width: 150px;
  color: #f6470e;
}
span.devvn_stars_value i {
  margin: 0 3px;
  color: #f57201;
}
.woocommerce #review_form #respond p.form-submit input#submit, .woocommerce #reviews #comments ol.commentlist #respond p.form-submit input#submit {
  background-color: #f6470e;
  color: #fff;
  border: 0;
  width: auto;
  margin: 0 auto;
  padding: 10px 30px;
  text-transform: inherit;
  height: 40px;
  min-height: inherit;
  line-height: inherit;
  font-weight: 300;
}

/* Messages and Alerts */
#wrapper > .message-wrapper {
  font-size: 14px
}
#wrapper > .message-wrapper .success-color {
  color: #f7452f;
}

/* Dropdowns and Navigation */
.nav-right li.current-dropdown:last-child > .nav-dropdown, .nav-right li.has-dropdown:hover:last-child > .nav-dropdown {
  border: 0px !important;
  border-radius: 5px;
}
.nav-dropdown-has-arrow li.has-dropdown:before {
  border: 0px !important
}
ul.product_list_widget li a:not(.remove) {
  font-size: 14px
}
ul.product_list_widget li dl {
  line-height: 15px
}
.nav-dark .is-outline, .dark .nav > li > a, .dark .nav > li.html, .dark .nav-vertical li li.menu-item-has-children > a, .dark .nav-vertical > li > ul li a, .nav-dropdown.dark > li > a, .nav-dropdown.dark .nav-column > li > a, .nav-dark .nav > li > a, .nav-dark .nav > li > button {
  color: #fff
}
.nav-dropdown.nav-dropdown-default > li > a {
  border: 0px
}

/* Custom Overlay */
.customized-overlay-image {
  position: absolute;
  z-index: 9
}

/* Account/Login */
._13C8_x {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px 20px;
  color: rgba(0, 0, 0, .54);
  display: block;
  font-size: 14px;
}
._110HpJ {
  vertical-align: middle;
  height: 20px;
}
.XNBuk1 {
  color: #222;
  text-transform: capitalize;
  font-size: .875rem;
  margin: 0 20px 0 5px;
}
.lightbox-content {
  background-color: #fff;
  max-width: 505px;
  margin: 0 auto;
  transform: translateZ(0);
  box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  border-radius: 5px
}
header .account-item > a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f2be";
  margin-right: 7px;
  font-size: 19px
}
.account-login-inner, .account-login-inner h3 {
  text-transform: initial;
  font-weight: 300
}
label, legend {
  font-weight: 300
}
input[type='email'], input[type='date'], input[type='search'], input[type='number'], input[type='text'], input[type='tel'], input[type='url'], input[type='password'], textarea, select, .select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection {
  border: 1px solid rgba(0, 0, 0, .14);
  box-shadow: none;
  border-radius: 2px
}
.nav-dropdown-has-arrow li.has-dropdown:after {
  border-color: rgba(221, 221, 221, 0);
  border-bottom-color: #fff;
  border-width: 13px;
  margin-left: -10px;
}

/* Category Page Specific */
.category-page-row > .large-2.hide-for-medium {} /* Keep as is */
.archive-page-header .page-title {
  font-size: 0px;
  font-weight: 300;
  text-transform: initial;
  text-align: left;
}
.archive-page-header .page-title span {
  font-size: 20px;
}
body.category .col.post-item .box {
  background: #fff;
}
body.category h5.post-title {
  margin-bottom: 10px;
}
body.category .from_the_blog_excerpt {
  font-style: italic;
}
.entry-category a {
  display: inline-block;
  background: #f8492f;
  padding: 5px 10px;
  color: #fff;
}
.entry-header-text-top {
  padding-bottom: 0px
}
.single article {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
}
.time_post {
  font-size: 12px;
  margin-bottom: 10px;
  font-style: italic;
}
.box-category img {
  border-radius: 100%
}

/* Pagination */
.nav-pagination > li > span, .nav-pagination > li > a {
  border: 0px;
  color: rgba(0, 0, 0, .4);
  padding: 0;
  min-width: 2.5rem;
  text-align: center;
  height: 1.875rem;
  font-size: 1.25rem;
  margin-left: .9375rem;
  margin-right: .9375rem;
  line-height: 30px;
  font-weight: 300;
  border-radius: 2px
}
.nav-pagination > li > .current {} /* Keep as is */
.woocommerce-pagination ul.links li {
  margin-right: 10px
}
.woocommerce-pagination {
  margin-top: 10px
}

/* Mobile Specific (max-width: 768px) */
@media (max-width: 768px) {
  .off-canvas-right .mfp-content, .off-canvas-left .mfp-content {
    background: #fff
  }
  .off-canvas .nav-vertical > li > a {
    font-weight: 300;
    padding-top: 10px;
    padding-bottom: 10px
  }
  .nav-sidebar.nav-vertical > li + li {
    border-top: 0px;
  }
  .mobile-sidebar .header-search-form {
    background: #f6470e;
  }
  .off-canvas .sidebar-menu {
    padding: 0px
  }
  .off-canvas .searchform .button.icon {
    background-color: #ffffff;
    color: red;
    border: 0px;
    box-shadow: none;
  }
  .off-canvas .search-field {
    border: 0px;
    border-radius: 0px;
  }
  .off-canvas .searchform {
    overflow: hidden;
    border-radius: 3px
  }
  .off-canvas .autocomplete-suggestion .search-price {
    display: none;
  }
  .off-canvas .autocomplete-suggestion img + .search-name {
    color: #fff
  }
  .off-canvas .live-search-results {
    color: #fff
  }
  body.category .col.post-item .box .box-text {
    padding: 10px
  }
}

/* Page Template Default */
body.page-template-default .page-wrapper {
  background: #fff
}

/* Carousel/Slider */
.xuhuong .flickity-prev-next-button {
  opacity: 1
}

/* Form Rows */
p.form-row-first, p.form-row-last {
  width: 100%
}


.slider-nav-circle .flickity-prev-next-button svg, .slider-nav-circle .flickity-prev-next-button .arrow{
    background: #fff;
    box-shadow: 0px 0px 5px #ccc;
    border: 0px;
    box-shadow: 0 1px 12px 0 rgba(0,0,0,.12);
    cursor: pointer;
    font-size: 10px;
    width: 45px;
    padding: 13px;
}
.MW4BW_ {
    position: absolute;
    left: 0;
    top: .625rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    z-index: 1;
}


._150RS_ {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: .9375rem;
    font-size: .5625rem;
    line-height: .6875rem;
    font-weight: 500;
    padding: 0 4px;
    border-top-right-radius: .125rem;
    border-bottom-right-radius: .125rem;
    background: currentColor;
    left: -.1875rem;
}

.bgXBUk.bgXBUk {
    padding: 0 .25rem;
    height: 1rem;
}
._150RS_:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -.1875rem;
    border-top: .1875rem solid;
    border-left: .1875rem solid transparent;
    filter: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><f…B type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter);
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
}
.bgXBUk .lVCR4M {
    color: #fff;
    font-size: .75rem;
    line-height: .875rem;
}
.box-image{
    overflow: initial;
    -webkit-mask-image: none;
}

 .mp-notification-element-wrapper{
        position: fixed;
                    left: -400px;
            -webkit-animation: slidelf 0.5s forwards;
            animation: slidelf 0.5s forwards;
        
        -webkit-animation-delay: 1s;
        bottom: 60px;
        display: block;
        animation-delay: 1s;
        z-index: 999999;
    }

    @-webkit-keyframes slidelf {
        100% {position: fixed; left: 15px; bottom: 15px;}
    }

    @keyframes slidelf {
        100% {position: fixed; left: 15px; bottom: 15px;}
    }

    @-webkit-keyframes slideri {
        100% {position: fixed; right: 15px; bottom: 15px;}
    }

    @keyframes slideri {
        100% {position: fixed; right: 15px; bottom: 15px;}
    }

    .mp-notification-element-content{
        width: 300px;
                    left: 0px;
                position: absolute;
        bottom: 0px;
        display: none;
        z-index: 9999;
    }
    .mp-notification-item-title{
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 0px;
        margin-top: 2px!important;
        line-height: 1.2;
        color: #512b2b;
    }
    .mp-notification-item-description{
        line-height: 12px;
        padding-top: 2px;
        user-select: none;
        font-size: 12px;
        margin-top: 0;
        color: #3d2b2b;
    }
    .mp-notification-item-media {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
        align-items: flex-start;
        cursor: pointer;
    }
    .mp-notification-item-media-body {
        -ms-flex: 1;
        flex: 1;
    }
    .mp-notification-list-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
        margin-top: 0px;
        margin-bottom: 0;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }
    .mp-notification-item-media-thumb {
        margin-right: 5px;
        -ms-flex-item-align: center!important;
        align-self: center!important;
        vertical-align: middle;
        border-style: none;
        width: 78px;
        /*height: 80px;*/
    }
    .mp-notification-list-group-item {
        position: relative;
        display: block;
        padding: 0px 5px;
        margin-bottom: -1px;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.125);
        text-align: -webkit-match-parent;
        list-style: none;
    }
    .mp-notification-list-group-item-active {
        margin-bottom: 0px;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        z-index: 2;
        font-weight: bold;
        font-size: 15px;
        text-align: center;
        height: 45px;
        border-radius: 8px 8px 0 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #13588e; 
        color: #ffffff;
    }
    .mp-notification-list-group-item:last-child {
        margin-bottom: 0;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: .25rem;
    }
    .mp-notification-element-button-wrapper{
        display: block!important;
        bottom: 0px;
        height: 50px;
        width: 50px;
        border-radius: 100% !important;
        background-color: #a44476;
        left: 0px;
        z-index: 999;
        background-color: #13588e;
    }
    .mp-notification-element{
        position: relative;
    }
    .mp-notification-element a {
        display: block;
        width: 50px;
        height: 50px;
                    -webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
            -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
            -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
            -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
            animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            }
    @-moz-keyframes quick-alo-circle-img-anim {
        0% {
            transform: rotate(0) scale(1) skew(1deg)
        }
        10% {
            -moz-transform: rotate(-25deg) scale(1) skew(1deg)
        }
        20% {
            -moz-transform: rotate(25deg) scale(1) skew(1deg)
        }
        30% {
            -moz-transform: rotate(-25deg) scale(1) skew(1deg)
        }
        40% {
            -moz-transform: rotate(25deg) scale(1) skew(1deg)
        }
        50% {
            -moz-transform: rotate(0) scale(1) skew(1deg)
        }
        100% {
            -moz-transform: rotate(0) scale(1) skew(1deg)
        }
    }

    @-webkit-keyframes quick-alo-circle-img-anim {
        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)
        }
    }

    @-o-keyframes quick-alo-circle-img-anim {
        0% {
            -o-transform: rotate(0) scale(1) skew(1deg)
        }
        10% {
            -o-transform: rotate(-25deg) scale(1) skew(1deg)
        }
        20% {
            -o-transform: rotate(25deg) scale(1) skew(1deg)
        }
        30% {
            -o-transform: rotate(-25deg) scale(1) skew(1deg)
        }
        40% {
            -o-transform: rotate(25deg) scale(1) skew(1deg)
        }
        50% {
            -o-transform: rotate(0) scale(1) skew(1deg)
        }
        100% {
            -o-transform: rotate(0) scale(1) skew(1deg)
        }
    }
    .mp-notification-element-button-img {
        display: block;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        max-width: 35px;
        max-height: 35px;
    }
    .mp-notification-element-button-count {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0;
        top: -5px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        border-radius: 100% !important;
        background-color: #f00;
    }
    .mp-floating-cart-active .mp-notification-element-content{
        display: block;
    }
    .mp-btn-close{
        position: absolute;
        top: 5px;
        right: 10px;
        width: 20px;
        height: 20px;
        z-index: 999;
    }
    .mp-notification-item-close{
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 25px;
        color: #ffffff;
        font-weight: bold;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        opacity: 1;
    }
    .mp-notification-item-close:before, .mp-notification-item-close:after {
        position: absolute;
        left: 15px;
        content: " ";
        height: 20px;
        width: 2px;
        border-radius: 3px !important;
        background-color: #ffffff;
    }
    .mp-notification-item-close:before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .mp-notification-item-close:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    @media screen and (max-device-width: 480px) and (orientation: portrait){
        .mp-notification-element-content{
            width: 250px;
        }
        .mp-notification-item-media-thumb{
            width: 50px;
            /*height: 50px;*/
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media screen and (max-device-width: 640px) and (orientation: landscape){
        .mp-notification-element-content{
            width: 270px;
        }
        .mp-notification-item-media-thumb{
            width: 50px;
            /*height: 50px;*/
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media screen and (max-device-width: 640px){
        .mp-notification-element-content{
            width: 270px;
        }
        .mp-notification-item-media-thumb{
            width: 50px;
            /*height: 50px;*/
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
        .mp-notification-element-content{
            width: 250px;
        }
        .mp-notification-item-media-thumb{
            width: 50px;
            /*height: 50px;*/
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
        .mp-notification-element-content{
            width: 250px;
        }
        .mp-notification-item-media-thumb{
            width: 50px;
            /*height: 50px;*/
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
        .mp-notification-element-content{
            width: 270px;
        }
        .mp-notification-item-media-thumb{
            width: 50px;
            /*height: 50px;*/
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px){
        .mp-notification-element-content{
            width: 300px;
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media only screen and (max-width: 768px) {
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    @media screen and (min-width: 1024px){
        .mp-notification-element-content{
            width: 300px;
        }
        .mp-notification-element-wrapper{
            display: block!important;
        }
    }
    
/* ẩn QR */
.vietqr-row, 
.vietqr-row .list-bank {
  display: none !important;
}

/*==============================
=cuôn ngang =
==============================*/
/* === Accessories Section (Phụ kiện) === */
.phu-kien {
  padding-bottom: 15px;
  margin-bottom: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.phu-kien::-webkit-scrollbar {
  height: 5px;
  background-color: #f5f8fd;
}
.phu-kien::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--primary-color, #a8d6e0);
}

.phu-kien .col-inner {
  display: flex;
  flex-wrap: nowrap;
  min-width: fit-content;
  width: auto;
}

.phu-kien a.plain {
  width: 120px;
  text-align: center;
  flex-shrink: 0;
}

.phu-kien p {
  font-size: 14px;
  white-space: normal;
}

.phu-kien .icon-box-img img {
  padding-top: 0;
}

.phu-kien .icon-box {
  position: relative;
}

.phu-kien .icon-box .icon-inner {
  height: 126px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

.phu-kien .icon-box .icon-box-img {
  margin: 15px 0 5px;
}

.phu-kien .icon-box .icon-box-text {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 95px;
  color: #fff;
  text-align: left;
  font-weight: 700;
}

.phu-kien a.plain:hover {
  color: #fab200;
}

/* Desktop view: 2 rows, 10 items per row */
@media (min-width: 1024px) {
  .phu-kien {
    overflow-x: hidden;
  }

  .phu-kien .col-inner {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }

  .phu-kien a.plain {
    width: calc(100% / 10);
    max-width: 120px;
    flex-shrink: 1;
  }
}
/* Background colors per item */
.phu-kien a:nth-child(1)  .icon-inner { background: #FCA5A5; }
.phu-kien a:nth-child(2)  .icon-inner { background: #FDA4AF; }
.phu-kien a:nth-child(3)  .icon-inner { background: #F9A8D4; }
.phu-kien a:nth-child(4)  .icon-inner { background: #C4B5FD; }
.phu-kien a:nth-child(5)  .icon-inner { background: #A5B4FC; }
.phu-kien a:nth-child(6)  .icon-inner { background: #93C5FD; }
.phu-kien a:nth-child(7)  .icon-inner { background: #6EE7B7; }
.phu-kien a:nth-child(8)  .icon-inner { background: #FCD34D; }
.phu-kien a:nth-child(9)  .icon-inner { background: #FDBA74; }
.phu-kien a:nth-child(10) .icon-inner { background: #D1D5DB; }
.phu-kien a:nth-child(11) .icon-inner { background: #D1D5DB; }
.phu-kien a:nth-child(12) .icon-inner { background: #FDBA74; }
.phu-kien a:nth-child(13) .icon-inner { background: #FCD34D; }
.phu-kien a:nth-child(14) .icon-inner { background: #6EE7B7; }
.phu-kien a:nth-child(15) .icon-inner { background: #93C5FD; }
.phu-kien a:nth-child(16) .icon-inner { background: #A5B4FC; }
.phu-kien a:nth-child(17) .icon-inner { background: #C4B5FD; }
.phu-kien a:nth-child(18) .icon-inner { background: #F9A8D4; }
.phu-kien a:nth-child(19) .icon-inner { background: #FDA4AF; }
.phu-kien a:nth-child(20) .icon-inner { background: #FCA5A5; }
/*==============================
= Phát Sáng (Shine Hover Effect) =
==============================*/
/* Bao gồm ảnh sản phẩm, ảnh bài viết và icon-inner */
.product-small .box-image,
.list-post .post-item .box-image,
.phu-kien .icon-box .icon-inner {
    position: relative;
    overflow: hidden; 
}

/* Pseudo-element cho hiệu ứng shine */
.product-small .box-image::before,
.list-post .post-item .box-image::before,
.phu-kien .icon-box .icon-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
    transform: skewX(-25deg);
    z-index: 2;
    pointer-events: none;
    opacity: 0; /* Ẩn ban đầu */
    transition: opacity 0.1s; /* Chuyển động mượt mà khi hiệu ứng xuất hiện */
}

/* Kích hoạt hiệu ứng shine khi hover */
.product-small:hover .box-image::before,
.list-post .post-item:hover .box-image::before,
.phu-kien a.plain:hover .icon-box .icon-inner::before {
    animation: shine 0.75s;
    opacity: 1; /* Hiển thị hiệu ứng */
}

/* Keyframes cho animation shine */
@keyframes shine {
    100% {
        left: 125%; 
    }
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@media (max-width: 549px){
    @-webkit-keyframes slidelf {
        0% { /* Thêm trạng thái bắt đầu (hoặc "from") */
            position: static; /* Hoặc giá trị mặc định/ban đầu của nó */
            left: auto;
            bottom: auto;
        }
        100% {
            position: fixed;
            left: 15px;
            bottom: 65px;
        }
    }
    @keyframes slidelf {
        0% { /* Thêm trạng thái bắt đầu (hoặc "from") */
            position: static; /* Hoặc giá trị mặc định/ban đầu của nó */
            left: auto;
            bottom: auto;
        }
        100% {
            position: fixed;
            left: 15px;
            bottom: 65px;
        }
    }
}	

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE ***************/
    /* Ví dụ sử dụng keyframes slidelf này */
    /* .some-element-that-animates {
        animation: slidelf 0.5s forwards;
    } */
}
/* ============================== */
/* Nút Back to Top mặc định: ẩn khi chưa scroll */
.back-to-top.button.icon.circle {
  position: fixed;
  width: 20px;
  height: 20px;
  display: none; 
  background-color: transparent !important;
  border: 2px solid #ee4d2d;
  border-radius: 50%;
  color: #ee4d2d;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.back-to-top.button.icon.circle.active {
  display: flex;
}
.back-to-top.button.icon.circle i {
  color: #ee4d2d;
  transition: color 0.3s ease;
}

.back-to-top.button.icon.circle:hover {
  background-color: #ee4d2d !important;
  color: #fff;
}
.back-to-top.button.icon.circle:hover i {
  color: #fff;
}
/*==============================
hiệu ứng sản phẩm 
==============================*/
.product-small.box{
    background:white;
    box-shadow:2px 2px 4px #0000002b;
    border-radius:5px
}

.product-small.box .product-title{
    height: 50px;
    overflow: hidden;
    margin-bottom: 0px
}
.product-small.box .price, .product-small.box .price del span{
    color:gray;
    font-size:15px !important
}.product-small.box .box-image{
    border-top-left-radius:px;
    border-top-right-radius:5px
}
.has-shadow .box-text {
  padding-left: 10px;
  padding-right: 10px
}
.product-small.box {
  cursor: pointer;
}
.products .product-small.col {
  padding: 0px 5px 10px 5px
}
/* Product Category */
.product-category .box-vertical .box-image {} /* Keep as is, it's an empty rule but might be a placeholder */
.product-category .box-vertical .box-text {
  padding: 0px;
  text-align: left;
}
.product-category .box-vertical .box-text .uppercase.header-title {
  width: 99px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #222;
  font-weight: 500;
  text-transform: capitalize;
  font-size: 14px;
}
.product-category .box-vertical .box-text .count {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: .3125rem;
  color: #757575;
  font-size: .8125rem;
  text-transform: capitalize;
}
.xuhuong .product-category {
  border-right: 1px solid #f5f5f5;
}
.row-xsmall > .col {
  padding: 5px;
  border-radius: .125rem;
}
.has-shadow > .col > .col-inner {
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .1);
  border-radius: .125rem;
  border: 1px solid #fff;
}
.product-small.box .price-wrapper {
  height: 50px;
  padding-top: 10px
}