@import url("variables.css");

.overlay-content {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

.overlay-content .text-overlay {
  font-size: 24px;
  font-weight: 800;
}

.overlay-content .btn-upto {
  color: var(--text-color);
  background-color: #fff;
  font-size: 13px;
  font-weight: 500;
}

/* ----------------------
  EXTRA SMALL - xxs (<380px)
-----------------------*/
@media (max-width: 379.98px) {
  .title-section-home,
  .title-section {
    font-size: 16px !important;
  }
  .text-fs-20 {
    font-size: 15px !important;
  }
  .text-fs-15 {
    font-size: 12px !important;
  }
  .overlay-text {
    font-size: 12px;
  }
  .btn-discover {
    font-size: 16px !important;
    height: 40px !important;
  }
  .product-fomo .product-title {
    font-size: 16px;
  }
  .btn-outline-custom {
    font-size: 13px;
  }
  .btn-see-more {
    font-size: 11px !important;
  }
  .testimonial-card .name {
    font-size: 13px !important;
  }
  .certificate-swiper h6 {
    font-size: 13px;
  }
  .sub-section .sub-title {
    font-size: 16px !important;
  }
  .footer-style h6 {
    font-size: 15px !important;
  }
  .footer-style .payments a img {
    height: 25px !important;
  }
  .btn-h-45 {
    height: 35px !important;
  }
  .btn-h-50 {
    height: 40px !important;
  }

  .card-custom .card-body p {
    font-size: 13px !important;
  }
  .card-custom .card-body .price-sale {
    font-size: 14px !important;
  }

  /* Cart */
  .cart-card .cart-image {
    width: 120px !important;
  }
  .cart-title a.h5 {
    font-size: 12px !important;
  }
  .cart-meta li,
  .cart-meta li span {
    font-size: 9px !important;
  }
  .cart-price .price-sale {
    font-size: 13px !important;
  }
  .payments .payments-icon img {
    height: 23px !important;
  }
  .cart-card,
  .summary-card {
    padding: 12px !important;
  }
  .product-detail .custom-tab .nav-link {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
}

/* ----------------------
  SMALLER XS (380–479px)
-----------------------*/
@media (min-width: 380px) and (max-width: 429.98px) {
  .overlay-text {
    padding: 5px 0 !important;
    font-size: 14px !important;
  }
  .title-section-home,
  .title-section {
    font-size: 18px !important;
  }
  .sub-section .sub-title {
    font-size: 18px !important;
  }
  .footer-style h6 {
    font-size: 15px !important;
  }
  .footer-style .payments a img {
    height: 27px !important;
  }
  .btn-discover {
    font-size: 15px !important;
    height: 40px !important;
  }
  .btn-outline-custom {
    font-size: 14px;
  }
  .testimonial-card .name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .certificate-swiper h6 {
    font-size: 14px;
  }
  .btn-h-45 {
    height: 36px !important;
  }
  .btn-h-50 {
    height: 42px !important;
  }
  .card-custom .card-body p {
    font-size: 14px !important;
  }
  .card-custom .card-body .price-sale {
    font-size: 14px !important;
  }
  .product-detail .custom-tab .nav-link {
    padding: 6px 10px !important;
    font-size: 14px !important;
  }

  /* Cart */
  .cart-price .price-sale {
    font-size: 13px !important;
  }
  .cart-title a.h5 {
    font-size: 12px !important;
  }
  .cart-meta li,
  .cart-meta li span {
    font-size: 9px !important;
  }
  .cart-card .cart-image {
    width: 120px !important;
  }
  .payments .payments-icon img {
    height: 25px !important;
  }
  .cart-card,
  .summary-card {
    padding: 13px !important;
  }
}

@media (min-width: 430px) and (max-width: 479.98px) {
  .overlay-text {
    padding: 5px 0 !important;
    font-size: 14px !important;
  }
  .title-section-home,
  .title-section {
    font-size: 20px !important;
  }
  .sub-section .sub-title {
    font-size: 20px !important;
  }
  .footer-style h6 {
    font-size: 16px !important;
  }
  .footer-style .payments a img {
    height: 30px !important;
  }
  .btn-discover {
    font-size: 15px !important;
    height: 38px !important;
  }
  .btn-outline-custom {
    font-size: 14px;
  }
  .testimonial-card .name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .certificate-swiper h6 {
    font-size: 16px;
  }

  .btn-h-45 {
    height: 40px !important;
  }
  .btn-h-50 {
    height: 45px !important;
  }

  /* Cart */
  .cart-card .cart-image {
    width: 140px !important;
  }
  .cart-title a.h5 {
    font-size: 13px !important;
  }
  .cart-meta li,
  .cart-meta li span {
    font-size: 10px !important;
  }
  .cart-price .price-sale {
    font-size: 15px !important;
  }
  .payments .payments-icon img {
    height: 28px !important;
  }
  .cart-card,
  .summary-card {
    padding: 15px !important;
  }
  .product-detail .custom-tab .nav-link {
    padding: 6px 12px !important;
  }
}

/* ----------------------
  XS (480–575.98px)
-----------------------*/
@media (min-width: 480px) and (max-width: 575.98px) {
  .overlay-text {
    padding: 5px 0;
    font-size: 14px;
  }
  .title-section-home,
  .title-section {
    font-size: 20px !important;
  }
  .sub-section .sub-title {
    font-size: 20px !important;
  }
  .footer-style h6 {
    font-size: 16px !important;
  }
  .footer-style .payments a img {
    height: 30px !important;
  }
  .btn-discover {
    font-size: 16px;
    height: 40px;
  }
  .testimonial-card .name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .btn-h-45 {
    height: 40px !important;
  }
  .btn-h-50 {
    height: 45px !important;
  }

  /* Cart */
  .cart-card .cart-image {
    width: 140px !important;
  }
  .cart-title a.h5 {
    font-size: 13px !important;
  }
  .cart-meta li,
  .cart-meta li span {
    font-size: 10px !important;
  }
  .cart-price .price-sale {
    font-size: 15px !important;
  }
  .payments .payments-icon img {
    height: 28px !important;
  }
  .cart-card,
  .summary-card {
    padding: 15px !important;
  }
  .product-detail .custom-tab .nav-link {
    padding: 6px 14px !important;
  }
}

/* ----------------------
  MOBILE DEFAULT: <576px
-----------------------*/
@media (max-width: 575.98px) {
  /* .title-section-home,
  .title-section {
    font-size: 20px !important;
  } */
  .card-custom .card-body {
    padding: 9px !important;
  }
  .card-custom .card-body p {
    margin-bottom: 2px !important;
  }
  .card-custom .card-body .text-sale {
    font-size: 10px !important;
  }
  .card-custom .card-body h6 {
    margin-bottom: 0 !important;
  }
  .xs-text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .xs-text-truncate-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .overlay-text {
    padding: 5px 0 !important;
    font-size: 14px !important;
  }
  .category-slide::after {
    border-radius: 0 0 10px 10px !important;
    height: 50% !important;
  }
  img.img-fluid.w-100.h-100.object-fit-cover {
    border-radius: 10px !important;
  }
  .category-slide .image-wrapper {
    border-radius: 10px !important;
  }
  .category-nav {
    width: 25px !important;
    height: 25px !important;
  }
  /* .btn-h-45 {
    height: 40px !important;
  }
  .btn-h-50 {
    height: 40px !important;
  } */
  .collection-section {
    background-image: url("../images/collection-section.png") !important;
  }
  .collection-section .collection-title {
    font-size: 20px !important;
  }
  .testimonial-card {
    padding: 10px !important;
  }
  .testimonial-card .name {
    font-size: 15px;
    font-weight: 600;
  }
  .testimonial-card .location,
  .testimonial-card .text {
    font-size: 10px !important;
  }
  .testimonial-card .stars-icon > img {
    height: 17px !important;
  }
  .trustpilot-logo h3 {
    text-align: left !important;
  }
  .trustpilot-section .trustpilot-logo img {
    max-width: 127px !important;
  }
  .trustpilot-section .testimonial-navigation {
    top: -45px !important;
    right: 15px !important;
  }
  .news-navigation .btn-nav,
  .trustpilot-section .testimonial-navigation .btn-nav {
    width: 24px !important;
    height: 24px !important;
  }
  .news-navigation {
    top: -40px !important;
    right: 15px !important;
  }
  .certificate {
    margin: 10px 0 !important;
  }
  .sub-section {
    background-image: url("../images/banner-sub-mobile.png") !important;
    height: fit-content !important;
    padding: 12px !important;
  }
  /* .sub-section .sub-title {
    font-size: 20px !important;
  } */
  .sub-section .sub-desc {
    font-size: 14px !important;
  }
  .sub-section .sub-form {
    max-width: 269px !important;
  }
  .sub-section .sub-form > input,
  .sub-section .sub-form > button {
    height: 40px !important;
  }
  #footer .payments img {
    height: 30px !important;
  }
  #footer .logo-footer {
	display: flex;
    align-items: center;
    justify-content: center;	
  }

  /* Product */
  .product-fomo .product-title {
    font-size: 20px !important;
  }

  /* Checkout Success */
  .thanks-section {
    background-image: url("../images/bg-checkout-success.png") !important;
  }
  .thanks-section .thanks-title {
    font-size: 20px !important;
  }
  .thanks-section .thanks-icon {
    max-width: 70px !important;
  }
  .thanks-section .thanks-text {
    font-size: 13px !important;
    text-align: center !important;
  }

  /* Checkout */
  .checkout-container .order-img {
    width: 120px !important;
    height: 120px !important;
  }
  .checkout-container .order-title {
    font-size: 13px !important;
  }
  .checkout-container .checkout-meta {
    font-size: 10px !important;
  }
  .checkout-container .btn-paypal {
    font-size: 20px !important;
  }
  .checkout-form-control h5 {
    font-size: 18px;
  }

  /* Blog Detail */
  .breadcrumb-style ol li {
    font-size: 13px !important;
  }
  .breadcrumb-style ol li a {
    font-size: 13px !important;
  }
  .blog-detail h2 {
    font-size: 16px !important;
  }
  .blog-detail .meta-data {
    font-size: 13px !important;
  }
  .blog-detail .detail-text {
    font-size: 13px !important;
  }

  /* Blog */
  .blog-card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  #blog-container .blog-card .blog-title {
    font-size: 15px !important;
  }
  #blog-container .blog-card .blog-meta {
    font-size: 13px;
  }
  #blog-container .blog-card .blog-desc {
    font-size: 13px !important;
  }

  /* Introduce */
  .introduce-content p {
    font-size: 12px !important;
  }
  .introduce-content h3 {
    font-size: 20px !important;
  }

  /* Product Detail */
	.product-detail .row .product-gallery {
		position: static;
	}
  .product-detail .product-gallery:has(#mockup-container:not(.d-none)) {
    position: sticky; 
    top: 0px;
    z-index: 1000;
    background-color: #ffffff; 
  }
  .product-detail .product-gallery:has(#mockup-container:not(.d-none)) ~ .product-detail-right.col-md-5 .product-name,
  .product-detail .product-gallery:has(#mockup-container:not(.d-none)) ~ .product-detail-right.col-md-5 .stars-icon {
    display: none !important;
  }
  .product-detail .product-detail-right {
    margin-top: 10px !important;
  }
  .product-detail .product-name {
    font-size: 15px !important;
  }
  .product-detail .price-sale {
    font-size: 25px !important;
  }
  .product-detail .price-origin {
    font-size: 15px !important;
  }
  .product-detail .delivery-text {
    font-size: 12px !important;
  }
  .product-detail .stars-icon img {
    height: 18px !important;
  }
  /* .product-detail .custom-tab .nav-link {
    padding: 6px 14px !important;
  } */
  .product-detail .secure-checkout-label {
    position: absolute;
    top: -12px;
    left: 36%;
    transform: translateX(-25%);
    padding: 0 10px;
    font-size: 15px !important;
  }
  .product-detail .secure-checkout-box {
    padding-top: 32px;
    padding-bottom: 20px;
  }
  .product-detail .payments-icon img {
    height: 30px !important;
  }
  .product-detail .gallery-nav {
    width: 26px !important;
    height: 26px !important;
  }
  .product-detail .gallery-nav .bi {
    font-size: 12px;
  }
  .swiperArtStyle-next.artStyle-nav {
    right: -10px !important;
  }
  .artStyle-nav {
    width: 26px !important;
    height: 26px !important;
    background-color: white;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Cart */
  /* .cart-card .cart-image {
    width: 140px !important;
  } */
  /* .cart-title h5 {
    font-size: 13px !important;
  } */
  /* .cart-meta li,
  .cart-meta li span {
    font-size: 10px;
  } */
  /* .payments .payments-icon img {
    height: 28px !important;
  } */
  /* .cart-card,
  .summary-card {
    padding: 15px !important;
  } */
  .cart-delivery {
    font-size: 10px !important;
  }
  .cart-delivery img {
    width: 12px !important;
    height: 10px !important;
  }
  .checkout-btn span {
    font-size: 18px !important;
  }
  .checkout-btn img {
    width: 22px !important;
    height: 22px !important;
  }
  .secure-note span {
    font-size: 13px;
  }
  .secure-note img {
    width: 20px !important;
    height: 20px !important;
  }

  .summary-payment-methods img {
    height: 30px !important;
  }
  /* .cart-price .price-sale {
    font-size: 15px !important;
  } */
  .cart-price .price-origin {
    font-size: 10px !important;
  }
  .vertical-rounded-bar::before {
    bottom: 5px !important;
  }
  .vertical-rounded-bar {
    height: 50px !important;
  }

  .cart-quantity {
    width: 90px !important;
    height: 24px !important;
    font-size: 13px !important;
  }
  .cart-quantity input {
    font-size: 13px !important;
  }
  .cart-quantity .bi {
    font-size: 12px !important;
  }
  .cart-quantity .bi:hover,
  .cart-quantity .bi:active {
    color: #fff !important;
  }
  .cart-quantity .btn {
    width: 28px !important;
  }
  .qty-custom .btn-left {
    border-radius: 6px 0 0 6px !important;
  }
  .qty-custom .btn-right {
    border-radius: 0 6px 6px 0 !important;
  }
  .cart-popup .btn {
    padding: 8px 10px !important;
    font-size: 13px;
  }
  .cart-popup h5 {
    font-size: 14px !important;
  }
  .cart-popup p {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
  .cart-remove i {
    font-size: 15px !important;
  }
  .custom-select-wrapper {
    padding: 0 10px;
  }
  .custom-select-wrapper label,
  .custom-select-wrapper select {
    font-size: 12px;
  }
}

/* ----------------------
  SM (576–599.98px)
-----------------------*/
@media (min-width: 576px) and (max-width: 599.98px) {
}

@media (max-width: 767.98px) {
  /* .banner-swiper-pc .banner-nav, */
  .swiper-gallery-wrapper .gallery-nav,
  .swiper-category-wrapper .category-nav {
	  display: none;
  }
}

/* ----------------------
  SM+ (600–767.98px)
-----------------------*/
@media (min-width: 600px) and (max-width: 767.98px) {
}

/* ----------------------
  TABLET (768–991.98px)
-----------------------*/
@media (min-width: 768px) and (max-width: 991.98px) {
  .promo-bar {
    font-size: 13px;
    padding: 8px 16px;
  }

  .promo-message {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .country-info span {
    font-size: 12px;
  }

  .search-input {
    font-size: 14px;
    padding: 8px 40px 8px 16px !important;
  }

  .logo {
    font-size: 16px;
    padding: 6px 12px;
  }

  .nav .menu-item {
    font-size: 13px;
    white-space: nowrap;
  }

  .cart-count {
    font-size: 10px;
    padding: 4px 6px;
  }
}

/* ----------------------
  DESKTOP (992–1199.98px)
-----------------------*/
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Laptop nhỏ */
  .promo-bar .country-info-wrapper {
    left: 80% !important;
  }
  header .promo-message {
    left: 45% !important;
  }
  .btn-outline-custom {
    font-size: 14px !important;
  }
  .secure-checkout-label {
	top: -13px;
    left: 43%;
    transform: translateX(-40%);
    padding: 0px 6px;
  }

  .secure-checkout-label.text-size-20 {
	font-size: 17px !important;
  }
}

/* ----------------------
  DESKTOP XL (1200–1399.98px)
-----------------------*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Desktop vừa */
  .hot-trend .btn-outline-custom,
  .collection-section .btn-outline-custom,
  .best-selling .btn-outline-custom {
    font-size: 14px !important;
  }
	
  .secure-checkout-label {
    left: 47%;
    transform: translateX(-47%);
    padding: 0 8px;
  }

  .secure-checkout-label.text-size-20 {
	font-size: 19px !important;
  }
}

/* ----------------------
  DESKTOP XXL (≥1400px)
-----------------------*/
@media (min-width: 1400px) {
  /* Desktop lớn */
}