:root {
  --linear-gradient: linear-gradient(90deg, #c1181d 0%, #9d201a 100%);
  --black-1: #121221;
  --tv-star: #ffb800;
}

body {
  background: #fafafa;
}

.fixed_banner {
  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.fixed-item {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  transition: .4s all;
  z-index: 999;
  overflow: hidden;
}

.fixed-item.fixed-left {
  left: 0;
  border-radius: 0 10px 10px 0;
}

.fixed-item.fixed-right {
  right: 0;
  border-radius: 10px 0 0 10px;
}


/* .header-top,
.header-medium,
.header-bottom {
  transition: all 0.1s ease-in-out;
}

.header-bottom {
  position: relative;
  z-index: 99;
  background: #fff;
}

.scrolled-pc .header-top,
.scrolled-pc .header-medium {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
} */

/* Khong dung transform o day nua. Dong 7686 da cho .header-medium
   display: none, header tu co lai 46px roi. Keo them translateY(-46px)
   la hut 92px, lam hang logo + o tim kiem bi day len tren mep man hinh. */
.scrolled-pc.header {
  transition: .3s all;
}




.wrapper {
  position: relative;
}

.wrapper a.cover_link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.swiper-grid-column>.swiper-wrapper {
  flex-direction: row !important;
}

.swiper-grid-column>.swiper-wrapper .swiper-slide {
  margin-top: 0 !important;
  margin-bottom: 25px !important;
  border: 1px solid #e5e7eb;
    padding: 10px;
    border-radius: 10px;
}

.swiper-grid-column>.swiper-wrapper .swiper-slide:nth-last-child(-n+5) {
  margin-bottom: 0 !important;
}

.woo-thumb-swiper .swiper-slide {
  height: 100%;
}

.woo-thumb-swiper .swiper-wrapper {
  height: 100%;
}

.selected-product .checkout-item.product_cart_info {
  justify-content: space-between;
}

.woo-thumb-swiper .swiper-slide img {
  height: 100%;
  width: 100%;
}

.woo-swiper-gallery {
  position: sticky;
  top: 0;
}

.woo-swiper-gallery .swiper-slide {
  border-radius: 18px;
  overflow: hidden;
}

.woo-swiper-gallery .swiper.woo-main-swiper {
  margin-bottom: 1rem;
}

.woo-swiper-gallery .swiper.woo-thumb-swiper .swiper-slide.swiper-slide-active {
  border-color: var(--primary-color);
}

.woo-swiper-gallery .swiper.woo-thumb-swiper .swiper-slide {
  border: 2px solid #e5e7eb;
}

.woo-swiper-gallery .swiper.woo-main-swiper .swiper-slide {
  border: 2px solid var(--primary-color);
}

.box_shadown {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 10.7px -1px rgba(0, 0, 0, 0.07);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.box_shadown--red {
  background: var(--primary-color);
}

.box_shadown--2 {
  border: 1px solid #FF8989;
}

.text_white {
  color: #fff;
}

ul.default_ul {
  list-style: none;
}

.woo-product-info {}

.woo-product-info h1.product-title {
  font-size: 1.5rem;
  color: #1e2939;
}

.product-highlight {
  border-radius: 8px;
  border: 1px solid #959595;
  background: #f6f6f6;
  padding: 1rem;
}

/* .product-meta {
  margin: 1rem 0;
} */

ol,
ul {
  margin-left: 1.15rem;
}

.product-price-box span.sale-price span.amount {
  background: var(--linear-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
}

.product-price-box .price-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.product-price-box span.regular-price span {
  color: #99a1af;
  font-size: 1.2rem;
  text-decoration: line-through;
  font-weight: 400;
}

.product-price-box span.discount-badge {
  border-radius: 4px;
  background: #007aff;
  color: #fff;
  display: block;
  padding: 0.25rem 0.5rem;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.product-price-box .saving span.amount {
  background: var(--linear-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.75rem;
  font-weight: 600;
}

.btn_primary {
  border-radius: 8px;
  background: var(--linear-gradient);
  color: #fff;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  position: relative;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.btn_primary svg {
  margin: 0 0.5rem;
}

.btn_primary--full {
  width: 100%;
}

.btn_primary--black {
  background: #000;
  color: #ffffff;
}

.btn_primary.btn_renew_order {
  padding: 10px 20px;
  line-height: 1;
  margin: 10px 0;

}

.shine_ani {
  position: relative;
  overflow: hidden;
}

.btn_primary::before,
.shine_ani::before {
  position: absolute;
  top: 0;
  left: -85%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-gradient(linear,
      left top,
      right top,
      from(rgba(255, 255, 255, 0)),
      to(rgba(255, 255, 255, 0.3)));
  background: -o-linear-gradient(left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  transform: skewX(-25deg);
  pointer-events: none;
}

.btn_primary:hover::before,
.shine_ani:hover::before {
  -webkit-animation: shine 1.95s;
  animation: shine 1.95s;
}

@keyframes shine {
  100% {
    left: 145%;
  }
}

.btn_primary.btn_primary--outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);

  @media only screen and (max-width: 768px) {
    width: 100%;
    padding: 15px;
  }
}

.content ul li {
  margin-bottom: 0.5rem;
}

.box_km .btn_primary {
  width: 100%;
  margin-bottom: 1rem;
}

.box_highlight_2 {
  border-radius: 10px;
  border: 1px solid #ffc9c9;
  background: #fef2f2;
  padding: 1rem;
}

p:last-of-type {
  margin-bottom: 0;
}

.product_page_2 {
  padding: 40px 0;
}

h2.content_main_title {
  width: max-content;
  position: relative;
}

.title_border {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

h2.content_main_title:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  background: var(--linear-gradient);
}

.content_box {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
}

.specs_table tr:nth-child(odd) {
  background: #f0f0f0;
}

.specs_table table,
.specs_table table td {
  border: 1px solid #c8c8c8;
}

.specs_table table td {
  padding: 0.5rem;
  color: #000;
}

.specs_table table tr td:first-child {
  font-weight: 700;
}

h2.content_sub_title {
  font-weight: 700;
  color: #000;
}

.product_card {
  border-radius: 20px;
  border: 1px solid #f1f2f4;
  background: #fff;
  padding: 16px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product_card:hover {
  border-color: #e2e8f0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

.product_card .product_info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product_card .product_info .price-wrapper {
  margin-bottom: 12px;
}

.product_card.out-of-stock {
  position: relative;
  transition: all 0.3s ease;
}

.product_card.out-of-stock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 10%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.product_card.out-of-stock img {
  filter: grayscale(100%);
}


.product-list .product_card {
  width: calc((100% / 6) - 1rem);

}

.product_card .product_image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Wishlist style override */
.product_card .add_wishlist {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}

.product_card .add_wishlist .woosw-btn {
  background: transparent !important;
  border: none !important;
  color: #ff4d4f !important;
  font-size: 18px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Meta line: Rating & Stock */
.product-meta-line {
  margin-bottom: 8px;
  font-size: 12px;
}

.custom-rating-stars {
  gap: 2px;
}

.product-rating .rating-count {
  color: #718096;
  font-weight: 500;
  font-size: 13px;
}

.product-stock-status .stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.product-stock-status .stock-dot.in-stock {
  background-color: #10b981;
}

.product-stock-status .stock-dot.out-of-stock {
  background-color: #ef4444;
}

.product-stock-status .stock-text {
  font-weight: 600;
  font-size: 12px;
}

.product-stock-status .stock-text.in-stock {
  color: #10b981;
}

.product-stock-status .stock-text.out-of-stock {
  color: #ef4444;
}

/* Title */
.product_card h3.product-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.4;
  margin: 12px 0 10px 0;
  height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product_card h3.product-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product_card h3.product-title a:hover {
  color: #d32f2f;
}

/* Pricing */
.price-wrapper .inner_price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  height: 20px;
}

.price-wrapper .empty-price-placeholder {
  height: 20px;
  margin-bottom: 2px;
}

.price-wrapper .price_old {
  font-size: 13px;
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 400;
}

.price-wrapper .price_old span.amount {
  text-decoration: line-through;
  font-weight: 400;
  color: #94a3b8;
}

.price-wrapper .discount {
  font-size: 11px;
  background-color: #fee2e2;
  color: #ef4444;
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 700;
  line-height: 1;
}

.price-wrapper .price_new {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.price-wrapper .price_new span.amount {
  font-weight: 700;
  color: #0f172a;
}

/* Sold progress bar */
.product-sold-wrapper {
  margin-bottom: 12px;
}

.product-sold-wrapper .sold-progress-bar {
  height: 6px;
  background-color: #f1f2f4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
}

.product-sold-wrapper .sold-progress-fill {
  height: 100%;
  background-color: #dee2e6;
  border-radius: 10px;
}

.product-sold-wrapper .sold-count-text {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

/* Action button */
.product-action-wrapper {
  margin-top: auto;
}

.custom-add-to-cart-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid #d32f2f !important;
  border-radius: 10px !important;
  background-color: transparent !important;
  color: #d32f2f !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  text-decoration: none;
}

.custom-add-to-cart-btn:hover {
  background-color: #d32f2f !important;
  color: #fff !important;
}

.custom-add-to-cart-btn .cart-icon {
  transition: transform 0.3s ease;
}

.custom-add-to-cart-btn:hover .cart-icon {
  transform: scale(1.1);
}

.prdouct_badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
}

span.prdouct_badge.badge_new {
  background: #000;
  color: #fff;
}

.price_old span.amount {
  text-decoration: line-through;
  font-weight: 400;
}

.price-wrapper span.discount {
  font-size: 11px;
  background: var(--linear-gradient);
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1;
}

.price-wrapper .inner_price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-wrapper {
  position: relative;
}

.price-wrapper .price_new {
  font-size: 18px;
  font-weight: 700;
}

.product_info a.product_type_simple {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: var(--primary-color);
  padding: 8px;
}

.product_card .add_wishlist button,
.product_card .add_wishlist a,
.product_card .add_wishlist .woosw-btn {
  background: transparent !important;
  border: none !important;
  color: #ff4d4f !important;
  font-size: 20px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.product_card .add_wishlist button::before,
.product_card .add_wishlist a::before,
.product_card .add_wishlist .woosw-btn::before {
  color: #ff4d4f !important;
}

.list_product_homes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.product_card h3.product-title {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 15px;
}

.product_card .product-title a {
  color: #333;
}

.title_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title_flex a {
  white-space: nowrap;
}

.warranty-banner-black {
  display: flex;
  align-items: center;
  background: #121221;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.warranty-banner-black svg {
  color: #fff;
  flex-shrink: 0;
}

.relate_post {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

section.product_page_3 {
  /* background: #fef2f2; */
  padding: 30px 0;
}


.product_page_3 .col_related {
  padding: 0;
  overflow: hidden;
}

.product_page_3 .col_related .related_title {
  font-size: 22px;
  font-weight: 800;
}

.item_view_post a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item_view_post a img {
  border-radius: 10px;
  width: 120px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.item_view_post a p.title {
  font-size: 14px;
  font-weight: 600;
  color: #3e3232;
  margin: 0;
  line-height: 1.4;
}

.list_img_qc {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}

.item_block_post .item_post_img {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
  height: 240px;
}

.item_block_post .item_post_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item_block_post .item_post_content .post_title {
  font-size: 24px;
  color: var(--black-1);
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

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

.item_block_post_2 .item_post_img {
  border-radius: 12px;
  overflow: hidden;
  height: 450px;
}

.item_block_post_2 .item_post_img img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.item_block_post_2 .item_post_content {
  position: absolute;
  bottom: 10px;
  margin: 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(5px);
  padding: 1rem;
}

.item_block_post_2 .item_post_content .post_title {
  font-size: 1.3rem;
  color: var(--black-1);
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

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

.title_section {
  font-size: 2.3rem;
  color: var(--black-1);
  font-weight: 700;
}

section.news_page_1 {
  padding-top: 50px;
}

.news_latest {
  margin-bottom: 40px;
}

.list_contact_box--item {
  display: flex;
  gap: 10px;
}

.list_contact_box--item .box_icon {
  border-radius: 10px;
  background: #fef2f2;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_quicklink li a {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
  display: block;
  padding: 10px;
  color: #fff;
}

.contact_quicklink ul {
  margin: 0;
  margin-top: 1rem;
}

.box_content_contact {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10.2px -2px rgba(0, 0, 0, 0.07);
}

.box_content_contact .box_contact--head {
  border-radius: 14px 14px 0 0;
  background: var(--primary-color);
  padding: 1.5rem;
}

.box_content_contact .box_contact--head * {
  color: #fff;
}

.box_contact--body {
  padding: 1.5rem;
}

/* .contact_form .field {
  margin-bottom: 1rem;
} */

.checkout-box .field select {
  margin: 0;
}

.contact_form .field input,
.contact_form .field textarea {
  border-radius: 8px;
  border: 1px solid #d1d5dc;
  width: 100%;
  padding: 0.75rem;
}

.contact_form .row_2 {
  display: flex;
  gap: 1rem;
}

.contact_form .row_2 .field {
  width: 50%;
}

.contact_form .field.checkbox span.wpcf7-list-item {
  width: 100%;
  display: flex;
}

.contact_form .field.checkbox span.wpcf7-list-item label {
  display: flex;
}

.contact_form .field.checkbox span.wpcf7-list-item label input[type="checkbox"] {
  width: auto;
}

.contact_form button.cf7-submit {
  border-radius: 8px;
  background: var(--primary-color);
  color: #fff;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  position: relative;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 3rem;
  line-height: 1;
}

.box_map--body iframe {
  width: 100%;
}

.box_content_map {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10.2px -2px rgba(0, 0, 0, 0.07);
}

.box_content_map .box_map--head {
  padding: 1.5rem;
}

.inner_box .policy_content ul li {
  display: flex;
  gap: 10px;
  padding: 1rem;
  border-radius: 10px;
  transition: all 0.5s;
}

.inner_box .policy_content ul li.active,
.inner_box .policy_content ul li:hover {
  background: var(--primary-color);
  color: #fff;
}

.inner_box .policy_content ul li a svg path {
  transition: all 0.5s;
}

.inner_box .policy_content ul li.active path,
.inner_box .policy_content ul li:hover path {
  stroke: #fff;
}

.list_tabs_content .item_tabs_content {
  display: none;
  box-shadow: 0 2px 10.2px -2px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.list_tabs_content .item_tabs_content.active {
  display: block;
  animation: fadeup 1.5s;
}

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section {
  padding: 40px 0;
}

.list_tabs_content .item_tabs_content .content_item_tabs {
  padding: 2rem;
}

.list_tabs_content .item_tabs_content .content_item_tabs--title {
  background: var(--primary-color);
  color: #fff;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.list_tabs_content .item_tabs_content .title_icon {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.list_tabs_content .item_tabs_content .title_icon path {
  stroke: #fff;
}

.icon_box {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #ebedf0;
  padding: 6px;
}

.icon_box.icon_box--small {
  width: 2rem;
  height: 2rem;
}

.icon_box.icon_box--pink {
  background: #ffe2e2;
}

.icon_box.icon_box--red {
  background: var(--primary-color);
}

.faq_head {
  text-align: center;
}

.faq_head .icon_box {
  margin: 0 auto;
  margin-bottom: 1rem;
}

.faq_group_item {
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.faq_group_item .group_header {
  display: flex;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(90deg, #f9fafb 0%, #fff 100%);
  gap: 1rem;
}

.faq_group_item .group_header .group_header_title {
  color: #1e2939;
}

.faq_group_item .group_body {
  padding: 0 1.5rem;
}

.faq_group_item .group_body .faq_item_question {
  display: flex;
  align-items: center;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
  padding: 1rem 0;
  cursor: pointer;
}

.faq_item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq_group_item .group_body .faq_item_question h3 {
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0;
  width: calc(100% - 30px);
}

.faq_group_item .group_body .faq_item_question svg {
  transform: rotate(0deg);
  transition: all 0.5s;
}

.faq_group_item .group_body .faq_item_question.active svg {
  transform: rotate(180deg);
}

.faq_group_item .group_body .faq_item_answer {
  padding: 1rem;
  padding-top: 0;
  color: #4a5565;
}

.faq_support {
  background: #004b41;
  color: #fff;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  text-align: center;
  padding: 2rem;
  margin-top: 3rem;
}

.faq_support h3.faq_support--title {
  color: #fff;
  margin: 1.4rem 0;
}

.faq_support .faq_support--btn {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 1.5em 0;
}

.faq_support .faq_support--btn a:nth-child(odd) {
  background: #fff;
}

.faq_support .faq_support--btn a {
  border-radius: 15px;
  padding: 0.8rem;
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.faq_support .faq_support--btn a:nth-child(even) {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.inner_form_auth {
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 20px 21.1px -5px rgba(0, 0, 0, 0.06),
    0 8px 4.3px -6px rgba(0, 0, 0, 0);
  padding: 2rem;
}

.inner_form_auth input {
  border-radius: 10px;
  border: 1px solid #d1d5dc;
}

.d-flex p {
  margin-bottom: 0;
}

span.text_line_thought {
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

span.text_line_thought:before,
span.text_line_thought:after {
  width: 50%;
  height: 1px;
  background: #d1d5dc;
  top: 50%;
  content: "";
}

.footer_img {
  position: absolute !important;
  /* width: auto !important; */
  top: -20px;
  left: 40%;
  transform: translateX(-50%);
}

.footer_img img {
  width: auto !important;
  height: auto;
  width: max-content;
}

.form_footer input.wpcf7-form-control.wpcf7-email {
  border-radius: 50px;
  background: #fff;
  padding-left: 60px;
  height: 54px;
  padding-right: 135px;
  background: #f5f5f7;
}

.form_footer input.wpcf7-submit {
  position: absolute;
  right: 10px;
  top: 9.5px;
  background: var(--primary-color);
  border-radius: 50px;
  height: 35px;
  line-height: 1;
  min-height: auto;
  font-size: 13px;
  font-weight: 800;
}

.form_footer {
  position: relative;
}

.form_footer span.wpcf7-form-control-wrap:before {
  content: "";
  position: absolute;
  left: 26px;
  top: 18px;
  background-image: url(../image/Symbol.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.cart-card .cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-check {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.cart-check input {
  display: none !important;
}

.cart-check .checkmark {
  width: 1rem;
  height: 1rem;
  background: #eee;
  border-radius: 4px;
  display: block;
  position: relative;
  transition: all 0.2s ease;
}

.cart-check .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.cart-check input:checked+.checkmark {
  background: #c51f1f;
}

.cart-check input:checked+.checkmark:after {
  display: block;
}

.cart-check .checkmark:after {
  left: 6px;
  top: 3px;
  width: 0.3rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

label.select-all-label.cart-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-select-all {
  display: flex;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  height: 80px;
  padding: 1rem;
}

.cart-card {
  text-align: left;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product_cart_info,
.product_cart_info--item {
  display: flex;
  gap: 10px;
  width: 100%;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
  }

}

.product_cart_info--item .product_cart_info--inner {
  display: flex;
  gap: 10px;
  width: calc(100% - 146px);


}

.box-order .product_cart_info {
  justify-content: space-between;
}

.product_cart_info .product_cart_info--thumb {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #ebedf0;
  padding: 6px;
}

.product_cart_info .product_cart_info--info {
  width: calc(100% - 7rem);

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

/* .product_cart_info--btn {
  width: 15%;
} */

/* .product_cart_info .product_cart_info--btn {
  width: calc(35% - 5.5rem - 10px);
} */

.product_cart_info .product_cart_info--thumb img {
  border-radius: 0.25rem;
}

.cart-card .cart-bottom,
.cart-card .cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.cart-card .cart-bottom .ux-quantity {
  border-radius: 0.25rem;
  overflow: hidden;
}

.cart-card .cart-bottom .ux-quantity .button {
  border-radius: 4px;
}

.cart-card .cart-bottom {
  margin-bottom: 0.5rem;
}

.cart-item-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-price .sale-price .amount {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 20px;
}

.cart-item-price .old-price .amount {
  color: #9aa0a6;
  text-decoration: line-through;
  font-size: 16px;
}

.cart_item>td {
  border: none !important;
}

.cart_totals_cusstom,
.custome_coupon {
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1rem;
}

.cart_totals_cusstom .wc-proceed-to-checkout,
.cart_totals_cusstom .wc-proceed-to-checkout a {
  margin-bottom: 0;
}

.shop_table .cart_totals_cusstom td,
.shop_table .cart_totals_cusstom th {
  border: none !important;
}

.voucher_header_text h3 {
  font-size: 1rem;
  margin-bottom: 0;
}

.voucher_header {}

.cart_totals_cusstom tr.order-total th,
.cart_totals_cusstom tr.order-total td {
  border: none !important;
}

.cart_totals_cusstom tr.order-total td {
  display: flex;
  flex-direction: column;
}

.cart_totals_cusstom tr.order-total td span.amount {
  color: var(--primary-color);
  font-weight: 400;
}

.cart_totals_cusstom tr.cart-subtotal .amount {
  color: #0a0a0a;
  font-size: 1rem;
  font-weight: 400;
}

.voucher_header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-checkout {
  max-width: 1200px;
  margin: auto;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.checkout-box {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.item-thumb img {
  width: 70px;
}

.delivery {
  display: block;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
}

.payment-method {
  display: block;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: pointer;
}

.btn-order {
  width: 100%;
  background: #c81e1e;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 10px;
}

.btn-outline {
  display: block;
  text-align: center;
  padding: 12px;
  border: 1px solid #c81e1e;
  color: #c81e1e;
  border-radius: 8px;
  margin-top: 10px;
  text-decoration: none;
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.total {
  font-weight: bold;
  color: red;
}

.order-summary .summary-row:not(:last-of-type) {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.order_code {
  background: #fff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  width: max-content;
  padding: 8px 20px;
  cursor: pointer;
}

.account_cover {
  position: relative;
  margin-bottom: 7.5rem;
}

.account_cover img {
  border-radius: 1rem;
  aspect-ratio: 3.5;
  object-fit: cover;
}

.account_cover label.change_cover {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 3px 10px;
  color: #a24186;
}

.account_cover .inner_avatar {
  position: absolute;
  bottom: -70px;
  left: 20px;
  display: flex;
  gap: 10px;
  align-items: end;
}

.account_cover .inner_avatar h2.account_name {
  width: calc(100% - 141px);
  margin-bottom: 1.5rem;
}

.account_avatar img {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  object-fit: cover;
}

.account_avatar {
  width: 130px;
  aspect-ratio: 1;
  position: relative;
  border: 5px solid #fff;
  border-radius: 50%;
}

.account_avatar label.change_avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid #000;
  aspect-ratio: 1;
  margin: 0;
  display: flex;
  align-items: center;
}

.my_account_sidebar--mb {
  display: none;
}

.filter_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 37px;
  border-bottom: 1px solid #d9d9d9;
}

.close_filter {
  border-radius: 50px;
  border: 1px solid var(--nn-chnh, #efece5);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.filter .inner_filter .list_filter {
  padding: 37px;
  overflow-y: scroll;
}

.order-status-tabs .tabs {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d8d8d8;
  overflow-y: scroll;
  scrollbar-width: thin;
  margin-left: 0;
}

.order-status-tabs .tabs li {
  /* background: #eee; */
  padding: 0px 14px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.order-status-tabs .tabs li.active {
  /* background: #000; */
  color: #fff;
  ont-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}

.custom-order-card {
  border: 1px solid #ccc;
  margin-bottom: 15px;
  padding: 20px 30px;
  border-radius: 20px;
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
}

.custom-order-card ul.order-items {
  border-bottom: 1px solid #d2d2d2;
}

.custom-order-card ul.order-items .order_items_img {
  width: 120px;
  height: 120px;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 12px;
}

.custom-order-card:not(:last-of-type) {
  margin-bottom: 35px;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 35px;
  padding-bottom: 8px;
}

.toggle-order-detail {
  background: transparent;
  border: none;
  color: var(--black-2);
  cursor: pointer;
  width: max-content;
  margin: 30px auto 0;
  display: block;
}

.col_account_content {
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  padding: 2rem 1rem;
}

.order-status-tabs .tabs li a {
  display: flex;
  flex-wrap: nowrap;
}

.toggle-order-detail svg {
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.toggle-order-detail svg.rotated {
  transform: rotate(180deg);
}

.order_items_content__attr .order_items_content__attr--item {
  display: flex;
}

.order_items_content__attr .order_items_content__attr--item p {
  margin-bottom: 0;
}

.order_items_content__title {
  font-size: 16px;
  color: #000;
  font-weight: 700;
}

.custom-order-card ul.order-items li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

span.custom_order__id {
  display: flex;
  align-items: center;
  gap: 10px;
}

span.custom_order__id {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-pagination>* {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #000;
  background: #fff;
  transition: all 0.5s;
}

.order-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.order-pagination .next,
.order-pagination .prev {
  border: none;
}

.order-pagination .current,
.order-pagination .page-numbers:not(.next):hover,
.order-pagination .page-numbers:not(.prev):hover {
  transition: all 0.5s;
  color: #fff;
  background: var(--black-2);
}

.order-details {
  text-align: right;
}

.mega_wrapper {
  position: relative;
}

.mega_trigger {
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-size: 30px;
  white-space: nowrap;
}

.mega_wrapper_content .mega_content {
  position: absolute;
  /*top: 100%;*/
  /*left: 0;*/
  /*width: 1200px;*/
  /*!*display: none;*!*/
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  background: #fff;
  min-width: 300px;
}

.mega_wrapper:hover .mega_content {
  display: flex;
}

.mega_left {
  width: 260px;
  border-right: 1px solid #eee;
  display: block;

}

.mega_menu {
  /* width: 260px; */
  position: relative;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  width: auto;
  white-space: nowrap;
  width: -webkit-fill-available;
}

.mega_item {
  white-space: nowrap;
  width: -webkit-fill-available;
}

.mega_parent {
  padding: 10px;
  cursor: pointer;
}

/* SUBMENU */
.mega_dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  width: 900px;
  background: #fff;
  display: none;
  z-index: 9999;
  padding: 20px;
  gap: 20px;
  flex-wrap: wrap;
  align-items: start;
}

/* HOVER */
.mega_item:hover .mega_dropdown {
  display: flex;
  animation-delay
}

.mega_dropdown .inner_mega_dropdown {
  display: flex;
  width: calc(80% - 20px);
  gap: 20px;
  flex-wrap: wrap;

}

.mega_dropdown .list_menu_gal {
  width: calc(20% - 20px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.mega_dropdown .list_menu_gal .item_gal a {
  background: rgb(241, 241, 241);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  height: 100%;
}

.mega_dropdown .list_menu_gal .item_gal a:hover {
  background: rgb(217, 217, 217);
}

.mega_dropdown .list_menu_gal .item_gal a img {
  height: 45px;
  object-fit: contain;
}

/* ===== Khi nằm trong mega_header_category ===== */
.mega_wrapper.is-inside .mega_left {
  display: none;
}

/* Hover mới hiện */
.mega_wrapper.is-inside:hover .mega_left {
  display: block;
}

.mega_parent {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.mega_parent img {
  transition: all 0.5s;
}

.mega_parent:hover {
  background: var(--primary-color);
}

.mega_parent:hover a {
  color: #fff;
}

.mega_parent:hover img {
  filter: brightness(0) invert(1);
}

.mega_right {
  flex: 1;
  padding: 20px;

}

.mega_submenu {
  display: none;
}

.mega_submenu.active {
  display: flex;
  flex-wrap: wrap;
}

.mega_column {
  width: calc(25% - 20px);
}

.mega_column ul {
  list-style: none;
  margin: 0;
}

.menu-center {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.menu-red a {
  color: #fff;
  font-size: 14px;
}

.header-bottom {
  background-color: #fff !important;
}

.header-bottom .inner_menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.custom-cart-box {
  display: inline-block;
  border-radius: 6px;

  @media only screen and (max-width: 768px) {
    background: #f5f5f5;
  }

}

.custom-cart-box .custom-cart-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  color: #000;
}

.custom-cart-icon {
  display: flex !important;
  position: relative;
  font-size: 24px;
  padding: 9px !important;

  @media only screen and (max-width: 768px) {
    padding: 2px !important;
  }
}

.custom-cart-count {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #000;
  color: #fff;
  font-size: 8px;
  border-radius: 50%;
  display: flex;
  aspect-ratio: 1;
  width: 15px;
  align-items: center;
  justify-content: center;
}

.cart-info {
  display: flex;
  flex-direction: column;
}

.custom-cart-label {
  font-size: 13px;
  color: #333;
  font-weight: 600;
  line-height: 1.25;
}

.cart-total {
  font-weight: bold;
  font-size: 18px;
}

.header-bottom .inner_menu .header-search {
  width: 64%;
}


.header-left .hotline {
  font-weight: 400;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

/* .header-right > * {
  width: 20%;
} */

.header-right .header-box {
  display: flex;
  gap: 10px;
}



.header-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #000;
  box-shadow: 0 1px 7.4px 0 rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  padding: 5px 10px;
}

.header-box span:nth-child(2) {
  width: calc(80% - 46px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

/* .box_icon_shadow {
  display: flex;
  width: 46px;
  height: 44px;
  padding: 12px;
  background: #fff;
  border-radius: 50%;

  @media only screen and (max-width: 768px) {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
} */

/* .header_cart {
  padding: 5px 10px;
  border-radius: 10px;
  box-shadow: 0 1px 7.4px 0 rgba(0, 0, 0, 0.08);
} */

.menu-black {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54%;
}

.menu-black a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #000;
}

.menu-black a span:nth-child(2) {
  @media only screen and (max-width: 768px) {
    font-size: 15px;
    line-height: 1.3;
    width: 45%;
    margin: 0;
  }
}


.header-bottom .inner_menu .header-search form.searchform {
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.header-bottom .inner_menu .header-search form.searchform button {
  background: #F2F2F2;
  border: none;
}

.header-bottom .inner_menu .header-search form.searchform button .icon-search {
  color: #979797;
}

.header-medium .inner_menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-medium .menu-blue a {
  color: #333;
  font-weight: 400;
}

a.added_to_cart.wc-forward {
  display: none !important;
}

.filter-group.brand-filter {
  margin: 20px 0;
}

.product-list {
  display: flex;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.product_filter {
  margin-bottom: 20px;
}

.group_attributes {}

.dropdown-filter {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.filter-toggle {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.filter-dropdown {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  width: 450px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px 10px;
  z-index: 9999;
}

.filter-dropdown button {
      min-height: auto;
    text-transform: none;
    margin-bottom: 0;
    line-height: 1;
}

.filter-dropdown button.btn-clear {
  background: var(--primary-color);
  color: #fff;
  border-radius: 10px;
}

.filter-dropdown button.btn-apply {
  border: 1px solid var(--primary-color);
  border-radius: 10px;
}

.dropdown-filter.active .filter-dropdown {
  display: block;
}

.filter-actions {
  display: flex;
  /*   justify-content: space-between; */
  margin-top: 16px;
}

.brand-list .brand-item {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  display: block;
  width: max-content;
  padding: 2px;
}

.brand-list .brand-item img {
  width: 120px;
  height: 20px;
  object-fit: contain;
}

.brand-list {
  display: flex;
  gap: 10px;
}

.brand-list .brand-item {
  border: 2px solid #eaeaea;
  border-radius: 8px;
  display: block;
  width: max-content;
  padding: 2px;
}

.brand-list .brand-item.active {
  border-color: var(--primary-color);
}

.brand-list .brand-item img {
  width: 120px;
  height: 20px;
  object-fit: contain;
}

.brand-list {
  display: flex;
  gap: 10px;
}

.filter-group button.filter-toggle {
  margin: 0;
  padding: 0 10px;
  font-size: 0.8rem;
  text-transform: unset;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 140px;
  border-width: 2px;
}

.filter-group button.filter-toggle.active {
  border-color: var(--primary-color);
}

.selected-filters {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 1rem 0;
}

.voucher-tabs ul {
  list-style: none;
  display: flex;
  overflow-x: scroll;
  gap: 13px;
}

.voucher-tabs ul li {
  flex: 0 0 auto;
}

.selected-filters .selected-filters-list {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selected-filters .selected-filter-item a {
  color: rgb(185 28 28 / 1);
  display: block;
  background-color: rgb(254 242 242 / 1);
  border-radius: 10px;
  border: 1px solid rgb(254 202 202 / 1);
  font-size: 12px;
  padding: 0 8px;
}

.selected-filters .selected-filter-item.is-attr a {
  color: #1d4ed8;
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
}

a.clear-all {
  font-size: 12px;
  color: rgb(31, 41, 55);
  background-color: rgb(229, 231, 235);
  border-radius: 25px;
  display: block;
  padding: 0 11px;
}

.category-menu-list {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

/* current */
.category-menu-list .category-current .cat-item {
  border: 2px solid red;
  background: #fff5f5;
}

/* children list */
.category-menu-list .category-children {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* item chung */
.category-menu-list .cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 12px;
  min-width: 120px;
  text-decoration: none;
  color: #333;
}

.category-menu-list .cat-item img {
  max-width: 60px;
  margin-bottom: 5px;
}

/* ===== popup-build WRAPPER ===== */
.popup-build {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.popup-build.active {
  display: block;
}

/* ===== OVERLAY ===== */
.popup-build-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

/* ===== popup-build BOX ===== */
.popup-build-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 1000px;
  max-width: 95%;
  height: 80vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popup-build.active .popup-build-inner {
  transform: translate(-50%, -50%) scale(1);
}

/* ===== HEADER ===== */
.popup-build-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}

.popup-build-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.popup-build-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e11d48;
}

.popup-build-header-icon svg {
  width: 20px;
  height: 20px;
}

.popup-build-header-title-group h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  text-align: left;
}

.popup-build-header-title-group p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  text-align: left;
}

.close-popup-build {
  background: #f1f5f9;
  border: none;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s ease;
  margin: 0;
}

.close-popup-build:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ===== BODY ===== */
.popup-build-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.popup-build-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid #f1f5f9;
  padding: 24px;
  overflow-y: auto;
  text-align: left;
}

.popup-build-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== PRODUCT LIST ===== */

.product-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;

  transition: 0.2s;
}

.product-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-thumb img {
  width: 100%;
  height: auto;
}

.product-info h4 {
  font-size: 14px;
  margin: 10px 0 5px;
}

.price {
  color: #e60023;
  font-weight: bold;
}

/* ===== BUTTON ===== */
.choose-product {
  width: 100%;
  margin-top: 10px;
  padding: 8px;

  background: #e60023;
  color: #fff;
  border: none;
  border-radius: 5px;

  cursor: pointer;
}

.choose-product:hover {
  background: #c4001d;
}

.popup-sidebar.loading::after,
.popup-products.loading::after {
  content: "";
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.6);
}

.popup-sidebar.loading::before,
.popup-products.loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 30px;
  height: 30px;

  border: 3px solid #ddd;
  border-top: 3px solid #e60023;
  border-radius: 50%;

  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.popup-layout {
  display: flex;
}

.popup-layout .popup-products {
  width: 75%;
}

.popup-layout .popup-sidebar {
  width: 25%;
}

.build-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.build-item .build-item--label {
  width: 15%;

  @media only screen and (max-width: 768px) {
    width: 25%;
  }
}

.build-item .build-item--content {
  width: 85%;
  border-left: 2px solid rgba(222, 222, 222, 0.50);
  padding-left: 1rem;

  @media only screen and (max-width: 768px) {
    width: 100%;
    padding: 0;
  }
}

.open-popup-build {
  border-radius: 8px;
  background: #004B41;
  width: max-content;
  color: #fff;
  padding: 4px 10px;
}

.group_btn_list {
  margin: 0;
  display: flex;
  gap: 20px;

  @media only screen and (max-width: 768px) {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}


.group_btn_list li {
  @media only screen and (max-width: 768px) {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.group_btn_list li a {
  @media only screen and (max-width: 768px) {
    display: block;
  }
}

.btn_setup {
  border-radius: 8px;
  color: #666;
  padding: 8px 16px;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  background: #f4f4f4;
}

.btn_setup.active,
.btn_setup:hover {
  background: var(--primary-color);
  color: #fff;

}

.box_body_pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
}

.popup-build-content--head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-build-content--head .popup-build-content--order {
  display: flex;
  align-items: center;
  gap: 20px;
}

.popup-build-content--head span.order-label {
  white-space: nowrap;
}

.popup-build-content--head .popup-build-content--order select.order-select {
  margin-bottom: 0;
}

.popup-build-content--result {
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.10);
  background: #F9FAFB;
  padding: 1rem;
  margin: 1rem 0;
}

.selected-product .checkout-item.product_cart_info {
  justify-content: space-between;
}

.product_cart_info--build {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 30%;
  justify-content: end;

  @media only screen and (max-width: 768px) {
    width: 100%;
    justify-content: space-between;
  }
}

.selected-product .product_cart_info--item {
  width: 65%;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.mega_column h4 {
  white-space: break-spaces;
  font-size: 14px;
}

.mega_column ul a {
  color: #1E2939;
  text-align: center;
  font-size: 14px;
}

.wrap_banner .swiper-slide {
  border-radius: 8px;
  overflow: hidden;
}

.wrap_banner .swiper-slide img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.banner-1 {
  margin-bottom: 1rem;

  @media only screen and (max-width: 768px) {
    overflow: visible;
  }
}


.banner-1 .swiper-pagination {
  top: auto;
  bottom: -25px;
}

.banner-1 .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary-color);
}


.box_header_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box_header_flex .box_title {
  font-size: 18px;
}

.box_header_flex a {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}

.box_header_flex a:hover {
  color: var(--primary-color);
}






.slider_top_cat .swiper-slide img {
  height: 75px;
  object-fit: cover;
}

.slider_top_cat .swiper-slide {
  text-align: center;
}

.slider_top_cat .swiper-slide a {
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.box_header+.box_body {
  margin-top: 1rem;
}

.section-banner-2 .inner_banner .banner_category {
  display: flex;
  gap: 30px 50px;
  padding-left: 60px;
  flex-wrap: wrap;
}

.section-banner-2 .inner_banner {
  display: flex;
}

.section-banner-2 .inner_banner> .banner_image {
  width: 66.666667%;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}

.section-banner-2 .inner_banner> .list-banner-home {
  flex: 1;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.section-banner-2 .inner_banner .list-banner-home .item-banner img {
  border-radius: 10px;
  overflow: hidden;
}

.section-banner-2 .inner_banner .list-banner-home .item-banner:first-child {
  padding-bottom: 18px;
}

.section-banner-2 .item_cat {
  display: flex;
  gap: 0px;
  justify-content: space-between;
  width: calc(33% - 32px);
  height: unset;
}

.section-banner-2 .item_cat img {
  width: 75px;
}

.section-banner-2 .item_cat h3 {
  font-size: 14px;
}

.section-banner-2 .item_cat span {
  font-size: 12px;
  color: #666;
}

.list_child_cat ul {
  gap: 10px;
  margin: 0;
  display: flex;
}

.list_child_cat ul li a {
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  color: #1a1a1a;
  background: #f5f5f7;
  padding: 5px 12px;
  white-space: normal;
  display: block;
  width: auto;
  transition: all 0.5s;
}

.products_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.products_header .group_category {
  display: flex;
  align-items: center;
  gap: 12px;
}

.products_header .products_title {
  font-size: 24px;
  font-weight: 700;
  width: auto;
  margin: 0;
  padding-left: 15px;
  border-left: 5px solid var(--primary-color);

  @media only screen and (max-width: 768px) {
    font-size: 18px;
  }
}

.relate_post .item_block_post {
  margin-bottom: 20px;
}

.section-product {
  padding: 12px 0;
}

.products_header .group_category .view_all {
  padding: 5px 10px;
  font-size: 13px;
  color: #0a0a0a;
}

.products_header .group_category .view_all:hover {
  color: #fff;
}

.products_header .group_category .view_all  svg {
  width: 18px;
  margin: -3px 0 0 0;
}

.list_child_cat ul li {
  margin-bottom: 0;
}

/* .list_child_cat ul li.active a,
.list_child_cat ul li a:hover {
  background: var(--primary-color);
  color: #fff;
} */


.view_all.item_pc {
  background: transparent;
  border: 1px solid #c8c8c8;
  color: #363636 !important;
}


.list_product_homes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.home_page_1 {
  @media only screen and (max-width: 768px) {
    margin-top: 20px;
  }
}

.home_page_1,
.home_page_2,
.home_page_3 {
  padding-top: 0px !important;
  padding-bottom: 0 !important;
}

.home_page_2 .box_shadown {
  border: 1px solid #E5E5E5;
}


.home_page_2 .row > .col {
  padding-bottom: 20px;
}

.home_page_2 .box_shadown {
  margin-bottom: 0;
}

.home_page_2 .item_cat {
  display: flex;
  align-items: center;
  gap: 0px;
  justify-content: space-around;
  width: 100%;
  height: unset;
}

.home_page_2 .item_cat h3 {
  font-size: 14px;
  margin-bottom: 0;
}


.home_page_2 .item_cat img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.home_page_2 .item_cat span {
  font-size: 12px;
  color: #666;
}

/* Biến swiper-slide thành một flexbox dạng cột */
.slider_top_cat .cat-column {
  display: flex;
  flex-direction: column;
  height: auto !important;
}

.slider_top_cat .item_cat {
  width: 100%;
  box-sizing: border-box;
}

/* Chỉnh swiper-slide cho bằng nhau chiều cao ở home_page_2 */
.home_page_2 .slider_brand .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px !important;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.home_page_2 .slider_brand .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.home_page_2 .slider_brand .swiper-slide img {
  max-height: 45px;
  width: auto;
  object-fit: contain;
}

.home_page_2 .slider_top_cat .swiper-slide {
  display: flex;
  height: auto;
}

.home_page_2 .slider_top_cat .swiper-slide .item_cat {
  display: flex;
  flex: 1;
  height: 100%;
}


/* .slider_top_cat .item_cat:first-child {
  margin-bottom: 10px;
} */


.home_page_3 .section-banner-1 {
  @media only screen and (max-width: 768px) {
    display: none;
  }
}




.home_page_3 .section-home-policy {
  display: none;

  @media only screen and (max-width: 768px) {
    display: block;
  }
}



.user-box {
  display: flex;
  align-items: center;
  gap: 7px;
}

.user-box span.user-icon {
  border-radius: 50%;
  /* border: 0.909px solid #E9E9E9;
  background: #FFF; */
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

.header-medium {
  padding: 10px 0;
  border-bottom: 1px solid #E4E4E4;
  background: #FBFBFD;
  font-weight: 700;

}

.stock-status {
  font-size: 13px;
}

.stock-status svg {
  margin-top: -3px;
}

.stock-status .out-of-stock {
  color: #D32F2F;
}

.stock-status .in-stock {
  color: #004B41;
}

.menu_mb {
  display: none;
}

.mega_wrapper_content {
  display: none;
}

.header {
  box-shadow: 0 4px 13.7px 0 rgba(0, 0, 0, 0.16);
}

header#header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ffffff;
  left: 0;
  right: 0;
  @media only screen and (max-width: 768px) {
    position: fixed;
    top: 0;
  }
}

.header.scrolled-pc {
  
}

main#main {
  padding-top: 20px;

  @media only screen and (max-width: 768px) {
    padding-top: 150px;
  }
}

.menu-item a, .menu-item, .mega_parent a {
  color: #333;
}

.header-bottom {
  padding: 15px 0;
  z-index: 13 !important;
}

.header-bottom .logo {
  width: 100px;
}

.banner_image img {
  width: 100%;
}

.shop-page-title.category-page-title.page-title {
  display: none;
}

.filter .inner_filter {
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 100;
  transition: all 0.5s;
  transform: translateX(-100%);
  width: 504px;
  height: 100%;
  border-radius: 0 50px 50px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.item_mb {
  display: none;
}

.menu_bar_mobi {
  background: #fff;
  display: flex;
  gap: 20px;
  justify-content: space-around;
  padding: 15px;
  border-top: 1px solid rgb(229 231 235);
  width: 100%;
  bottom: 0;
  z-index: 100;
  position: fixed;
}

.menu_bar_mobi a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
}

.menu_bar_mobi span {
  color: #686767;
  font-size: 10px;
}

.menu_bar_mobi a img {
  padding-bottom: 5px;
}

.menu_item_back {
  padding: 4px;
  line-height: 1;
}



.custom-cart-icon .desktop {
  display: block;
}

.custom-cart-icon .mobile {
  display: none;
}

@media (min-width: 1200px) {
  body.home header#header .header_category {
    display: none;
  }

  .mega_wrapper:hover .mega_wrapper_content {
    display: block;
  }

  div#mobileMenu {
    display: none;
  }

  .col .box_shadown {
    height: -webkit-fill-available;
  }

  .header-right--mobi {
    display: none;
  }
}


.searchform .search-field {
  border: none;
  /* background-color: #F2F2F2 !important; */
  border-radius: 10px 0 0 10px;
}

@media screen and (max-width: 1199px) {
  .home_page_1 .col.large-3 {
    display: none;
  }

  .item_mb {
    display: block;
  }

  .item_pc {
    display: none;
  }

  .header-right--mobi {
    background: #fff;
    padding: 0 15px;
    justify-content: space-between;
  }

  .header-right--mobi .logo {
    width: 90px;
  }

  .header-right--mobi .header-right--mobi--wrapper {
    display: flex;
    align-items: center;
    gap: 19px;
    width: auto;
    justify-content: end;
    margin-top: 12px;
    margin-right: 6px;
  }

  .header-right--mobi .menu-black {
    width: 80%;
  }

  .header-top {
    display: none !important;
  }

  .menu_mb {
    display: block;
  }

  .mega_trigger {
    margin-top: -8px;
    height: 27px;
    width: 27px;
    background-size: cover;
  }

  .mega_trigger span {
    display: none;
  }

  .header-right_mobi .header_flash_sale {
    text-align: center;
  }

  .header-bottom .inner_menu .header-right {
    display: none;
  }

  .col_banner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-bottom .inner_menu .header-search {
    width: 100%;
  }

  .mobile-menu {
    position: relative;
    overflow: hidden;
    height: 100%;
  }

  .menu-level {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: 0.3s;
    background: #fff;
  }

  .menu-level.active {
    transform: translateX(0);
  }

  .menu-level.prev {
    transform: translateX(0%);
  }

  .menu-item {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
  }

  .menu-back {
    padding: 12px;
    font-weight: bold;
  }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
  }

  .mobile-menu-overlay.show {
    pointer-events: auto;
  }

  /* nền mờ */
  .mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: 0.3s;
  }

  /* panel menu */
  .mobile-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*max-width: 360px;*/
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
  }

  /* active */
  .mobile-menu-overlay.show .mobile-menu-backdrop {
    opacity: 1;
  }

  .mobile-menu-overlay.show .mobile-menu-panel {
    transform: translateX(0);
  }

  /* header */
  .mobile-menu-header {
    height: auto;
    background: #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 12px;
    border-bottom: 1px solid var(--primary-color);
  }

  .mobile-menu-header img {
    width: 70px;
  }

  /* body */
  .mobile-menu-body {
    flex: 1;
    overflow-y: auto;
  }

  .header-medium .header-center {
    display: none;
  }

  .header-medium {
    font-size: 13px;
    display: none;
  }
}

@media screen and (max-width: 992px) {

  .product-list .product_card {
    width: calc((100% / 3) - 1rem);
  }
}

.banner_mobi {
  display: none;
}

.my_account_sidebar {
  border-radius: 20px;
  background: #FAFAFA;
  padding: 20px 40px;
}

.my_account_sidebar .image {
  margin: 0 !important;
}

.filter.active .inner_filter {
  transform: translateX(0%);
  z-index: 100000;
}

.only_mb {
  display: none;
}

@media screen and (max-width: 767px) {
  .banner_pc {
    display: none;
  }

  .banner_mobi {
    display: block;
  }

  .products_header {
    align-items: center;
    /* flex-direction: column; */
    margin-bottom: 1rem;
  }

  .header_cart_mb .custom-cart-box {
    padding: 0px 0;
  }

  .header-bottom .inner_menu {
    /* gap: 1rem; */
    gap: 0;
  }

  .only_mb {
    display: block;
  }

  .products_header .group_category {
    align-items: center;
    /* flex-direction: column;
    align-items: start;
    width: 100%; */
  }

  .products_header .group_category .view_all {
    text-align: right;
    margin-left: auto;
  }

  .section-banner-2 .inner_banner {
    flex-direction: column;
  }

  .section-banner-2 .inner_banner>* {
    width: 100%;
  }

  .section-banner-2 .inner_banner .banner_category {
    padding-left: 0;
    gap: 20px;
    margin-top: 2rem;
  }

  .section-banner-2 .item_cat {
    width: calc(50% - 20px);
  }

  .menu-red a {
    font-size: 12px;
  }

  .filter-group.brand-filter {
    margin: 20px 0;
  }

  .header-top .container {
    padding: 0 5px;
  }

  .custom-cart-box .cart-info {
    display: none;
  }

  .custom-cart-box {
    background: transparent;
  }

  .header-right_mobi .button_sale.shine_ani a {
    width: 100%;
    display: block;
    position: relative;
  }

  .flatsale-wrap img {
    width: 135px;
  }

  .header-right_mobi .button_sale.shine_ani .flatsale-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 95%;
    margin: 0 auto;
  }

  .header-right_mobi .button_sale.shine_ani .flatsale-wrap .timeline {
    position: relative;
    padding-left: 15px;
  }



  .header-right_mobi .button_sale.shine_ani .flatsale-wrap .timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 90%;
    width: 1px;
    background: #ddd;
    z-index: 1;
  }

  .header-right_mobi .menu-black {
    width: 95%;
    gap: 15px;
  }

  .header-right_mobi .menu-black a {
    font-weight: 400;
    background: #f8f8f8fe;
    padding: 8px 10px;
    border-radius: 5px;
    overflow: hidden;
  }

  .timeline .time {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
  }

  .timeline .time-end~span:not(.time-end) {
    display: none;
  }

  .timeline>span {
    font-size: 14px;
    color: #000;
  }


  .product-list .product_card {
    width: calc((100% / 2) - 1rem);
  }

  .header-right_mobi {
    margin: 20px 0;
  }

  .menu-center {
    gap: 5px;
    justify-content: space-between;
  }

  /* main#main {
    padding-top: 140px;
  } */

  .my_account_sidebar--mb {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .my_account_sidebar--pc {
    display: none;
  }

  .account-user.circle {
    width: auto;
  }

  .account-user.circle span.user-name {
    display: none;
  }

  .my_account_sidebar--mb {
    margin-bottom: 20px;
    width: max-content;
    position: sticky;
    top: 302px;
  }

  .my_account_sidebar--mb img.avatar {
    width: 32px !important;
    height: 32px;
  }

  .my_account_sidebar {
    padding: 10px;
  }

  .filter .inner_filter {
    width: 100%;
    border-radius: 0;
  }

  .header-right--mobi .menu-black {
    width: 48%;
  }

  .header-right--mobi .menu-black {
    display: none;
  }

  .banner-2 {
    display: none;
  }

  section.home_page_2 .col:first-child,
  .section-banner-2 .inner_banner .banner_category {
    display: none;
  }

  .section-product .btn_primary.view_all {
    width: max-content;
    margin: 15px auto 0;
    padding: 8px 15px;
  }

  .icon-box-left .icon-box-img+.icon-box-text {
    align-items: center;
  }

  .menu_footer_title {
    position: relative;
  }

  .menu_footer_title span.menu-toggle-icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .header-bottom .inner_menu .header-search form.searchform button {
    height: 40px;
    background: #F2F2F2;
    box-shadow: none;
    border: none;
  }

  .header-bottom .inner_menu .header-search form.searchform button i.icon-search {
    color: #979797;
  }

  .header-bottom {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .inner_menu {}

  header#header.hide-header {
    transition: all 0.5s;
    transform: translateY(-100%);
  }



  header#header {
    transition: all 0.5s;
    transform: translateY(0);
  }

  header#header .header_cart_mb {
    display: none;
  }

  header#header.hide-header .header_cart_mb {
    display: block;
  }

  .list_child_cat ul {
    overflow-x: scroll;
  }

  .list_child_cat ul li {
    flex: 0 0 auto;
  }

  .list_child_cat ul li {
    flex: 0 0 auto;
  }

  .product_info a.product_type_simple {
    width: 2rem;
    height: 2rem;
    padding: 0;

  }

  .product_info a.product_type_simple svg {
    width: 15px;
  }

  .section-product {
    padding: 15px 0;
  }

  .swiper-grid-column>.swiper-wrapper .swiper-slide {
    margin-bottom: 15px !important;
    
  }

  .box_shadown {
    padding: 1rem
  }

  .slider_top_cat .swiper-slide img {
    height: 62px;
  }

  .box_header+.box_body {
    margin-top: 0.5rem;
  }

  .slider_top_cat .swiper-slide a {
    font-size: 12px;
  }

  .col {
    padding-bottom: 15px !important;
  }

  .slider_top_cat {
    margin-bottom: -16px;
  }

  .btn_primary {
    line-height: 1;
    padding: 15px 5px;
    font-size: 14px;
  }

  .btn_primary svg {
    margin: 0;
    height: 12px;
    margin-top: -2px;
  }

  .btn-export-excel-build,
  .btn-export-png-build {
    width: 49.2%;
  }

  .price-wrapper .price_new {
    font-size: 14px;
  }

  .box_icon_shadow {
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    box-shadow: none;
    background: transparent;
  }

  .box_icon_shadow img {
    width: 40px;

    @media only screen and (max-width: 768px) {
      width: auto;
    }
  }

  .hide-header .header-bottom .inner_menu {
    gap: 1rem;
  }

  .header-bottom .inner_menu .header-search form.searchform {
    border-radius: 10px;
    border-width: 1px;
  }

  .hide-header .header-bottom {
    padding-top: 20px;
  }

  .custom-cart-box {
    padding: 0;
  }

  .custom-cart-count {
    top: 0;
    right: -3px;
    background: var(--primary-color);
    font-size: 10px;
    width: 14px;
    height: 14px;
  }

  .custom-cart-icon .desktop {
    display: none;
  }

  .custom-cart-icon .mobile {
    display: block;
  }

  .policy_grid {
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 15px 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .policy_grid .policy_item .policy_inner {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    height: 100%;
  }

  .policy_grid .policy_item .policy_icon {
    width: 22px;
    /* background: #F5F5F5; */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .policy_grid .policy_item .policy_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .policy_grid .policy_item .policy_text {
    flex: 1;
    font-size: 12px;
    line-height: 1.25;
  }

}



@media (max-width: 390px) {
  .policy_grid .policy_item .policy_inner {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
    height: 100%;
  }

  .policy_grid .policy_item .policy_text {
    font-size: 11px;
  }
}


.product_page_1 {
  padding: 0;
}


.page-template-buildpc section {
  /* padding: 20px; */
  background: #fff;
}

/* Custom styles for Build PC Redesign */
.build_pc_page_top {
  padding: 60px 0;
  background-color: #fafafa;
}

.build-pc-main-row {
  padding-bottom: 30px;
}

.build-pc-header {
  margin-bottom: 24px;
}

.build-pc-tag {
  display: inline-block;
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.build-pc-title {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.build-pc-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.6;
  max-width: 800px;
}

/* Progress Bar */
.build-pc-progress-container {
  background: #ffffff;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin-bottom: 24px;
}

.build-pc-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.progress-title {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.progress-percent {
  font-size: 13px;
  font-weight: 800;
  color: #dc2626;
}

.build-pc-progress-bar {
  width: 100%;
  height: 6px;
  background-color: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}

.build-pc-progress-fill {
  height: 100%;
  background-color: #dc2626;
  width: 0%;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top bar / Config Selector */
.build-pc-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 15px;
}

.build-pc-top-bar .group_btn_list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.build-pc-top-bar .btn_setup {
  background: #f1f5f9;
  border: 1px solid transparent;
  color: #475569;
  font-weight: 600;
  border-radius: 99px;
  transition: all 0.2s ease;
  font-size: 13px;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.build-pc-top-bar .btn_setup.active,
.build-pc-top-bar .btn_setup:hover {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
}

.build-pc-top-bar .btn_renew_order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 99px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.build-pc-top-bar .btn_renew_order:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.build-pc-top-bar .btn_renew_order svg {
  stroke: #475569;
}

/* Main content rows */
.build-pc-main-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.build-pc-left-col {
  flex: 1;
  min-width: 0;
}

.build-pc-right-col {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
  z-index: 10;
}

.build-section-label {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.build-items-box {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  margin-bottom: 24px;
}

.build-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s;
  min-height: 80px;
}

.build-item:last-child {
  border-bottom: none;
}

.build-item--icon-label {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  width: 250px;
}

.build-item-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.build-item-icon-wrapper svg {
  width: 20px;
  height: 20px;
}

.build-item:hover .build-item-icon-wrapper {
  border-color: #cbd5e1;
  color: #64748b;
}

.build-item.has-selected .build-item-icon-wrapper {
  background-color: #e8f2ee;
  border-color: #c6ded3;
  color: #1f8a5b;
}

.build-item-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.build-item--name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.build-item--subtitle {
  font-size: 11px;
  color: #94a3b8;
}

.build-item--content {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  min-width: 0;
  border: none !important;
}

/* Open Popup Button (Select component) */
.open-popup-build {
  font-size: 13px !important;
  background: #ffffff;
  color: #334155;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px dashed #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.open-popup-build:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Selected Product Card inside Row */
.build-item.has-selected .selected-product {
  width: 100%;
}

.selected-product-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.selected-product-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.selected-product-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-product-badge {
  font-size: 11px;
  font-weight: 700;
  background: #f0fdf4;
  color: #16a34a;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #dcfce7;
}

.selected-product-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.selected-product-price {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.selected-product-change-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.selected-product-change-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.selected-product-change-btn svg {
  width: 12px;
  height: 12px;
}

.selected-product-delete-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: color 0.2s ease;
  padding: 6px;
}

.selected-product-delete-btn:hover {
  color: #ef4444;
}

.selected-product-delete-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Accessories Collapsible Accordion */
.build-accessories-accordion {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  margin-top: 24px;
}

.build-accessories-summary {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  user-select: none;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid transparent;
}

.build-accessories-accordion[open] .build-accessories-summary {
  border-bottom-color: #e2e8f0;
}

.build-accessories-summary::-webkit-details-marker {
  display: none;
}

.build-accessories-summary .arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #64748b;
}

.build-accessories-accordion[open] .build-accessories-summary .arrow {
  transform: rotate(180deg);
}

.build-accessories-summary .build-badge {
  font-weight: 400;
  font-size: 11px;
  color: #64748b;
  margin-left: 8px;
  text-transform: none;
  white-space: nowrap;
  display: inline-block;
}

.build-accessories-accordion .accessory-parts-box {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Sticky Sidebar / Summary Card */
.summary-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.summary-card-header {
  background: #0f172a;
  padding: 16px 20px;
  border-bottom: 1px solid #1e293b;
}

.summary-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
}

.summary-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compatibility-status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.compatibility-status.status-success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #dcfce7;
}

.compatibility-status.status-warning {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fef3c7;
}

.compatibility-status .status-icon {
  font-weight: 800;
}

.wattage-status-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
}

.wattage-status-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wattage-title {
  font-size: 13px;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wattage-title .lightning-icon {
  color: #eab308;
  font-weight: bold;
}

.recommended-psu {
  font-size: 12px;
  color: #64748b;
  padding-left: 18px;
}

.summary-total-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  padding: 16px 0;
}

.total-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.5px;
}

.total-value {
  font-family: 'Be Vietnam Pro', 'Montserrat', sans-serif !important;
  font-size: 28px;
  font-weight: 800;
  color: #111;
}

/* Button stylings */
.summary-card-body .btn_primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  height: auto;
}

.summary-card-body .btn-red-primary {
  background: #dc2626;
  color: #ffffff;
}

.summary-card-body .btn-red-primary:hover {
  background: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.summary-card-body .action-grid-buttons {
  display: flex;
  gap: 12px;
}

.summary-card-body .action-grid-buttons > * {
  flex: 1;
}

.summary-card-body .btn_primary--white {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.summary-card-body .btn_primary--white:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.summary-card-body .btn_primary--blue {
  background: #0084ff;
  color: #ffffff;
}

.summary-card-body .btn_primary--blue:hover {
  background: #0072dd;
  box-shadow: 0 4px 10px rgba(0, 132, 255, 0.25);
}

.summary-card-body .btn_primary--gray-light {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 13px;
  padding: 10px;
}

.summary-card-body .btn_primary--gray-light:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.summary-card-body .btn_primary svg {
  flex-shrink: 0;
}

.summary-card-footer {
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.disclaimer-text {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

/* Responsive adjustments */
@media only screen and (max-width: 991px) {
  .build-pc-main-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .build-pc-left-col,
  .build-pc-right-col {
    width: 100%;
  }
  
  .build-pc-right-col {
    position: static;
  }
}

@media only screen and (max-width: 768px) {
  .build_pc_page_top {
    padding: 16px 0;
  }
  
  .build-pc-title {
    font-size: 22px;
  }
  
  .build-pc-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .build-pc-top-bar .group_btn {
    width: 100%;
    overflow: hidden;
  }
  
  .build-pc-top-bar .group_btn_list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  
  .build-pc-top-bar .group_btn_list::-webkit-scrollbar {
    display: none;
  }
  
  .build-pc-top-bar .group_btn_list li {
    flex: 0 0 auto;
  }
  
  .build-pc-top-bar .btn_renew_order {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  
  .build-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 14px;
    min-height: auto;
  }
  
  .build-item--icon-label {
    width: 100%;
    gap: 12px;
  }

  .build-item-icon-wrapper {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
  }

  .build-item-icon-wrapper svg {
    width: 18px;
    height: 18px;
  }
  
  .build-item--name {
    font-size: 14px;
  }

  .build-item--subtitle {
    display: block; /* Show subtitle stacked on mobile */
    font-size: 11px;
    color: #94a3b8;
  }
  
  .build-item--content {
    width: 100%;
    padding-left: 0;
    justify-content: flex-start;
  }
  
  .open-popup-build {
    font-size: 13px !important;
    padding: 8px 16px;
    border-radius: 8px;
    white-space: nowrap;
    width: 100%; /* Make select button span full width */
    justify-content: center;
    text-align: center;
  }
  
  .selected-product-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .selected-product-details {
    align-items: flex-start;
    width: 100%;
  }

  .selected-product-title {
    font-size: 13px;
    text-align: left;
    -webkit-line-clamp: 2;
    max-width: 100%;
  }
  
  .selected-product-meta {
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
    width: 100%;
  }

  .selected-product-price {
    font-size: 14px;
  }

  .selected-product-change-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
  }

  .build-accessories-summary {
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 16px;
  }

  .build-accessories-summary .build-badge {
    white-space: normal !important;
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
    padding-left: 18px;
    display: block;
  }

  /* Responsive Selection Popup */
  .popup-build-inner {
    height: 90vh;
    max-height: 90vh;
    border-radius: 12px;
  }

  .popup-build-body {
    flex-direction: column;
    overflow-y: auto;
  }

  .popup-build-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 16px;
  }

  .popup-build-sidebar .filter-group {
    margin-bottom: 16px;
  }

  .popup-build-content {
    width: 100%;
    padding: 16px;
  }

  .popup-build-content--head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .popup-products .product_cart_info {
    padding: 12px !important;
  }

  .popup-products .product_cart_info--item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .popup-products .product_cart_info--inner {
    gap: 10px;
  }

  .popup-products .product_cart_info--thumb img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px;
  }

  .popup-products .product_cart_info--title {
    font-size: 12px !important;
    -webkit-line-clamp: 1;
  }

  .popup-products .product_cart_info--price {
    font-size: 13px !important;
  }

  .popup-products .add-to-build-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}

/* Category Page Grid & Sidebar Filters */
.category-page-main-row {
  display: flex;
  gap: 24px;
  margin: 20px 0;
  align-items: flex-start;
}

.category-sidebar {
  width: 270px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
}

.category-content-area {
  flex: 1;
  min-width: 0;
}

.sidebar-filter-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-widget {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 20px;
}

.sidebar-widget:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-widget .widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 15px;
  user-select: none;
}

.sidebar-widget .widget-header .widget-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  text-transform: none;
  margin: 0;
}

.sidebar-widget .widget-header .chevron-icon {
  transition: transform 0.2s ease;
  color: #6b7280;
}

.sidebar-widget .widget-header.collapsed .chevron-icon {
  transform: rotate(-90deg);
}

.category-filter-list,
.brand-filter-list,
.price-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.category-filter-list li,
.brand-filter-list li,
.price-filter-list li {
  margin: 0;
}

.cat-filter-link {
  display: block;
  padding: 8px 16px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s ease;
  text-align: left;
}

.cat-filter-link:hover {
  background: #f9fafb;
  color: #111827;
}

.cat-filter-link.active {
  background: #fdf2f2;
  color: var(--primary-color);
  font-weight: 600;
}

.brand-filter-link,
.price-filter-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
  text-align: left;
}

.brand-filter-link:hover,
.price-filter-link:hover {
  color: #111827;
}

.brand-filter-link.active,
.price-filter-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

.checkbox-box {
  width: 18px;
  height: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  background: #fff;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.brand-filter-link.active .checkbox-box,
.price-filter-link.active .checkbox-box {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* Category Toolbar Control Row */
.category-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.toolbar-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 30%;
}

.category-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1;
  width: max-content;
}

.product-count {
  font-size: 14px;
  color: #9ca3af;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.sort-label {
  font-size: 14px;
  color: #4b5563;
  font-weight: 500;
}

.sort-tabs {
  display: flex;
  gap: 8px;
}


.woosw-btn {
  margin: 0;
}

.sort-tab-pill {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.sort-tab-pill:hover {
  background: #f9fafb;
  border-color: #c5c6c9;
  color: #111827;
}

.sort-tab-pill.active {
  background: #fdf2f2;
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
}

/* Category Page Product Loop Grid */
.category-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.category-product-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  text-align: left;
}

.category-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  border-color: #cbd5e1;
}

.product-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-card-badge.hot-badge {
  background: #111827;
}

.product-card-wishlist {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}

/* Custom Wishlist circle heart style */
.product-card-wishlist a.woosw-btn,
.product-card-wishlist button {
  width: 36px;
  height: 36px;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
  cursor: pointer;
  line-height: 1;
  min-height: auto;
}

.product-card-wishlist a.woosw-btn:hover,
.product-card-wishlist button:hover {
  transform: scale(1.05);
}

/* Hide default plugin icons/text */
.product-card-wishlist a.woosw-btn::before,
.product-card-wishlist button::before,
.product-card-wishlist a.woosw-btn span,
.product-card-wishlist button span {
  display: none !important;
  content: "" !important;
}

/* State: Unliked (Not favorited yet) */
.product-card-wishlist a.woosw-btn::after,
.product-card-wishlist button::after {
  content: "♡";
  font-size: 20px;
  color: #94a3b8;
  display: block;
}

.product-card-wishlist a.woosw-btn:hover::after,
.product-card-wishlist button:hover::after {
  color: #ef4444;
}

/* State: Liked (Favorited) */
.product-card-wishlist a.woosw-btn.woosw-added,
.product-card-wishlist button.woosw-added {
  background: #e11d48 !important;
  border-color: #e11d48 !important;
}

.product-card-wishlist a.woosw-btn.woosw-added::after,
.product-card-wishlist button.woosw-added::after {
  content: "❤";
  font-size: 16px;
  color: #fff !important;
}

.product-card-image-link {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 8px;
}

.product-card-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.category-product-card:hover .product-card-image-link img {
  transform: scale(1.03);
}

.product-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--tv-star);
}

.product-card-rating .star-rating {
  font-size: 13px;
  float: none;
  margin: 0;
  display: inline-block;
  color: var(--tv-star);
}

.product-card-rating .star-rating::before {
  color: var(--tv-star);
}

.product-card-rating .star-rating span::before {
  color: var(--tv-star);
}

.product-card-rating .rating-count {
  color: #9ca3af;
  font-weight: 600;
  font-size: 12px;
}

.product-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
  line-height: 1.4;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-card-title a {
  color: #1f2937;
  text-decoration: none;
}

.product-card-title a:hover {
  color: var(--primary-color);
}

.product-card-price-row {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.old-price-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.old-price {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 500;
}

.discount-percent {
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.new-price {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.save-amount {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  margin-top: 2px;
}

.product-card-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin-top: auto;
}



.product-stock-status {
  text-align: left;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-stock-status .stock-dot {
  width: 8px;
  height: 8px;
  background-color: #007a43;
  border-radius: 50%;
  display: inline-block;
}

.product-stock-status .stock-text {
  color: #007a43;
  font-size: 13px;
  font-weight: 700;
}

.product-add-to-cart-btn {
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(181, 27, 29, 0.1);
  text-decoration: none;
}

.product-add-to-cart-btn:hover {
  background: #9d1819 !important;
  box-shadow: 0 4px 6px rgba(181, 27, 29, 0.15);
}

.product-add-to-cart-btn svg {
  width: 18px;
  height: 18px;
}

/* Category pagination style */
.category-pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.category-pagination-wrapper .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #4b5563;
  margin: 0 4px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
}

.category-pagination-wrapper .page-numbers:hover {
  background: #f9fafb;
  border-color: #c5c6c9;
  color: #111827;
}

.category-pagination-wrapper .page-numbers.current {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* Responsive adjustments */
@media only screen and (max-width: 991px) {
  .category-page-main-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .category-sidebar {
    width: 100%;
    position: static;
  }
  
  .category-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .toolbar-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .sort-tabs {
    flex-wrap: wrap;
  }
}

/* Single Product Page Custom Styles */
/* 1. Gallery Main & Thumb Swiper */
.woo-swiper-gallery {
  display: block;
}

.woo-swiper-gallery .swiper.woo-main-swiper .swiper-slide {
  border: 1.5px solid #fecaca !important;
  border-radius: 12px !important;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.woo-swiper-gallery .swiper.woo-main-swiper .swiper-slide img {
  transition: transform 0.35s ease-in-out !important;
  max-width: 80% !important;
  max-height: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transform: scale(1) !important;
}

.woo-swiper-gallery .swiper.woo-main-swiper .swiper-slide:hover img {
  transform: scale(1.8) !important;
  transition: none !important;
}

.gallery-zoom-note {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 12px;
  color: #9ca3af;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border-radius: 6px;
  z-index: 10;
  pointer-events: none;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.woo-thumb-swiper {
  width: 100%;
  overflow: hidden;
}

.woo-thumb-swiper .swiper-slide {
  width: 70px !important;
  height: 70px !important;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  padding: 4px;
}

.woo-thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.woo-thumb-swiper .swiper-slide-thumb-active,
.woo-thumb-swiper .swiper-slide.active-thumb {
  border-color: var(--primary-color) !important;
  /* box-shadow: 0 0 0 1.5px var(--primary-color); */
}

/* 2. Product Information Content Column */
.woo-product-info-wrapper {
  display: flex;
  flex-direction: column;
}

.woo-product-info-wrapper .product-title {
  font-size: 26px;
  font-weight: 700;
  color: #1f2733;
  margin: 0 0 8px 0;
  line-height: 1.35;
  text-align: left;
}

.woo-product-info-wrapper .product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #6b7280;
  text-align: left;
}

.woo-product-info-wrapper .product-meta > *:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: #cbd5e1;
  font-weight: bold;
}

.woo-product-info-wrapper .rating-stars {
  display: inline-flex;
  align-items: center;
  color: var(--tv-star);
}

.woo-product-info-wrapper .rating-stars .star-rating {
  font-size: 13px;
  float: none;
  margin: 0;
  color: var(--tv-star);
}

.woo-product-info-wrapper .rating-stars .star-rating::before {
  color: var(--tv-star);
}

.woo-product-info-wrapper .rating-stars .star-rating span::before {
  color: var(--tv-star);
}

.woo-product-info-wrapper .rating-count {
  font-weight: 500;
  color: #6b7280;
}

.woo-product-info-wrapper .product-sku {
  color: #9ca3af;
  font-weight: 500;
}

/* Price Box Card container */
.product-price-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: left;
  border: 1px solid #e5e7eb;
}

.product-price-card .price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.product-price-card .sale-price {
  font-size: 32px;
  font-weight: 800;
  color: #111827;
}

.product-price-card .regular-price {
  font-size: 16px;
  color: #9ca3af;
  text-decoration: line-through;
  margin-left: 12px;
  font-weight: 500;
}

.product-price-card .discount-badge {
  background: var(--primary-color);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  line-height: 1.4;
}

.product-price-card .saving-line {
  font-size: 14px;
  color: #374151;
  margin-top: 6px;
  font-weight: 500;
}

.product-price-card .saving-line strong {
  color: #111827;
  font-weight: 700;
}

/* 3. Highlighted Specs card styling */
.product-specs-highlights {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.product-specs-highlights h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px 0;
  text-transform: none;
}

.highlight-list-box p,
.highlight-list-box li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  list-style: none !important;
}

.highlight-list-box p svg,
.highlight-list-box li svg {
  color: #4b5563;
  flex-shrink: 0;
  margin-top: 3px;
}

/* 4. Quantity and Buy form buttons row */
.cart-form-container {
  gap: 0 !important;
  margin-bottom: 20px;
}

body.single-product .quantity-stock-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

body.single-product .quantity-input-box .quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  height: 44px !important;
}

body.single-product .quantity-input-box .quantity input.qty {
  width: 45px !important;
  height: 44px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #1f2937 !important;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.single-product .quantity-input-box .quantity .minus,
body.single-product .quantity-input-box .quantity .plus {
  width: 36px !important;
  height: 44px !important;
  background: #fff !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body.single-product .quantity-input-box .quantity .minus:hover,
body.single-product .quantity-input-box .quantity .plus:hover {
  background: #f8fafc !important;
  color: #111827 !important;
}

body.single-product .stock-status-info {
  font-size: 15px;
  color: #64748b;
  font-weight: 500;
  margin-left: 4px;
}

body.single-product .purchase-buttons-row {
  display: flex;
  gap: 16px !important;
  margin-top: 8px;
}


body.single-product .purchase-buttons-row button {
  margin: 0;
}

body.single-product .purchase-buttons-row .btn-buy-now-red {
  flex: 1;
  background: #c20c24 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  border: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: 52px !important;
  line-height: 52px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  letter-spacing: 0.5px;
}

body.single-product .purchase-buttons-row .btn-buy-now-red:hover {
  background: #a60a1e !important;
}

body.single-product .purchase-buttons-row .btn-add-to-cart-outline {
  flex: 1;
  background: #f9fafb !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  height: 52px !important;
  line-height: 52px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  letter-spacing: 0.5px;
}

body.single-product .purchase-buttons-row .btn-add-to-cart-outline:hover {
  background: #f3f4f6 !important;
  border-color: #cbd5e1 !important;
}

body.single-product .purchase-buttons-row .btn-add-to-cart-outline svg {
  stroke: #1f2937 !important;
  margin-right: 8px !important;
}

/* 5. Promotions Card Box */
.product-promotions-card {
  border: 1px solid #fca5a5;
  background: #fff5f5;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.promo-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

.promo-content p,
.promo-content li {
  position: relative;
  padding-left: 20px !important;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  list-style: none !important;
}

.promo-content p::before,
.promo-content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

.product-services-trust-list {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  margin-top: 20px;
  background: #fff;
}

.service-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
}

.service-trust-item:last-child {
  border-bottom: none;
}

.service-trust-icon {
  color: var(--primary-color);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.service-trust-icon svg {
  stroke: var(--primary-color);
  width: 20px;
  height: 20px;
}

.service-trust-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-trust-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.service-trust-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
}

/* Mobile responsive single product detail layout */
@media only screen and (max-width: 767px) {
  .single-product-main-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .single-product-main-row .col_galary,
  .single-product-main-row .col_product_content {
    width: 100%;
  }
  
  .purchase-buttons-row {
    flex-direction: column;
  }
  
}

/* Sidebar "Bài viết nổi bật" Section Styles */
.box_content_sub .title_flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

.box_content_sub .title_flex .content_sub_title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin: 0 !important;
  position: relative !important;
  padding-bottom: 8px !important;
}

.box_content_sub .title_flex .content_sub_title::after {
  content: "" !important;
  position: absolute !important;
  bottom: -9px !important;
  left: 0 !important;
  width: 80px !important;
  height: 2px !important;
  background: var(--primary-color) !important;
}

.box_content_sub .title_flex a {
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding-bottom: 8px !important;
  transition: color 0.15s ease !important;
}

.box_content_sub .title_flex a:hover {
  color: var(--primary-color) !important;
}

/* Related Post Cards inside Sidebar */
.box_content_sub .relate_post .item_block_post {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.box_content_sub .relate_post .item_block_post:last-child {
  margin-bottom: 0 !important;
}

.box_content_sub .relate_post .item_block_post .cover_link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}

.box_content_sub .relate_post .item_block_post .item_post_img {
  width: 100px !important;
  height: 60px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.box_content_sub .relate_post .item_block_post .item_post_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.box_content_sub .relate_post .item_block_post .item_post_content {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.box_content_sub .relate_post .item_block_post .item_post_content .post_title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: left !important;
}

.box_content_sub .relate_post .item_block_post .item_post_content .post_excerpt {
  display: none !important;
}

/* Product Page 2 (Bottom Blocks) Red underlines & Card styles */
body.single-product .product_page_2 .title_border,
body.single-product .product_page_2 .title_flex {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}



body.single-product .product_page_2 .content_main_title,
body.single-product .product_page_2 .content_sub_title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin: 0 !important;
  padding-bottom: 8px !important;
  text-transform: none !important;
}

/* Customize block boxes background, borders, shadows */
body.single-product .product_page_2 .box_shadown {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* "Xem thêm" Button Styling */
body.single-product .btn_seemore {
  background: var(--primary-color) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
  text-transform: none !important;
  height: auto !important;
}

body.single-product .btn_seemore:hover {
  background: #9d1819 !important;
}

body.single-product .btn_seemore svg stroke {
  stroke: #fff !important;
}

/* Technical Specifications Table Styling */
body.single-product .specs_table table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

body.single-product .specs_table table tr {
  border-bottom: 1px solid #e2e8f0 !important;
}

body.single-product .specs_table table tr:last-child {
  border-bottom: none !important;
}

body.single-product .specs_table table tr:nth-child(even) {
  background: #f8fafc !important;
}

body.single-product .specs_table table td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #4b5563 !important;
  border: none !important;
}

body.single-product .specs_table table td.spec-name {
  font-weight: 700 !important;
  color: #1f2937 !important;
  width: 40% !important;
  border-right: 1px solid #e2e8f0 !important;
  background: transparent !important;
}

body.single-product .specs_table table td.spec-desc {
  width: 60% !important;
  background: transparent !important;
}

/* Rating Summary Box styling */
body.single-product .box_review_meta .box_shadown {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Redesigned Build PC Selection Popup Styles */
.popup-build-content--head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.popup-build-content--head .popup-search {
  flex: 1;
}

.popup-build-content--head .popup-search input.search-input {
  width: 100% !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
  font-size: 14px !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.popup-build-content--head .popup-build-content--order {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-build-content--head .popup-build-content--order select.order-select {
  padding: 5px 36px 5px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
  margin: 0;
}

.popup-build-sidebar .filter-group {
  margin-bottom: 24px;
}

.popup-build-sidebar .filter-group strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.popup-build-sidebar .filter-group label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #475569 !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.popup-build-sidebar .filter-group label input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.popup-build-content--result {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
  text-align: left;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.popup-products {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.popup-products .product-list-build {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup-products .product_cart_info {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 15px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.popup-products .product_cart_info:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

.popup-products .product_cart_info--item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.popup-products .product_cart_info--inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.popup-products .product_cart_info--thumb {
  flex-shrink: 0;
}

.popup-products .product_cart_info--thumb img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 8px;
  background: #ffffff;
}

.popup-products .product_cart_info--info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

.popup-products .product_cart_info--title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}

.popup-products .product_cart_info--sku {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.popup-products .product_cart_info--price {
  font-size: 15px;
  font-weight: 800;
  color: #dc2626;
  text-align: left;
}

.popup-products .product_cart_info--price span.woocommerce-Price-amount {
  color: #dc2626;
  font-weight: 800;
}

.popup-products .product_cart_info--btn {
  flex-shrink: 0;
}

.popup-products .add-to-build-btn {
  background: #dc2626 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
}

.popup-products .add-to-build-btn:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2) !important;
}


.page-template-buildpc #main {
  padding: 0;

  @media only screen and (max-width: 768px) {
    padding-top: 100px;
  }
}

/* ===== CUSTOM WISH-LIST POPUP STYLE (MATCHING BUILD PC MODAL) ===== */

/* Overlay & Backdrop blur */
.woosw-popup {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* Modal Content Box */
.woosw-popup .woosw-popup-inner .woosw-popup-content {
  max-width: 680px !important;
  width: 90% !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Header style */
.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: normal !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Header Close Button */
.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top .woosw-popup-close {
  background: #f1f5f9 !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
  top: 16px !important;
  right: 20px !important;
  font-size: 0 !important;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top .woosw-popup-close::after {
  content: "×" !important;
  font-family: inherit !important;
  font-size: 20px !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top .woosw-popup-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Body container styling */
.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-mid {
  padding: 20px 24px !important;
  background-color: #ffffff !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}

/* Wishlist items list */
.woosw-popup .woosw-items {
  padding: 0 !important;
}

.woosw-popup .woosw-items .woosw-item {
  padding: 0 !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item-inner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
  transition: all 0.2s ease !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item-inner:hover {
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Delete / Remove button on items */
.woosw-items .woosw-item .woosw-item--remove {
  order: 3 !important; /* Move delete button to the right */
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
}

.woosw-items .woosw-item .woosw-item--remove:hover {
  background: #fee2e2 !important;
}

.woosw-items .woosw-item .woosw-item--remove span {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woosw-items .woosw-item .woosw-item--remove span::before {
  content: "×" !important;
  font-family: inherit !important;
  font-size: 18px !important;
  color: #64748b !important;
  font-weight: normal !important;
}

.woosw-items .woosw-item .woosw-item--remove:hover span::before {
  color: #ef4444 !important;
}

/* Product image styling */
.woosw-popup .woosw-items .woosw-item .woosw-item--image {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding: 4px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item--image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Product details styling */
.woosw-popup .woosw-items .woosw-item .woosw-item--info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item--name,
.woosw-popup .woosw-items .woosw-item .woosw-item--name a {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item--name a:hover {
  color: #e11d48 !important;
}

/* Price styling */
.woosw-popup .woosw-items .woosw-item .woosw-item--price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e11d48 !important;
}

/* Add to Cart button (matching build pc button style) */
.woosw-popup .woosw-items .woosw-item .woosw-item--atc {
  order: 2 !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item--atc a.button {
  background: #dc2626 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.woosw-popup .woosw-items .woosw-item .woosw-item--atc a.button:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2) !important;
}

/* Footer / Actions styling */
.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot {
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 16px 24px !important;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-direction: row !important;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner a {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner a:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Style "Xem danh sách yêu thích" (usually first button or primary button) to be red */
.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner a:first-child {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner a:first-child:hover {
  background: #b91c1c !important;
}

/* Mobile Optimizations */
@media only screen and (max-width: 768px) {
  .woosw-popup .woosw-popup-inner .woosw-popup-content {
    max-width: 95% !important;
    width: 95% !important;
    max-height: 85vh !important;
  }
  .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top {
    padding: 16px !important;
    font-size: 16px !important;
  }
  .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top .woosw-popup-close {
    top: 12px !important;
    right: 16px !important;
  }
  .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-mid {
    padding: 12px 16px !important;
  }
  .woosw-popup .woosw-items .woosw-item .woosw-item-inner {
    padding: 12px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .woosw-popup .woosw-items .woosw-item .woosw-item--image {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
  }
  .woosw-popup .woosw-items .woosw-item .woosw-item--info {
    width: calc(100% - 80px) !important;
    flex: none !important;
  }
  .woosw-popup .woosw-items .woosw-item .woosw-item--atc {
    width: 100% !important;
    order: 4 !important;
    margin-top: 8px !important;
  }
  .woosw-popup .woosw-items .woosw-item .woosw-item--atc a.button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }
  .woosw-items .woosw-item .woosw-item--remove {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    order: 1 !important;
  }
  .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot {
    padding: 12px 16px !important;
  }
  .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner a {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===== CUSTOM WISH-LIST PAGE STYLE (MATCHING BUILD PC LAYOUT) ===== */

/* .woosw-list {
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 0 15px !important;
} */

/* Switcher / Top Header */
.woosw-list .woosw-switcher {
  background: #ffffff !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  border: 1px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

.woosw-list .woosw-switcher .woosw-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

/* Reset default table styles for conversion to Flexbox Cards */
.woosw-list table.woosw-items {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.woosw-list table.woosw-items tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.woosw-list table.woosw-items tr.woosw-item {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px !important;
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
}

.woosw-list table.woosw-items tr.woosw-item:hover {
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px);
}

.woosw-list table.woosw-items tr td,
.woosw-list table.woosw-items tr:nth-child(2n) td,
.woosw-list table.woosw-items tr:hover td {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Product image column */
.woosw-list table.woosw-items .woosw-item .woosw-item--image {
  width: 90px !important;
  height: 90px !important;
  flex: 0 0 90px !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Product Info Column */
.woosw-list table.woosw-items .woosw-item .woosw-item--info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--name,
.woosw-list table.woosw-items .woosw-item .woosw-item--name a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--name a:hover {
  color: #dc2626 !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #dc2626 !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--stock {
  font-size: 13px !important;
  color: #10b981 !important;
  font-weight: 600 !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--note {
  font-size: 13px !important;
  color: #64748b !important;
  font-style: italic !important;
  margin-top: 4px !important;
  border-left: 2px solid #cbd5e1 !important;
  padding-left: 8px !important;
}

/* Add to Cart Column */
.woosw-list table.woosw-items .woosw-item .woosw-item--actions,
.woosw-list table.woosw-items .woosw-item .woosw-item--atc {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--atc a.button {
  background: #dc2626 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--atc a.button:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2) !important;
}

/* Remove Column */
.woosw-list table.woosw-items .woosw-item .woosw-item--remove {
  order: 4 !important; /* Move delete button to the right */
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--remove:hover {
  background: #fee2e2 !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--remove span {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--remove span::before {
  content: "×" !important;
  font-family: inherit !important;
  font-size: 20px !important;
  color: #64748b !important;
  font-weight: normal !important;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--remove:hover span::before {
  color: #ef4444 !important;
}

/* Actions / Bottom Bar */
.woosw-list .woosw-actions {
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 16px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.woosw-list .woosw-copy .woosw-copy-url,
.woosw-list .woosw-share a {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.woosw-list .woosw-copy .woosw-copy-url:hover,
.woosw-list .woosw-share a:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Mobile Optimizations for Wishlist Page */
@media only screen and (max-width: 768px) {
  .woosw-list {
    margin: 20px auto !important;
  }
  .woosw-list .woosw-switcher {
    padding: 12px 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .woosw-list table.woosw-items tr.woosw-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .woosw-list table.woosw-items .woosw-item .woosw-item--image {
    width: 70px !important;
    height: 70px !important;
    flex: 0 0 70px !important;
  }
  .woosw-list table.woosw-items .woosw-item .woosw-item--info {
    width: 100% !important;
  }
  .woosw-list table.woosw-items .woosw-item .woosw-item--atc {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .woosw-list table.woosw-items .woosw-item .woosw-item--atc a.button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .woosw-list table.woosw-items .woosw-item .woosw-item--remove {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
  }
  .woosw-list .woosw-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
  }
  .woosw-list .woosw-copy,
  .woosw-list .woosw-share {
    width: 100% !important;
  }
  .woosw-list .woosw-copy .woosw-copy-url,
  .woosw-list .woosw-share a {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   CUSTOM CHECKOUT PAGE LAYOUT REDESIGN
   ========================================================================== */

.checkout_page {
    background-color: #f7f9fa;
    padding: 30px 0 60px;
}

.custom-checkout {
    max-width: 1200px;
    margin: 0 auto;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    align-items: start;
}

.checkout-left, .checkout-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.checkout-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

/* Đơn hàng items */
.checkout-item.product_cart_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

.checkout-item.product_cart_info:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.product_cart_info--item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.product_cart_info--thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product_cart_info--thumb img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

.product_cart_info--info {
    flex: 1;
}

.product_cart_info--title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.4;
}

.product_cart_info--sku {
    font-size: 12px;
    color: #9ca3af;
}

.product_cart_info--qty {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
    text-align: center;
    width: 40px;
}

.product_cart_info--price {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    text-align: right;
    width: 120px;
}

.product_cart_info--price span {
    color: inherit !important;
}

/* Form đặt hàng & địa chỉ */
.contact_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact_form .row_2 {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
}

.contact_form .row_2 .field {
    width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;
}

.contact_form .field {
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact_form input[type="text"],
.contact_form select,
.contact_form textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    font-size: 14px;
    color: #1f2937;
    background: #ffffff;
    transition: all 0.2s ease;
}

.contact_form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234B5563' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

.contact_form textarea {
    height: 100px !important;
    resize: none;
}

.contact_form input:focus,
.contact_form select:focus,
.contact_form textarea:focus {
    border-color: #BA0F2E;
    outline: none;
    box-shadow: 0 0 0 3px rgba(186, 15, 46, 0.1);
}

/* Delivery Type Radio Cards */
.delivery-type {
    margin-top: 20px;
}

.delivery-type .row_2 {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
}

.delivery-type .row_2 .field {
    width: 50% !important;
    flex: 0 0 50% !important;
}

.delivery {
    display: block;
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 12px;
    cursor: pointer;
    background: #ffffff;
    text-align: center;
    transition: all 0.2s ease;
    margin: 0;
    width: 100% !important;
}

.delivery input[type="radio"],
.payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio indicator */
.delivery .radio-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.delivery.active .radio-indicator {
    border-color: #3b82f6;
    background: #3b82f6;
}

.delivery.active .radio-indicator::after {
    content: "";
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    display: block;
}

.delivery-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.delivery .input_icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery .input_icon svg {
    width: 24px;
    height: 24px;
}

.delivery.active .input_icon svg path {
    fill: #111827;
}

.delivery-text {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    transition: color 0.2s;
}

.delivery.active {
    border-color: #BA0F2E;
    box-shadow: 0 0 0 1px #BA0F2E;
}

.delivery.active .delivery-text {
    color: #111827;
}

/* Sidebar checkout right */
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    color: #4b5563;
}

.total-row.total {
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
    padding-top: 16px;
    font-size: 16px;
    color: #111827;
}

.total-row.total span:last-child {
    font-size: 20px;
    font-weight: 800;
    color: #111827 !important;
}

/* Payment Method radio cards */
.payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
    width: 100% !important;
    box-sizing: border-box !important;
}

.payment-method.active {
    border-color: #BA0F2E;
    box-shadow: 0 0 0 1px #BA0F2E;
}

.payment-method .radio-indicator {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.payment-method.active .radio-indicator {
    border-color: #3b82f6;
    background: #3b82f6;
}

.payment-method.active .radio-indicator::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: block;
}

.payment-text {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
}

.payment-method.active .payment-text {
    color: #111827;
}

/* Group Button styled */
.group_btn {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

#place-order.btn_primary {
    width: 100%;
    height: 52px;
    background: #BA0F2E !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: uppercase;
}

#place-order.btn_primary:hover {
    background: #980c25 !important;
}

#place-order.btn_primary svg {
    margin-top: -2px;
}

.group_btn .btn-outline {
    width: 100%;
    height: 48px;
    background: #ffffff;
    color: #4b5563 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 0;
}

.group_btn .btn-outline:hover {
    background: #f9fafb;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

/* Excel & PNG Buttons horizontal layout using Flexbox */
.export-buttons-row {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 4px !important;
}

.export-buttons-row .btn_primary,
.export-buttons-row a.btn_primary {
    flex: 1 !important;
    width: 50% !important;
    height: 42px !important;
    background: #BA0F2E !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none !important;
    margin: 0 !important;
    float: none !important;
}

.export-buttons-row .btn_primary:hover,
.export-buttons-row a.btn_primary:hover {
    background: #980c25 !important;
}

/* Media Query */
@media (max-width: 991px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .contact_form .row_2,
    .delivery-type .row_2 {
        display: block !important;
    }
    
    .contact_form .row_2 .field,
    .delivery-type .row_2 .field {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 12px !important;
    }
    
    .checkout-box {
        padding: 16px;
    }
    
    .checkout-item.product_cart_info {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .product_cart_info--qty {
        order: 2;
        text-align: left;
        width: auto;
    }
    
    .product_cart_info--price {
        order: 3;
        flex: 1;
    }
}/* ============ HEADER PREMIUM ============ */
/* Tien to body #wrapper #header: style.css nap sau main.css nen
   selector cung do uu tien se thua. Them body de vuot len. */

body #wrapper #header {
  background: transparent;
  box-shadow: none;
}

/* Thanh tren cung: trong suot, cuon la mat */
body #wrapper #header .header-medium {
  background: transparent;
  border-bottom: 1px solid #ececec;
}

body #wrapper #header.scrolled-pc .header-medium {
  display: none;
}

body #wrapper #header.scrolled-pc {
  box-shadow: none;
}

/* Card 1: logo + tim kiem + hanh dong */
body #wrapper #header .header-bottom {
  background-color: transparent !important;
  box-shadow: none;
  padding: 10px 0 8px;
}

body #wrapper #header .header-bottom .inner_menu {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 12px 20px;
}

/* Card 2: menu chinh */
body #wrapper #header .header-menu {
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding-bottom: 12px;
}

body #wrapper #header .header-menu .menu-wrap {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 2px 20px;
}

/* O tim kiem */
body #wrapper #header .header-bottom .header-search form.searchform {
  background: #f5f5f5;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition: .3s all;
}

body #wrapper #header .header-bottom .header-search form.searchform:focus-within {
  background: #fff;
  border-color: #e0e0e0;
  box-shadow: none;
}

body #wrapper #header .header-bottom .header-search form.searchform input {
  background: transparent;
  border: none;
  box-shadow: none;
}

body #wrapper #header .header-bottom .header-search form.searchform button {
  background: transparent;
  border-radius: 999px;
}

/* Nut xay dung cau hinh */
body #wrapper #header .btn-config {
  border-radius: 999px;
  padding: 0 22px;
  height: 44px;
  box-shadow: none;
  white-space: nowrap;
}

body #wrapper #header .btn-config .btn-text {
  line-height: 1.2;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
}

/* Gio hang */
body #wrapper #header .header_cart .custom-cart-box a.custom-cart-link {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 999px;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  transition: .3s all;
}

body #wrapper #header .header_cart .custom-cart-box a.custom-cart-link:hover {
  background: #f5f5f5;
  border-color: #d8d8d8;
}

body #wrapper #header .header_cart .custom-cart-box .custom-cart-info span {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-transform: none;
  white-space: nowrap;
}

/* Menu chinh */
body #wrapper #header .header-menu .main-menu > li > a {
  color: #222;
  font-weight: 500;
  transition: .3s all;
}

body #wrapper #header .header-menu .main-menu > li > a:hover {
  color: #c1181d;
}

/* Thanh tren cung */
body #wrapper #header .header-medium .top-menu a {
  color: #666;
  font-weight: 500;
  transition: .3s all;
}

body #wrapper #header .header-medium .top-menu a:hover {
  color: var(--black-1);
}

body #wrapper #header .header-left .hotline .hotline-label {
  color: #666;
}

body #wrapper #header .header-left .hotline .hotline-phone {
  color: var(--black-1);
  font-weight: 700;
}
/* ============ HERO V2 ============ */

.home-hero-v2 {
  position: relative;
  margin: 20px auto;
  max-width: 2100px;
  border-radius: 24px;
  overflow: hidden;
  background: #0a0a0a;
  height: clamp(520px, 78vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Video chi chiem 46% ben phai, mo dan ve trai */
.home-hero-v2 .hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 16%, #000 42%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 16%, #000 42%);
}

.home-hero-v2 .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .7s ease;
}

.home-hero-v2 .hero-video-a {
  opacity: 1;
}

.home-hero-v2 .hero-video-b {
  opacity: 0;
}

.home-hero-v2 .hero-body {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 72px);
  max-width: 620px;
}

.home-hero-v2 .hero-eyebrow {
  font: 500 11px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.home-hero-v2 .hero-title {
  margin: 18px 0 0;
  font: 700 clamp(36px, 4.2vw, 62px)/1.03 "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: -.045em;
  color: #fff;
}

.home-hero-v2 .hero-title-em {
  font-size: 1.06em;
}

.home-hero-v2 .hero-desc {
  margin: 22px 0 0;
  max-width: 440px;
  font: 400 16px/1.7 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: rgba(255, 255, 255, .68);
}

.home-hero-v2 .hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.home-hero-v2 .hero-btn {
  border-radius: 999px;
  padding: 16px 30px;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  text-decoration: none;
  transition: .3s all;
}

.home-hero-v2 .hero-btn-primary {
  background: #c8102e;
  color: #fff;
}

.home-hero-v2 .hero-btn-primary:hover {
  background: #a90d27;
  color: #fff;
}

.home-hero-v2 .hero-btn-ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.home-hero-v2 .hero-btn-ghost:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

@media only screen and (max-width: 768px) {
  .home-hero-v2 {
    height: max(460px, 62vh);
    justify-content: flex-end;
    margin: 12px;
  }

  .home-hero-v2 .hero-media {
    width: 100%;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 62%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 62%, transparent 100%);
  }

  .home-hero-v2 .hero-body {
    padding: 24px;
  }
}/* ============ TRUST BAR + CATEGORY TILES ============ */

.tv-trust,
.tv-cats {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 15px 0;
}

/* Dai so lieu: gap 1px tao duong ke, nen border lo ra */
.tv-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ececec;
  border: 1px solid #ececec;
  border-radius: 20px;
  overflow: hidden;
}

.tv-trust-item {
  background: #fff;
  padding: 26px 24px;
}

.tv-trust-num {
  font: 700 30px/1 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.04em;
}

.tv-trust-label {
  margin-top: 8px;
  font: 400 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* Tieu de section */
.tv-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.tv-sec-eyebrow {
  font: 500 11px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #999;
}

.tv-sec-title {
  margin: 8px 0 0;
  font: 700 26px/1.1 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.03em;
}

.tv-sec-action {
  font: 500 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
  white-space: nowrap;
  transition: .3s all;
}

.tv-sec-action:hover {
  color: #c1181d;
}

/* Luoi danh muc */
.tv-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.tv-cattile {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 148px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 20px;
  padding: 22px 20px 20px;
  text-decoration: none;
  transition: .3s all;
}

.tv-cattile:hover {
  transform: translateY(-6px);
  border-color: #e0e0e0;
  box-shadow: 0 10px 30px -12px rgba(17, 17, 17, .14);
}

.tv-cattile-ico {
  color: #111;
  display: inline-flex;
}

.tv-cattile-meta {
  margin-top: auto;
}

.tv-cattile-name {
  display: block;
  font: 600 14.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.015em;
}

.tv-cattile-count {
  display: block;
  margin-top: 4px;
  font: 400 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #999;
}

@media only screen and (max-width: 1024px) {
  .tv-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  .tv-trust,
  .tv-cats {
    padding: 48px 15px 0;
  }

  .tv-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tv-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tv-sec-title {
    font-size: 22px;
  }
}/* ============ PRODUCT CARD PREMIUM ============ */
/* Tien to body de thang .category-product-card trong style.css.
   Chi doi bo goc, do bong va hover — khong dung bo cuc, co chu,
   object-fit vi do la cho de vo nhat. */

body .category-product-card {
  border-radius: 20px;
  border-color: #ececec;
  box-shadow: none;
  transition: .18s all;
}

body .category-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px -12px rgba(17, 17, 17, .14);
  border-color: #e2e2e2;
}

/* Anh: zoom thong nhat 1.04 (theme dang co 2 gia tri 1.03 va 1.05) */
body .category-product-card .product-card-image-link img {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

body .category-product-card:hover .product-card-image-link img {
  transform: scale(1.04);
}

/* Bien the trong Flash Sale: giu chu nho, chi dong bo bo goc */
body .flash-sale-item.category-product-card {
  border-radius: 20px;
  box-shadow: none;
}

/* Nut them vao gio: bo tron, bo do bong */
body .product-add-to-cart-btn {
  /* !important vi style.css:1633 dat border-radius: 8px !important */
  border-radius: 999px !important;
  box-shadow: none;
  transition: .18s all;
}

body .product-add-to-cart-btn:hover {
  box-shadow: none;
  transform: translateY(-1px);
}

body .flash-sale-item.category-product-card .product-add-to-cart-btn {
  /* !important vi style.css:699 dat border-radius: 6px !important */
  border-radius: 999px !important;
}

/* Badge tren the */
body .product-card-badge {
  border-radius: 999px;
}

@media only screen and (max-width: 768px) {
  body .category-product-card,
  body .flash-sale-item.category-product-card {
    border-radius: 14px;
  }
}/* ============ SECTION HEADER THONG NHAT ============ */
/* Dua tieu de section cu ve cung kieu voi khoi "Mua theo linh kien":
   bo vach do, cung font va co chu, link "Xem tat ca" nhe hon. */

.products_header .products_title {
  padding-left: 0;
  border-left: none;
  font: 700 26px/1.1 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.03em;
}

/* Chip danh muc con: bo tron, vien manh thay vi nen xam */
.list_child_cat ul li a {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 999px;
  padding: 6px 14px;
  color: #555;
  transition: .3s all;
}

.list_child_cat ul li a:hover {
  background: #fff;
  border-color: #111;
  color: #111;
}

/* Nut "Xem tat ca": bo vien hop, thanh link chu nhe */
.products_header .group_category .view_all,
.view_all.item_pc {
  background: transparent;
  border: none !important;
  padding: 5px 0;
  font: 500 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666 !important;
  transition: .3s all;
}

.products_header .group_category .view_all:hover,
.view_all.item_pc:hover {
  color: #c1181d !important;
}

@media only screen and (max-width: 768px) {
  .products_header .products_title {
    font-size: 20px;
  }
}/* ============ FLASH SALE PREMIUM ============ */
/* Bo dai xanh dam, dua ve cung kieu tieu de voi cac section khac */

body .flash-sale {
  padding-top: 40px;
}

/* Khung ngoai khop voi .container 1440 cua cac section khac */
body .flash-sale .row {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

body .flash-sale .row .col {
  padding: 0 15px;
  max-width: 100%;
  flex-basis: 100%;
}

body .flash-sale .row .col .flash-sale-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

body .flash-sale .row .col .flash-sale-wrap .flash-sale-header {
  background: none;
  padding: 0 0 14px;
  border-bottom: 1px solid #ececec;
  align-items: flex-end;
}

/* An badge tia set */
body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-icon {
  display: none;
}

/* Dao thu tu de dong phu de nam TREN tieu de, thanh nhan eyebrow */
body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-header-left {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
}

body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-header-left h2 {
  color: #111;
  font: 700 24px/1.15 "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: -.035em;
}

body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-header-left span:not(.flash-sale-icon) {
  font: 600 11px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #999;
}

/* Dong ho: o trang vien manh thay vi o toi */
body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-countdown {
  color: #666;
  font-size: 13px;
}

body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-countdown .flash-sale-time {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  color: #111;
  font-weight: 700;
}

/* Luoi san pham: bo padding trong, gian rong hon */
body .flash-sale .row .col .flash-sale-wrap .flash-sale-products {
  padding: 24px 0 0;
  gap: 24px;
}

/* Gia trong Flash Sale to mau do de nhan manh khuyen mai */
body .flash-sale-item.category-product-card .new-price {
  color: #c8102e;
}

@media only screen and (max-width: 768px) {
  body .flash-sale .row .col .flash-sale-wrap .flash-sale-header {
    padding: 0 0 12px;
    flex-direction: row;
    align-items: flex-end;
    text-align: left;
    gap: 12px;
  }

  body .flash-sale .row .col .flash-sale-wrap .flash-sale-header .flash-sale-header-left {
    justify-content: flex-start;
  }

  body .flash-sale .row .col .flash-sale-wrap .flash-sale-products {
    padding: 16px 0 0;
    gap: 12px;
  }
}
/* ============ PRODUCT CARD: GIA & NUT ============ */
/* Phai nham ca phan tu con: flatsome-shop.css dat span.amount { color: #111 }
   nen mau khong ke thua tu .new-price xuong. */

body #wrapper .category-product-card .new-price,
body #wrapper .category-product-card .new-price *,
body #wrapper .category-product-card .price ins,
body #wrapper .category-product-card .price ins * {
  color: #c8102e !important;
}

body #wrapper .category-product-card .old-price,
body #wrapper .category-product-card .old-price *,
body #wrapper .category-product-card .price del,
body #wrapper .category-product-card .price del * {
  color: #9ca3af !important;
}

body #wrapper .category-product-card a.product-add-to-cart-btn,
body #wrapper .category-product-card .product-add-to-cart-btn,
body #wrapper .flash-sale-item .product-add-to-cart-btn {
  background: #fff !important;
  border: 1px solid #ececec !important;
  color: #111 !important;
  font-weight: 500 !important;
}

body #wrapper .category-product-card .product-add-to-cart-btn *,
body #wrapper .flash-sale-item .product-add-to-cart-btn * {
  color: #111 !important;
}

body #wrapper .category-product-card .product-add-to-cart-btn:hover,
body #wrapper .flash-sale-item .product-add-to-cart-btn:hover {
  background: #fafafa !important;
  border-color: #111 !important;
}/* ============ PRODUCT CARD: BO CUC & HOVER ============ */

/* Hover: nut den chu trang */
body #wrapper .category-product-card .product-add-to-cart-btn:hover,
body #wrapper .flash-sale-item .product-add-to-cart-btn:hover {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

body #wrapper .category-product-card .product-add-to-cart-btn:hover *,
body #wrapper .flash-sale-item .product-add-to-cart-btn:hover * {
  color: #fff !important;
  stroke: #fff !important;
}

/* Thanh tien do va dong "Da ban" chi thuoc ve Flash Sale.
   Moi the tren trang deu mang class flash-sale-item nen phai
   loc theo section thay vi theo class the. */
body #wrapper .section-product .flash-sale-progress-wrapper,
body #wrapper .section-product .flash-sale-sold-text {
  display: none;
}

/* Khoang cach giua gia va nut cho bang thiet ke */
body #wrapper .section-product .product-card-footer {
  margin-top: 14px;
}
/* ============ PRODUCT CARD: SPACING ============ */

body #wrapper .category-product-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
}

body #wrapper .category-product-card .product-card-image-link {
  border-radius: 14px;
  margin-bottom: 14px;
  border: none;
}

body #wrapper .category-product-card .product-card-meta-row {
  margin-bottom: 8px;
  font-size: 11px;
}

body #wrapper .category-product-card .product-card-title {
  margin: 0 0 6px;
}

body #wrapper .category-product-card .product-card-title a {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  height: 39px;
  letter-spacing: -.01em;
}

/* Day khoi gia xuong day the: gia va nut thang hang giua cac the */
body #wrapper .category-product-card .product-card-price-row {
  margin-top: auto;
  padding-top: 10px;
}

body #wrapper .category-product-card .old-price-line {
  height: 16px;
  gap: 8px;
  margin-bottom: 3px;
}

body #wrapper .category-product-card .old-price,
body #wrapper .category-product-card .old-price * {
  font-size: 12px;
  font-weight: 400;
}

body #wrapper .category-product-card .discount-percent {
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 6px;
  line-height: 1;
}

body #wrapper .category-product-card .new-price,
body #wrapper .category-product-card .new-price * {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

body #wrapper .category-product-card .product-card-footer {
  margin-top: 12px;
}/* Doi tac */
.tv-brands {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 15px 0;
}

/* Mot hang, cuon ngang, an thanh cuon */
.tv-brand-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-block: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tv-brand-grid::-webkit-scrollbar {
  display: none;
}

.tv-brandtile {
  flex: 0 0 calc((100% - 80px) / 6);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 16px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  transition: .3s all;
}

.tv-brandtile:hover {
  border-color: #dcdcdc;
  transform: translateY(-2px);
}

.tv-brandlogo {
  max-height: 30px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: .3s all;
}

.tv-brandtile:hover .tv-brandlogo {
  filter: none;
  opacity: 1;
}

@media only screen and (max-width: 1024px) {
  .tv-brandtile {
    flex: 0 0 calc((100% - 48px) / 4);
  }
}

@media only screen and (max-width: 768px) {
  .tv-brands {
    padding: 48px 15px 0;
  }

  .tv-brandtile {
    flex: 0 0 calc((100% - 32px) / 3);
  }
}

/* Build PC */
.tv-build {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 15px 0;
}

.tv-build-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  background: #111;
  color: #fff;
  border-radius: 24px;
  padding: clamp(36px, 5vw, 72px);
}

.tv-build-eyebrow {
  color: rgba(255, 255, 255, .5);
}

.tv-build-title {
  margin: 20px 0 0;
  font: 700 clamp(30px, 3.2vw, 46px)/1.05 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #fff;
  letter-spacing: -.04em;
}

/* Nhan nghieng kieu bao chi */
.tv-ed {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -.01em;
}

.tv-build-btn {
  display: inline-block;
  margin-top: 34px;
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: 16px 30px;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

.tv-build-btn:hover {
  background: #ececec;
  color: #111;
}

/* Gap 1px tao duong ke mo giua cac buoc */
.tv-build-steps {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, .14);
}

.tv-build-step {
  display: flex;
  gap: 20px;
  background: #111;
  padding: 22px 0;
}

.tv-build-num {
  flex: 0 0 auto;
  width: 34px;
  font: italic 400 20px "Playfair Display", Georgia, serif;
  color: rgba(255, 255, 255, .45);
}

.tv-build-step-title {
  display: block;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: -.015em;
}

.tv-build-step-desc {
  display: block;
  margin-top: 6px;
  font: 400 13.5px/1.6 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: rgba(255, 255, 255, .58);
}

@media only screen and (max-width: 768px) {
  .tv-build {
    padding: 48px 15px 0;
  }

  .tv-build-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Danh gia khach hang */
.tv-reviews,
.tv-news,
.tv-newsletter {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 15px 0;
}

.tv-newsletter {
  padding-bottom: 104px;
}

.tv-review-grid,
.tv-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tv-review {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 20px;
  padding: 28px;
}

.tv-review-stars {
  display: flex;
  gap: 2px;
  color: var(--tv-star);
}

.tv-review-text {
  margin: 16px 0 24px;
  font: 400 15px/1.7 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #222;
}

.tv-review-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
}

.tv-review-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 14px "Be Vietnam Pro", "Montserrat", sans-serif;
}

.tv-review-who {
  min-width: 0;
}

.tv-review-name {
  display: block;
  font: 600 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

.tv-review-meta {
  display: block;
  font: 400 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #999;
}

.tv-review-ok {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 11px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #16a34a;
  white-space: nowrap;
}

/* Goc tu van */
.tv-news-card {
  display: block;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: .3s all;
}

.tv-news-card:hover {
  transform: translateY(-6px);
  border-color: #e2e2e2;
  box-shadow: 0 10px 30px -12px rgba(17, 17, 17, .14);
}

.tv-news-thumb {
  background: #f2f2f2;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tv-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.tv-news-card:hover .tv-news-thumb img {
  transform: scale(1.04);
}

.tv-news-body {
  padding: 24px;
}

.tv-news-title {
  margin: 12px 0 0;
  text-transform: none;
  font: 600 18px/1.35 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.025em;
}

.tv-news-read {
  margin-top: 14px;
  font: 400 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #999;
}

/* Newsletter */
.tv-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 24px;
  padding: clamp(32px, 4vw, 56px);
}

.tv-newsletter-title {
  margin: 0;
  font: 700 30px/1.1 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.04em;
}

.tv-newsletter-desc {
  margin: 14px 0 0;
  max-width: 420px;
  font: 400 15px/1.7 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* Bao ngoai form Contact Form 7 */
.tv-newsletter-form form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.tv-newsletter-form input[type="email"],
.tv-newsletter-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 16px 22px;
  font: 400 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #222;
  box-shadow: none;
  margin: 0;
  transition: .3s all;
}

.tv-newsletter-form input[type="email"]:focus {
  background: #fff;
  border-color: #e0e0e0;
}

.tv-newsletter-form input[type="submit"],
.tv-newsletter-form button {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  box-shadow: none;
  margin: 0;
  transition: .3s all;
}

.tv-newsletter-form input[type="submit"]:hover,
.tv-newsletter-form button:hover {
  background: #333;
}

@media only screen and (max-width: 1024px) {
  .tv-review-grid,
  .tv-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  .tv-reviews,
  .tv-news,
  .tv-newsletter {
    padding: 48px 15px 0;
  }

  .tv-newsletter {
    padding-bottom: 56px;
  }

  .tv-review-grid,
  .tv-news-grid {
    grid-template-columns: 1fr;
  }

  .tv-newsletter-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Form CF7 trong newsletter: o nhap va nut nam trong .form_footer */
.tv-newsletter-form .wpcf7-form {
  display: block;
}

.tv-newsletter-form .hidden-fields-container {
  display: none;
}

.tv-newsletter-form .form_footer {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.tv-newsletter-form span.wpcf7-form-control-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.tv-newsletter-form input.wpcf7-form-control.wpcf7-email {
  width: 100%;
  height: 54px;
  padding: 0 22px 0 52px;
  border-radius: 999px;
  background: #f5f5f5;
}

.tv-newsletter-form span.wpcf7-form-control-wrap:before {
  left: 20px;
  top: 17px;
}

.tv-newsletter-form input.wpcf7-submit {
  position: static;
  flex: 0 0 auto;
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: #111;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  text-transform: none;
}

.tv-newsletter-form input.wpcf7-submit:hover {
  background: #333;
}

.tv-newsletter-form .wpcf7-spinner {
  margin: 0;
}

/* Footer */
.tv-footer {
  background: #fff;
}

/* Bang tu van */
.tv-foot-band {
  border-top: 1px solid #ececec;
  background: #fff;
}

.tv-foot-band-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 26px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.tv-foot-band-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.tv-foot-band-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tv-foot-band-title {
  display: block;
  font: 600 16px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.02em;
}

.tv-foot-band-desc {
  display: block;
  margin-top: 3px;
  font: 400 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

.tv-foot-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--linear-gradient);
  color: #fff;
  border-radius: 999px;
  padding: 14px 26px;
  font: 600 14.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

.tv-foot-call:hover {
  color: #fff;
  opacity: .9;
}

/* Bon o chinh sach: gap 1px tao duong ke */
.tv-foot-badges {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15px 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: transparent;
}

.tv-foot-badge {
  background: #fff;
  border: 1px solid #ececec;
  padding: 26px 24px;
}

.tv-foot-badge:first-child {
  border-radius: 20px 0 0 20px;
}

.tv-foot-badge:last-child {
  border-radius: 0 20px 20px 0;
}

.tv-foot-badge + .tv-foot-badge {
  border-left: none;
}

.tv-foot-badge-ico {
  color: #111;
  display: inline-flex;
  margin-bottom: 16px;
}

.tv-foot-badge-title {
  font: 600 14.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.015em;
}

.tv-foot-badge-desc {
  margin-top: 6px;
  font: 400 13px/1.6 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* Logo, lien he, menu */
.tv-foot-main {
  border-top: 1px solid #ececec;
}

.tv-foot-cols {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 15px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}

.tv-foot-logo {
  max-width: 150px;
  height: auto;
}

.tv-foot-addr {
  margin-top: 16px;
  font: 400 13.5px/1.75 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

.tv-foot-hotline-label {
  margin-top: 22px;
}

.tv-foot-hotline {
  display: inline-block;
  margin-top: 4px;
  font: 700 19px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #c1181d;
  letter-spacing: -.02em;
}

.tv-foot-social {
  margin-top: 22px;
}

.tv-foot-col-title {
  margin-bottom: 16px;
  font: 600 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.01em;
}

.tv-foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tv-foot-links li {
  margin: 0 0 11px;
}

.tv-foot-links a {
  font: 400 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
  transition: .3s all;
}

.tv-foot-links a:hover {
  color: #111;
}

/* Thanh toan va van chuyen */
.tv-foot-meta-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  border-top: 1px solid #ececec;
}

.tv-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #ececec;
  background: #fff;
  font: 500 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* Ban quyen */
.tv-foot-copy {
  border-top: 1px solid #ececec;
}

.tv-foot-copy-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 15px;
  font: 400 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #999;
}

@media only screen and (max-width: 1024px) {
  .tv-foot-cols {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .tv-foot-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tv-foot-badge,
  .tv-foot-badge:first-child,
  .tv-foot-badge:last-child {
    border: 1px solid #ececec;
    border-radius: 20px;
  }
}

@media only screen and (max-width: 768px) {
  .tv-foot-cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 40px 15px 28px;
  }

  .tv-foot-brand {
    grid-column: 1 / -1;
  }

  .tv-foot-badges {
    grid-template-columns: 1fr;
    padding-bottom: 40px;
  }

  .tv-foot-meta-inner {
    grid-template-columns: 1fr;
  }
}

/* Khung site 1440 theo design */
.container,
#wrapper .container,
#main .container {
  max-width: 1440px;
}

/* Icon gio hang: SVG net manh, an theo currentColor */
body #wrapper #header .custom-cart-box .custom-cart-icon {
  color: #111;
}

body #wrapper #header .custom-cart-box .custom-cart-icon .cart-svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Thu hep khoang cach menu va hero */
body #wrapper #header .header-menu {
  padding-bottom: 6px;
}

body .home-hero-v2 {
  margin-top: 6px;
}

/* Mega menu: cap 4 an di, ro vao muc cha moi xo ra ben canh */
body #wrapper #header .main-menu > li > .sub-menu .sub-menu > li {
  position: relative;
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu > li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu > li.menu-item-has-children > a:after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #999;
  border-top: 1.5px solid #999;
  transform: rotate(45deg);
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu .sub-menu {
  display: none;
  position: absolute;
  top: -12px;
  left: 100%;
  z-index: 5;
  min-width: 210px;
  margin: 0;
  padding: 12px 16px;
  list-style: none;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(17, 17, 17, .2);
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu > li:hover > .sub-menu {
  display: block;
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu .sub-menu li {
  list-style: none;
  margin: 0;
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu .sub-menu a {
  display: block;
  padding: 6px 0;
  font-size: 13.5px;
  color: #666;
  white-space: nowrap;
  transition: .3s all;
}

body #wrapper #header .main-menu > li > .sub-menu .sub-menu .sub-menu a:hover {
  color: #111;
}

/* ============ NHIP KHOANG CACH + VACH TIEU DE SECTION ============ */
/* Dua .section-product va .flash-sale ve cung nhip 96px voi cac khoi tv-*,
   them vach ngan mo duoi moi tieu de giong TvSectionHeader cua bo design. */

.tv-sec-head,
.products_header {
  align-items: flex-end;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
}

.products_header .group_category {
  gap: 8px;
}

body .section-product {
  padding: 96px 0 0;
}

body .flash-sale {
  padding-top: 96px;
}

@media only screen and (max-width: 768px) {
  body .section-product,
  body .flash-sale {
    padding-top: 48px;
  }

  .tv-sec-head,
  .products_header {
    margin-bottom: 18px;
    padding-bottom: 12px;
  }

  .products_header {
    align-items: center;
  }
}

/* ============ TRANG DANH MUC: BREADCRUMB + PILL ============ */
/* Tien to body de thang .cat-pill-link va .breadcrumbs-container trong style.css. */

body .product-category-page {
  padding-top: 16px;
  padding-bottom: 60px;
}

body .breadcrumbs-container {
  margin: 10px 0 16px;
  font: 500 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

body .breadcrumbs-container p {
  margin: 0;
}

body .breadcrumbs-container a {
  color: #666;
  transition: .3s all;
}

body .breadcrumbs-container a:hover {
  color: #111;
}

body .breadcrumbs-container .separator {
  color: #b5b5b5;
  padding: 0 4px;
}

body .breadcrumbs-container .last {
  color: #111;
  font-weight: 600;
}

/* Pill danh muc */
body .category-pills-wrapper {
  margin-bottom: 14px;
}

body .category-pills {
  gap: 8px;
}

body .cat-pill-link {
  padding: 9px 18px;
  border-color: #ececec;
  color: #2a2a2a;
  font: 600 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

body .cat-pill-link:hover,
body .cat-pill-link.active {
  background: #fdf2f4;
  border-color: #c8102e;
  color: #c8102e;
}

@media only screen and (max-width: 768px) {
  body .cat-pill-link {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

/* An breadcrumb trung lap cua Flatsome, chi giu cai cua Rank Math */
body.tax-product_cat .woocommerce-breadcrumb {
  display: none;
}

/* ============ TRANG DANH MUC: THANH BO LOC ============ */
/* Tien to body de thang cac rule .filter-* trong style.css. */

body .category-filter-bar {
  border-color: #ececec;
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

body .filter-groups-left {
  gap: 10px;
}

/* Nut mo dropdown */
body .filter-btn {
  padding: 9px 14px;
  border-color: #ececec;
  color: #111;
  font: 600 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

body .filter-btn:hover {
  border-color: #e0e0e0;
}

body .filter-btn.active {
  border-color: #c8102e;
  color: #c8102e;
}

body .category-filter-bar .filter-dropdown.open .filter-btn {
  border-color: #c8102e;
  color: #111;
}

body .filter-btn .chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .filter-btn.active .chevron,
body .category-filter-bar .filter-dropdown.open .filter-btn .chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23c8102e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Bang xo xuong */
body .filter-popover {
  border-color: #ececec;
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(17, 17, 17, .20);
  padding: 14px 16px;
}

body .brand-search-input {
  border-color: #ececec;
  background: #f5f5f7;
  font-size: 13px;
}

body .brand-search-input:focus {
  border-color: #e0e0e0;
  background: #fff;
  box-shadow: none;
}

body .filter-options-list li {
  margin-bottom: 0;
}

body .filter-option-label {
  padding: 5px 0;
  font: 400 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2a2a2a;
}

body .filter-option-label-left {
  gap: 9px;
}

body .filter-option-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  border-color: #e0e0e0;
  accent-color: #c8102e;
}

body .filter-option-count {
  color: #b5b5b5;
}

/* Thanh keo gia */
body .dual-slider-track {
  background: #f0f0f0;
}

body .dual-slider-fill {
  background: #c8102e;
}

body .price-slider-values {
  font: 600 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

/* Nut Xoa / Ap dung trong bang */
body .popover-buttons {
  margin-top: 14px;
  border-top-color: #e5e7eb;
}

body .popover-btn {
  padding: 9px;
  border-radius: 14px;
  transition: .3s all;
}

body .popover-btn-clear {
  border-color: #ececec;
  color: #2a2a2a;
}

body .popover-btn-clear:hover {
  background: #f5f5f7;
}

body .popover-btn-apply {
  flex: 1.4;
  background: #c8102e;
  border-color: #c8102e;
}

body .popover-btn-apply:hover {
  background: #a90d27;
  border-color: #a90d27;
}

/* Ben phai: so luong va sap xep */
body .filter-info-right {
  gap: 10px;
}

body .product-count-info {
  font: 500 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

body .sort-select-dropdown {
  height: 36px;
  line-height: 1.2;
  padding: 0 30px 0 12px;
  border-color: #ececec;
  font-size: 13px;
  color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .sort-select-dropdown:hover {
  border-color: #e0e0e0;
}

body .sort-select-dropdown:focus {
  border-color: #c8102e;
}

/* Chip dieu kien dang loc */
body .active-filter-tags {
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}

body .filter-tag-chip {
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: #fdf2f4;
  border-color: #f7c2ca;
  color: #c8102e;
  font: 600 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

body .filter-tag-chip:hover {
  background: #fbe4e8;
  border-color: #c8102e;
}

body .remove-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0;
  border-radius: 50%;
  background: #f8e2e6;
  color: #c8102e;
  font-size: 11px;
}

body .clear-all-filters-btn {
  font: 500 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
  text-decoration: none;
}

body .clear-all-filters-btn:hover {
  color: #c8102e;
}

@media only screen and (max-width: 768px) {
  body .sort-select-dropdown {
    height: 34px;
    padding: 0 24px 0 10px;
  }

  body .active-filter-tags {
    margin-bottom: 12px;
  }
}

/* ============ TRANG DANH MUC: PHAN TRANG ============ */
/* Dung lai ngon ngu cua nut loc: vien #ececec, bo goc 8px, chu 600 13px. */

body .category-pagination-wrapper {
  gap: 8px;
  margin-top: 8px;
}

body .category-pagination-wrapper .page-numbers {
  width: 36px;
  height: 36px;
  margin: 0;
  border-color: #ececec;
  border-radius: 14px;
  color: #111;
  font: 600 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

body .category-pagination-wrapper .page-numbers:hover {
  background: #fff;
  border-color: #e0e0e0;
  color: #111;
}

body .category-pagination-wrapper .page-numbers.current {
  background: #c8102e;
  border-color: #c8102e;
  color: #fff;
}

/* Dau ba cham khong phai nut */
body .category-pagination-wrapper .page-numbers.dots {
  border-color: transparent;
  color: #b5b5b5;
}

/* ============ THE SAN PHAM: BADGE + NUT SO SANH ============ */
/* Gia tri lay tu ui.jsx dong 138-142: cao 22px, bo tron 999px,
   NEW la #f2f2f2 chu #111, con lai la #c8102e chu trang. */

body .card-badges-row {
  left: 12px;
  right: 12px;
  gap: 6px;
}

body .badge-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font: 600 10.5px/1 "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .02em;
}

body .badge-status.new {
  background: #f2f2f2;
  color: #111;
}

body .badge-status.hot {
  background: #c8102e;
  color: #fff;
}

/* Nut so sanh can giua canh tren the */
body .badge-compare {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  padding: 0 10px;
  border-color: #ececec;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: #2a2a2a;
  font: 600 11px/1 "Be Vietnam Pro", "Montserrat", sans-serif;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
  transition: .3s all;
}

body .badge-compare:hover {
  background: #fff;
  border-color: #e0e0e0;
  color: #111;
}

/* Buoc phai dung !important vi style.css dong 2905 da dung */
body .badge-compare.active {
  background: #c8102e !important;
  border-color: #c8102e !important;
  color: #fff !important;
}

@media only screen and (max-width: 768px) {
  body .card-badges-row {
    left: 8px;
    right: 8px;
    gap: 4px;
  }

  body .badge-status,
  body .badge-compare {
    height: 20px;
    padding: 0 8px;
    font-size: 10px;
  }
}

/* ============ TRANG DANH MUC: THANH SO SANH ============ */
/* Gia tri lay tu screen-listing.jsx dong 276-284. */

body .sticky-compare-bar {
  border-top: 1px solid #ececec;
  box-shadow: 0 -6px 20px -8px rgba(17, 17, 17, .18);
  padding: 0;
}

body .compare-bar-container {
  max-width: 1440px;
  gap: 16px;
  padding: 12px 20px;
}

body .compare-bar-label {
  font: 700 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

body .compare-bar-products {
  gap: 10px;
}

body .compare-bar-item {
  gap: 8px;
  background: #f5f5f5;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 6px 10px;
}

body .compare-bar-thumb {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

body .compare-bar-title {
  font: 500 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2a2a2a;
}

body .compare-clear-all {
  font: 500 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
  text-decoration: none;
}

body .compare-clear-all:hover {
  color: #c8102e;
}

/* Nut chinh: vien bau duc theo theme-premium.css */
body .compare-now-btn {
  background: #c8102e;
  border-radius: 999px;
  padding: 12px 22px;
  font: 600 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  text-transform: none;
  transition: .3s all;
}

body .compare-now-btn:hover {
  background: #a90d27;
}

/* ============ XAY DUNG CAU HINH: HANG LINH KIEN ============ */
/* Design cho moi hang la mot the rieng, khong phai list trong khung chung.
   Gia tri lay tu screen-build.jsx renderRow. */

.build-section-label {
  font-weight: 700;
  color: #666;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Khung ngoai thanh trong suot, chi lam nhiem vu xep hang */
.build-items-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.build-item {
  gap: 16px;
  min-height: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  border-radius: 16px;
  transition: .3s all;
}

.build-item:last-child {
  border-bottom: 1px solid #ececec;
}

.build-item:hover {
  border-color: #e0e0e0;
}

/* O icon: 46px, bo 12px */
.build-item-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border-color: #ececec;
  background-color: #f5f5f5;
  color: #b5b5b5;
}

.build-item-icon-wrapper svg {
  width: 22px;
  height: 22px;
}

.build-item:hover .build-item-icon-wrapper {
  border-color: #e0e0e0;
  color: #999;
}

.build-item.has-selected .build-item-icon-wrapper {
  background-color: #e8f2ee;
  border-color: #c6ded3;
  color: #0e6b4e;
}

.build-item--name {
  font: 700 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

.build-item--subtitle {
  font: 400 11px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* ============ XAY DUNG CAU HINH: PANEL TONG KET ============ */
/* Gia tri lay tu screen-build.jsx dong 385-419. */

.summary-card {
  border-color: #ececec;
  border-radius: 20px;
  box-shadow: none;
}

.summary-card-header {
  background: #111;
  border-bottom: none;
}

.summary-card-title {
  font: 800 16px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: -.01em;
  text-transform: none;
}

.summary-card-body {
  padding: 18px 20px;
  gap: 0;
}

/* Bang trang thai tuong thich */
.compatibility-status {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font: 700 13px "Be Vietnam Pro", "Montserrat", sans-serif;
}

.compatibility-status.status-success {
  background: #edf6f1;
  border-color: #c0e0d0;
  color: #1f8a5b;
}

.compatibility-status.status-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #b45309;
}

/* Bang cong suat */
.wattage-status-box {
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f5f5;
  border: none;
  border-radius: 14px;
}

.wattage-title {
  font: 500 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

.wattage-title .lightning-icon {
  color: #c8102e;
}

.wattage-title .wattage-val {
  font-weight: 700;
  color: #111;
}

.recommended-psu {
  font: 700 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  padding-left: 22px;
}

/* Tong tien */
.summary-total-container {
  border-top: none;
  border-bottom: 1px solid #ececec;
  padding: 0 0 14px;
}

.total-label {
  font: 600 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
  letter-spacing: 0;
}

.total-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

/* Nut trong panel */
.summary-card-body .btn_primary {
  border-radius: 14px;
  transition: .3s all;
}

.summary-card-body .btn-red-primary {
  padding: 14px;
  background: #c8102e;
}

.summary-card-body .btn-red-primary:hover {
  background: #a90d27;
}

.summary-card-body .btn_primary--white {
  padding: 11px;
  border-color: #ececec;
  color: #2a2a2a;
  font-size: 13px;
}

.summary-card-body .btn_primary--gray-light {
  padding: 10px;
  background: #fff;
  border-color: #ececec;
  color: #2a2a2a;
  font-size: 12px;
}

.summary-card-body .action-grid-buttons {
  gap: 10px;
  margin-top: 0;
}

.disclaimer-text {
  font: 400 11px/1.5 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #999;
}

/* ============ XAY DUNG CAU HINH: CANH BAO TUONG THICH ============ */
/* Trang thai do build-compat.js gan. Mau lay tu screen-build.jsx TvCompatPill. */

.selected-product-badge {
  background: #e9f4ee;
  border-color: #cfe6da;
  color: #1f8a5b;
  padding: 4px 9px;
}

.selected-product-badge.is-bad {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #b45309;
}

.compat-msg {
  margin-top: 4px;
  font: 500 11px/1.4 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #b45309;
}

.build-item.has-compat-warning {
  border-color: #fb923c;
}

.build-item.has-compat-warning .build-item-icon-wrapper {
  background-color: #fff3e6;
  border-color: #fed7aa;
  color: #ea8a1e;
}

/* ============ XAY DUNG CAU HINH: KHOI PHU KIEN & PHAN MEM ============ */
/* Sau khi .build-items-box thanh trong suot, khung <details> boc ngoai thanh thua.
   Design: dong tieu de la mot the rieng, cac hang la the rieng, cach nhau 10px. */

.build-accessories-accordion {
  margin-top: 10px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.build-accessories-summary {
  margin-bottom: 10px;
  padding: 13px 16px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  font: 700 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #111;
}

.build-accessories-accordion[open] .build-accessories-summary {
  border-bottom-color: #ececec;
}

.build-accessories-summary .build-badge {
  font: 400 11.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #666;
}

.build-accessories-summary .arrow {
  color: #666;
  font-size: 10px;
}

.build-accessories-accordion .accessory-parts-box {
  margin-bottom: 0;
}

/* ============ XAY DUNG CAU HINH: DAU TRANG + TAB ============ */
/* Gia tri lay tu screen-build.jsx dong 335-361. */

.build_pc_page_top {
  padding: 36px 0 90px;
}

.build-pc-header {
  margin-bottom: 0;
}

.build-pc-tag {
  margin-bottom: 12px;
  font: 600 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .16em;
  color: #c8102e;
}

.build-pc-title {
  margin-bottom: 8px;
  font: 800 clamp(28px, 4vw, 40px)/1.05 "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: -.02em;
  color: #111;
}

.build-pc-subtitle {
  max-width: 560px;
  margin-bottom: 26px;
  font: 400 15px/1.6 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* Thanh tien do: bo khung the, de tran nhu design */
.build-pc-progress-container {
  margin-bottom: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.build-pc-progress-header {
  margin-bottom: 9px;
}

.progress-title {
  font: 600 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2a2a2a;
}

.progress-percent {
  font: 800 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #c8102e;
}

.build-pc-progress-bar {
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 999px;
}

.build-pc-progress-fill {
  background-color: #c8102e;
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
}

/* Tab cau hinh */
.build-pc-top-bar {
  margin-bottom: 20px;
  gap: 8px;
}

.build-pc-top-bar .group_btn_list {
  gap: 8px;
}

.build-pc-top-bar .btn_setup {
  padding: 8px 16px;
  background: #fff;
  border-color: #ececec;
  color: #2a2a2a;
  font: 600 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

.build-pc-top-bar .btn_setup.active,
.build-pc-top-bar .btn_setup:hover {
  background: #c8102e;
  border-color: #c8102e;
  color: #fff;
  box-shadow: none;
}

.build-pc-top-bar .btn_renew_order {
  padding: 8px 15px;
  border-color: #ececec;
  color: #2a2a2a;
  font: 600 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

.build-pc-top-bar .btn_renew_order:hover {
  background: #fff;
  border-color: #e0e0e0;
}

.build-pc-top-bar .btn_renew_order svg {
  stroke: #666;
}

/* ============ THANH TOAN: NUT XUAT EXCEL & PNG ============ */
/* Chon theo vi tri vi hai nut do plugin export-cart-csv sinh ra,
   khong biet chac ten class. Nut 1 = Excel, nut 2 = PNG.
   !important vi rule goc o dong 7605 da dung. */

.export-buttons-row > *:nth-child(1),
.export-buttons-row > *:nth-child(1).btn_primary {
  background: #217346 !important;
}

.export-buttons-row > *:nth-child(1):hover,
.export-buttons-row > *:nth-child(1).btn_primary:hover {
  background: #1a5c38 !important;
}

.export-buttons-row > *:nth-child(2),
.export-buttons-row > *:nth-child(2).btn_primary {
  background: #0f6cbd !important;
}

.export-buttons-row > *:nth-child(2):hover,
.export-buttons-row > *:nth-child(2).btn_primary:hover {
  background: #0c569a !important;
}

.export-buttons-row .btn_primary,
.export-buttons-row a.btn_primary {
  border-radius: 14px !important;
  font: 600 13.5px "Be Vietnam Pro", "Montserrat", sans-serif !important;
}

/* ============ GIO HANG: KHOP VOI screen-cart.jsx ============ */
/* Tien to body o MOI rule: style.css dong 3368-3745 dung selector y het
   va nap SAU main.css, khong them body la thua. */

/* Bo gach chan duoi ky hieu tien */
body .woocommerce-Price-amount,
body .woocommerce-Price-currencySymbol,
body .woocommerce-Price-amount bdi {
  text-decoration: none !important;
}

body .custom-cart-price .old-price .woocommerce-Price-amount {
  text-decoration: line-through !important;
}

/* The san pham trong gio */
body .custom-cart-card {
  padding: 16px 130px 16px 18px !important;
  border-color: #ececec !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  align-items: flex-start !important;

  @media only screen and (max-width: 768px) {
    padding: 12px 12px 60px !important;
  }
}

body .custom-cart-thumb {
  width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  border-color: #ececec !important;
  background: #fff !important;
}

body .custom-cart-title {
  font: 500 14px/1.4 "Be Vietnam Pro", "Montserrat", sans-serif !important;
  color: #111 !important;
}

body .custom-cart-title a {
  color: #111 !important;
}

body .custom-cart-sku {
  font: 400 12px "Be Vietnam Pro", "Montserrat", sans-serif !important;
  color: #999 !important;
}

body .custom-cart-price .sale-price,
body .custom-cart-price .normal-price {
  font: 700 18px "Be Vietnam Pro", "Montserrat", sans-serif !important;
  color: #111 !important;
}

body .custom-cart-price .old-price {
  font-size: 12.5px !important;
  color: #b5b5b5 !important;
}

body .custom-cart-card .quantity {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Dong tong tien duoi danh sach */
body .cart-footer-total {
  padding: 12px 4px;
  margin-top: 0;
}

body .cart-footer-total-label {
  font: 700 16px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

body #selected-total {
  font: 800 22px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.02em;
}

/* Cot phai */
body .ux-cart-coupon.custome_coupon,
body .cart_totals.cart_totals_cusstom {
  padding: 18px;
  border-color: #ececec;
  border-radius: 16px;
  box-shadow: none;
}

body .custome_coupon .icon_box--pink {
  border-radius: 8px;
  background: #fdf2f4;
}

/* Bo hai duong ke ma design khong co */
body .cart_totals.cart_totals_cusstom h3 {
  padding-bottom: 0;
  margin-bottom: 14px;
  border-bottom: none;
  font: 700 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

body .cart_totals_cusstom table.shop_table tr {
  padding: 0 0 10px;
}

body .cart_totals_cusstom table.shop_table tr.cart-subtotal {
  border-bottom: none !important;
}

body .cart_totals_cusstom table.shop_table th {
  font: 400 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2a2a2a;
}

body .cart_totals_cusstom table.shop_table td {
  font: 400 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2a2a2a;
}

body .cart_totals_cusstom table.shop_table tr.order-total th {
  font: 700 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

body .cart_totals_cusstom table.shop_table tr.order-total td,
body .cart_totals_cusstom table.shop_table tr.order-total td .amount {
  font: 700 16px "Be Vietnam Pro", "Montserrat", sans-serif !important;
  color: #111 !important;
}

body .btn_checkout {
  border-radius: 999px !important;
  background: #c8102e !important;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif !important;
}

/* ============ GIO HANG: DAI BUOC + KHOI CANH BAO ============ */
/* Gia tri lay tu screen-cart.jsx dong 3-23. */

/* Flatsome cho .page-title padding 24px/10px va nav.breadcrumbs padding 15px/15px.
   Do bang DevTools: cong lai 64px thua. Phai dung !important vi rule khong
   important o day da thua roi. */
body #main .checkout-page-title.page-title,
body .checkout-page-title.page-title {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: none;
  border: none;
}

body #main .checkout-page-title .page-title-inner,
body .checkout-page-title .page-title-inner {
  padding: 0 !important;
  min-height: 0 !important;
}

body .checkout-page-title .breadcrumbs {
  gap: 14px;
  padding: 0 !important;
  margin: 8px 0 20px !important;
}

body .checkout-page-title .breadcrumbs a,
body .checkout-page-title .breadcrumbs {
  font: 800 20px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #b5b5b5 !important;
}

body .checkout-page-title .breadcrumbs a.current {
  color: #111 !important;
}

body .checkout-page-title .breadcrumbs .divider {
  margin: 0;
  font-size: 18px;
  color: #b5b5b5 !important;
}

/* Cho phep hien thong bao TREN TRANG GIO HANG.
   style.css dong 3883 dang an moi .woocommerce-error tren toan site. */
body.woocommerce-cart .woocommerce-error {
  display: block !important;
  padding: 14px 18px !important;
  margin: 0 0 20px !important;
  background: #fff !important;
  border: 1px solid #c8102e !important;
  border-radius: 14px !important;
  font: 500 14px "Be Vietnam Pro", "Montserrat", sans-serif !important;
  color: #c8102e !important;
}

body.woocommerce-cart .woocommerce-error::before {
  display: none !important;
}

body.woocommerce-cart .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============ GIO HANG: BO CUC HAI COT ============ */
/* Flatsome chan max-width tren .row nen cum nay hep hon dai thong bao
   ben tren khoang 120px. Bo han luoi flex cua Flatsome, dung grid
   dung nhu screen-cart.jsx dong 24: 1.7fr / 1fr, gap 24px.
   Doi breakpoint xuong 1 cot o 850px de giu dung diem xep chong cu
   cua .large-7 / .large-5, khong phai 768px. */

body.woocommerce-cart .woocommerce > .row {
  display: grid !important;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  @media only screen and (max-width: 849px) {
    grid-template-columns: 1fr;
  }
}

body.woocommerce-cart .woocommerce > .row > .col {
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

/* The chon tat ca. main.css dong 1383 dang ghim height: 80px */
body .cart-select-all {
  height: auto;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid #ececec;
  border-radius: 16px;
  box-shadow: none;
}

/* Khoang cach giua cac the san pham: 16px -> 12px */
body .shop_table.cart td {
  padding: 0 0 12px 0 !important;
}

/* Checkbox canh mep tren cua the */
body .custom-cart-check {
  margin-top: 2px !important;
}

/* ============ CHI TIET THANH TOAN: KHUNG NGOAI ============ */
/* .custom-checkout bi chan 1200px o dong 1557 va 7171, hep hon
   .container 1440px cua header khoang 240px. Luoi 1.6fr / 1fr gap 24px
   o dong 7176 da khop screen-cart.jsx dong 94 nen giu nguyen. */

body .custom-checkout {
  max-width: none;
}

/* The: dong bo voi the trang gio hang */
body .checkout-box {
  padding: 22px;
  border-color: #ececec;
  border-radius: 16px;
  box-shadow: none;
}

/* Tieu de the: thiet ke khong co duong ke duoi */
body .checkout-box h3 {
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
  font: 700 18px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1f2733;
}

/* ============ CHI TIET THANH TOAN: DONG SAN PHAM ============ */
/* Dong 1429 .product_cart_info .product_cart_info--thumb (0-2-0) dang thang
   dong 7229 .product_cart_info--thumb (0-1-0), nen anh ra 88px thay vi 64px.
   Cung tinh huong voi --info: calc(100% - 7rem) thang flex: 1.
   Phai gioi han vao .checkout-item, khong thi hong popup build-pc.
   Khong dung !important de mobile o style.css dong 3890 van thang. */

body .checkout-item.product_cart_info {
  gap: 14px;
  padding: 12px 0;
}

body .checkout-item.product_cart_info:first-of-type {
  padding-top: 0;
}

body .checkout-item.product_cart_info:last-child {
  padding-bottom: 0;
}

body .checkout-item.product_cart_info .product_cart_info--thumb {
  width: 64px;
  height: 64px;
  padding: 4px;
  border-radius: 6px;
  border-color: #e5e7eb;
}

body .checkout-item.product_cart_info .product_cart_info--info {
  width: auto;
  flex: 1;
}

body .checkout-item.product_cart_info .product_cart_info--title {
  font: 500 13.5px/1.4 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2c2c2c;
}

body .checkout-item.product_cart_info .product_cart_info--sku {
  font: 400 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #6b7280;
}

body .checkout-item.product_cart_info .product_cart_info--qty {
  font: 600 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2c2c2c;
}

body .checkout-item.product_cart_info .product_cart_info--price {
  font: 700 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1a1a1a;
}

/* ============ CHI TIET THANH TOAN: THE CHON HINH THUC NHAN ============ */
/* screen-cart.jsx dong 86: padding 16, bo goc 8, gap 8, icon 22, chu 600 13px.
   Vien active la 1px, khong co vong sang ngoai. */

body .delivery {
  padding: 16px;
  border-radius: 8px;
}

body .delivery.active {
  border-color: #c8102e;
  box-shadow: none;
}

body .delivery-card-content {
  gap: 8px;
}

body .delivery .input_icon {
  width: 22px;
  height: 22px;
}

body .delivery .input_icon svg {
  width: 22px;
  height: 22px;
}

body .delivery-text {
  font: 600 13px "Be Vietnam Pro", "Montserrat", sans-serif;
}

/* The chon phuong thuc thanh toan: khop voi the chon hinh thuc nhan */
body .payment-method {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}

body .payment-method.active {
  border-color: #c8102e;
  box-shadow: none;
}

body .payment-text {
  font: 500 14px "Be Vietnam Pro", "Montserrat", sans-serif;
}

/* ============ DON HANG HOAN TAT ============ */
/* .success_message, .succes_icon, .success_title, .success_desc chua he
   co CSS nen dang tho. .order_code o dong 1645 la vien pill do bong,
   doi thanh chip nen nhat cho hop voi cac the con lai. */

body .thankyou_page .success_message {
  padding: 32px 24px;
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  text-align: center;
}

body .thankyou_page .succes_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  background: #e9f9ef;
  border-radius: 50%;
}

body .thankyou_page .success_title {
  margin: 0 0 8px;
  font: 800 26px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1a1a1a;
  letter-spacing: -.02em;
}

body .thankyou_page .success_desc {
  max-width: 560px;
  margin: 0 auto 18px;
  font: 400 14px/1.6 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #6b7280;
}

body .thankyou_page .order_code {
  display: inline-block;
  width: auto;
  padding: 9px 18px;
  background: #fdf2f4;
  border: 1px solid #ffc9c9;
  border-radius: 999px;
  box-shadow: none;
  cursor: default;
  font: 500 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2c2c2c;
}

body .thankyou_page .order_code strong {
  color: #c8102e;
}

/* Hang nhan / gia tri: gia tri can phai, cho xuong dong khi dia chi dai */
body .thankyou_page .total-row span:last-child {
  max-width: 62%;
  text-align: right;
  font-weight: 500;
  color: #2c2c2c;
}

body .thankyou_page .total-row.total span:last-child {
  font-weight: 800;
}

body .thankyou_page .order_empty {
  margin: 0;
  padding: 18px;
  background: #fdf2f4;
  border-radius: 12px;
  font: 400 14px/1.6 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #c8102e;
}

/* Nut trong the thay vi tha roi ben duoi */
body .thankyou_page .group_btn {
  margin-top: 20px;
}

body .thankyou_page .btn_primary--full {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  font: 700 15px "Be Vietnam Pro", "Montserrat", sans-serif;
}

/* ============ GIO HANG RONG ============ */
/* style.css dong 3770 dat max-width 800px, nhung the mang ca class .container
   ma #main .container o dong 9174 (0-1-1) thang 0-1-0, nen bi keo full 1440px.
   Thiet ke khong co the trang: bo nen, vien, do bong. */

body .empty-cart-container {
  max-width: none;
  padding: 56px 20px 64px;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body .empty-cart-icon {
  margin-bottom: 18px;
}

body .empty-cart-icon svg {
  width: 48px;
  height: 48px;
}

body .empty-cart-title {
  margin-bottom: 6px;
  font: 700 20px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1a1a1a;
}

body .empty-cart-subtitle {
  margin-bottom: 26px;
  font: 400 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #6b7280;
}

/* Nut bo tron 999px nhu cac nut khac trong header */
body .btn-continue-shopping {
  height: 44px !important;
  padding: 0 30px !important;
  border-radius: 999px !important;
  font: 600 15px "Be Vietnam Pro", "Montserrat", sans-serif !important;
}

/* Dai buoc bi ve hai lan tren trang gio hang rong.
   Chuoi DOM doc bang Console:
     1. main > .checkout-page-title              -> Flatsome cha tu render
     2. main > .cart-container > .woocommerce > .checkout-page-title
                                                -> cart-empty.php dong 22
   An cai thu hai. Tren gio hang co san pham cart.php khong sinh phan tu nay
   nen rule la vo hai. Trang cam on nam ngoai .cart-container, khong bi dinh. */

body.woocommerce-cart .cart-container .woocommerce > .checkout-page-title {
  display: none;
}

/* ============ XAY DUNG CAU HINH: KHOANG CACH NUT ============ */
/* .summary-card-body khai bao hai lan: dong 4592 gap 16px, dong 9871 gap 0.
   Ep ve 0 roi de margin quyet dinh het, sau nay chinh mot cho la du.
   screen-build.jsx dong 407 dung gap 10px, o day noi len 12px. */

body .summary-card-body {
  gap: 0;
}

body .summary-card-body .btn-cart-build {
  margin-top: 16px;
}

body .summary-card-body .action-grid-buttons {
  gap: 12px;
  margin-top: 12px;
}

/* Chu so co dinh be rong, khong giat khi so dang chay */
body .total-value {
  font-variant-numeric: tabular-nums;
}

/* ============ CHI TIET SAN PHAM: KHOI MUA HANG ============ */
/* Gia tri lay tu screen-detail.jsx TvBuyBox dong 66-150.
   Khoi la grid gap 16px nen bo het margin-bottom roi de gap lo. */

body.single-product .woo-product-info-wrapper {
  gap: 16px;
}

body.single-product .woo-product-info-wrapper > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tieu de + dong danh gia */
body.single-product .woo-product-info-wrapper .product-title {
  font: 700 26px/1.3 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1f2733;
}

body.single-product .woo-product-info-wrapper .product-meta {
  gap: 10px;
  font: 400 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #6b7280;
}

/* Hop gia */
body.single-product .product-price-card {
  padding: 16px 18px;
  background: #f5f5f7;
  border-color: #ebedf0;
  border-radius: 10px;
}

body.single-product .product-price-card .price-row {
  align-items: center;
  gap: 14px;
}

body.single-product .product-price-card .sale-price {
  font: 800 30px/1 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1a1a1a;
}

body.single-product .product-price-card .regular-price {
  margin-left: 0;
  font: 400 18px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #99a1af;
}

body.single-product .product-price-card .discount-badge {
  margin-left: 0;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--linear-gradient);
  font: 700 13px/1 "Be Vietnam Pro", "Montserrat", sans-serif;
}

body.single-product .product-price-card .saving-line {
  margin-top: 8px;
  font: 600 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2c2c2c;
}

body.single-product .product-price-card .saving-line strong {
  font: 700 16px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1a1a1a;
}

/* Dai bao hanh den */
body.single-product .warranty-banner-black {
  gap: 12px;
  padding: 14px 18px;
  font: 700 15px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: -.005em;
}

/* Cau hinh noi bat: thiet ke khong to nen, chi co vien */
body.single-product .product-specs-highlights {
  padding: 14px 16px;
  background: #fff;
  border-color: #ebedf0;
  border-radius: 10px;
}

body.single-product .product-specs-highlights h3 {
  margin-bottom: 10px;
  font: 700 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1f2733;
}

body.single-product .highlight-list-box p,
body.single-product .highlight-list-box li {
  gap: 8px;
  margin-bottom: 8px;
  font: 400 13.5px/1.4 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2c2c2c;
}

body.single-product .highlight-list-box p:last-child,
body.single-product .highlight-list-box li:last-child {
  margin-bottom: 0;
}

body.single-product .highlight-list-box p svg,
body.single-product .highlight-list-box li svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: #6b7280;
}

/* So luong + ton kho */
body.single-product .quantity-stock-row {
  gap: 14px;
}

body.single-product .stock-status-info {
  margin-left: 0;
  font: 400 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #6b7280;
}

/* Hai nut chinh: thiet ke de khe 12px */
body.single-product .purchase-buttons-row {
  margin-top: 0;
  gap: 12px !important;
}

/* Khoi uu dai */
body.single-product .product-promotions-card {
  padding: 16px 18px;
  background: #fdf2f4;
  border-color: #f7c2ca;
  border-radius: 10px;
}

body.single-product .promo-header {
  gap: 8px;
  margin-bottom: 10px;
  font: 800 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: 0;
}

body.single-product .promo-content p,
body.single-product .promo-content li {
  margin-bottom: 8px;
  font: 400 13px/1.45 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #2c2c2c;
}

body.single-product .promo-content p:last-child,
body.single-product .promo-content li:last-child {
  margin-bottom: 0;
}

/* Bang cam ket dich vu */
body.single-product .product-services-trust-list {
  border-color: #ebedf0;
  border-radius: 10px;
}

body.single-product .service-trust-item {
  padding: 12px 16px;
  border-bottom-color: #e5e7eb;
}

body.single-product .service-trust-title {
  font: 700 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #1f2733;
}

body.single-product .service-trust-desc {
  margin-top: 2px;
  font: 400 12px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #6b7280;
}

/* Hai nut MUA NGAY / THEM VAO GIO bo tron vien thuoc.
   Luu y: screen-detail.jsx dong 74 (TvButton) dung borderRadius 10px,
   day la yeu cau rieng chu khong phai theo thiet ke.
   Can !important vi rule goc o dong 5921 va 5945 da !important. */

body.single-product .purchase-buttons-row .btn-buy-now-red,
body.single-product .purchase-buttons-row .btn-add-to-cart-outline {
  border-radius: 999px !important;
}

/* Nut Xem them cua khoi Thong tin san pham & Thong so ky thuat.
   Rule goc o dong 6234 dat border-radius 8px !important. */

body.single-product .btn_seemore {
  border-radius: 999px !important;
}

/* ============ THU NHO GIAO DIEN TREN MAN DUOI 2K ============ */
/* Man 2K tro len giu nguyen 100%. Tu Full HD tro xuong thu con 80%
   de ty le noi dung so voi man hinh giong luc xem tren 2K.
   Chi ap tu 1025px tro len, duoi nguong do la tablet va dien thoai. */

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
  body {
    zoom: .8;
  }

  /* vh va vw tinh theo viewport that roi moi bi zoom nhan 0.8, nen bi hut
     mot lan nua. Nhan lai 1.25 de tra ve dung ty le nhu khi phong to 80%
     bang trinh duyet. Cac gia tri px trong clamp cung nhan theo. */

  .home-hero-v2 {
    height: clamp(650px, 97.5vh, 950px);
  }

  .home-hero-v2 .hero-body {
    padding: clamp(35px, 6.25vw, 90px);
  }

  .home-hero-v2 .hero-title {
    font-size: clamp(45px, 5.25vw, 77.5px);
  }

  .tv-build-inner {
    padding: clamp(45px, 6.25vw, 90px);
  }

  .tv-build-title {
    font-size: clamp(37.5px, 4vw, 57.5px);
  }

  .tv-newsletter-inner {
    padding: clamp(40px, 5vw, 70px);
  }

  .build-pc-title {
    font-size: clamp(35px, 5vw, 50px);
  }
}


/* ================= MOBILE V2 — HERO + THANH NAV DUOI ================= */

/* Lop phu hero: ban desktop cheo tu trai, ban mobile doc tu duoi len */
.home-hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(8, 8, 10, .92) 0%, rgba(8, 8, 10, .72) 38%, rgba(8, 8, 10, .10) 72%, rgba(8, 8, 10, 0) 100%);

  @media only screen and (max-width: 768px) {
    background: linear-gradient(to bottom, rgba(8, 8, 10, .55) 0%, rgba(8, 8, 10, .38) 30%, rgba(8, 8, 10, .82) 68%, rgba(8, 8, 10, .97) 100%);
  }
}

@media only screen and (max-width: 768px) {

  /* Hero thap lai de san pham dau tien len tren nep gap */
  body #wrapper .home-hero-v2 {
    height: clamp(430px, 56vh, 520px);
    border-radius: 20px;
    margin: 12px;
  }

  body #wrapper .home-hero-v2 .hero-body {
    padding: 22px 20px 24px;
    max-width: none;
  }

  body #wrapper .home-hero-v2 .hero-eyebrow {
    font-size: 10px;
  }

  body #wrapper .home-hero-v2 .hero-title {
    margin-top: 8px;
    font-size: clamp(27px, 7.4vw, 34px);
    letter-spacing: -.04em;
  }

  body #wrapper .home-hero-v2 .hero-desc {
    margin-top: 12px;
    max-width: none;
    font-size: 13px;
    line-height: 1.65;
  }

  body #wrapper .home-hero-v2 .hero-cta {
    gap: 9px;
    margin-top: 20px;
    flex-wrap: nowrap;
  }

  body #wrapper .home-hero-v2 .hero-btn {
    flex: 1 1 0;
    padding: 0 12px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    white-space: nowrap;
  }

  /* Chua cho thanh nav duoi, tinh ca vung an toan iPhone */
  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  /* Thanh nav duoi: nen kinh mo, cao 66px, nam tren cac nut noi cua plugin */
  .menu_bar_mobi {
    gap: 0;
    padding: 8px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid #ececec;
    z-index: 1000004;
  }

  .menu_bar_mobi a {
    flex: 1 1 0;
    gap: 4px;
    min-height: 50px;
    justify-content: center;
    color: #999;
    transition: .3s all;
  }

  .menu_bar_mobi .nav-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .3s all;
  }

  .menu_bar_mobi span {
    font-size: 10px;
    font-weight: 500;
    color: #999;
    line-height: 1;
  }

  /* Badge so luong tren gio hang */
  .menu_bar_mobi .nav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 1.5px solid #fff;
  }

  /* Nut giua: xay dung cau hinh, nhoi len khoi thanh */
  .menu_bar_mobi a.is-build {
    color: #fff;
    margin-top: -22px;
    justify-content: flex-start;
  }

  .menu_bar_mobi a.is-build .nav-ico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #c8102e;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px -6px rgba(200, 16, 46, .55);
  }

  .menu_bar_mobi a.is-build span {
    margin-top: 4px;
    color: #111;
    font-weight: 600;
  }

  /* Muc dang xem */
  .menu_bar_mobi a.active {
    color: #111;
  }

  .menu_bar_mobi a.active span {
    color: #111;
    font-weight: 600;
  }

  .menu_bar_mobi a.active:not(.is-build) .nav-ico::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #c8102e;
  }

  /* Nut Facebook / Zalo noi: day len khoi thanh nav */
  #button-contact-vr {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}


/* ================= MOBILE V2 — HEADER THE KINH ================= */
/* CSS goc nam o style.css dong 2318-2530, file do nap sau main.css
   va co !important o nen + bo goc, nen phai dat lai !important o dung
   nhung thuoc tinh do. */

@media only screen and (max-width: 768px) {

  /* Header trong suot, chua mot dai mo dan de noi dung khong lo ra ria the */
  body #wrapper header#header {
    background: linear-gradient(#fafafa 64%, rgba(250, 250, 250, 0)) !important;
  }

  body #wrapper #header .header-mobile-bar {
    background: transparent !important;
    border-bottom: none;
    padding: 8px 0 0;
  }

  /* The kinh mo: cung cong thuc voi header desktop */
  body #wrapper #header .mobile-bar-wrapper {
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 8px 30px -18px rgba(17, 17, 17, .30);
  }

  /* Bo cuc hang tren: hamburger - logo - hotline - gio hang */
  body #wrapper #header .mobile-bar-top-row {
    justify-content: flex-start;
    gap: 4px;
  }

  body #wrapper #header .mobile-logo.logo {
    margin-right: auto;
  }

  body #wrapper #header .mobile-logo.logo img {
    max-height: 30px;
  }

  body #wrapper #header .mobile-bar-actions {
    gap: 2px;
  }

  body #wrapper #header .mobile-hotline-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #111;
    transition: .3s all;
  }

  /* Vung cham 38px cho ca hai nut */
  body #wrapper #header .mobile-menu-trigger.mega_trigger,
  body #wrapper #header .mobile-cart .custom-cart-box a.custom-cart-link {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 12px;
    transition: .3s all;
  }

  body #wrapper #header .mobile-menu-trigger.mega_trigger svg {
    width: 22px;
    height: 22px;
  }

  body #wrapper #header .mobile-cart .custom-cart-box .custom-cart-icon img {
    width: 21px;
    height: 21px;
    margin: 0;
  }

  body #wrapper #header .mobile-cart .custom-cart-box .custom-cart-count {
    top: 0;
    right: 0;
    width: 17px;
    height: 17px;
    background: #c8102e;
  }

  body #wrapper #header .menu-badge-dot {
    top: 7px;
    right: 7px;
    background: #c8102e;
  }

  /* O tim kiem bo tron, nen chim */
  body #wrapper #header .mobile-search form.searchform {
    height: 42px;
    padding: 0 16px;
    background-color: #f5f5f5 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    transition: .3s all;
  }

  body #wrapper #header .mobile-search form.searchform:focus-within {
    background-color: #fff !important;
    border-color: #dcdcdc !important;
  }

  body #wrapper #header .mobile-search form.searchform input.search-field {
    font-size: 13.5px !important;
    color: #222 !important;
  }

  body #wrapper #header .mobile-search form.searchform button svg {
    color: #666 !important;
  }

  /* Header moi cao 112px thay vi 150px gan cung truoc day */
  body #wrapper main#main {
    padding-top: 120px;
  }
}

/* Hai nut hero bi style.css dong 143 dat opacity 0 (di san hero slider
   Swiper cu, chi hien khi co .swiper-slide-active). Hero moi khong phai
   slide nen phai tra lai o day. Ap ca desktop lan mobile. */
body #wrapper .home-hero-v2 .hero-btn {
  opacity: 1;
  transform: none;
}


/* ================= MOBILE V2 — TRUST + TIEU DE + DANH MUC ================= */

@media only screen and (max-width: 768px) {

  /* Nhip khoang cach dung hon giua cac section */
  body #wrapper .tv-trust,
  body #wrapper .tv-cats {
    padding: 32px 12px 0;
  }

  /* Dai so lieu 2x2 gon lai */
  body #wrapper .tv-trust-grid {
    border-radius: 16px;
  }

  body #wrapper .tv-trust-item {
    padding: 16px 14px;
  }

  body #wrapper .tv-trust-num {
    font-size: 22px;
  }

  body #wrapper .tv-trust-label {
    margin-top: 5px;
    font-size: 11.5px;
  }

  /* Tieu de section: co duong ke duoi de tach khoi noi dung */
  body #wrapper .tv-sec-head {
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ececec;
  }

  body #wrapper .tv-sec-eyebrow {
    font-size: 10px;
    letter-spacing: .16em;
  }

  body #wrapper .tv-sec-title {
    margin-top: 6px;
    font-size: 20px;
    letter-spacing: -.035em;
  }

  body #wrapper .tv-sec-action {
    font-size: 12px;
  }

  /* Danh muc thanh dai cuon ngang. Ten dung ban rut gon (only_mb) nen
     o hep 92px van du cho. Le am de o dau va cuoi cham sat mep man hinh. */
  body #wrapper .tv-cat-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 92px;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 2px 12px 4px;
  }

  body #wrapper .tv-cat-grid::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .tv-cattile {
    scroll-snap-align: start;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-height: 0;
    padding: 14px 6px 12px;
    border-radius: 16px;
  }

  body #wrapper .tv-cattile:hover {
    transform: none;
    box-shadow: none;
  }

  body #wrapper .tv-cattile-ico svg {
    width: 22px;
    height: 22px;
  }

  body #wrapper .tv-cattile-meta {
    margin-top: 0;
    width: 100%;
  }

  body #wrapper .tv-cattile-name {
    font-size: 10.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 27px;
  }

  body #wrapper .tv-cattile-count {
    margin-top: 4px;
    font-size: 9.5px;
    white-space: nowrap;
  }
}


/* ================= MOBILE V2 — FLASH SALE + THE SAN PHAM ================= */
/* style.css dong 738-790 dat co chu rieng cho the flash sale tren mobile,
   va nut them gio co !important. Phai dat lai !important o dung ba
   thuoc tinh do. */

@media only screen and (max-width: 768px) {

  /* Le ngang 12px cho khop hero va dai danh muc */
  body #wrapper .flash-sale .row .col {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Tieu de section */
  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-header {
    padding: 0 0 10px;
    gap: 10px;
  }

  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-header .flash-sale-header-left h2 {
    font-size: 20px;
  }

  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-header .flash-sale-header-left span:not(.flash-sale-icon) {
    font-size: 10px;
    letter-spacing: .16em;
  }

  /* Dong ho: bo chu "Ket thuc sau" de danh cho ba o so */
  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-countdown > span {
    display: none;
  }

  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-countdown {
    gap: 4px;
  }

  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-countdown .flash-sale-time {
    min-width: 32px;
    padding: 5px 7px;
    font-size: 13px;
    line-height: 1;
  }

  /* Dai truot: cho slide cuoi tho ra mep phai */
  body #wrapper .flash-sale .slider_product_home {
    padding-top: 14px;
  }

  /* The san pham */
  body #wrapper .category-product-card {
    padding: 10px;
    border-radius: 16px;
  }

  body #wrapper .category-product-card:hover {
    transform: none;
    box-shadow: none;
  }

  body #wrapper .category-product-card .product-card-image-link img {
    border-radius: 12px;
  }

  body #wrapper .category-product-card .product-card-meta-row {
    margin: 10px 0 6px;
  }

  body #wrapper .category-product-card .product-card-title,
  body #wrapper .flash-sale-item.category-product-card .product-card-title {
    margin-bottom: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    height: 36px;
  }

  body #wrapper .category-product-card .old-price,
  body #wrapper .flash-sale-item.category-product-card .old-price {
    font-size: 11px;
  }

  body #wrapper .category-product-card .discount-percent,
  body #wrapper .flash-sale-item.category-product-card .discount-percent {
    padding: 3px 5px;
    font-size: 9.5px;
    border-radius: 5px;
  }

  body #wrapper .category-product-card .new-price,
  body #wrapper .category-product-card .new-price *,
  body #wrapper .flash-sale-item.category-product-card .new-price {
    font-size: 17px;
  }

  /* Thanh tien trinh da ban */
  body #wrapper .flash-sale-progress-bar {
    height: 4px;
    border-radius: 999px;
  }

  body #wrapper .flash-sale-sold-text,
  body #wrapper .flash-sale-item.category-product-card .flash-sale-sold-text {
    margin-top: 5px;
    font-size: 10px;
  }

  /* Nut them vao gio: vien tron 999px, cao 38px */
  body #wrapper .category-product-card .product-card-footer .product-add-to-cart-btn,
  body #wrapper .flash-sale-item.category-product-card .product-add-to-cart-btn {
    height: 38px;
    padding: 0 10px !important;
    gap: 6px;
    font-size: 12px !important;
    border-radius: 999px !important;
  }

  body #wrapper .category-product-card .product-card-footer .product-add-to-cart-btn svg,
  body #wrapper .flash-sale-item.category-product-card .product-add-to-cart-btn svg {
    width: 15px;
    height: 15px;
  }
}


/* ================= MOBILE V2 — FLASH SALE, SUA LECH ================= */
/* style.css dong 696 co mot @media(max-width:549px) rieng dat header
   thanh cot va countdown width 100%. Phai vo hieu ca hai. */

/* Badge giam gia goc trai anh — hien o moi kich thuoc man hinh */
body #wrapper .flash-sale-item.category-product-card .flash-sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #c8102e;
  color: #fff;
  font: 600 9.5px/20px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .02em;
}

@media only screen and (max-width: 768px) {

  /* Tieu de va dong ho tro lai cung mot hang */
  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    text-align: left;
  }

  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-header .flash-sale-header-left {
    justify-content: flex-start;
    align-items: flex-start;
  }

  body #wrapper .flash-sale .flash-sale-wrap .flash-sale-countdown {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  body #wrapper .category-product-card .product-card-footer {
    border-top: none;
    gap: 0;
  }
}


/* ================= MOBILE V2 — DAI SAN PHAM (section-product) ================= */
/* Bo cuc: hang 1 tieu de + "Xem tat ca", hang 2 chip danh muc con.
   Dung display:contents cho .group_category de hai con cua no tham gia
   truc tiep vao flex cua .products_header, khong phai sua PHP. */

@media only screen and (max-width: 768px) {

  body #wrapper .section-product {
    padding: 32px 0 0;
  }

  body #wrapper .section-product .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body #wrapper .products_header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
    max-width: 100%;
    overflow: hidden;
  }

  body #wrapper .products_header .products_title,
  body #wrapper .products_header .group_category .view_all.item_pc {
    min-width: 0;
  }

  body #wrapper .products_header .group_category {
    display: contents;
  }

  body #wrapper .products_header .products_title {
    order: 1;
    margin-right: auto;
    font-size: 20px;
    letter-spacing: -.035em;
  }

  /* Link "Xem tat ca" day sang sat mep phai */
  body #wrapper .products_header .group_category .view_all.item_pc {
    display: inline-flex !important;
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    font-size: 12px;
    text-align: right;
  }

  /* Nut "Xem tat ca" cu o duoi dai bi thua */
  body #wrapper .section-product .view_all.item_mb {
    display: none;
  }

  /* Hang chip: cuon ngang, tho ra hai mep man hinh */
  body #wrapper .products_header .list_child_cat {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body #wrapper .list_child_cat ul {
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  body #wrapper .list_child_cat ul::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .list_child_cat ul li a {
    padding: 7px 13px;
    font-size: 12px;
    white-space: nowrap;
  }

  body #wrapper .section-product .slider_product_home {
    padding-top: 0;
  }
}


/* ================= MOBILE V2 — AN DAI CAM KET + SUA MUI TEN ================= */

@media only screen and (max-width: 768px) {

  /* Dai cam ket 4 muc lap lai thong tin da co o dai so lieu dau trang */
  body #wrapper .home_page_3 .section-home-policy {
    display: none;
  }

  /* Mui ten trong "Xem tat ca" bi nhay len do vertical-align mac dinh */
  body #wrapper .products_header .group_category .view_all.item_pc {
    align-items: center;
    gap: 3px;
  }

  body #wrapper .products_header .group_category .view_all.item_pc svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
  }
}


/* ================= MOBILE V2 — KHOI BUILD PC GON LAI ================= */

@media only screen and (max-width: 768px) {

  body #wrapper .tv-build {
    padding: 32px 12px 0;
  }

  body #wrapper .tv-build-inner {
    gap: 22px;
    padding: 24px 20px;
    border-radius: 20px;
  }

  body #wrapper .tv-build-eyebrow {
    font-size: 10px;
    letter-spacing: .16em;
  }

  body #wrapper .tv-build-title {
    margin-top: 10px;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -.035em;
  }

  body #wrapper .tv-build-btn {
    margin-top: 18px;
    padding: 13px 24px;
    font-size: 13.5px;
  }

  body #wrapper .tv-build-step {
    gap: 12px;
    padding: 14px 0;
  }

  body #wrapper .tv-build-num {
    width: 24px;
    font-size: 16px;
  }

  body #wrapper .tv-build-step-title {
    font-size: 13px;
  }

  body #wrapper .tv-build-step-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
  }
}


/* ================= THE SAN PHAM — BADGE NEW + DONG THONG SO ================= */
/* Ap ca desktop lan mobile de hai noi dong bo. */

body #wrapper .product_card .tv-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #111;
  font: 600 9.5px/20px "Be Vietnam Pro", "Montserrat", sans-serif;
  letter-spacing: .04em;
}

body #wrapper .product-card-specs {
  margin: 0 0 8px;
  font: 500 11.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chip "Tat ca" dang chon */
body #wrapper .list_child_cat ul li.active a {
  background: #111;
  border-color: #111;
  color: #fff;
}

@media only screen and (max-width: 768px) {

  body #wrapper .product-card-specs {
    margin-bottom: 8px;
    font-size: 10.5px;
  }
}


/* ================= MOBILE V2 — TIN TU VAN, NEWSLETTER, FOOTER ================= */

@media only screen and (max-width: 768px) {

  body #wrapper .tv-reviews,
  body #wrapper .tv-news,
  body #wrapper .tv-newsletter {
    padding: 32px 12px 0;
  }

  body #wrapper .tv-newsletter {
    padding-bottom: 36px;
  }

  /* Tin tu van: the doc doi thanh hang ngang, anh nho ben trai */
  body #wrapper .tv-news-grid {
    gap: 0;
  }

  body #wrapper .tv-news-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    background: none;
    border: none;
    border-bottom: 1px solid #ececec;
    border-radius: 0;
  }

  body #wrapper .tv-news-card:last-child {
    border-bottom: none;
  }

  body #wrapper .tv-news-card:hover {
    transform: none;
    box-shadow: none;
  }

  body #wrapper .tv-news-thumb {
    flex: 0 0 82px;
    width: 82px;
    height: 62px;
    aspect-ratio: auto;
    border-radius: 12px;
  }

  body #wrapper .tv-news-body {
    padding: 0;
    min-width: 0;
  }

  /* Ten chuyen muc trong the bi thua o kho hep */
  body #wrapper .tv-news-body .tv-sec-eyebrow {
    display: none;
  }

  body #wrapper .tv-news-title {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body #wrapper .tv-news-read {
    margin-top: 6px;
    font-size: 10.5px;
  }

  /* Newsletter thanh mot the gon */
  body #wrapper .tv-newsletter-inner {
    gap: 14px;
    padding: 20px;
    border-radius: 20px;
  }

  body #wrapper .tv-newsletter-title {
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.03em;
  }

  body #wrapper .tv-newsletter-desc {
    margin-top: 8px;
    max-width: none;
    font-size: 12.5px;
    line-height: 1.6;
  }

  /* CF7: o nhap va nut xep doc, moi cai chiem tron chieu ngang */
  body #wrapper .tv-newsletter-form .form_footer {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  body #wrapper .tv-newsletter-form input.wpcf7-form-control.wpcf7-email {
    height: 46px;
    padding: 0 18px;
    font-size: 13px;
  }

  body #wrapper .tv-newsletter-form input[type="submit"],
  body #wrapper .tv-newsletter-form button {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Bon o chinh sach: 2x2, bo mo ta dai, chi giu icon va tieu de */
  body #wrapper .tv-footer .tv-foot-badges {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px 24px;
  }

  body #wrapper .tv-footer .tv-foot-badge,
  body #wrapper .tv-footer .tv-foot-badge:first-child,
  body #wrapper .tv-footer .tv-foot-badge:last-child {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid #ececec;
    border-radius: 14px;
  }

  body #wrapper .tv-footer .tv-foot-badge-ico {
    flex: 0 0 auto;
    margin-bottom: 0;
    color: #c8102e;
  }

  body #wrapper .tv-footer .tv-foot-badge-ico svg {
    width: 18px;
    height: 18px;
  }

  body #wrapper .tv-footer .tv-foot-badge-title {
    font-size: 11.5px;
    line-height: 1.35;
  }

  /* Mo ta lap lai y cua tieu de, o kho hep thi bo */
  body #wrapper .tv-footer .tv-foot-badge-desc {
    display: none;
  }

  /* Hai hang chip Thanh toan / Van chuyen: chip nho, cuon ngang mot hang */
  body #wrapper .tv-footer .tv-foot-meta-inner {
    gap: 16px;
    padding: 18px 12px;
  }

  body #wrapper .tv-footer .tv-chip-row {
    margin-top: 8px;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px;
  }

  body #wrapper .tv-footer .tv-chip-row::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .tv-footer .tv-chip {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 11px;
    font-size: 11px;
    white-space: nowrap;
  }

  body #wrapper .tv-footer .tv-foot-cols {
    gap: 0;
  }

  /* Moi cot thanh mot hang accordion */
  body #wrapper .tv-footer .tv-foot-col {
    border-bottom: 1px solid #ececec;
  }

  body #wrapper .tv-footer .tv-foot-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 13px 2px;
    font-size: 13px;
    cursor: pointer;
  }

  body #wrapper .tv-footer .tv-foot-col-title::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.6px solid #999;
    border-bottom: 1.6px solid #999;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: .3s all;
  }

  body #wrapper .tv-footer .tv-foot-col.is-open .tv-foot-col-title::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  body #wrapper .tv-footer .tv-foot-links {
    display: none;
    padding: 0 2px 12px;
  }

  body #wrapper .tv-footer .tv-foot-col.is-open .tv-foot-links {
    display: block;
  }
}



/* ================= MOBILE V2 — DRAWER DANH MUC ================= */
/* Panel ben trai 314px, muc dang hang bo goc 12px, cap 2 thut vao.
   CSS goc nam o style.css dong 2213-2300 va co !important o padding
   cung duong ke duoi, nen phai dat lai !important o hai cho do. */

@media only screen and (max-width: 768px) {

  body .mobile-menu-overlay .mobile-menu-panel {
    max-width: 314px;
    box-shadow: 0 24px 60px -20px rgba(17, 17, 17, .20);
  }

  body .mobile-menu-header {
    padding: 16px !important;
    border-bottom: 1px solid #ececec !important;
  }

  body .mobile-menu-header img {
    max-height: 28px;
  }

  body .mobile-menu-header .menu-close svg path {
    fill: #111;
  }

  /* Nhan nhom, dat bang CSS de khong phai sua PHP */
  body .mobile-menu.menu_mb #menu-root::before {
    content: "Danh mục";
    display: block;
    padding: 12px 10px 6px;
    font: 600 10px "Be Vietnam Pro", "Montserrat", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #999;
  }

  body .mobile-menu.menu_mb .menu-level {
    padding: 0 8px 14px;
  }

  body .mobile-menu.menu_mb .menu-item {
    align-items: center;
    padding: 12px 10px !important;
    border-bottom: none !important;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: #111;
    transition: .3s all;
  }

  body .mobile-menu.menu_mb .menu-item a {
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: #111;
  }

  body .mobile-menu.menu_mb .menu-item a img {
    width: 20px;
    height: 20px;
    opacity: .85;
  }

  body .mobile-menu.menu_mb .menu_item_back i {
    color: #999;
    font-size: 13px;
  }

  body .mobile-menu.menu_mb .menu-back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 12px 10px;
    border-bottom: 1px solid #ececec;
    font: 600 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
    color: #111;
  }

  /* Khoi hanh dong duoi cung: hai muc tren thanh dong danh sach,
     rieng nut goi giu dang nut do. */
  body .mobile-menu-actions {
    padding: 8px 8px 14px;
    border-top: 1px solid #ececec;
  }

  body .mobile-menu-actions::before {
    content: "Tiện ích";
    display: block;
    padding: 8px 10px 6px;
    font: 600 10px "Be Vietnam Pro", "Montserrat", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #999;
  }

  body .mobile-btn {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding: 12px 10px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
  }

  body .mobile-btn-config,
  body .mobile-btn-order {
    background: transparent !important;
    color: #111 !important;
  }

  body .mobile-hotline {
    margin-top: 10px;
    padding: 13px 16px;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    text-align: center;
    font: 600 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  }

  body .mobile-hotline strong {
    color: #fff;
    font-weight: 600;
  }
}


/* ================= MOBILE V2 — DRAWER, SUA LECH ================= */

@media only screen and (max-width: 768px) {

  /* Thanh nav duoi dang o z-index 1000004 nen che mat day drawer.
     Day drawer len tren no. */
  body .mobile-menu-overlay {
    z-index: 1000010;
  }

  body .mobile-menu-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Icon SVG dung chung khung 20px voi icon anh */
  body .mobile-menu.menu_mb .menu-item-ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
  }

  body .mobile-menu.menu_mb .menu-item-ico svg {
    width: 20px;
    height: 20px;
  }

  /* Nut goi o day panel */
  body .mobile-hotline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 13px 16px;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    font: 600 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
    transition: .3s all;
  }

  body .mobile-hotline:hover {
    background: #a90d27;
    color: #fff;
  }
}


/* ================= THE SAN PHAM — CAN GIUA ANH ================= */
/* Khung anh ti le 1:1 nhung the img bi mot rule khac ep height:auto,
   nen anh bam mep tren. Doi khung sang flex va ep lai chieu cao.
   Ap ca desktop lan mobile. */

body #wrapper .product-card-image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

body #wrapper .product-card-image-link img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 0;
}


/* ================= MOBILE V2 — TRANG DANH MUC ================= */

@media only screen and (max-width: 768px) {

  body #wrapper .product-category-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Duong dan */
  body #wrapper .breadcrumbs-container {
    padding: 14px 0 0;
    font-size: 11.5px;
  }

  /* Hang chip danh muc */
  body #wrapper .category-pills-wrapper {
    margin: 12px 0 0;
  }

  body #wrapper .category-pills {
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  body #wrapper .category-pills::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .cat-pill-link {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Thanh loc dinh dinh duoi header */
  body #wrapper .category-filter-bar {
    position: sticky;
    top: 112px;
    z-index: 15;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 0;
    background: rgba(250, 250, 250, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-bottom: 1px solid #ececec;
    border-radius: 0;
  }

  body #wrapper .category-filter-bar .filter-groups-left {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  body #wrapper .category-filter-bar .filter-dropdown {
    flex: 1 1 0;
    min-width: 0;
  }

  body #wrapper .category-filter-bar .filter-btn {
    width: 100%;
    height: 40px;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
  }

  body #wrapper .category-filter-bar .filter-info-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  body #wrapper .product-count-info {
    font-size: 11.5px;
    color: #999;
  }

  body #wrapper .sort-select-label {
    display: none;
  }

  body #wrapper .sort-select-dropdown {
    height: 36px;
    padding: 0 30px 0 12px;
    border-radius: 999px;
    font-size: 12px;
  }

  /* Bang chon trong dropdown bam sat mep trai, tranh tran ra ngoai */
  body #wrapper .category-filter-bar .filter-dropdown .filter-popover {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
  }
}


/* ================= MOBILE V2 — TRANG DANH MUC, PHAN A+B ================= */

/* Tieu de danh muc, ap ca desktop */
body #wrapper .category-page-head {
  margin-top: 10px;
}

body #wrapper .category-page-title {
  margin: 0;
  font: 700 30px/1.15 "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.04em;
}

body #wrapper .category-page-sub {
  margin-top: 8px;
  font: 400 13.5px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #666;
}

/* Badge: -X% do khi giam gia, NEW xam khi hang moi */
body #wrapper .badge-status.sale {
  background: #c8102e;
  color: #fff;
}

body #wrapper .badge-status.new {
  background: #f2f2f2;
  color: #111;
}

@media only screen and (max-width: 768px) {

  body #wrapper .category-page-head {
    margin-top: 8px;
  }

  body #wrapper .category-page-title {
    font-size: 23px;
    letter-spacing: -.04em;
  }

  body #wrapper .category-page-sub {
    margin-top: 6px;
    font-size: 12px;
  }

  /* Badge tren the */
  body #wrapper .card-badges-row .badge-status {
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 20px;
  }
}


/* ================= MOBILE V2 — BOTTOM SHEET LOC ================= */
/* JS o cuoi main.js chuyen .filter-groups-left vao trong sheet.
   Trong sheet, hai popover hien san dang khoi, khong con la dropdown. */

@media only screen and (max-width: 768px) {

  /* Nut mo sheet */
  body #wrapper .category-filter-bar .tv-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    color: #111;
    font: 600 12.5px "Be Vietnam Pro", "Montserrat", sans-serif;
    transition: .3s all;
  }

  body #wrapper .tv-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    font: 700 10px/18px "Be Vietnam Pro", "Montserrat", sans-serif;
    font-style: normal;
  }

  /* Hang tren cua thanh loc: nut loc trai, so luong va sap xep phai */
  body #wrapper .category-filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  body #wrapper .category-filter-bar .filter-info-right {
    flex: 1 1 auto;
    width: auto;
  }

  /* Chip dieu kien dang bat */
  body #wrapper .active-filter-tags {
    flex-wrap: nowrap;
    gap: 7px;
    margin: 12px 0 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body #wrapper .active-filter-tags::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .filter-tag-chip {
    flex: 0 0 auto;
    gap: 6px;
    padding: 7px 13px;
    background: #111;
    border-color: #111;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* Sheet nam ngoai #wrapper nen khong dung tien to do */
.tv-filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000012;
  visibility: hidden;
  pointer-events: none;
}

.tv-filter-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tv-filter-sheet .tv-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .42);
  opacity: 0;
  transition: .3s all;
}

.tv-filter-sheet.is-open .tv-sheet-scrim {
  opacity: 1;
}

.tv-filter-sheet .tv-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86%;
  min-height: 40%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px -20px rgba(17, 17, 17, .30);
  transform: translateY(100%);
  transition: .3s all;
}

.tv-filter-sheet.is-open .tv-sheet-panel {
  transform: translateY(0);
}

.tv-filter-sheet .tv-sheet-grab {
  width: 38px;
  height: 4px;
  margin: 9px auto 2px;
  border-radius: 999px;
  background: #f0f0f0;
}

.tv-filter-sheet .tv-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  border-bottom: 1px solid #ececec;
}

.tv-filter-sheet .tv-sheet-head b {
  font: 700 16px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
  letter-spacing: -.02em;
}

.tv-filter-sheet .tv-sheet-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: #111;
}

.tv-filter-sheet .tv-sheet-body {
  /* flex: 1 se cho flex-basis: 0% — trong khoi cha cao tu dong thi
     khong co khoang trong thua de no no ra, vung nay se cao 0.
     Phai la "1 1 auto" de lay chieu cao noi dung lam diem xuat phat. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 16px 12px;
}

/* Trong sheet: bo dang dropdown, hien san ca hai nhom */
.tv-filter-sheet .filter-groups-left {
  display: block;
}

.tv-filter-sheet .filter-dropdown {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ececec;
  padding: 14px 0;
}

.tv-filter-sheet .filter-dropdown:last-child {
  border-bottom: none;
}

.tv-filter-sheet .filter-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 0 0 12px;
  background: none;
  border: none;
  pointer-events: none;
  font: 600 13px "Be Vietnam Pro", "Montserrat", sans-serif;
  color: #111;
}

.tv-filter-sheet .filter-btn .chevron {
  display: none;
}

/* style.css dong 1702 bien .filter-popover thanh mot bottom sheet rieng:
   position fixed, transform translateY(100%), visibility hidden. Trong
   sheet cua ta phai huy ca bon thuoc tinh do, khong chi position. */
.tv-filter-sheet .filter-groups-left,
.tv-filter-sheet .filter-dropdown {
  position: static !important;
  visibility: visible !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
}

.tv-filter-sheet .filter-popover {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  transform: none !important;
  width: auto !important;
  max-height: none !important;
  inset: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Nut Xoa / Ap dung trong tung popover bi thua, da co o chan sheet */
.tv-filter-sheet .popover-buttons {
  display: none;
}

.tv-filter-sheet .tv-sheet-foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #ececec;
}

.tv-filter-sheet .tv-sheet-clear,
.tv-filter-sheet .tv-sheet-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  font: 600 14px "Be Vietnam Pro", "Montserrat", sans-serif;
  transition: .3s all;
}

.tv-filter-sheet .tv-sheet-clear {
  flex: 0 0 40%;
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #111;
}

.tv-filter-sheet .tv-sheet-apply {
  flex: 1;
  background: #c8102e;
  border: none;
  color: #fff;
}


/* ================= MOBILE V2 — THANH LOC, DON LAI ================= */

@media only screen and (max-width: 768px) {

  /* Hang chip: an thanh cuon xam lo ra duoi */
  body #wrapper .category-pills-wrapper {
    overflow: hidden;
  }

  body #wrapper .category-pills {
    padding-bottom: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Thanh loc: nut trai, sap xep phai, cung chieu cao 40px */
  body #wrapper .category-filter-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 0;
  }

  body #wrapper .category-filter-bar .tv-filter-trigger {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 16px;
    border-color: #ececec;
    color: #111;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }

  /* "85 san pham" da co ngay duoi tieu de, o day la lap */
  body #wrapper .category-filter-bar .product-count-info {
    display: none;
  }

  body #wrapper .category-filter-bar .filter-info-right {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
  }

  body #wrapper .sort-select-dropdown {
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid #ececec;
    border-radius: 999px;
    background-color: #fff;
    color: #111;
    font-size: 12.5px;
    font-weight: 500;
  }
}


/* ================= MOBILE V2 — THU KHOANG TRONG DAU TRANG DANH MUC ================= */

@media only screen and (max-width: 768px) {

  /* Header cao 112px, truoc do chua 120px + padding cua chinh trang
     nen ho ra gan 55px. Keo sat lai. */
  body #wrapper .product-category-page {
    padding-top: 0;
    margin-top: 0;
  }

  body #wrapper .breadcrumbs-container {
    padding-top: 6px;
    margin-top: 0;
  }

  body #wrapper .category-page-head {
    margin-top: 6px;
  }

  /* Nut loc va o sap xep cung mot duong ngang */
  body #wrapper .category-filter-bar {
    align-items: center;
  }

  body #wrapper .category-filter-bar .tv-filter-trigger,
  body #wrapper .category-filter-bar .sort-select-dropdown {
    height: 40px;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
  }

  body #wrapper .category-filter-bar .filter-info-right {
    align-items: center;
    margin: 0;
    padding: 0;
  }

  body #wrapper .category-filter-bar .sort-select-wrapper {
    display: flex;
    align-items: center;
    margin: 0;
  }
}


/* ================= BOTTOM SHEET LOC — GIAO DIEN BEN TRONG ================= */
/* Bo khung the quanh tung nhom, thay bang duong ke mong. Hop chon ve. */

.tv-filter-sheet .tv-sheet-body {
  padding: 0 16px 12px;
}

.tv-filter-sheet .filter-dropdown {
  padding: 16px 0;
}

/* Tieu de nhom */
.tv-filter-sheet .filter-btn {
  padding: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #999;
}

/* O tim hang: vien tron, nen chim */
.tv-filter-sheet .brand-search-input {
  width: 100%;
  height: 42px;
  margin-bottom: 4px;
  padding: 0 16px;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  color: #222;
  outline: none;
  transition: .3s all;
}

.tv-filter-sheet .brand-search-input:focus {
  background: #fff;
  border-color: #dcdcdc;
}

/* Danh sach hang: cuon rieng, khong day dai sheet */
.tv-filter-sheet #brand-dropdown .filter-options-list {
  max-height: 216px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0 0;
  scrollbar-width: thin;
}

.tv-filter-sheet .filter-options-list li {
  list-style: none;
}

.tv-filter-sheet .filter-option-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
}

.tv-filter-sheet .filter-option-label-left {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 400;
  color: #222;
}

/* Hop chon ve tay: vuong bo 6px, chon thi den */
.tv-filter-sheet .filter-option-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  transition: .3s all;
}

.tv-filter-sheet .filter-option-label input[type="checkbox"]:checked {
  background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: #111;
}

.tv-filter-sheet .filter-option-count {
  font-size: 11.5px;
  color: #999;
}

/* Dai keo chon gia */
.tv-filter-sheet .price-slider-label {
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #666;
}

.tv-filter-sheet .price-slider-values {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #111;
}

/* Khoang gia dat san: dang vien thuoc thay vi danh sach chon */
.tv-filter-sheet #price-dropdown .filter-options-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #ececec !important;
}

.tv-filter-sheet #price-dropdown .filter-option-label {
  padding: 0;
}

.tv-filter-sheet #price-dropdown .filter-option-label-left {
  gap: 0;
  padding: 8px 14px;
  border: 1px solid #ececec;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  transition: .3s all;
}

.tv-filter-sheet #price-dropdown .filter-option-label input[type="checkbox"] {
  display: none;
}

.tv-filter-sheet #price-dropdown .filter-option-label input:checked + * ,
.tv-filter-sheet #price-dropdown .filter-option-label-left:has(input:checked) {
  background: #111;
  border-color: #111;
  color: #fff;
}

.tv-filter-sheet #price-dropdown .filter-option-count {
  display: none;
}


/* ================= MOBILE V2 — CHIP DIEU KIEN + SHEET LIEN HE ================= */

@media only screen and (max-width: 768px) {

  /* Chip dieu kien dang bat: nen den qua nang, doi sang vien mong */
  body #wrapper .filter-tag-chip {
    background: #fff;
    border-color: #e0e0e0;
    color: #111;
    font-weight: 500;
  }

  body #wrapper .filter-tag-chip svg,
  body #wrapper .filter-tag-chip i,
  body #wrapper .filter-tag-chip span {
    color: #999;
  }

  body #wrapper .active-filter-tags > a:last-child,
  body #wrapper .clear-all-filters {
    color: #999;
    font-size: 12px;
    text-decoration: none;
  }

  /* Cac nut noi cua plugin da gom vao tab Chat */
  body #button-contact-vr {
    display: none !important;
  }
}

/* Sheet lien he — nam ngoai #wrapper */
.tv-chat-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000014;
  visibility: hidden;
  pointer-events: none;
}

.tv-chat-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tv-chat-sheet .tv-chat-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .42);
  opacity: 0;
  transition: .3s all;
}

.tv-chat-sheet.is-open .tv-chat-scrim {
  opacity: 1;
}

.tv-chat-sheet .tv-chat-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px -20px rgba(17, 17, 17, .30);
  transform: translateY(100%);
  transition: .3s all;
}

.tv-chat-sheet.is-open .tv-chat-panel {
  transform: translateY(0);
}

.tv-chat-sheet .tv-chat-grab {
  display: block;
  width: 38px;
  height: 4px;
  margin: 9px auto 2px;
  border-radius: 999px;
  background: #f0f0f0;
}

.tv-chat-sheet .tv-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  border-bottom: 1px solid #ececec;
}

.tv-chat-sheet .tv-chat-head b {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  letter-spacing: -.02em;
}

.tv-chat-sheet .tv-chat-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: #111;
}

.tv-chat-sheet .tv-chat-body {
  padding: 6px 12px calc(18px + env(safe-area-inset-bottom));
}

.tv-chat-sheet .tv-chat-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 10px;
  background: none;
  border: none;
  border-radius: 14px;
  text-align: left;
  text-decoration: none;
  transition: .3s all;
}

.tv-chat-sheet .tv-chat-row:active {
  background: #f5f5f5;
}

.tv-chat-sheet .tv-chat-ico {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.tv-chat-sheet .is-fb {
  background: #0866ff;
}

.tv-chat-sheet .is-zalo {
  background: #0068ff;
}

.tv-chat-sheet .is-live {
  background: #c8102e;
}

.tv-chat-sheet .is-call {
  background: #16a34a;
}

.tv-chat-sheet .tv-chat-txt {
  flex: 1;
  min-width: 0;
}

.tv-chat-sheet .tv-chat-txt b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #111;
}

.tv-chat-sheet .tv-chat-txt span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #666;
}

.tv-chat-sheet .tv-chat-go {
  flex: 0 0 auto;
  font-size: 20px;
  color: #ccc;
}


/* ================= MOBILE V2 — HEADER GON LAI ================= */
/* Bo hamburger va nut hotline khoi header. Menu danh muc mo bang tab
   "Danh muc" o thanh nav duoi, hotline nam trong tab Chat. */

@media only screen and (max-width: 768px) {

  /* Giu trong DOM de JS con bam duoc, chi an khoi mat */
  body #wrapper #header .mobile-menu-trigger.mega_trigger {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Logo ve sat mep trai */
  body #wrapper #header .mobile-bar-top-row {
    gap: 8px;
  }

  body #wrapper #header .mobile-logo.logo {
    margin-left: 2px;
    margin-right: auto;
  }
}


/* ================= MOBILE V2 — NUT DIA DIEM TREN HEADER ================= */

@media only screen and (max-width: 768px) {

  body #wrapper #header .mobile-store-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 12px;
    color: #111;
    transition: .3s all;
  }

  body #wrapper #header .tv-store-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: -4px;
    z-index: 40;
    width: 260px;
    padding: 15px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(17, 17, 17, .20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .3s all;
  }

  body #wrapper #header .tv-store-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body #wrapper #header .tv-store-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
  }

  body #wrapper #header .tv-store-head b {
    font-size: 12.5px;
    font-weight: 600;
    color: #111;
  }

  body #wrapper #header .tv-store-addr {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #222;
  }

  body #wrapper #header .tv-store-open {
    margin: 5px 0 0;
    font-size: 11.5px;
    color: #999;
  }

  body #wrapper #header .tv-store-call {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: 13px;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
  }

  body #wrapper #header .tv-store-map {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    text-align: center;
  }
}


/* ================= MOBILE V2 — HEADER, CAN HANG ICON ================= */
/* Hai nut dung markup khac nhau: showroom la <button> chua SVG, gio hang
   la <a> chua <img> do shortcode sinh ra. Ep ca hai ve cung mot khung
   40px va cung kich thuoc icon 22px. */

@media only screen and (max-width: 768px) {

  body #wrapper #header .mobile-bar-top-row {
    align-items: center;
    min-height: 40px;
  }

  body #wrapper #header .mobile-bar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  body #wrapper #header .mobile-store-btn,
  body #wrapper #header .mobile-cart .custom-cart-box a.custom-cart-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 12px;
    line-height: 0;
  }

  body #wrapper #header .mobile-store-btn svg,
  body #wrapper #header .mobile-cart .custom-cart-box .custom-cart-icon img,
  body #wrapper #header .mobile-cart .custom-cart-box .custom-cart-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0;
    padding: 0;
  }

  body #wrapper #header .mobile-cart .custom-cart-box,
  body #wrapper #header .mobile-cart .custom-cart-box .custom-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  /* Badge bam theo goc khung 40px */
  body #wrapper #header .mobile-cart .custom-cart-box .custom-cart-count {
    top: 1px;
    right: 1px;
  }

  /* Logo to hon */
  body #wrapper #header .mobile-logo.logo img {
    max-height: 34px;
  }
}


/* ================= MOBILE V2 — TRANG CHI TIET SAN PHAM ================= */

@media only screen and (max-width: 768px) {

  /* Thanh nav duoi nhuong cho cho thanh mua */
  body.single-product .menu_bar_mobi {
    display: none;
  }

  body.single-product {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Ten san pham */
  body #wrapper .woo-product-info-wrapper .product-title {
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: -.02em;
  }

  body #wrapper .woo-product-info-wrapper .product-meta {
    margin-top: 10px;
    font-size: 11.5px;
  }

  /* Khoi gia: bo khung xam, gia chuyen sang do thuong hieu */
  body #wrapper .product-price-card {
    margin-bottom: 16px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  body #wrapper .product-price-card .sale-price {
    font-size: 30px;
    font-weight: 700;
    color: #c8102e;
    letter-spacing: -.035em;
  }

  body #wrapper .product-price-card .regular-price {
    margin-left: 10px;
    font-size: 13px;
  }

  body #wrapper .product-price-card .discount-badge {
    margin-left: 8px;
    padding: 4px 7px;
    background: #fbe7ea;
    border-radius: 6px;
    color: #c8102e;
    font-size: 11px;
  }

  body #wrapper .product-price-card .saving-line {
    margin-top: 9px;
    font-size: 12px;
    color: #666;
  }

  /* Ba dong cam ket */
  body #wrapper .product-services-trust-list {
    gap: 12px;
    padding: 16px 0;
  }

  body #wrapper .service-trust-item {
    gap: 11px;
    align-items: flex-start;
  }

  body #wrapper .service-trust-icon {
    flex: 0 0 20px;
    color: #c8102e;
  }

  body #wrapper .service-trust-icon svg {
    width: 19px;
    height: 19px;
  }

  body #wrapper .service-trust-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #111;
  }

  body #wrapper .service-trust-desc {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #666;
  }

  /* Nut mua trong trang: xep doc, do truoc vien sau */
  body.single-product #wrapper .purchase-buttons-row {
    flex-direction: column;
    gap: 9px;
  }

  body.single-product #wrapper .purchase-buttons-row button {
    width: 100%;
    height: 50px;
    border-radius: 999px;
    font-size: 14px;
    text-transform: none;
  }
}

/* Thanh mua dinh day — nam ngoai #wrapper */
.tv-buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000006;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid #ececec;
  transform: translateY(100%);
  transition: .3s all;
}

.tv-buy-bar.is-on {
  transform: translateY(0);
}

.tv-buy-price {
  flex: 1 1 auto;
  min-width: 0;
}

.tv-buy-price span {
  display: block;
  font-size: 10.5px;
  color: #999;
}

.tv-buy-price b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: #c8102e;
  letter-spacing: -.03em;
}

.tv-buy-cart {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  color: #111;
}

.tv-buy-now {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 20px;
  background: #c8102e;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: .3s all;
}


/* ================= MOBILE V2 — CHI TIET SAN PHAM, RA SOAT ================= */
/* Muc tieu chinh: keo dong gia len tren nep gap. Cat bot chieu cao o
   breadcrumb, khung anh va cum nut mua. */

@media only screen and (max-width: 768px) {

  /* --- Breadcrumb: ep ve mot dong --- */
  body.single-product #wrapper .breadcrumbs {
    margin-bottom: 10px !important;
    padding: 10px 0 0;
    font-size: 11.5px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.single-product #wrapper .breadcrumbs a {
    color: #999;
  }

  /* Ten san pham day du lam breadcrumb dai gap ba */
  body.single-product #wrapper .breadcrumbs .last,
  body.single-product #wrapper .breadcrumbs [aria-current] {
    display: none;
  }

  /* --- Gallery --- */
  body #wrapper .woo-swiper-gallery {
    border: 1px solid #ececec;
    border-radius: 16px;
  }

  /* Goi y hover cua may tinh, vo nghia tren cam ung */
  body #wrapper .gallery-zoom-note {
    display: none;
  }

  body #wrapper .woo-swiper-gallery .swiper-slide img {
    aspect-ratio: 1 / 1;
    max-height: 340px;
    object-fit: contain;
  }

  /* Do chi danh cho gia, badge giam gia va CTA chinh */
  body #wrapper .woo-thumb-swiper .swiper-slide {
    border-radius: 10px;
    border: 1px solid #ececec;
  }

  body #wrapper .woo-thumb-swiper .swiper-slide-thumb-active {
    border: 1.5px solid #111;
  }

  /* --- Ten + gia --- */
  body #wrapper .woo-product-info-wrapper .product-title {
    text-transform: none;
  }

  /* Gia gach va % xuong dong rieng cho thoang */
  body #wrapper .product-price-card .price-row {
    display: block;
  }

  body #wrapper .product-price-card .regular-price {
    display: inline-block;
    margin: 9px 8px 0 0;
  }

  body #wrapper .product-price-card .discount-badge {
    margin-left: 0;
  }

  /* Tinh trang kho: dua ra dong rieng, co cham xanh */
  body #wrapper .quantity-stock-row .stock-status-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #16a34a;
  }

  body #wrapper .quantity-stock-row .stock-status-info::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #16a34a;
  }

  /* --- Dai den bao hanh: doi sang nen xam nhat --- */
  body #wrapper .warranty-banner-black {
    min-height: 44px;
    padding: 12px 14px;
    background: #f5f5f5;
    border-radius: 14px;
    color: #111;
    font-size: 12.5px;
  }

  body #wrapper .warranty-banner-black svg,
  body #wrapper .warranty-banner-black .shield-icon {
    color: #c8102e;
  }

  /* --- Cau hinh noi bat: bo mot lop khung --- */
  body #wrapper .product-specs-highlights .highlight-list-box {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  /* --- So luong + CTA: gop tu 3 hang con 2 --- */
  body #wrapper .quantity-stock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  body #wrapper .quantity-input-box {
    flex: 0 0 auto;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
  }

  body.single-product #wrapper .purchase-buttons-row button {
    height: 48px;
    border-radius: 999px !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
  }

  /* --- Vung cuon chua cho thanh dinh day --- */
  body.single-product {
    padding-bottom: 96px;
  }
}



/* ================= MOBILE V2 — PDP, DOT RA SOAT THU HAI ================= */

@media only screen and (max-width: 768px) {

  /* Da co nut back tren header, breadcrumb thanh thua */
  body.single-product #wrapper .breadcrumbs {
    display: none;
  }

  /* --- Gallery: bo vien hong, bo bo goc card --- */
  body #wrapper .woo-swiper-gallery {
    background: #fff;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ececec;
  }

  /* --- Meta: sao nho lai --- */
  body #wrapper .product-rating-summary .rating-stars svg,
  body #wrapper .product-rating-summary .rating-stars i {
    width: 11px;
    height: 11px;
    font-size: 11px;
  }

  body #wrapper .product-rating-summary,
  body #wrapper .product-sku {
    font-size: 11.5px;
    color: #666;
  }

  /* --- Khoi cam ket: bo ke ngang giua cac dong --- */
  body #wrapper .product-services-trust-list .service-trust-item {
    border: none !important;
    border-bottom: none !important;
    padding: 0;
  }

  body #wrapper .product-services-trust-list {
    gap: 12px;
    padding: 16px 0;
    background: none;
    border: none;
  }

  /* --- Bang thong so: bo zebra, bo nen cot nhan --- */
  body #wrapper .woocommerce-product-attributes,
  body #wrapper .shop_attributes {
    border: none;
  }

  body #wrapper .woocommerce-product-attributes tr,
  body #wrapper .shop_attributes tr,
  body #wrapper .woocommerce-product-attributes tr:nth-child(even),
  body #wrapper .shop_attributes tr:nth-child(even) {
    background: none !important;
  }

  body #wrapper .woocommerce-product-attributes td,
  body #wrapper .woocommerce-product-attributes th,
  body #wrapper .shop_attributes td,
  body #wrapper .shop_attributes th {
    padding: 11px 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #ececec !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.5;
    color: #222;
    vertical-align: top;
  }

  body #wrapper .woocommerce-product-attributes th,
  body #wrapper .shop_attributes th {
    width: 40%;
    color: #666;
  }

  /* Gach chan do duoi tieu de: do danh cho gia va CTA */
  body.single-product #wrapper h2::after,
  body.single-product #wrapper .section-title::after {
    display: none;
  }

  /* Nut "Xem them" do dac canh tranh voi Mua ngay */
  body.single-product #wrapper .btn-view-more,
  body.single-product #wrapper .view-more-specs,
  body.single-product #wrapper .xem-them {
    width: 100%;
    height: 40px;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 999px !important;
    color: #111 !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
  }
}


/* ================= MOBILE V2 — PDP THEO BAN RA SOAT ================= */

@media only screen and (max-width: 768px) {

  /* --- 2. Breadcrumb: bo han, da co nut quay lai --- */
  body.single-product #wrapper .breadcrumbs {
    display: none !important;
  }

  /* --- 3. Gallery: bo vien hong va bo goc card --- */
  body #wrapper .woo-swiper-gallery {
    background: #fff;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ececec;
  }

  /* --- 4-5. Badge giam gia va nut cong cu tren anh --- */
  body #wrapper .woo-swiper-gallery {
    position: relative;
  }

  body #wrapper .woo-swiper-gallery .discount-badge-gal {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #c8102e;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 22px;
  }

  /* --- 6. Thumbnail: vien den thay vi do --- */
  body #wrapper .woo-thumb-swiper .swiper-slide {
    border: 1px solid #ececec;
    border-radius: 10px;
  }

  body #wrapper .woo-thumb-swiper .swiper-slide-thumb-active {
    border: 1.5px solid #111;
  }

  /* --- 7-9. Ten, meta, gia --- */
  body #wrapper .woo-product-info-wrapper .product-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.02em;
    text-transform: none;
    color: #111;
  }

  body #wrapper .product-price-card .price-old-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
  }

  body #wrapper .product-price-card .regular-price {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #999;
  }

  /* --- 13. Banner khuyen mai rong --- */
  body #wrapper .product-promotions-card:not(:has(.promo-content li)):not(:has(.promo-content p)) {
    display: none;
  }

  /* --- 14-15. Khoi cam ket: bo ke ngang, bo card noi --- */
  body #wrapper .product-services-trust-list {
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body #wrapper .service-trust-item {
    padding: 0;
    border: none !important;
  }

  /* --- 17-19. Bang thong so --- */
  body #wrapper .woocommerce-product-attributes tr td,
  body #wrapper .woocommerce-product-attributes tr th,
  body #wrapper .shop_attributes tr td,
  body #wrapper .shop_attributes tr th {
    padding: 11px 0;
    background: none !important;
    border: none;
    border-bottom: 1px solid #ececec;
    font-size: 12.5px;
    line-height: 1.5;
    vertical-align: top;
  }

  body #wrapper .woocommerce-product-attributes tr th,
  body #wrapper .shop_attributes tr th {
    width: 40%;
    color: #666;
    font-weight: 400;
  }
}


/* ================= KHOI DANH GIA — THIET KE LAI ================= */
/* Markup do plugin ratting-woocomerce sinh ra qua [comment_rating].
   Co mot the <style> nhung trong body nen phai dat tien to manh hon
   moi thang duoc o vai cho. Ap ca desktop lan mobile. */

/* Hai the noi lien thanh mot o duy nhat */
body #wrapper .box_review_meta .box_shadown,
body #wrapper .box_review_user .box_shadown {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 20px;
  box-shadow: none;
}

body #wrapper .box_review_meta .box_shadown {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
}

body #wrapper .box_review_user {
  margin-top: 0;
}

body #wrapper .box_review_user .box_shadown {
  padding-top: 18px;
  border-top: none;
  border-radius: 0 0 20px 20px;
}

/* --- Trang thai chua co danh gia --- */
/* Nam thanh 0(0%) chi de noi mot dieu: chua ai danh gia. Bo di. */
body #wrapper .box_review_meta:has(.woocommerce-noreviews) .header-comment {
  display: none;
}

body #wrapper .box_review_meta:has(.woocommerce-noreviews) .box_shadown {
  padding: 20px;
}

body #wrapper .content-comment h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #111;
}

body #wrapper .woocommerce-noreviews {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 13px;
  color: #666;
}

/* --- Form viet danh gia --- */
body #wrapper #review_form_wrapper .comment-reply-title {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #111;
}

body #wrapper #review_form_wrapper label {
  font-size: 12.5px;
  font-weight: 500;
  color: #666;
}

body #wrapper #review_form_wrapper textarea,
body #wrapper #review_form_wrapper input[type="text"],
body #wrapper #review_form_wrapper input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  font-size: 13.5px;
  color: #222;
  outline: none;
  transition: .3s all;
}

body #wrapper #review_form_wrapper textarea:focus,
body #wrapper #review_form_wrapper input[type="text"]:focus,
body #wrapper #review_form_wrapper input[type="email"]:focus {
  border-color: #111;
}

body #wrapper #review_form_wrapper textarea {
  min-height: 104px;
  resize: vertical;
}

/* Nut gui: den bo tron. Do dang danh cho "Mua ngay", hai nut do
   cung mot man hinh thi mat khong biet dau la hanh dong chinh. */
body #wrapper #review_form_wrapper .form-submit input[type="submit"],
body #wrapper #review_form_wrapper p.form-submit input {
  width: 100%;
  height: 48px;
  padding: 0 24px;
  background: #111 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: .3s all;
}

body #wrapper #review_form_wrapper .comment-notes,
body #wrapper #review_form_wrapper .comment-form-cookies-consent,
body #wrapper #review_form_wrapper .form-submit + p {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #999;
}

@media only screen and (max-width: 768px) {

  body #wrapper .box_review_meta .box_shadown,
  body #wrapper .box_review_user .box_shadown {
    padding: 18px 16px;
  }

  body #wrapper .box_review_meta .box_shadown {
    border-radius: 16px 16px 0 0;
  }

  body #wrapper .box_review_user .box_shadown {
    padding-top: 16px;
    border-radius: 0 0 16px 16px;
  }

  body #wrapper #review_form_wrapper .comment-reply-title,
  body #wrapper .content-comment h3 {
    font-size: 14px;
  }
}


/* ================= KHOI DANH GIA — FORM XO RA TU NUT ================= */

body #wrapper .tv-review-note {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #666;
  text-align: center;
}

body #wrapper .tv-review-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  padding: 12px 20px;
  background: var(--primary-color);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  transition: .3s all;
}

body #wrapper .tv-review-toggle:hover {
  background: #9d1819;
}

body #wrapper .tv-review-toggle.is-open {
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #111;
}

body #wrapper .tv-review-form {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ececec;
}

body #wrapper .tv-review-form.is-open {
  display: block;
}

/* Tieu de "De lai mot binh luan" thanh thua khi da co nut */
body #wrapper .tv-review-form .comment-reply-title {
  display: none;
}


/* ================= TRANG SAN PHAM — HANG GIA TREN PC ================= */
/* Markup tach .price-old-row ra ngoai .price-row de xuong dong tren mobile.
   Tren PC thiet ke cho gia goc + badge nam cung hang voi gia ban. */

@media only screen and (min-width: 769px) {

  body #wrapper .product-price-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
  }

  body #wrapper .product-price-card .price-old-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  body #wrapper .product-price-card .saving-line {
    flex: 0 0 100%;
  }
}


/* ================= TRANG SAN PHAM — KHUNG THANG MEP HEADER ================= */
/* Flatsome dat .row max-width 1320px trong khi .container la 1440px,
   nen luoi noi dung hut 120px o mep phai.
   Card header co padding 20px, nen row = 1410 - 40 + 30 (bu padding cot) = 1400. */

body.single-product .product_page_1 > .container > .row,
body.single-product .product_page_2 > .container > .row,
body.single-product .product_page_3 > .container > .row {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Breadcrumb nam thang trong .container, khong qua .row nen phai can rieng */
body.single-product .product_page_1 > .container > .breadcrumbs {
  max-width: 1370px;
  margin-left: auto;
  margin-right: auto;
}


/* ================= TRANG SAN PHAM — CHONG TRAN CHU ================= */
/* Ten san pham la mot chuoi dai khong co khoang trang
   (24inch/WUXGA/IPS/75Hz...) nen trinh duyet khong co cho ngat dong. */

body.single-product .woo-product-info-wrapper .product-title,
body.single-product .woo-product-info-wrapper .product-meta,
body.single-product .product-specs-highlights,
body.single-product .breadcrumbs {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Cot flex mac dinh khong co ngot duoi noi dung, phai mo khoa moi cho wrap */
body.single-product .product_page_1 .col_galary,
body.single-product .product_page_1 .col_product_content {
  min-width: 0;
}


/* ================= MOBILE — KHOI THONG TIN SAN PHAM ================= */
/* Thiet ke mobile dung khoi trang trai het chieu ngang (.dsec 18px 16px),
   ngan nhau bang duong ke, thay cho card bo goc tren nen xam. */

@media only screen and (max-width: 768px) {

  body #wrapper .woo-product-info-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 18px 16px;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
  }

  /* Wrapper la flex column co gap 16px (dong 10760), cong don vao moi
     margin ben duoi. Tat gap, de rieng margin quyet dinh nhip doc. */
  body #wrapper .woo-product-info-wrapper {
    gap: 0;
  }

  body #wrapper .woo-product-info-wrapper > .warranty-banner-black,
  body #wrapper .woo-product-info-wrapper > .product-specs-highlights,
  body #wrapper .woo-product-info-wrapper > .quantity-stock-row,
  body #wrapper .woo-product-info-wrapper > .purchase-buttons-row {
    margin-top: 14px;
  }

  /* Cau hinh noi bat: doi sang nen xam de con noi tren nen trang */
  body #wrapper .product-specs-highlights {
    background: #fafafa;
    border: none;
    border-radius: 12px;
  }

  /* Duong ke tach nhom mua hang voi nhom cam ket, keo het be ngang */
  body #wrapper .product-services-trust-list {
    margin: 4px -16px 0;
    padding: 16px 16px 0;
    border-top: 1px solid #ececec;
  }
}

@media only screen and (max-width: 768px) {

  /* Khung anh chinh: bo vien hong, chi de anh */
  body #wrapper .woo-swiper-gallery .swiper.woo-main-swiper .swiper-slide {
    border: none !important;
    border-radius: 0 !important;
  }
}

@media only screen and (max-width: 768px) {

  /* Cum ten - danh gia - gia: siet lai dung nhip thiet ke
     h1 0 → meta 10 → gia 14 → dong gia goc 9 → tiet kiem 9 */
  body #wrapper .woo-product-info-wrapper .product-title {
    margin: 0;
  }

  body #wrapper .woo-product-info-wrapper .product-meta {
    margin-bottom: 0;
  }

  body #wrapper .product-price-card {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  /* Thu phạm chinh: gia 30px an theo line-height 1.6 cua body,
     de lai gan 20px khoang trong tren duoi */
  body #wrapper .product-price-card .price-row {
    margin: 0;
  }

  body #wrapper .product-price-card .sale-price {
    display: block;
    line-height: 1;
  }

  body #wrapper .product-price-card .price-old-row {
    margin-top: 9px;
    line-height: 1;
  }

  body #wrapper .product-price-card .saving-line {
    margin-top: 9px;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 768px) {

  /* Thanh tab Thong so / Mo ta / Danh gia, dung do JS chen vao */
  body #wrapper .tv-ptabs {
    display: flex;
    gap: 16px;
    width: 100vw;
    margin: 0 0 14px calc(50% - 50vw);
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #ececec;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body #wrapper .tv-ptabs::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .tv-ptab {
    flex: 0 0 auto;
    padding: 13px 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #999;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: .3s all;
  }

  body #wrapper .tv-ptab.is-on {
    border-bottom-color: #c8102e;
    color: #111;
  }

  /* Tieu de trong tung the thanh thua khi da co nhan tren tab */
  body #wrapper .box_content_sub .title_border,
  body #wrapper .box_content_product .title_border {
    display: none;
  }
}


/* ================= MOBILE — GIO HANG ================= */
/* Theo man 06 cua bo thiet ke: the san pham 76px, gia do,
   qty va nut xoa cung mot hang duoi, khoi tong tien dang panel. */

@media only screen and (max-width: 768px) {

  /* --- The san pham --- */
  body #wrapper .custom-cart-card {
    flex-wrap: wrap !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body #wrapper .custom-cart-thumb {
    width: 76px !important;
    height: 76px !important;
    border: none !important;
    border-radius: 12px !important;
    background: #f5f5f5 !important;
  }

  body #wrapper .custom-cart-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 600 12.5px/1.45 "Be Vietnam Pro", "Montserrat", sans-serif !important;
  }

  body #wrapper .custom-cart-sku {
    font-size: 11.5px !important;
  }

  body #wrapper .custom-cart-price .sale-price,
  body #wrapper .custom-cart-price .normal-price {
    font-size: 15px !important;
    color: #c8102e !important;
  }

  body #wrapper .custom-cart-price .old-price {
    font-size: 12px !important;
    color: #999 !important;
  }

  /* --- Hang thao tac: bo dinh vi tuyet doi, dua ve luong thuong --- */
  body #wrapper .custom-cart-actions {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 9px;
  }

  body #wrapper .custom-cart-del,
  body #wrapper .custom-cart-card .custom-cart-qty {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  body #wrapper .custom-cart-del a {
    gap: 5px;
    font-size: 11.5px;
    color: #999 !important;
  }

  body #wrapper .custom-cart-del a::after {
    content: "Xoá";
  }

  body #wrapper .custom-cart-card .quantity {
    height: 34px;
    border-color: #e0e0e0;
    border-radius: 999px !important;
  }

  /* --- Khoi tong tien, voucher, tom tat: dang panel trang --- */
  body #wrapper .cart-footer-total,
  body #wrapper .custome_coupon,
  body #wrapper .cart_totals {
    margin-bottom: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
  }

  body #wrapper .cart_totals .cart-subtotal th,
  body #wrapper .cart_totals .cart-discount th,
  body #wrapper .cart_totals .cart-subtotal td,
  body #wrapper .cart_totals .cart-discount td {
    padding: 9px 0;
    font-size: 12.5px;
    font-weight: 400;
    color: #666;
  }

  body #wrapper .cart_totals .order-total th,
  body #wrapper .cart_totals .order-total td {
    padding-top: 14px;
    border-top: 1px solid #ececec;
    font-size: 14px;
    color: #111;
  }

  body #wrapper .cart_totals .order-total td .woocommerce-Price-amount {
    font-size: 21px;
    font-weight: 700;
    color: #c8102e;
    letter-spacing: -.03em;
  }
}

@media only screen and (max-width: 768px) {

  /* --- Tieu de trang: dua ve dung le, bo chu hoa --- */
  body.woocommerce-cart #main .page-title-inner,
  body.woocommerce-cart #main .shop-page-title .page-title-inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.woocommerce-cart #main .page-title h1,
  body.woocommerce-cart #main .page-title .entry-title {
    font-size: 18px;
    text-transform: none;
    letter-spacing: -.02em;
  }

  /* --- The san pham: ke ngang tach hang thao tac --- */
  body #wrapper .custom-cart-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }

  /* --- Voucher: input va nut nam cung mot hang --- */
  body #wrapper .custome_coupon .voucher_header {
    display: none;
  }

  body #wrapper .custome_coupon .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  body #wrapper .custome_coupon .coupon #coupon_code {
    flex: 1 1 auto;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    background: #f5f5f5;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 12.5px;
  }

  body #wrapper .custome_coupon .coupon button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 42px;
    padding: 0 20px;
    background: #111;
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
  }

  /* --- Tom tat: dong cuoi la con so quan trong nhat --- */
  body #wrapper .cart_totals .order-total td .woocommerce-Price-amount,
  body #wrapper .cart_totals .order-total td .amount {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #c8102e !important;
    letter-spacing: -.03em;
  }

  body #wrapper .cart_totals .order-total th {
    font-size: 14px !important;
    color: #111 !important;
  }
}

@media only screen and (max-width: 768px) {

  /* Thanh buoc thay cho tieu de "GIO HANG" */
  body.woocommerce-cart #main .page-title {
    display: none;
  }

  body #wrapper .tv-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 14px 0 4px;
  }

  body #wrapper .tv-stepper i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    border-radius: 50%;
    color: #999;
    font: 700 10px/20px "Be Vietnam Pro", "Montserrat", sans-serif;
    font-style: normal;
    text-align: center;
  }

  body #wrapper .tv-stepper i.is-on {
    background: #111;
    color: #fff;
  }

  body #wrapper .tv-stepper span {
    font-size: 10.5px;
    font-weight: 600;
    color: #999;
  }

  body #wrapper .tv-stepper span.is-on {
    color: #111;
  }

  body #wrapper .tv-stepper u {
    flex: 1 1 auto;
    height: 1px;
    background: #ececec;
    text-decoration: none;
  }
}

@media only screen and (max-width: 768px) {

  /* Trang gio hang: thanh dat hang thay cho thanh dieu huong */
  body.woocommerce-cart .menu_bar_mobi {
    display: none;
  }

  body.woocommerce-cart {
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  body #wrapper ~ .tv-cart-bar,
  .tv-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000006;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid #ececec;
  }

  .tv-cart-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .tv-cart-sum span {
    display: block;
    font-size: 10.5px;
    color: #999;
  }

  .tv-cart-sum b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #c8102e;
    letter-spacing: -.03em;
  }

  .tv-cart-detail {
    padding: 0;
    background: none;
    border: none;
    color: #666;
    font-size: 11.5px;
    font-weight: 500;
  }

  .tv-cart-go {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    background: #c8102e;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: .3s all;
  }

  .tv-cart-go:hover {
    color: #fff;
  }
}


/* ================= MOBILE — TRANG DAT HANG ================= */
/* Man 07: mot cot, input cao 46px bo 12px, the lua chon co vien,
   tom tat thu gon, nut dat hang dinh day. */

@media only screen and (max-width: 768px) {

  body:has(.checkout_page) .menu_bar_mobi {
    display: none;
  }

  body:has(.checkout_page) {
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  /* --- Panel trang --- */
  body #wrapper .checkout_page .checkout-box {
    margin-bottom: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: none;
  }

  body #wrapper .checkout_page .checkout-box h3 {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #111;
  }

  /* --- O nhap --- */
  body #wrapper .checkout_page .field {
    margin-bottom: 10px;
  }

  body #wrapper .checkout_page .field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #666;
  }

  body #wrapper .checkout_page .field input[type="text"],
  body #wrapper .checkout_page .field input[type="tel"],
  body #wrapper .checkout_page .field input[type="email"],
  body #wrapper .checkout_page .field select {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    font-size: 13.5px;
    box-shadow: none;
  }

  body #wrapper .checkout_page .field textarea {
    height: 76px;
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    font-size: 13.5px;
    box-shadow: none;
  }

  /* --- The chon: giao hang va thanh toan --- */
  body #wrapper .checkout_page .row_2 {
    display: block;
  }

  body #wrapper .checkout_page .delivery,
  body #wrapper .checkout_page .payment-method {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
    padding: 13px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
  }

  body #wrapper .checkout_page .delivery.active,
  body #wrapper .checkout_page .payment-method.active {
    border-color: #111;
    box-shadow: inset 0 0 0 1px #111;
  }

  body #wrapper .checkout_page .delivery-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  body #wrapper .checkout_page .delivery-text,
  body #wrapper .checkout_page .payment-text {
    font-size: 13px;
    font-weight: 600;
    color: #111;
  }

  /* --- Tom tat tien --- */
  body #wrapper .checkout_page .total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 12.5px;
    color: #666;
  }

  body #wrapper .checkout_page .total-row.total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
    font-size: 14px;
    color: #111;
  }

  body #wrapper .checkout_page .total-row.total span:last-child {
    font-size: 21px;
    font-weight: 700;
    color: #c8102e;
    letter-spacing: -.03em;
  }

  /* Nut dat hang goc nhuong cho thanh duoi day */
  body #wrapper .checkout_page .group_btn #place-order {
    display: none;
  }

  /* --- Thanh dat hang dinh day --- */
  .tv-checkout-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000006;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid #ececec;
  }

  .tv-checkout-sum {
    margin-bottom: 10px;
  }

  .tv-checkout-sum span {
    display: block;
    font-size: 10.5px;
    color: #999;
  }

  .tv-checkout-sum b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #c8102e;
    letter-spacing: -.03em;
  }

  .tv-checkout-go {
    width: 100%;
    height: 46px;
    background: #c8102e;
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: .3s all;
  }
}

@media only screen and (max-width: 768px) {

  /* Nut chon: dua ve vong tron den cua thiet ke, bo mau xanh cua theme */
  body #wrapper .checkout_page .delivery .radio-indicator,
  body #wrapper .checkout_page .payment-method .radio-indicator {
    position: static;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
  }

  body #wrapper .checkout_page .delivery.active .radio-indicator,
  body #wrapper .checkout_page .payment-method.active .radio-indicator {
    border-color: #111;
    background: #fff;
  }

  body #wrapper .checkout_page .delivery.active .radio-indicator::after,
  body #wrapper .checkout_page .payment-method.active .radio-indicator::after {
    width: 9px;
    height: 9px;
    background: #111;
  }

  /* Icon xe tai / cua hang khong co trong thiet ke mobile */
  body #wrapper .checkout_page .delivery .input_icon {
    display: none;
  }
}

@media only screen and (max-width: 768px) {

  /* Dong tom tat don hang, bam de xo danh sach */
  body #wrapper .checkout_page .tv-osum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    text-align: left;
    transition: .3s all;
  }

  body #wrapper .checkout_page .tv-osum .tv-osum-more {
    font-weight: 500;
    color: #666;
  }

  body #wrapper .checkout_page .tv-osum.is-open {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }

  body #wrapper .checkout_page .tv-osum.is-open + .checkout-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  body #wrapper .checkout_page .tv-osum + .checkout-box h3 {
    display: none;
  }
}

@media only screen and (max-width: 768px) {

  /* Dong tom tat don: theme viet hoa moi nut, phai tra lai chu thuong */
  body #wrapper .checkout_page .tv-osum {
    text-transform: none;
    letter-spacing: 0;
  }

  /* --- Khoi nhan hang: can trai, bo viet hoa, mo ta nho hon --- */
  body #wrapper .checkout_page .delivery-type h3 {
    margin-bottom: 12px;
  }

  body #wrapper .checkout_page .delivery {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-align: left;
    text-transform: none;
  }

  body #wrapper .checkout_page .delivery-card-content {
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
  }

  body #wrapper .checkout_page .delivery-text,
  body #wrapper .checkout_page .payment-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: #111;
  }

  body #wrapper .checkout_page .delivery-desc,
  body #wrapper .checkout_page .payment-desc {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    color: #666;
  }

  body #wrapper .checkout_page .delivery.active {
    border-color: #111;
    box-shadow: inset 0 0 0 1px #111;
  }

  /* --- Khoi thanh toan: cung mot khuon --- */
  body #wrapper .checkout_page .payment-method {
    align-items: flex-start;
    text-align: left;
    text-transform: none;
  }

  body #wrapper .checkout_page .payment-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* --- Xuat hoa don VAT --- */
  body #wrapper .checkout_page .vat-invoice-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
  }

  body #wrapper .checkout_page .vat-invoice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    color: #222;
    cursor: pointer;
  }

  body #wrapper .checkout_page .vat-invoice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  body #wrapper .checkout_page .vat-box {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    transition: .3s all;
  }

  body #wrapper .checkout_page .vat-invoice input:checked + .vat-box {
    background: #111;
    border-color: #111;
  }

  body #wrapper .checkout_page .vat-fields {
    display: none;
    margin-top: 10px;
  }

  body #wrapper .checkout_page .vat-invoice-box:has(input:checked) .vat-fields {
    display: block;
  }
}

@media only screen and (max-width: 768px) {

  /* Trang dat hang: giu man hinh chi con luong dat hang,
     bo footer va cac nut phu de khach khong bi keo ra khoi luong. */
  body:has(.checkout_page) #footer.tv-footer {
    display: none;
  }

  body #wrapper .checkout_page .group_btn .btn-outline,
  body #wrapper .checkout_page .group_btn .export-buttons-row {
    display: none;
  }

  /* Xuat hoa don tach khoi khoi thanh toan bang mot dai nen xam */
  body #wrapper .checkout_page .vat-invoice-box {
    margin: 14px -14px -14px;
    padding: 14px;
    border-top: 10px solid #fafafa;
  }
}

@media only screen and (max-width: 768px) {

  /* Excel va Xuat PNG la cong cu bao gia, chi dung ban PC */
  body #wrapper .checkout_page .group_btn {
    display: none;
  }

  /* Tom tat tien xuong duoi cung, sau khi da chon thanh toan */
  body #wrapper .checkout_page .checkout-right {
    display: flex;
    flex-direction: column;
  }

  body #wrapper .checkout_page .checkout-right > .checkout-box:first-child {
    order: 2;
    margin-bottom: 0;
  }

  /* So tien tren thanh day khong duoc gay dong */
  .tv-checkout-sum b,
  .tv-cart-sum b {
    white-space: nowrap;
  }

  .tv-checkout-go,
  .tv-cart-go {
    text-transform: none;
  }
}


/* ================= TRANG DAT HANG — SUA LAI BAN PC ================= */
/* Markup doi de phuc vu mobile: them o Email, bo icon, them dong mo ta.
   CSS cu chia .row_2 cung 50% nen o thu ba tran ra ngoai. */

@media only screen and (min-width: 769px) {

  body #wrapper .checkout_page .contact_form .row_2 .field {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
  }

  /* Hai the nhan hang nam ngang, can trai, nut chon o dau dong */
  body #wrapper .checkout_page .delivery-type {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  body #wrapper .checkout_page .delivery-type h3 {
    flex: 0 0 100%;
    margin-bottom: 0;
  }

  body #wrapper .checkout_page .delivery {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    text-align: left;
  }

  body #wrapper .checkout_page .delivery .radio-indicator {
    position: static;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
  }

  body #wrapper .checkout_page .delivery.active .radio-indicator {
    border-color: #ba0f2e;
    background: #fff;
  }

  body #wrapper .checkout_page .delivery.active .radio-indicator::after {
    width: 9px;
    height: 9px;
    background: #ba0f2e;
  }

  body #wrapper .checkout_page .delivery-card-content {
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
  }

  /* Mo ta phai xuong dong rieng, khong dinh lien voi ten */
  body #wrapper .checkout_page .delivery-text,
  body #wrapper .checkout_page .payment-text {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111;
  }

  body #wrapper .checkout_page .delivery-desc,
  body #wrapper .checkout_page .payment-desc {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #666;
  }

  body #wrapper .checkout_page .payment-card-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
}

/* Khoi VAT: cac o chi hien khi da tick, ca PC lan mobile */
body #wrapper .checkout_page .vat-invoice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 0;
  font-weight: 400;
  cursor: pointer;
}

body #wrapper .checkout_page .vat-invoice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

body #wrapper .checkout_page .vat-box {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  transition: .3s all;
}

body #wrapper .checkout_page .vat-invoice input:checked + .vat-box {
  background: #111;
  border-color: #111;
}

body #wrapper .checkout_page .vat-fields {
  display: none;
  margin-top: 10px;
}

body #wrapper .checkout_page .vat-invoice-box:has(input:checked) .vat-fields {
  display: block;
}


/* ================= SO TIEN TREN THANH DAY VA DONG TONG ================= */
/* wc_price() tra ve <bdi><span class="...currencySymbol">d</span></bdi>,
   cac the con mang co chu rieng nen phai ep ca ben trong. */

.tv-checkout-sum b,
.tv-checkout-sum b *,
.tv-cart-sum b,
.tv-cart-sum b * {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #c8102e !important;
  white-space: nowrap !important;
}

body #wrapper .checkout_page .total-row.total span:last-child,
body #wrapper .checkout_page .total-row.total span:last-child * {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #c8102e !important;
  letter-spacing: -.03em;
  white-space: nowrap !important;
}

/* Ky hieu "d" bi mot rule khac dat thanh block nen roi xuong dong,
   nowrap khong cuu duoc block — phai ep ve inline. */
.tv-checkout-sum b bdi,
.tv-checkout-sum b span,
.tv-cart-sum b bdi,
.tv-cart-sum b span {
  display: inline !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ================= MOBILE — TRANG DON HANG HOAN TAT ================= */
/* Thanh dieu huong duoi phai hien lai o day: khach da dat xong,
   viec can lam la dua ho tro ve mua tiep chu khong giu trong luong. */

body:has(.thankyou_page) .menu_bar_mobi {
  display: flex;
}

@media only screen and (max-width: 768px) {

  body:has(.thankyou_page) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* --- The bao thanh cong --- */
  body #wrapper .thankyou_page .success_message {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    padding: 24px 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    text-align: center;
  }

  /* Icon dang truoc tieu de, markup lai de sau */
  body #wrapper .thankyou_page .succes_icon {
    order: -1;
    margin-bottom: 16px;
  }

  body #wrapper .thankyou_page .success_title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #111;
  }

  body #wrapper .thankyou_page .success_desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #666;
  }

  body #wrapper .thankyou_page .order_code {
    margin-top: 16px;
    padding: 8px 16px;
    background: #fbe7ea;
    border-radius: 999px;
    font-size: 12.5px;
    color: #666;
  }

  body #wrapper .thankyou_page .order_code strong {
    color: #c8102e;
  }

  /* --- Cac khoi thong tin --- */
  body #wrapper .thankyou_page .checkout-box {
    margin-bottom: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: none;
  }

  body #wrapper .thankyou_page .checkout-box h3 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #111;
  }

  body #wrapper .thankyou_page .checkout-box p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #666;
  }

  body #wrapper .thankyou_page .checkout-box p:last-child {
    margin-bottom: 0;
  }

  body #wrapper .thankyou_page .checkout-box p strong {
    color: #111;
  }

  /* --- Nut cuoi trang --- */
  body #wrapper .thankyou_page .btn_primary--full {
    height: 46px;
    border-radius: 999px;
    text-transform: none;
  }
}

@media only screen and (max-width: 768px) {

  /* Tieu de "DON HANG HOAN TAT" trung y voi the bao thanh cong ben duoi */
  body:has(.thankyou_page) #main .checkout-page-title,
  body:has(.thankyou_page) .checkout-page-title {
    display: none;
  }

  /* Footer khong can o day, nhung phai keo nen sang xuong het man hinh
     neu khong se lo mang toi phia sau khi noi dung ngan */
  body:has(.thankyou_page) #footer.tv-footer {
    display: none;
  }

  html:has(.thankyou_page),
  body:has(.thankyou_page) {
    background: #fafafa;
  }

  body:has(.thankyou_page) #wrapper {
    min-height: 100vh;
    background: #fafafa;
  }
}

@media only screen and (max-width: 768px) {

  /* Logo trong drawer: Flatsome in ca logo sang lan logo toi trong mot the <a>,
     dong 3596 lai ep width 70px cho moi <img> nen hai anh de chong len nhau. */
  body .mobile-menu-header #logo img,
  body .mobile-menu-header .logo img {
    width: auto !important;
    height: 30px !important;
    max-height: none !important;
    object-fit: contain;
  }

  body .mobile-menu-header #logo img ~ img,
  body .mobile-menu-header .logo img ~ img,
  body .mobile-menu-header .header-logo-dark {
    display: none !important;
  }
}

@media only screen and (max-width: 768px) {

  /* Logo goc ty le 1920x1180 (~1.6:1). Dong 3596 ep width 70px va dong 12042
     ep max-height 28px, hai chieu bi khoa doc lap nen anh bi nen ngang. */
  body .mobile-menu-header img,
  body .mobile-menu-header a img {
    width: auto !important;
    height: 30px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }
}

@media only screen and (max-width: 768px) {

  /* --- Tom tat: hai dong phu truoc dong tam tinh --- */
  body #wrapper .tv-build-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 12.5px;
    color: #666;
  }

  body #wrapper .tv-build-row b {
    font-size: 12.5px;
    font-weight: 600;
    color: #222;
  }

  body #wrapper .tv-build-row b.is-free {
    color: #16a34a;
  }

  body #wrapper .summary-total-container {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
  }

  body #wrapper .summary-total-container .total-label {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #111;
  }

  body #wrapper .summary-total-container .total-value {
    font-size: 21px;
    font-weight: 700;
    color: #c8102e;
    letter-spacing: -.03em;
  }

  /* Nut goc nhuong cho thanh day */
  body #wrapper .btn-cart-build {
    display: none;
  }

  /* --- Thanh dinh day --- */
  body:has(.build-pc-right-col) .menu_bar_mobi {
    display: none;
  }

  body:has(.build-pc-right-col) {
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  .tv-build-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000006;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid #ececec;
  }

  .tv-build-sum {
    margin-bottom: 10px;
  }

  .tv-build-sum span {
    display: block;
    font-size: 10.5px;
    color: #999;
  }

  .tv-build-sum b,
  .tv-build-sum b * {
    display: block;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #c8102e !important;
    white-space: nowrap !important;
  }

  .tv-build-go {
    width: 100%;
    height: 46px;
    background: #c8102e;
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    transition: .3s all;
  }
}

@media only screen and (max-width: 768px) {

  /* Bo loc trong popup chon linh kien: mac dinh dong,
     de danh san pham chiem phan lon man hinh */
  body #wrapper .tv-filter-toggle,
  .popup-build .tv-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: #111;
  }

  .popup-build .tv-filter-caret {
    color: #999;
    font-weight: 400;
  }

  .popup-build .popup-build-sidebar.is-folded {
    display: none;
  }
}

@media only screen and (max-width: 768px) {

  /* Danh sach linh kien giu nguyen kieu cu, chi siet lai khoang cach */
  body #wrapper .build-item {
    gap: 10px;
    padding: 12px 14px;
  }

  body #wrapper .build-item--icon-label {
    gap: 10px;
  }

  body #wrapper .build-item--name {
    font-size: 13.5px;
  }

  body #wrapper .build-item--subtitle {
    font-size: 11.5px;
  }

  body #wrapper .open-popup-build {
    padding: 7px 14px;
    font-size: 12.5px !important;
  }
}

@media only screen and (max-width: 768px) {

  /* O chua chon: gop ve mot hang. Chi nham trang thai trong
     (.selected-product khong co con) de khong dung vao o da chon. */
  body #wrapper .build-item:not(:has(.selected-product > *)) {
    flex-direction: row;
    align-items: center;
  }

  body #wrapper .build-item:not(:has(.selected-product > *)) .build-item--icon-label {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body #wrapper .build-item:not(:has(.selected-product > *)) .build-item--content {
    flex: 0 0 auto;
    width: auto;
    padding-left: 0;
  }

  body #wrapper .build-item:not(:has(.selected-product > *)) .open-popup-build {
    width: auto !important;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 768px) {

  /* Luu / Excel / Tai anh la cong cu bao gia, chi dung ban PC */
  body #wrapper .build-pc-right-col .action-grid-buttons,
  body #wrapper .build-pc-right-col .disclaimer-text {
    display: none;
  }
}/* Trust bar: bot khoang cach voi hero */
@media only screen and (min-width: 769px) {
  body #wrapper .tv-trust {
    padding-top: 56px;
  }
}


/* Hang chip danh muc con: cuon ngang thay vi vo dong */
@media only screen and (min-width: 769px) {
  body #wrapper .products_header .products_title {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body #wrapper .products_header .group_category {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  body #wrapper .products_header .list_child_cat {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body #wrapper .products_header .list_child_cat::-webkit-scrollbar {
    display: none;
  }

  body #wrapper .products_header .list_child_cat ul {
    flex-wrap: nowrap;
  }

  body #wrapper .products_header .list_child_cat ul li {
    flex: 0 0 auto;
  }

  body #wrapper .products_header .list_child_cat ul li a {
    white-space: nowrap;
  }

  body #wrapper .products_header .group_category .view_all {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


/* Trang chi tiet: dung thanh nav duoi giong trang chu */
@media only screen and (max-width: 768px) {
  body.single-product .menu_bar_mobi {
    display: flex;
  }

  body.single-product .tv-buy-bar {
    display: none;
  }

  body.single-product {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }
}


/* Mega menu: lap khe ho 2px giua nut va dropdown */
@media only screen and (min-width: 769px) {
  .header-menu .main-menu > li.menu-item-has-children > ul.sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 6px;
  }
}